Particle Animations using Microsoft XNA

In this article I am going to talk about Particles & how to use them in XNA.


Today im going to talk about Particles & how to use them in xna.

Particles are the objects that help us create nicely built effects on objects.If we would like to give an example to this,we have a torch in our male/female character's hand.And the fire in this torch is a Particle! -With its animation of course-

If you are a fan of Star Wars like me,in "A New Hope" movie while DeathStar destroys the planet "Alderaan", the explosion of the planet is a good example of particle, too.

We will be using Particles to add more action to our projects/games.

We're using 3 Particles in our project:

Magic Trails Sparkle:

1.gif

Star Trail:

2.gif 

Matrix Falls:

3.gif 

All of these particles are designed on Wondertouch's "Particle Illusion 3" program.By getting output from this application we will be showing all the particle images in order.

First of all:

Create a new Project;

4.gif

 
Allright we have created a new project.

Now we will be adding our particle folders in our Content folder inside xna.

5.gif
 
Create a new folder inside XNA's  Content Folder and then copy your particle folders to "particles" folder.

Remember one thing: When you define a particle image for particle animation,make sure its in a order like that: "part1.png","part2.png"
Because we will be using numbers to access these files.and to add a number on these particle images is a good idea.

Allright lets write some code:

private int a;

add this private integer where we define variables on top.This integer variable is declared for using as a counter.nothing less nothing more.

private Texture2D myTexture;
private Vector2 spritePosition = new Vector2(200, 200);

Declare two variables:

1) Texture variable in which we store the particle image
2) Vector2 variable in which we store the location of the image.I set is (x=200,y=200) to see the particle animation in that location
 
Update your "LoadContent" function:

protected override void LoadContent()
{
    //myTexture = Content.Load<Texture2D>("particles//Magic Trails  Sparkle//magictrailssparkle_1");
    myTexture = Content.Load<Texture2D>("particles//Matrix Effect//matrixeffect_1");
    //myTexture = Content.Load<Texture2D>("particles//Star Trail 2//startrail2_1");
    spriteBatch = new SpriteBatch(GraphicsDevice);
}

First example will be about Matrix Falls which is famous in "Matrix" movies.

As you can see,we have set its first image asset.By default we have to give the first value of myTexture variable before starting our Particle Animation.
matrixeffect_1 is the first particle image in Matrix Effect Particles

Update your "Update" function:

protected override void Update(GameTime gameTime)
{
    a++;
    if (a == 50)
    {
        a = 38; //Matrix
        //a = 25; //Magic Trail Sparkle
        //a = 17; //Star Trail
    }
    else
    {
        //myTexture = Content.Load<Texture2D>("particles//Magic Trails Sparkle//magictrailssparkle_" + a);
        myTexture = Content.Load<Texture2D>("particles//Matrix Effect//matrixeffect_" + a);
        //myTexture = Content.Load<Texture2D>("particles//Star Trail 2//startrail2_" + a);
    }
    base.Update(gameTime);
}

As I told you before we will be using Matrix falls particle animation,we have done it so! Because of there are 50 small particle images inside Matrix Falls particle folder,we have set its maximum value so that there wont be a overflow exception(for ex: matrixeffect_51 not found)
İf it belongs to max value we tell it to return to a value so the loop continues like that.Which proves to be a particle animation,indeed.

Particle animations are continuous loops so we have done that here.
If "a" counter isnt equal to 50 then we tell him to go on setting our myTexture variable as seen below:

myTexture = Content.Load<Texture2D>("particles//Matrix Effect//matrixeffect_" + a);

And Finally Update your "Draw" function seen below:

protected override void Draw(GameTime gameTime)
{
    GraphicsDevice.Clear(Color.Black);
    spriteBatch.Begin(SpriteBlendMode.AlphaBlend);
    spriteBatch.Draw(myTexture, spritePosition, Color.White);
    spriteBatch.End();
    base.Draw(gameTime);
}

As you can see it looks like a Sprite Animation.Well thats a trick :)

We have showed our particles using Sprite Animation.

So run your project and try the three particle animations in order.

See what happens ;)

Matrix Falls:

6.gif 

Magic Trails Sparkle:

7.gif

Star Trails:

8.gif

Full Source Code:

using System;
using System.Collections.Generic;
using System.Linq;
using Microsoft.Xna.Framework;
using Microsoft.Xna.Framework.Audio;
using Microsoft.Xna.Framework.Content;
using Microsoft.Xna.Framework.GamerServices;
using Microsoft.Xna.Framework.Graphics;
using Microsoft.Xna.Framework.Input;
using Microsoft.Xna.Framework.Media;
using Microsoft.Xna.Framework.Net;
using Microsoft.Xna.Framework.Storage;

namespace ParticleAnim
{
    public class Game1 : Microsoft.Xna.Framework.Game
    {
        GraphicsDeviceManager graphics;
        SpriteBatch spriteBatch;
        private int a;
        private Texture2D myTexture;
        private Vector2 spritePosition = new Vector2(200, 200);
        public Game1()
        {
            graphics = new GraphicsDeviceManager(this);
            Content.RootDirectory = "Content";
        }
        protected override void Initialize()
        {
            base.Initialize();
        }
        protected override void LoadContent()
        {
            //myTexture = Content.Load<Texture2D>("particles//Magic Trails Sparkle//magictrailssparkle_1");
            //myTexture = Content.Load<Texture2D>("particles//Matrix Effect//matrixeffect_1");
            myTexture = Content.Load<Texture2D>("particles//Star Trail 2//startrail2_1");
            spriteBatch = new SpriteBatch(GraphicsDevice);
        }
        protected override void UnloadContent()
        {
        }
        protected override void Update(GameTime gameTime)
        {
            a++;
            if (a == 50)
            {
                //a = 38; //Matrix
                //a = 25; //Magic Trail Sparkle
                a = 17; //Star Trail
            }
            else
            {
                //myTexture = Content.Load<Texture2D>("particles//Magic Trails Sparkle//magictrailssparkle_" + a);
                //myTexture = Content.Load<Texture2D>("particles//Matrix Effect//matrixeffect_" + a);
                myTexture = Content.Load<Texture2D>("particles//Star Trail 2//startrail2_" + a);
            }
            base.Update(gameTime);
        }
        protected override void Draw(GameTime gameTime)
        {
            GraphicsDevice.Clear(Color.Black);
            spriteBatch.Begin(SpriteBlendMode.AlphaBlend);
            spriteBatch.Draw(myTexture, spritePosition, Color.White);
            spriteBatch.End();
            base.Draw(gameTime);
        }
    }
}

I hope this article helps you to perfect your game projects.

See you in my next articles...