Author Topic: Particular Explosion Tutorial  (Read 4836 times)

0 Members and 1 Guest are viewing this topic.

Offline leafy

  • CoT Emeritus
  • LV10 31337 u53r (Next: 2000)
  • *
  • Posts: 1554
  • Rating: +475/-97
  • Seizon senryakuuuu!
    • View Profile
    • keff.me
Particular Explosion Tutorial
« on: July 29, 2011, 02:14:08 pm »
So some of you might be wondering - how do I make those awesome particle explosions I've seen in games like Stick Ninja, Tag, and Graviter? Although it might seem a bit daunting, they're actually really simple to create.



First of all, let’s start out with some pseudocode so it’s easier to understand what we’re about to do. We’re going to want to store each particle as part of a larger array, and loop through the array to update and draw these particles. The particles will be affected by gravity and collisions with other pixels.

This method is similar, but not exactly like cellular automata. First of all, we’re not going to want any of our particles to interact with each other, because they’ll end up colliding where we don’t want them to and that could be painful.

Let’s start out with some container code:

Code: [Select]
Repeat getKey(15)

End

Awesome. We just finished the most important part - a way to get out of the program. Give yourself a pat on the back!

But we’re not done yet - we still have to make that particle code. In this tutorial we’ll be using L1, which is 714 bytes. You can use other sections of free ram or even appvars, but we’re not going to be going there.

Let’s first list out all the attributes of each particle:
x-position: 2 bytes (inflated by 256)
y-position: 2 bytes (inflated by 256)
x-velocity: 2 bytes (signed)
y-velocity: 2 bytes (signed)

So each particle will take up 8 bytes. The maximum number of particles L1 can support will then be 714/8=89, but we’ll go with 80 just to be safe. If you want your explosion to be faster, you can decrease the number of particles or use Full.

NOTES: {r} is the superscript r, located in Angle (2nd+Apps)

Code: [Select]
Repeat getKey(15) //Our container code. Keeps repeating until user hits Clear
For(r1,0,79) //Loops through all 80 particles
r1*8+L1->r6 //Stores a pointer to the position of the particle in the array to r6
{r6}{r}+{r6+4}{r}->{r6}{r} //Increments the x-position by the x-velocity
{r6+6}{r}+4->{r6+6}{r} //Increments the y-velocity due to gravity. I find 4 to be a nice number.
{r6+2}{r}+{r6+6}{r}->{r6+2}{r} //Increments the y-position by the y-velocity
Pxl-On({r6}{r}/256,{r6+2}{r}/256) //Draws the pixel
End
DispGraphClrDraw //Displays the screen when all the pixels have been drawn and clears the screen so that the next set of updated particles can be drawn.
End

Awesome. Now we have code that can update and draw pixels. But there’s one problem - we haven’t set the inital values for these particles!

Code: [Select]
For(r1,0,79)
r1*8+L1->r6
12288->{r6}{r} //Sets the initial x-position of the particles to 48 (inflated by 256)
12288->{r6+2}{r} //Sets the initial y-pos to 48
rand^300-150->{r6+4}{r} //Sets the x-velocity to a random number between -150 and 150 (no bias)
rand^300-325->{r6+6}{r} //Sets the y-velocity to a random number between-325 and -25 (biased upwards)
End

To put it all together,

Code: [Select]
For(r1,0,79)
r1*8+L1->r6
12288->{r6}{r}
12288->{r6+2}{r}rand^300-150->{r6+4}{r}
rand^300-325->{r6+6}{r}
End
Repeat getKey(15)
For(r1,0,79)
r1*8+L1->r6
{r6}{r}+{r6+4}{r}->{r6}{r}
{r6+6}{r}+4->{r6+6}{r}
{r6+2}{r}+{r6+6}{r}->{r6+2}{r}
Pxl-On({r6}{r}/256,{r6+2}{r}/256)
End
DispGraphClrDraw
End

Just type that all in and you’re all ready to go! Keep in mind that this code can be adapted for a wide variety of purposes. For example, by adding a z-position and z-velocity as well as collision checks, you can make a 3d-looking explosion:



So the possibilities are endless ^^


Minor Optimizations:
Code: [Select]
For(r1,0,79)
12288->{r1*8+L1->r6}{r}
12288->{r6+2}{r}
rand^300-150->{r6+4}{r}
rand^300-325->{r6+6}{r}
End
Repeat getKey(15)
For(r1,0,79)
{r1*8+L1->r6+6}{r}+4->{r6+6}{r}
Pxl-On({r6}{r}+{r6+4}{r}->{r6}{r}
/256,{r6+2}{r}+{r6+6}{r}->{r6+2}{r}/256)
End
DispGraphClrDraw
End

« Last Edit: November 14, 2011, 04:05:57 pm by leafiness0 »
In-progress: Graviter (...)

Offline ztrumpet

  • The Rarely Active One
  • CoT Emeritus
  • LV13 Extreme Addict (Next: 9001)
  • *
  • Posts: 5712
  • Rating: +364/-4
  • If you see this, send me a PM. Just for fun.
    • View Profile
Re: Particular Explosion Tutorial
« Reply #1 on: July 29, 2011, 02:32:50 pm »
Wow, that's awesome.  Great tutorial, leaf.  Thanks. :D

Offline chattahippie

  • LV6 Super Member (Next: 500)
  • ******
  • Posts: 358
  • Rating: +27/-0
  • Super Member! :D
    • View Profile
