Difference between revisions of "Fire Animation"

From The Battle for Wesnoth Wiki
(Note: Perhaps someone with file upload privalges can uploaded and add the images properly)
 
m (Fixed minor spelling errors)
Line 1: Line 1:
 
By [http://www.wesnoth.org/forum/memberlist.php?mode=viewprofile&u=119252 rhyging5] ([http://www.wesnoth.org/forum/viewtopic.php?p=438983#p438983 Original Post]).
 
By [http://www.wesnoth.org/forum/memberlist.php?mode=viewprofile&u=119252 rhyging5] ([http://www.wesnoth.org/forum/viewtopic.php?p=438983#p438983 Original Post]).
  
# Make a mask. This must to have the form you want. In this case, must be more or less like the sword. Note that have a outline totaly blur, specially the up zone.
+
# Make a mask. This must to have the form you want. In this case, must be more or less like the sword. Note that have a outline totally blur, specially the up zone.
# Draw the flames in a pixel art. Their size will affect subsiquent animation. So take a look at the image to get an idea of an standard size. We must also decide the colour and appearance. I use some Photoshop filters, like brightness and others.
+
# Draw the flames in a pixel art. Their size will affect subsequent animation. So take a look at the image to get an idea of an standard size. We must also decide the colour and appearance. I use some Photoshop filters, like brightness and others.
#Make a vertical tile of theses flames to make the bulk of animation. Why verticaly? because fire expires from the bottom upwards.
+
#Make a vertical tile of theses flames to make the bulk of animation. Why vertically? because fire expires from the bottom upwards.
 
#Apply the mask we make on first step to this tile.
 
#Apply the mask we make on first step to this tile.
#To emphasise the brightness we can make another layer like this.
+
#To emphasize the brightness we can make another layer like this.
#Make the tile move up 1 or 2 pixels everytime, but keep the mask anchored where it is.
+
#Make the tile move up 1 or 2 pixels every time, but keep the mask anchored where it is.
#As an aditional, we can make a diferent light/shadow that the fire produces on nearby objects (not included in this tutorial).
+
#As an additional, 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!
 
As you can see, with a little work, we can get some good FX. Hope it's useful!
  
 
==Images==
 
==Images==
<!--Perhaps someone with file upload privalges can uploaded and add these images properly-->
+
<!--Perhaps someone with file upload privileges can uploaded and add these images properly-->
 
*[http://www.wesnoth.org/forum/download/file.php?id=42458&mode=view Associated Image]
 
*[http://www.wesnoth.org/forum/download/file.php?id=42458&mode=view Associated Image]
 
*[http://www.wesnoth.org/forum/download/file.php?id=42456 Example Animation]
 
*[http://www.wesnoth.org/forum/download/file.php?id=42456 Example Animation]

Revision as of 16:53, 1 July 2010

By rhyging5 (Original Post).

  1. Make a mask. This must to have the form you want. In this case, must be more or less like the sword. Note that have a outline totally blur, specially the up zone.
  2. Draw the flames in a pixel art. Their size will affect subsequent animation. So take a look at the image to get an idea of an standard size. We must also decide the colour and appearance. I use some Photoshop filters, like brightness and others.
  3. Make a vertical tile of theses flames to make the bulk of animation. Why vertically? because fire expires from the bottom upwards.
  4. Apply the mask we make on first step to this tile.
  5. To emphasize the brightness we can make another layer like this.
  6. Make the tile move up 1 or 2 pixels every time, but keep the mask anchored where it is.
  7. As an additional, 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