Friday, April 30, 2010

2D Particles: Part 3 Basic Engine

Welcome to the third part of the 2d particle engine tutorial. Today we will be adding our basic particle engine class that will hold all of our particles info. Now what we want this class to do is load, create, update and draw our particles as well as creating new ones. Now before we begin let me say that this class is the core of our engine and will be very complex in the end so throughout the tutorial as we add in more stuff I will also be adding in comments to help explain what everything does. There are some special ways to adding in comments that I will explain part way between the tutorial that will help when coding large projects.

So lets begin, first lets create a new class named ParticleEngine and add in the following variables.
Now lets go over the variables we added since some of them might not be obvious. Our random variable is going help us in creating a lot of completely different particles using random numbers. Our list of particles holds our particles and texture is the texture of our particles. Our speed variable is the speed of our particles, amount is how many particles we want to create every second and our time per particle lets us know how long it takes for each particle. This is similar to our sprite animation updating. Lifetime is how long our particles will be alive which we set to 1 second, our speed of rotation for our particles and the blend mode we will be using for our drawing. This is set to alpha blend now but additive is also a good one. The last two keep track of how many particles we have to create this frame and how much time has passed before our next particle is created. More explanation when we go over the updating method.

Thursday, April 29, 2010

2D Particles: Part 2 Basic Particle

Welcome to the second part, first actual programming part, of my 2d particle engine tutorial. Today we will be creating a basic particle class which will be expanded later but for now it will be simple and clean. Now lets begin, first create a new class named Particle and add the following variables into it. All of these variables are private because we just need them in this class except for IsAlive which we will use to destroy the particles later.
Lets go over each variable. Texture is just the texture of the particle that we will also use to calculate origin. Position is the position that our particle is currently at. Velocity is how fast our particle is moving, more on this later. Rotation is the current rotation of the particle and rotation speed is how fast we are rotating. LifeTime is how long our object will be alive when we first set it and lifeLeft is how much time is actually left before we destroy our particle. IsAlive is whether or not the particle still has time left. This is pretty easy so far, now were going to add the constructor which we will use in a different class to create our particle. We basically want to set all the variables in the constructor because its easier than assigning each value in our other class.

Wednesday, April 28, 2010

2D Particles: Part 1 The Basics

My next tutorial will be on a 2D particle engine. A 2d Particle engine is pretty simple to create, but requires a lot of variables. Therefore it can be overwhelming at first, but hopefully I can break it up in a way that everyone can follow. The engine itself is just a way to control your particles, and the particles are just a texture that is moving, rotating, scaling, and fading. Although there will be a lot of variables in this engine, with a few math tricks and the random number generator, you can create very cool effects with minimal code.

Tuesday, April 27, 2010

2D Animation: Part 7 Using Custom Animations

Welcome to part 7 of the 2d sprite animation tutorial this will be essentially part 2 of using custom animations were I will go over using the new custom animations to allow you to move left, right, up and down with an idle state for each direction using just two animations, an eight frame animation for moving and a four frame animation for your idle state. I would suggest downloading the Dude sprite sheet in the source code at the bottom of the page and following along using your part 6 source code as it is the exact same for now. So lets declare our two main variables, our keyboard state and our dude.
Now that we have our dude animation lets load him in using our generic constructor and setting his position as usual. Now instead of just a name, row and frames where now going to add in an Animation Class which for typing reasons i named 'ani'. Now our animations are all the same just at different rotations so with each new animation we just have to change the rotation and add it to our dictionary just like this.

Monday, April 26, 2010

2D Animation: Part 6 Custom Animations

Welcome to the sixth part of my 2d sprite animation tutorial so far we have covered adding in sprite sheets with multiple animations but until now our animations are all the same except for the images. This tutorial is going to cover adding in a custom animation class that will allow us to have multiple animations with multiple settings such as different scales, size, rotations and more. Right now our animations are nothing more than a name and an array of rectangles with there properties being defined as a whole now we could change the settings of the animation whenever we change the animation but that can be troublesome so instead were going to make our own animation class.

