Wednesday, April 29, 2009

Episode 2 - Drawing the background




Here is the new video, I have drawn the background click to read more.


Ok so as said, I have got the background to disply in my application/Game.

and this is how I did it.

Step 1:

You need an image.

I have drawn I quick image in MS Paint, it's nothing fancy but it is just a test. I'm sure there is

a technical term for this, but I don't know what it is.

Step 2:

Open Visual Studio C#.

Step 3:

Create new project, you can name it whatever you like, I called mine Background_Demo.

Step 4:

Add you assets to the "Content" folder ont he right.

I created a new folder, you can place the asset diredtly in the content folder, however I can

imagine this will get messy once multiple assets are added.

Step 5:

I do Declare.

Declare your variables.

You need to let the program know what kind of information you are reffering to, so declaring them

is how we do this.



Our background is a two dimentional texture so it is declared as "Texture2D"

Our viewportRect is the containing rectangle for our background os it is declared as "Rectangle"

- Funnily enough this is making sense to me.

Step 6:

Lock and Load.

Now that we have declared our variable types we need to load the assets to the program so when we

draw them the programs knows what we are reffering to.


first we need to tell the program what asset is being used for the variable "background".

As you can see above we are using the "Content.Load" method of the type "<Texture2D>" and in the brackets we need to direct it to the file it self. In this case the file name is "background.jpg" and it is in the "Sprites" folder.
Notice that the file extension has been left off, apparently you don't need to list this.

Next we need to definr the paramaters for our rectancle we called "viewportRect"
So we create a "new Rectangle" and in the brackets we tell the program the x an y position of the rectangle and the width and height of the rectangle.

As we are using this rectangle as out background area the position will be 0,0 which is the upper left hand corner of the screen, and becuase we want to fill the whole screen we use the method "graphics.GraphicsDevice.Viewport" for are width and height.

Step 7:

Draw.

Now that we have declared oue objects as variables and loaded them into the program, all we need to do is draw it to the screen. To do this we are going to use the "spritBatch" function.



This fuction needs to be started and ended. We start it using "Begin" and end it using "End".(See above)
To acually draw the image to the screenwe use "Draw" in the brackets we need to give it some information first. it goes as follows. (asset, rectangle, tint) in this case the asset we are using is "background" the rectangle is "viewportRect" and I am not using any tint so simply I am setting the color to "White"

Step 8:

Build.

Well that's it if you have done it correctly you can hit F5 or click the build button in the tool bar and your done.

Resources for this episode.

I learnt how to do this from the horse's mouth so to speak. There is a great tutorial at the XNA creators club that can be found here:

http://creators.xna.com/en-US/education/gettingstarted/bg2d/chapter1>

If you want to know more about this feel free to leave a comment, or click the "Contact Me" link on the side <------.

Next Time....

For the next video I'm going to draw a smaller sprite on the background and move it around the screen using an xBox360 controller and the keyboard.

So untill then, have fun, and let's make a video game.

Christo.

Read more...

Episode 1 - Welcome

Read more...


Free Blogger Templates by Isnaini Dot Com and Architecture. Powered by Blogger