Author Topic: Flames tutorial  (Read 48716 times)

0 Members and 1 Guest are viewing this topic.

Offline Builderboy

  • Physics Guru
  • CoT Emeritus
  • LV13 Extreme Addict (Next: 9001)
  • *
  • Posts: 5673
  • Rating: +613/-9
  • Would you kindly?
    • View Profile
Flames tutorial
« on: February 20, 2011, 01:20:16 am »
Do you want your title screens to look like this?


If so, go no further because in this tutorial, I will be discussing how to get epic fire effects into your games and title screens using Axe.  This is applicable to either white fire or black fire, with, or without objects in the fire.

The rules of the fire are simple.  Take each pixel, move that pixel up, then also randomly erase pixels.  Since each pixel on the screen has an equal probability of being erased, pixels near the top have a lower probability of being set, because the pixels would have had to travel all the way from the bottom to the top without getting erased.  But thats a lot of mumbo jumbo, lets get straight to the code:

Code: [Select]
.Axe
ClrDraw
[FEFDFBF7EFDFBD7F]->Str1  //Each Byte here has 7 bits set and 1 bit not set (like FE is 11111110 in binary)
                      //This is so that we can erase a random pixel, since Axe has no built in way to do that
Line(0,63,95,63       //the pixels to catch fire, explained a little later

Repeat getKey(15)    //until we press clear

For(F,L6+12,L6+767       //loop through all of the screen pixels except the last 12
{F} and {rand^8+Str1}->{F-12}   //take the byte, use AND to erase a single bit from it, and then store it into the byte directly *above* it
End                     //this makes it so that as the byte rises, each frame a pixel is erased from it

DispGraph

End

So why do we need the line command?  Well because this routine needs fuel.  What that means is that if you draw a sprite onto the screen while this routine is running, that sprite will catch fire automatically.  If you stop drawing the sprite, it will rise and vanish like smoke.  Anything you draw onto the part of the screen that is being 'flamed' will automatically catch fire, and will continue to be on fire until you stop drawing it, at which point it will vanish like smoke.  Go ahead try it out!

Also, some of you may want to try a black background with white smoke.  the principles are exactly the same, but everything is inverted.  Instead of FE (11111110), you would use 01 (00000001), and instead of using AND, you would use OR.  Its that simple :)
« Last Edit: March 21, 2011, 03:17:37 am by Builderboy »

Offline Darl181

  • «Yo buddy, you still alive?»
  • CoT Emeritus
  • LV12 Extreme Poster (Next: 5000)
  • *
  • Posts: 3408
  • Rating: +305/-13
  • VGhlIEdhbWU=
    • View Profile
    • darl181.webuda.com
Re: Flames tutorial
« Reply #1 on: February 20, 2011, 01:33:10 am »
Wow, this is awesome :o
Now I can make that "light people on fire" game I was going to make a while back ;)

How well would this work for animated sprites?  And is there a way to make only part of the screen (say, a sprite) on fire?
Vy'o'us pleorsdti thl'e gjaemue

Offline AngelFish

  • Is this my custom title?
  • Administrator
  • LV12 Extreme Poster (Next: 5000)
  • ************
  • Posts: 3242
  • Rating: +270/-27
  • I'm a Fishbot
    • View Profile
Re: Flames tutorial
« Reply #2 on: February 20, 2011, 01:37:02 am »
Wow, this is awesome :o
Now I can make that "light people on fire" game I was going to make a while back ;)

How well would this work for animated sprites?  And is there a way to make only part of the screen (say, a sprite) on fire?