Re: Particular Explosion Tutorial
« Reply #2 on: July 29, 2011, 02:42:36 pm »
Thanks for an awesome tutorial! :thumbsup:
I know the curly brackets point to a specific location in memory, but what does adding {r} (the superscript r?) do?

Offline ztrumpet

  • The Rarely Active One
  • CoT Emeritus
  • LV13 Extreme Addict (Next: 9001)
  • *
  • Posts: 5712
  • Rating: +364/-4
  • If you see this, send me a PM. Just for fun.
    • View Profile
Re: Particular Explosion Tutorial
« Reply #3 on: July 29, 2011, 02:45:13 pm »
Thanks for an awesome tutorial! ;D
I know the curly brackets point to a specific location in memory, but what does adding {r} (the superscript r?) do?
It makes it so it's a two byte number.  In other words, it allow it to hold any number from 0 to 65535 instead of just 0 to 255.  It's also faster in Axe (generally speaking).  However, it takes twice as much space to store a single number.

Offline chattahippie

  • LV6 Super Member (Next: 500)
  • ******
  • Posts: 358
  • Rating: +27/-0
  • Super Member! :D
    • View Profile
Re: Particular Explosion Tutorial
« Reply #4 on: July 29, 2011, 02:48:29 pm »
Thanks for an awesome tutorial! ;D
I know the curly brackets point to a specific location in memory, but what does adding {r} (the superscript r?) do?
It makes it so it's a two byte number.  In other words, it allow it to hold any number from 0 to 65535 instead of just 0 to 255.  It's also faster in Axe (generally speaking).  However, it takes twice as much space to store a single number.

Thanks!  That really helps me, cause I've never had an actual class in computer science or any computer language.  So sorry if I ask a lot of questions.
« Last Edit: July 29, 2011, 02:52:11 pm by chattahippie »

Offline LincolnB

  • Check It Out Now
  • LV9 Veteran (Next: 1337)
  • *********
  • Posts: 1115
  • Rating: +125/-4
  • By Hackers For Hackers
    • View Profile
Re: Particular Explosion Tutorial
« Reply #5 on: July 29, 2011, 03:51:53 pm »
Man, that 3d looking explosion would be fantastic for an opening title menu animation, like having a building blowing up and the main character flying out, screaming, and then pausing and displaying some text, like, "Spacky 3 : The Game" (j/k about spacky 3, I'm a little burned out with spacky right now) But seriously though...
Completed Projects:
   >> Spacky Emprise   >> Spacky 2 - Beta   >> Fantastic Sam
   >> An Exercise In Futility   >> GeoCore

My Current Projects:

Projects in Development:
In Medias Res - Contest Entry

Talk to me if you need help with Axe coding.


Spoiler For Bragging Rights:
Not much yet, hopefully this section will grow soon with time (and more contests)



Offline DJ Omnimaga

  • Former TI programmer
  • CoT Emeritus
  • LV15 Omnimagician (Next: --)
  • *
  • Posts: 55833
  • Rating: +3151/-232
  • CodeWalrus founder & retired Omnimaga founder
    • View Profile
    • DJ Omnimaga Music
Re: Particular Explosion Tutorial
« Reply #6 on: August 01, 2011, 01:57:53 pm »
Quote
O.O

Awesome tutorial Leafiness0

You should add a link to this topic inside the tutorial, though, so people visiting the tutorials section can find the discussion easily. :)
In case you are wondering where I went, I left Omni back in 2015 to form CodeWalrus due to various reasons explained back then, but I stopped calc dev in 2016 and am now mostly active on the CW Discord server at https://discord.gg/cuZcfcF



Official Website |T-Shirt store | Reverbnation | Facebook | Youtube | Twitter | Spotify

Offline p2

  • LV8 Addict (Next: 1000)
  • ********
  • Posts: 848
  • Rating: +51/-11
  • I'm back :)
    • View Profile
Re: Particular Explosion Tutorial
« Reply #7 on: August 01, 2011, 02:06:20 pm »
The only thing missing is, that the large blocks explode, too, when they fall down.
But  :o  O.O WOW!!!! looks great!!
*insert supercool signature*

Offline squidgetx

  • Food.
  • CoT Emeritus
  • LV10 31337 u53r (Next: 2000)
  • *
  • Posts: 1881
  • Rating: +503/-17
  • rawr.
    • View Profile
Re: Particular Explosion Tutorial
« Reply #8 on: August 01, 2011, 03:46:11 pm »
Some basic optimization for ya. Nothing runer couldn't beat but a bit easier to implement haha.

Code: [Select]
Repeat getKey(15) //Our container code. Keeps repeating until user hits Clear
L1->r6                                  //Initializes the pointer held in r6
80
While -1->r1 //Runs this loop 80 times
{r6}{r}+{r6+4}{r}->{r6}{r} //Increments the x-position by the x-velocity
{r6+6}{r}+4->{r6+6}{r} //Increments the y-velocity due to gravity. I find 4 to be a nice number.
{r6+2}{r}+{r6+6}{r}->{r6+2}{r} //Increments the y-position by the y-velocity
Pxl-On({r6}{r}/256,{r6+2}{r}/256) //Draws the pixel
r6+8->r6                                //Moves the pointer in r6 up 8 bytes aka now it points to the next particle
r1
End
DispGraphClrDraw         //Displays and clears the screen so that the next set of updated particles can be drawn.
End
« Last Edit: August 01, 2011, 03:47:07 pm by squidgetx »