Episode 7 - More Progress

Ok here is another quick progress video.

Download Source Code





Read more...

Episode 6 - Progress so far.

Ok, So amongst all the work I'm doing learning XNA along with the hosting issues that I'm having and the fact that this is all being done in my spare time (when I can actually put my xbox controller down!), I have actually put up another video.

Thanks for all of the comments and remember to subscribe.

There is more to come.

Until next time,

Lets make a video game,

Christo.






Read more...

Episode 5 - Basic Collision Detection.

For this episode we are going to create a basic collision detection mechanic, for this episode we will be using collision detection that see’s when two rectangles intersect.

To do this I have made a simple pong-style game with two character movable paddles. Instead of a ball in going to use a picture of Philip Defranco a YouTube vlogger that I enjoy watching, if you’re not familiar with his show you can see it here – Philip Defranco on YouTube.

Click “Read more” for how it’s done.

The majority of this episode is done by implementing techniques that have been used in previous episode, so if you’re having issues displaying a sprite or moving it on the screen watch the previous episodes.

The main difference here is that we are going to create a rectangle around our paddles (which would be our hero in our game) and detect when it intersects with the ball and then we will reverse the balls direction.

Step 1:

Create your sprites – you will need one for the ball and one for the paddles, I have used the same image for both paddles, but you can use a different picture for each if you like (afterall, it’s your game).

Step 2:

We need to declare our variables, so we are going to need a “Vector2” for both of the paddles, a “Texture2D” for the paddles and the ball, an “int” to track the x and y speed of the paddle and ball.

Step 3:

We need to load the assets, you should already know how to do this. If not go back to previous episodes.

Step 4:

Here I have initialized the starting positions and speeds.

Step 5:

We need to draw our sprites to the screen using the “Draw” method. Once again, you should be familiar with this already.

Step 6:

Now we need to use our “Update” method to track and move the game mechanics.

Here we are using “ballspeedx” for the horizontal speed of the ball and “ballspeedy” for the vertical speed.

For this test we are setting the x and y speeds of our ball a 3.

We make the ball move using the line ball_pos.X += ballspeedx;

Which is another way of saying that the ball’s X position if equal to the ball’s position plus the balls speed, which we have set to 3, so every time our “Update” method runs the ball is moves 3 pixels either left or right.

(I’m not sure if this is technically correct, however this is how I think it works.

Also in this method we are creating our rectangles to contain our paddles assigning the x an y position that of the paddle, while we have used rectangles in previous episodes you will notice for this that we are changing the data type inline, this is because the arguments that the rectangle handler takes is an “int” and a “Vector2” is a float. (Took me waaayyyy too long to work this out).

Then we have some “if” functions that we are using for our collision detection. Luckily for me XNA has an inbuilt function (Not sure it that’s the correct term for it) that allows us to test whether rectangles are intersecting.

To do this we simply use:

if (paddle1_rect.Intersects(ball))

{

// add logic here;

}

I think this is fairly straight forward, but if you have any questions don’t hesitate to get in touch.

I have also implimented a check to see if the ball has hit either the top of bottom then the ball bounces back into play.

And you should be done.

And that’s about it, We have what is almost a fully functioning game to play whilst this isn't the game style I set out to make I think the skills I have learnt here will be easily applied to the platformer.

Due to an issue with my hosting company, the source code will be found at a new location, see the link on the side. <-----------------------------------

Untill next time,

Lets make a video game.

Christo.

Read more...

Episode 4 - Animating a sprite.

Now I have a basic understanding on how to animate a sprite, click "Read More" to see more on how I did it.






First I would like to give credit to xnafusion.com as this is where I found the tutorial on how to animate this sprite. I found it very easy to understand and they have even included the source code so you can follow along.



Step 1:

To animate the sprite we are using a "spritesheet" (see below). This is a series of images that make up the frames of the animation, then we simply tell the program to draw a rectangle aroung certain points of the sheet at different time intervals and redraw the old one with the new one.





You can use any image software you like to draw the images, I suggest GIMP or Photoshop as it allows you to have a transparent background. Also Flash can be a handy tool to put the individual frames into and play through the animation to get an idea of what it will look like.



Step 2:

Now we declare the sprite sheet (or sheets in this case) as a "Texture2D" same as previously.

As you will notice we have also added a bunch of other variables to handle our animation, I think it's quite self explanatory , however if you need more of an explanation, please do not hesitate to contact me.





Step 3:

Next we load our sprite sheet's the same as before, I have named mine "running.png" and "running_back.png" keeping in mine when you load them you keep the file extension off.

note: I'm sure there is a way to have all of your animations on the one sheet, but at the time of writing, I don't know how to do it.





Step 4:

In our update function we add our logic to handle the animation, below is the code (for a better explanation, there is a great tutorial at xnafusion.com).

One thing to notice here is a the "if" statement. What we are doing here is checking to see if the controller is being pushed left or right so we know whether to play the animation, otherwise at this stage is simplsy stays idle in the last frame played. Obviously this will be refined for the game however for the time being it has served the purpose of teaching me the basics of playing an animation.





I have used the variable xspeed here to be set to the value of the controller position * 4 , which is (I believe) the speed in which our character is moving across the screen.

Also I have added the "Window.Title" which allows us to display our variables to the title bar, this (I think) will come in handy later on for error checking and what not.

Step 5:

Now we draw the sprite to the screen, The "if" statements here check to see which dorection the character is running therefore choosing which sprite sheet to use.





... and that should be it!



If you run it now you should be able to run forwards or backwards on the screen, it's not perfect by far but it's a start.
Download Source

So there it is, any questions, quiries, doubtfull points??

Remember anyquestions let me know, and I'll do my best to help.

Untill next time...... "Lets make a video game"

Read more...

Episode 3 - Moving a sprite using an xbox controller.

Here's the latest video, hit "Read More" for how I did it and the source code.






For this part you will need a wired xbox 360 controller, if you don't have one and would like for me to explain how to do it with the keyboard let me know.

Step 1:

We need a picture, for this I have used a free program called GIMP ( There is a link on the software page <----- ).

For the file format I have chosen .png as it allows for a transparent background.

Step 2:

Declaring the variable is fairly much the same as the previous episode, however this time instead of using a rectangle for the poistioning and size, we are simply declaring a "Vector2" to handle the x and y co-ordinates and we will allow our image to define its own size.

I'm setting the "Vector2" to "Zero" this will place it in the top left corner.



Step 3:

Loading our content.

This is done exactly the same way as the last episode.





Step 4:

Let's Draw.

This step is pretty much the same as in the first episode, however instead of using a "Rectangle" we are using a "Vector2".



Pause......

If you build your project now you will be able to see yur image in the top left corner, you can't move it as yet but we're getting to that.

Step 5:

Move me.

First we need to set up the listener for the game pad using the "GamePadState", then we can use "ThumbStick.Left.X and ThumbStick.Left.Y" to move our character around the screen.

note: The "Left" listed above refers to the thumbstick itself and not the direction pushed. I took way too long working this out.

Now using the line hero_pos.X += GamePadOne.ThumbSticks.Left.X * 5;

we can make our charcter move left and right along the x-axis using the left thumbstick on our controller.

The 5 refers to the speed at which our charcter moves. This will be a variable later. But for now I just wanted to make that badboy move.

Build and go.

Assuming you have done everthing correctly you should now be able to move your character using your xbox controller.



Click here to download source code

Read more...

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...