InGameAnime: Smoke Effect

Favourite 21 favourites
Tutorial written by jickayOriginally published on 15th, December 2011 - 3 revisions

Animation is a pain. I applaud all people in the animation industry for their amount of patience to make each frame perfect. Traditional animation runs at about 24 frames per second, but games can run at even faster rates. That is why I tend to use in-game events to create animations rather than a series of images whenever possible.

In this tutorial we will make a nice smoke effect using only one sprite.


My sprite looks like this, but any kind of circular shape will do. Also note two things regarding the sprite. The first is the color. Mine is a faded white because I made the background layer black. This way the white shows up very clearly. If your background is light it would be better to use a dark color. The second is that my shape is asymmetrical. A perfect circle could work too, but having something that isn't symmetrical gives a more unique effect.

For the sprite, we want to add the Bullet behavior. So go ahead and do that. Set the speed at 50. Also, add the Destroy Outside Layout behavior just in case it leaves the layout.


Now let's add some events. Also, be sure to add the Mouse object otherwise you'll run into some trouble.


Here I am telling the system to create a sprite at the position of the mouse cursor every 0.1 seconds. It also faces the sprite between a Random angle between 250 and 290 (which is pointing upwards). The size of the sprite is also set have a Random height and width between 10 and 30.

At this point, if you test it out, the smoke effect is already noticeable. These circular looking sprites come out of the mouse and rise up slowly into the air. Something is missing though.


With these events whenever the sprite is visible its opacity will subtract 0.5 from its own opacity. What this does is over time it will gradually fade. The next action tells the sprite to add 0.5 to its own width and 0.4 to its own height. Again, this happens over time and makes each sprite grow.

The last event says to destroy the sprite if its opacity is less than 5. This makes sure that there aren't invisible sprites floating around, which makes things less stressful for the computer.

Test it again and the smoke looks more like smoke. Real smoke not only rises into the air, but diffuses over time making it larger and less visible.

As a final note, any of the numbers in the events can be changed to get the effect you are looking for.

- Changing the opacity number will change how fast it fades.
- Changing the size numbers will affect how fast it grows. The angle numbers can be changed to change direction or range of the smoke.
- Changing the time interval will make the smoke more or less dense.
- You can even change the speed of the bullet behavior to make the smoke travel faster or slower.

Various Ways to Use: Beginner

Background animation
Put some smoke in the scenery. Maybe coming from the far away hills or from the tops of buildings. Or even over a fire might work.

Custom cursor tail
In this tutorial the smoke is already following the mouse. Maybe change the sprite to a pretty star and then it looks more like fairy dust coming off the mouse.

Various Ways to Use: Advanced

Integrated into gameplay
The generation of multiple sprites can be useful for making the game look better, but it could also serve as part of the game play. Maybe the 'smoke' hurts or heals. It could even be used as a way to hide or block other objects.

Interactive smoke
The smoke can be stationary, but since they are sprites they can be dynamic as well. Switches could change their behavior, or it could be subject to changes in gravity. The different attributes, like angle or speed, can be changed to respond to the player.

Congratulations on finishing this tutorial!

Did you learn a lot from it? Share it now with your friends!

Comments

1
milengk 7,080 rep

Nice idea, thanks.

Friday, December 16, 2011 at 9:37:48 AM
1
Nickydude 9,613 rep

Great tutorial but remember to mention that it needs the 'Mouse' plugin.

Friday, December 16, 2011 at 12:33:52 PM
1
Bigheti 12.6k rep

Interesting feature that I learned in this tutorial. Once again, thank you for the knowledge shared here in Scirra website!

Saturday, December 17, 2011 at 11:13:45 AM
2
Tibiacity 4,124 rep

Do you have a preview?

Sunday, December 18, 2011 at 7:25:39 PM
0
blackvikinggames 4,602 rep

sweet! TUTorial

Monday, March 19, 2012 at 1:37:43 AM
0
velcroJoe 3,794 rep

Thankyou for posting this excellant Tutorial jickay!

I wanted to have the smoke rising from a my Player's gun as apposed to the mouse. Any ideas how I would asign the smoke in this way?

Friday, April 20, 2012 at 3:19:46 PM
0
jickay 8,204 rep

Assign the smoke to an image point on a sprite instead of the mouse cursor. In your case, probably make an image point at the tip of the gun and use that.

Saturday, April 21, 2012 at 12:24:51 AM
1
Mucaro 2,979 rep

its like a particle system.

Thursday, June 07, 2012 at 3:27:27 AM
1
philx 3,956 rep

would be nice if you could upload a LIVE preview to dropbox or google drive..

Friday, March 15, 2013 at 5:01:55 PM
0
sosensible 7,652 rep

nice this is great

Thursday, May 02, 2013 at 5:23:37 PM
0
Mr Gumbit 912 rep

Hi

I need some help guys as this is not working for me. i seem to ave all the behaviors, actions and events as described but doesn't look like smoke. there seems to be no opacity happening.

Friday, October 04, 2013 at 7:16:18 PM
0
TheDoctor 1,102 rep

Nice, worked well in your O-Ring game.

Monday, March 03, 2014 at 1:15:41 AM

Leave a comment

Everyone is welcome to leave their thoughts! Register a new account or login.