itch.io Spring Selects Series A
On Sale: GamesAssetsToolsTabletopComics
Indie game storeFree gamesFun gamesHorror games
Game developmentAssetsComics
SalesBundles
Jobs
Tags

2D tutorials

A topic by Veselekov created Dec 02, 2015 Views: 1,316 Replies: 3
Viewing posts 1 to 4
(1 edit) (+1)

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

(+1)

It's cool to have tutorials, but I think a single thread would pretty quickly get out of hand and be difficult to browse. Maybe a tutorials section would be good, in each master section (2D Art, 3D Art, Music, etc.)?

Good idea.

This is really cool :D, How do you do this in GIMP ^_^, as for bluring the sprite and making it move do you do it in Gamemaker?