This class is going to define what the animation settings are and will be on a per animation basis so that we can have complete control over our animations. So lets start by adding in our animation class which I named AnimationClass, I was going to call it just Animation but that runs into some other naming issues so Animation Class is fine. We already have all the properties of our animations in our sprite manager class so were going to cut and paste them into this new class. We are also going to add in the Is Looping boolean from the sprite animation class in here as well. The result of our animation class is the following.
Now we have our animation class but we now need to use it in our sprite manager class so were going to change the Rectangle array in our dictionaries to Animation Class, we will get the following for our sprite manager class.
After that we need to change our sprite manager constructor slightly to set the variable frames since some animations might have more frames than others we do not want this to be a global variable but instead a variable for each animation. We still want to know how many frames are in the total image so that we can calculate our width, height and origin but that is all.

Sunday, April 25, 2010

2D Animation: Part 5 Multiple Animations

Welcome to the fifth part of my 2d sprite animation tutorial, today I will be going over how to add in multiple animations. So for this example we are going to have our guy moving left and right with only a few modifications to our current sprite manager and sprite animation class. Before we begin lets think about how we want to arrange our animations, our final goal is to be able to create, check and assign our animations easily. For now our animations are nothing but an array of rectangles but we will extend this later. Now we can make a list of arrays and access them by index but that can get pretty irritating trying to remember which animation is which number. So instead we will use a Dictionary, a dictionary in C# works pretty much just like a normal dictionary, allow me to explain what a dictionary is and why we are choosing a dictionary type for our animations.

A dictionary is a type of collection with two variable types, one is the key and the other is the value, for our animations we are going to use a string for our key and a rectangle array for our value type. So we are going to replace our rectangle array with a dictionary, we are also going to store a string for our current animation simply named Animation, which we will use in our main class to change our animations or check which animation is currently playing.

Saturday, April 24, 2010

2D Animation: Part 4 Sprite Animation

Welcome to the fourth step in my 2D sprite animation tutorial, to follow this tutorial you are going to need to follow the second part which you can find here. If you followed part 3 of this tutorial you will find the first couple of steps very familiar. This tutorial is going to cover how to make animations that will update continuously, for this tutorial it will be a loading circle that . Now lets begin, lets start by creating our class named SpriteAnimation. This class is going to inherit from our sprite manager class just like in the frame animation. Because our sprite manager had a constructor that took in parameters we have to first initialize our constructor to allow us to use the sprite manager. So this is how our class should look so far.

Friday, April 23, 2010

2D Animation: Part 3 Frame Animation

Welcome to the third part of the 2D animation tutorial. I am going to assume you have the sprite manager class from part 2 which you can find here, or download from the source at the bottom of the page. This tutorial will cover the creation of frame animations which are animations that go from one from to another but not always in order. You could have the next frame be based on something that happened or like in our example a random frame when we press the space bar. Now before we begin adding in the frame animation class lets first do two things, one create our sprite sheet now I used my Sprite Tool to create a dice sheet that you can see here.

Dice Sprite Sheet

Thursday, April 22, 2010

2D Animation: Part 2 Sprite Manager

Before I get into the second part of my 2d animation tutorial I would like to mention that I updated project santa which is available here.

Now lets begin, to create our two separate sprite animation types where going to first create an abstract class that will allow us to keep track of the similar functions in one class instead of two. We will call this class the SpriteManager class. The way I like to program is to start out with the base functions first, add in the functionality to the functions while adding any extra functions that simplify the process or changing old functions to work with the features. So first where going to add in the two main functions, the constructor and draw method.

