Note that the flame is seen from a side-on view, and any game requiring a different viewing angle will not be able to get one using this method alone. In this post we will expand upon our technique to create a three-dimensional flame like the one below:
This effect is used in Brimstone to make the flames appear to come out of the page, and may be used in any birds-eye platformer where the objects are seen from an angle.
Recall that in this post we were able to make a two-dimensional image appear to rotate in three dimensions, see for example the coin below:
Note that this technique was used to make objects rotate over time, but there is no reason that we can't perform several such rotations all at once. This is essentially the idea we will use to create our three-dimensional flame.
With the coin, we had a constant ω set to 2π/T, where T is how long it takes the coin to rotate back to the same state. Here, we will create N fires with M animation frames each and will set ω equal to 2π/N. Each step of the animation, we will perform N transformations of the canvas in the same manner that we did the coin. Each transformation we will draw a different fire. For example, during the j-th transformation of the k-th step we will draw the k-th animation frame of the j-th fire. This will ensure that each fire will be animated at a different rotation angle, and we will essentially have rotated our two-dimensional fire into a three-dimensional one.