Fire Animation - Revision history

Artisticdude: Slight rewording/clarification, added the relevant images (which were kindly uploaded to the wiki by Jetrel)

2012-01-06T12:50:05Z

Slight rewording/clarification, added the relevant images (which were kindly uploaded to the wiki by Jetrel)

Artisticdude: Minor grammatical corrections and clarifications

2011-12-13T17:10:37Z

Minor grammatical corrections and clarifications

Cloud Xan: Minor fix

2010-07-01T17:16:25Z

Minor fix

Captain Wrathbow: Fixed minor spelling errors

2010-07-01T16:53:06Z

Fixed minor spelling errors

Cloud Xan: Note: Perhaps someone with file upload privalges can uploaded and add the images properly

2010-07-01T16:36:26Z

Note: Perhaps someone with file upload privalges can uploaded and add the images properly

New page

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.
# 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.
#Make a vertical tile of theses flames to make the bulk of animation. Why verticaly? because fire expires from the bottom upwards.
#Apply the mask we make on first step to this tile.
#To emphasise 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.
#As an aditional, we can make a diferent 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==

*[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]

== See Also ==
* [[Create]]
* [[Art Tutorials]]

[[Category: Art Tutorials]]

@@ 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]).
-# 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.
+# Create a layer mask. This must have the form you want for the flames. In this case, needs to be shaped more or less like the sword. Note that the outline of the mask should be totally blurred, particularly the upper zone (where the flames will die out).
-# 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.
+# Draw the flames in pixel art. Their size will affect subsequent animation, so take a look at the image you're working with 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 a number of Photoshop filters, such as brightness and others.
 #Make a vertical tile of theses flames to make the loop of the animation. Why vertically? Because fire expires from the bottom upwards.
 #Apply the mask you made in first step to this tile.
 #To emphasize the brightness we can make another layer like this.
 #Move the tile up 1 or 2 pixels for every new frame, but keep the mask anchored where it is.
-#Additionally, we can make a different light/shadow that the fire produces on nearby objects (not included in this tutorial).
+#Additionally, we can make a different light/shadow effects that the fire produces on nearby objects, in order to give a more realistic look (not included in this tutorial).
-As you can see, with a little work, we can get some good FX. Hope it's useful!
+http://www.wesnoth.org/wiki-images/tutorial/rhyging-fire-animation-tutorial/tutorial.png
-==Images==
-<!--Perhaps someone with file upload privileges can uploaded and add these images properly-->
+As you can see, with a little work, we can get some excellent fire effects!
-*[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/wiki-images/tutorial/rhyging-fire-animation-tutorial/firetrick.gif
 == See Also ==

@@ 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]).
-# 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.
+# 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.
-# 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.
+# 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.
-#Make a vertical tile of theses flames to make the loop of the animation. Why vertically? because fire expires from the bottom upwards.
+#Make a vertical tile of theses flames to make the loop of the animation. Why vertically? Because fire expires from the bottom upwards.
-#Apply the mask we make on first step to this tile.
+#Apply the mask you made in first step to this tile.
 #To emphasize the brightness we can make another layer like this.
-#Make the tile move up 1 or 2 pixels every time, but keep the mask anchored where it is.
+#Move the tile up 1 or 2 pixels for every new frame, but keep the mask anchored where it is.
-#As an additional, we can make a different light/shadow that the fire produces on nearby objects (not included in this tutorial).
+#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!

@@ Line 3: / Line 3: @@
 # 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 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 vertically? because fire expires from the bottom upwards.
+#Make a vertical tile of theses flames to make the loop of the animation. Why vertically? because fire expires from the bottom upwards.
 #Apply the mask we make on first step to this tile.
 #To emphasize the brightness we can make another layer like this.