Fire Animation

From The Battle for Wesnoth Wiki
Revision as of 17:10, 13 December 2011 by Artisticdude (talk | contribs) (Minor grammatical corrections and clarifications)

By rhyging5 (Original Post).

  1. Make a mask. This must have the form you want for the flames. In this case, needs to be more or less like the sword. Note that have a outline totally blur, particularly the upper zone.
  2. Draw the flames in pixel art. Their size will affect subsequent animation, so take a look at the image to get an idea of the appropriate size. We must also decide on the color and appearance of the flames. For that purpose I use some Photoshop filters, like brightness and others.
  3. Make a vertical tile of theses flames to make the loop of the animation. Why vertically? Because fire expires from the bottom upwards.
  4. Apply the mask you made in first step to this tile.
  5. To emphasize the brightness we can make another layer like this.
  6. Move the tile up 1 or 2 pixels for every new frame, but keep the mask anchored where it is.
  7. Additionally, we can make a different light/shadow that the fire produces on nearby objects (not included in this tutorial).

As you can see, with a little work, we can get some good FX. Hope it's useful!

Images

See Also