[POST TUTORIALS IN THIS THREAD. DRAWING OR CODING]
Procedural generated dust particles by Veselekov
This is a tutorial on how to make low CPU usage dust for your 2D game. This tutorial is written for AS3/Java styles formatting. however the principles behind it can be applied to any game engine.
FINAL RESULT
STEP 1 - Creating the image
First step was to create a small smoke texture. I used one of photo shops default brushes and clicked a few times to create the following.
STEP 2 - Blurring the image in your engine
Apply a 10px by 10px blur filter in your engine. I did this in ActionScript 3 by doing the following this on my Dust Class.
ACTIONSCRIPT 3
var blur:BlurFilter = new BlurFilter();
blur.blurX = 10;
blur.blurY = 10;
blur.quality = BitmapFilterQuality.MEDIUM;
this.filters = [blur];
STEP 3 - Randomizing the display properties
Randomizing width, height and rotation.
I used the following values to to create consistent dust.
Height between 50 and 150
Width between 50 and 150
Rotation between 0 and 360
ACTIONSCRIPT 3
this.width = randomSize(50, 150);
this.height = randomSize(50, 150);
rotation = randomSize(0,360);
function randomSize(mini:Number, maxi:Number){
return (Math.floor(Math.random() * (maxi - mini + 1)) + mini);
}
STEP 4 - Alpha, Tweening and decaying
I started by making the dust at 40% opacity and then moved on to tweening
Tweening really depends on your engine. However some tools such as TweenLite exist which are written the same way regardless of which version your choose. However regardless of how you achieve this here are a few things which you want to achieve.
Make the dust move on the x axis between 6px and 15px (this can be done using random generation)
Make the dust move on the y axis between 5px and 7px (this can be done using random generation)
Increase the width and height by 1/2 the current width and height.
Decrease the alpha channel to 0 (invisible).
Here is how I made my dust trail decay over time using TweenLite
TweenLite.to(this, 2,{x:randomSize(this.x+6,this.x+15), y:randomSize(this.y+5,this.y+7),width:this.width*0.5,height: this.height*0.5, alpha:0, onComplete:deleteMe})
Once you've completed your tween collect the garbage by any means necessary. This stops your dust from tanking low end CPU's
It should look a little something like this when you are done.
You can change the way the dust decays by changing the width and height decay. For example. Here I made the dust shrink rather than grow. Creating a sort of worm look.
Here I increase the growth rate of decay by x2 rather than x0.5
Finally I added it into my game
Not bad for a couple of clicks in Photoshop.