Dracula X's fire effect

Dracula X's fire effect
by SriK on 2018-06-29 (#220412)

Does anyone here know exactly how Dracula X gets that awesome fire effect on the first stage? Badly upscaled image:

It seems to be applying raster animation to a static "fire image" (basically, selectively repeating or omitting vertical strips), in addition to additive blending. But how, exactly?

I'm trying to replicate the effect for a level in my game (on PC, but sprite-based at 240p). This is the closest I've got so far (background of the stage removed):

Not nearly as smooth or cool-looking!

And the code for how I'm producing the above:

Code:

double stripY = 0;

for (int i = 0; i < flameHeight; i++) {
    double pct = i / (double)flameHeight;
    double time = counter / 8.0;

    double inc = Math.Cos(pct * 3.14159 * 8 + time * 0.5);
    inc = (1.0 + inc);

    stripY += inc;

    // render horizontal strip at stripY, advance one line down
}

...where the counter increments every frame.

I could step through an emulator and figure out the effect myself, but it's been years (going on half a decade??) since I've looked at any assembly, and I have zero experience with the SNES hardware. So I was wondering if anyone here knew about this.

Thanks for your time!

Re: Dracula X's fire effect
by lidnariq on 2018-06-29 (#220413)

There's two layers. One's the building, it's just doing a sine-wave wobble left-right.
The other is the fire layer. It's transparent, and doing a sine-wave wobble up-down.

The important part for the up-down wobble is to use different amplitudes for the different sine wave components (w.r.t. time and y coordinate)

Er. Let me try again. What I mean is, if you plot y+sin(y), you see places where it's flat and places where it's twice as fast. That's why you those bars move the way they do in your implementation. If you scale either y or sin(y) by some number such that the derivative doesn't spend much time around zero, it looks better.

Re: Dracula X's fire effect
by SriK on 2018-06-29 (#220415)

Thanks for the quick reply!! Seems like I was overcomplicating stuff. It looks great now (both horizontal and vertical distortion applied):

Final "code" for the effect:

Code:

for (int i = 0; i < flameHeight; i++) {
    double pct = i / flameHeight;
    double s = counter / 8.0;

    double inc = 8.0 * Math.Cos(0.5 * s + 8.0 * 3.14159 * pct);

    double yPos = i + inc;
    if (yPos < 0) yPos = 0;
    if (yPos > textureHeight) yPos = textureHeight;

    double xPos =  3.0 * Math.Cos(1.0 * s + 8.0 * 3.14159 * pct);

    // render strip at xPos, yPos
}

Re: Dracula X's fire effect
by nesrocks on 2018-06-29 (#220419)

It looks great! What engine is it? edit: I see it's in C++. Well done

I would experiment adding a front fire layer (think tmnt arcade level 1).

Re: Dracula X's fire effect
by SriK on 2018-06-29 (#220420)

C#, actually (it was originally in C++ when we ran a Kickstarter a couple years back, but I got tired of programming in C++...) You can follow the game here: https://twitter.com/SteelAssault

The front fire layer is a good idea, I'll look into it. Thanks!

Re: Dracula X's fire effect
by psycopathicteen on 2018-06-30 (#220439)

Did you get those backgrounds done in just a couple hours?

Re: Dracula X's fire effect
by TOUKO on 2018-06-30 (#220443)

i did this fire effect on pecengine .

https://www.youtube.com/watch?v=qsSsNe3RfSk