So far were really not doing anything but we know for sure we need to use these functions so we can add them write away. Next lets start adding all the variables where going to need to have to load and draw in our sprite sheet, for now were going assume there is only one animation. Well we know that to draw our image were going to need a Texture2D, Position, Color, Origin, Rotation, Scale, SpriteEffect and an array of rectangles. Now one thing for sure that needs to be loaded in by default is the texture and one practice I have is adding the required variables into the constructor. One bonus to this is that we can then create our array of rectangles within our constructor as well. So for now where going to make the following changes.

Wednesday, April 21, 2010

2D Animation: Part 1 The Basics

This is the first part in a five part series about 2D animations, I hope you will learn from this tutorial and if you have any questions, need help or whatever feel free to post a comment and I will get back to you asap. Now before I go into detail about animating in 2D I thought I would explain how exactly animating in 2D works, the different types of animating and my overall approach to simple animations. First 2D animations are not really animating at all, instead there just changing images very quickly to make it look like there animating, this is just like when you draw on multiple pages of a book and quickly flip the pages to see something move. To make this work you can either create a lot of images and draw them one after another but this can be very troublesome so instead most people create sprite sheets.

Sprite sheets are essentially a lot of images combined together to create one large image. These images are either arranged in a very specific order that the programmer can then use or after the sprite sheets are created there is an accompanied text or xml file that will give the programmer the correct locations of each image. I created a sprite sheet creator a while back that I have finalized and posted a few days ago, click here for the sprite tool ( I will be doing a video tutorial on how to create the sprite tool from start to finish in a while so check back later for that ).

Tuesday, April 20, 2010

Recommended Program: Dropbox

Dropbox is a simple program that allows people to share files just by dropping them in the dropbox folder that you specify. It is similar to a subversion repository except for it will automatically update whenever something is added or removed from the folder. This might not be ideal for all situations but for people who like sharing a lot of files between each other or a small group of people it is pretty nice. Also because your files are stored on the dropbox server you can not only get your files back if your computer breaks down but you can download them from the dropbox website from any computer directly from there website.

Monday, April 19, 2010

Basic Sprite Sheet Creator

The next program I would like to share is my sprite sheet creator. Using sprite sheets is, for the most part, pretty tedious especially to the new programmer. First, this sprite sheet creator is only meant for simple sprite sheets such as dice, loading animations or something similar to that. This post will just be an introduction with a brief introduction on how to use the tool with a screenshot, and latter I will explain step-by-step the code in the creator plus code that will take your sprite sheet and allow you to animate it in two different ways.

Screenshot of Sprite Tool

Sunday, April 18, 2010

Recommended Program: Ventrilo

This will be the first post in my series of recommended programs which will include programs for people who are developing games, beginners to programming, web apps or just programs that can be used for everyone. First I would like to start this off with a program I use every day and for good reason. Ventrilo, it allows people to connect to a server and talk to each other on a fast and lightweight program. I use this program to talk to friends while we play call of duty or to talk about our current game projects or just because were to lazy to type. Its very easy to set up even if you want to host your own server.

Preview of next few projects

I will be releasing a couple of projects and maybe a tutorial or two. First, I will be posting my very simple sprite sheet creator for very simple sprite sheets that are perfect for games that just need a few animations. Second, I will be posting the source code and example of my 2d particle engine which consists of just two classes. Also, I might do a tutorial on 2d grid based path finding using A*, but that is fairly complex so it might take some time to get it all done in a way that makes sense. Finally, I will most likely be posting some screen shots and a brief description of my current game project for which I am working on with my friend Carlos. More information can be found here.

On an unrelated note, kick ass was a great movie.

Friday, April 16, 2010


This is the first post of my blogging life and hopefully I keep up with this and help some people learn about programming or to laugh a little. I have a lot of programming topics to write about, things like using c# and mysql to create programs, setting up your own server and some xna game studio help classes to speed up your development. I will hopefully post my first real blog in a day or so about my project manager which uses c# and mysql to allow teams to stay organized with tasks, groups, announcements and more. I just have a few final adjustments before I upload it on to Codeplex.