104
\$\begingroup\$

I'd like to recreate a flaming effect like the one from the logo on the title screen of the N64 game 'The Legend of Zelda: Ocarina of Time,' shown below:

enter image description here

A quick look into the textures used in the ROM provide a single 32x32 texture that looks similar to the effect but I don't know how that image (assuming that's the right one) is transformed into the effect seen on the logo.

How can I implement something similar?

\$\endgroup\$
8
  • 2
    \$\begingroup\$ I adjusted your question slightly to ask how to achieve a similar effect, since we don't consider questions asking how other games implemented specific results to be on-topic. \$\endgroup\$
    – user1430
    Oct 25, 2017 at 15:52
  • \$\begingroup\$ Are you asking for a procedural technique or simple pre-made effects suffice too? \$\endgroup\$
    – Bálint
    Oct 25, 2017 at 15:59
  • \$\begingroup\$ I don't have the time and the knowledge to write a complete answer, but maybe it could be done via colour cycling. \$\endgroup\$
    – Vaillancourt
    Oct 25, 2017 at 16:00
  • \$\begingroup\$ @JoshPetrie Thanks, that's what I was really after \$\endgroup\$ Oct 25, 2017 at 17:54
  • 1
    \$\begingroup\$ From what I remember of the technique, the hard part comes from creating the image with the pixels using the appropriate palette, not the colours per se. The cycling is done in code over a subset of the colours. \$\endgroup\$
    – Vaillancourt
    Oct 25, 2017 at 18:17

3 Answers 3

246
\$\begingroup\$

First make a white-on-black mask of your logo/text and blur it.

blurred shape of logo

Then create a repeating (tileable) solid noise texture (GIMP used here)

noise texture

Use the Map->Tile... filter to create a 3x3 tiled pattern (in this example, 128x128 x 3 = 384x384) for the next step to ensure our texture is still repeatable - we'll keep only the center part.

previous image tiled 3 by 3

Use Blur->Motion Blur... to blur the texture upward and keep only the center 1/3rd (back to 128x128)

noise plus motion blur

Multiply both textures together on the GPU and use this for opacity.

mask combined with noise

Then animate it by moving the pattern texture upward over the mask texture:

mask combined with moving noise

Done for the animation part.

Then you can apply a gradient map (black -> red -> yellow -> white) to give it fire colours:

logo shape with fire colours

Other colours can be used create a ghastly blue fire, a light yellow aura field, a more smoky effect, etc.

Now if you combine this as additive over your logo and the 3D render you get the wanted effect:

background + logo + fire = flaming logo over background

The effect can darkened by adjusting the mask and/or pattern brightness, and/or vertex color, and/or gradient color map to the designed level.

You can even use two textured patterns together (Mask * Fire Pattern * Fire Pattern) at different speeds and directions to create a more complex fire effect.


Technically on the N64 they may have created an approximation of the mask using a triangle mesh and vertex color instead of the mask texture due to the N64's hardware limitation regarding textures but the end result is the same ((vertex color * pattern texture) vs (mask texture * pattern texture)).

Vertex color mock-up

We can still use vertex colour but 20 years later we can make our lives easier and just use 2 textures or more, even today's mobile GPUs can handle an extra 256x128 gray texture without problem.

\$\endgroup\$
7
  • 3
    \$\begingroup\$ I think we have a winner - thanks @StephaneHockenhull, this is exactly the kind of technique I was looking for \$\endgroup\$ Oct 25, 2017 at 20:10
  • 9
    \$\begingroup\$ Holy cow this is a good answer! \$\endgroup\$ Oct 29, 2017 at 0:01
  • 1
    \$\begingroup\$ "ghastly" or "ghostly"? \$\endgroup\$
    – CJ Dennis
    Oct 29, 2017 at 1:49
  • 1
    \$\begingroup\$ It also has the meaning "awful in appearance". "Don't wear that tie; it's ghastly". I interpreted your sentence as "Other colours can give a really bad or smoke effect". "Ghostly" is unambiguous, even if it's not as strong as you'd like. \$\endgroup\$
    – CJ Dennis
    Oct 29, 2017 at 2:12
  • 1
    \$\begingroup\$ I wish I could give you a second upvote for the very earnest horse drawing. \$\endgroup\$
    – recognizer
    Oct 30, 2017 at 0:34
2
\$\begingroup\$

There are a few ways you could do it but off the top of my head,

1) Have the flames + logo all in one image and essentially sprite sheet animate it.

2) Render the logo in a UI layer and place some UI layer particle effects around it.

From the looks of that image, it looks like there are 3ish layers shield&sword, flames, text (ordered from back to front).

There will be many ways to get a similar effect, which you chose will be down to what engine you are developing in and what you are able to implement.

\$\endgroup\$
0
\$\begingroup\$

If the ROMs include a small flame texture, then I would guess this is being done with some kind of particle effect.

This would be done by first putting a sprite on the screen for the title and logo. Then place a number of particle emitters that create a flame effect behind the title sprite. That is, their Z/screen depth is such that they render behind the title.

Here's an example of using GameMaker particle effects to create flames that might give you some thoughts on the potential of this approach...

http://martincrownover.com/gamemaker-examples-tutorials/particles-fire/

\$\endgroup\$
5
  • \$\begingroup\$ Thanks for the suggestion - assuming the texture was not like the ones in the tutorial you've linked to but instead filled the 32x32 space with no transparency, is there an obvious way to do this with particles? \$\endgroup\$ Oct 25, 2017 at 18:05
  • \$\begingroup\$ I'd just create my own flame texture for the particle if the original doesn't have a transparency. My assumption here is that unless the original title is done with a complete animated sprite (that includes the flame effect), it's probably a particle effect instead. \$\endgroup\$
    – Tim Holt
    Oct 25, 2017 at 18:24
  • \$\begingroup\$ @TimHolt You may be overestimating the hardware capabilities of the Nintendo 64. Generating a "solid"-looking flame effect this way would likely have required a lot more particles than the hardware was able to render. \$\endgroup\$
    – user75491
    Oct 25, 2017 at 19:20
  • 1
    \$\begingroup\$ @duskwuff - true, but I don't think the user is implementing this on old hardware. The answer is still a valid one for any decent (modern) system. \$\endgroup\$
    – Tim Holt
    Oct 25, 2017 at 19:25
  • \$\begingroup\$ @duskwuff the question is how to implement it now. Questions (and answers) about how other games did something are off topic here. Hardware capabilities of the N64 are irrelevant here. (See Josh Petries comment to the question) \$\endgroup\$
    – user106170
    Feb 26, 2018 at 15:39

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .