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.