Yep. Draw the sprite in two parts (assuming you'll be erasing the sprite every cycle to allow movement).  Draw the first part on the buffer before the For( loop and draw the second part after the For( loop. Only the first part will be on fire. I wouldn't recommend this method for processor intensive games though, because it's slow.
« Last Edit: February 20, 2011, 01:37:39 am by Qwerty.55 »
∂²Ψ    -(2m(V(x)-E)Ψ
---  = -------------
∂x²        ℏ²Ψ

Offline Darl181

  • «Yo buddy, you still alive?»
  • CoT Emeritus
  • LV12 Extreme Poster (Next: 5000)
  • *
  • Posts: 3408
  • Rating: +305/-13
  • VGhlIEdhbWU=
    • View Profile
    • darl181.webuda.com
Re: Flames tutorial
« Reply #3 on: February 20, 2011, 01:38:56 am »
So, I would xor the second sprites back to nothing, I guess?
I could use RecallPic, but that erases the buffer like pt-off...
Vy'o'us pleorsdti thl'e gjaemue

Offline Builderboy

  • Physics Guru
  • CoT Emeritus
  • LV13 Extreme Addict (Next: 9001)
  • *
  • Posts: 5673
  • Rating: +613/-9
  • Would you kindly?
    • View Profile
Re: Flames tutorial
« Reply #4 on: February 20, 2011, 01:40:02 am »
@Qwerty that wouldn't work because there is no ClrDraw, so there is no difference between doing it before or after.

It could work very well for animated sprites, and with masking you could make it so that only the top of them is on fire and nothing inside.

However, making only a section of the screen create fire is difficult.  This is a screen effect, not an object effect, so anything that passes into the 'fire field' will catch on fire.  Also, since this is byte based, you would have to make the fire field out of whole bytes, unless you wanted to get into some complicated byte masking.

Offline AngelFish

  • Is this my custom title?
  • Administrator
  • LV12 Extreme Poster (Next: 5000)
  • ************
  • Posts: 3242
  • Rating: +270/-27
  • I'm a Fishbot
    • View Profile
Re: Flames tutorial
« Reply #5 on: February 20, 2011, 01:41:24 am »
Builder, it wouldn't work? I wonder why it works on my calculator then.
∂²Ψ    -(2m(V(x)-E)Ψ
---  = -------------
∂x²        ℏ²Ψ

Offline Builderboy

  • Physics Guru
  • CoT Emeritus
  • LV13 Extreme Addict (Next: 9001)
  • *
  • Posts: 5673
  • Rating: +613/-9
  • Would you kindly?
    • View Profile
Re: Flames tutorial
« Reply #6 on: February 20, 2011, 01:45:02 am »
Oh do you XOR it on, and then XOR it off?

Offline AngelFish

  • Is this my custom title?
  • Administrator
  • LV12 Extreme Poster (Next: 5000)
  • ************
  • Posts: 3242
  • Rating: +270/-27
  • I'm a Fishbot
    • View Profile
Re: Flames tutorial
« Reply #7 on: February 20, 2011, 01:45:31 am »
Not for the front buffer where the flames are.
« Last Edit: February 20, 2011, 01:47:20 am by Qwerty.55 »
∂²Ψ    -(2m(V(x)-E)Ψ
---  = -------------
∂x²        ℏ²Ψ

Offline Munchor

  • LV13 Extreme Addict (Next: 9001)
  • *************
  • Posts: 6199
  • Rating: +295/-121
  • Code Recycler
    • View Profile
Re: Flames tutorial
« Reply #8 on: February 20, 2011, 01:46:25 am »
Ooooh, nice Builderboy, thanks much ;D

Offline Builderboy

  • Physics Guru
  • CoT Emeritus
  • LV13 Extreme Addict (Next: 9001)
  • *
  • Posts: 5673
  • Rating: +613/-9
  • Would you kindly?
    • View Profile
Re: Flames tutorial
« Reply #9 on: February 20, 2011, 01:49:52 am »
Wait do you use the backbuffer then?  I was responding to your original idea, where you just said to do it after the for loop

Offline AngelFish

  • Is this my custom title?
  • Administrator
  • LV12 Extreme Poster (Next: 5000)
  • ************
  • Posts: 3242
  • Rating: +270/-27
  • I'm a Fishbot
    • View Profile
Re: Flames tutorial
« Reply #10 on: February 20, 2011, 01:51:33 am »
I'm using both buffers for graphics. The front buffer holds part of the sprite and the back buffer holds another part. I tried moving the part from after the For( loop (where there was no fire on the sprite) to before it and fire appeared.
∂²Ψ    -(2m(V(x)-E)Ψ
---  = -------------
∂x²        ℏ²Ψ

Offline Builderboy

  • Physics Guru
  • CoT Emeritus
  • LV13 Extreme Addict (Next: 9001)
  • *
  • Posts: 5673
  • Rating: +613/-9
  • Would you kindly?
    • View Profile
Re: Flames tutorial
« Reply #11 on: February 20, 2011, 01:52:50 am »
Gotcha, although how are you using both the buffers?  Are you copying from one buffer to another?  Using greyscale?

Offline AngelFish

  • Is this my custom title?
  • Administrator
  • LV12 Extreme Poster (Next: 5000)
  • ************
  • Posts: 3242
  • Rating: +270/-27
  • I'm a Fishbot
    • View Profile
Re: Flames tutorial
« Reply #12 on: February 20, 2011, 01:55:38 am »
I'm swapping between the normal two buffers and a third buffer, which holds specific data from the first two buffers. Basically, it's just greyscale though.
∂²Ψ    -(2m(V(x)-E)Ψ
---  = -------------
∂x²        ℏ²Ψ

Offline Builderboy

  • Physics Guru
  • CoT Emeritus
  • LV13 Extreme Addict (Next: 9001)
  • *
  • Posts: 5673
  • Rating: +613/-9
  • Would you kindly?
    • View Profile
Re: Flames tutorial
« Reply #13 on: February 20, 2011, 01:56:59 am »
o.O Gotcha.  Well, to summarize, I was merely responding to your original post, since you didn't say anything about 2 or 3 buffers or anything, I didn't understand ^^

Offline AngelFish

  • Is this my custom title?
  • Administrator
  • LV12 Extreme Poster (Next: 5000)
  • ************
  • Posts: 3242
  • Rating: +270/-27
  • I'm a Fishbot
    • View Profile
Re: Flames tutorial
« Reply #14 on: February 20, 2011, 01:57:56 am »
I only changed the stuff concerning the front buffer, so I didn't think it was necessary to describe the others.
∂²Ψ    -(2m(V(x)-E)Ψ
---  = -------------
∂x²        ℏ²Ψ