### Author Topic: Particular Explosion Tutorial  (Read 8353 times)

0 Members and 1 Guest are viewing this topic.

#### leafy

• CoT Emeritus
• LV10 31337 u53r (Next: 2000)
• Posts: 1554
• Rating: +475/-97
• Seizon senryakuuuu!
##### 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 ClearFor(r1,0,79) //Loops through all 80 particlesr1*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-velocityPxl-On({r6}{r}/256,{r6+2}{r}/256) //Draws the pixelEndDispGraphClrDraw //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->r612288->{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 48rand^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->r612288->{r6}{r}12288->{r6+2}{r}rand^300-150->{r6+4}{r}rand^300-325->{r6+6}{r}EndRepeat 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)EndDispGraphClrDrawEnd
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}EndRepeat 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)EndDispGraphClrDrawEnd
« Last Edit: November 14, 2011, 04:05:57 pm by leafiness0 »
In-progress: Graviter (...)

#### 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.
##### Re: Particular Explosion Tutorial
« Reply #1 on: July 29, 2011, 02:32:50 pm »
Wow, that's awesome.  Great tutorial, leaf.  Thanks.
If I'm wrong, please correct me!
Unfinished Projects:
 Elmgon 14% Basic Movement Demo Homescreen Game Pack 80% Basic Latest Release Cube Droid Saves the Galaxy 65% Axe Demo Detonate 70% Axe
Completed Projects:
Exodus | Midnight |Drifter | Axe Snake | Jump! | Factory Theta | Spider | Plot Drop | Papi Jump | Numb3rs | Nibbler | Boost | Duel Tile Map Editor | Homescreen Map Editor | Key Group Check | Oasis

#### chattahippie

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

#### 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.
##### Re: Particular Explosion Tutorial
« Reply #3 on: July 29, 2011, 02:45:13 pm »
Thanks for an awesome tutorial!
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.
If I'm wrong, please correct me!
Unfinished Projects:
 Elmgon 14% Basic Movement Demo Homescreen Game Pack 80% Basic Latest Release Cube Droid Saves the Galaxy 65% Axe Demo Detonate 70% Axe
Completed Projects:
Exodus | Midnight |Drifter | Axe Snake | Jump! | Factory Theta | Spider | Plot Drop | Papi Jump | Numb3rs | Nibbler | Boost | Duel Tile Map Editor | Homescreen Map Editor | Key Group Check | Oasis

#### chattahippie

• LV6 Super Member (Next: 500)
• Posts: 358
• Rating: +27/-0
• Super Member! :D
##### Re: Particular Explosion Tutorial
« Reply #4 on: July 29, 2011, 02:48:29 pm »
Thanks for an awesome tutorial!
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 »

#### LincolnB

• Check It Out Now
• LV9 Veteran (Next: 1337)
• Posts: 1115
• Rating: +125/-4
• By Hackers For Hackers
##### 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)

#### DJ Omnimaga

• Clacualters are teh gr33t
• CoT Emeritus
• LV15 Omnimagician (Next: --)
• Posts: 55942
• Rating: +3154/-232
• CodeWalrus founder & retired Omnimaga founder
##### Re: Particular Explosion Tutorial
« Reply #6 on: August 01, 2011, 01:57:53 pm »
Quote

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.

#### p2

• LV8 Addict (Next: 1000)
• Posts: 849
• Rating: +51/-11
• I'm back :)
##### 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    WOW!!!! looks great!!
*insert supercool signature*

#### squidgetx

• Food.
• CoT Emeritus
• LV10 31337 u53r (Next: 2000)
• Posts: 1881
• Rating: +503/-17
• rawr.
##### 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 ClearL1->r6                                  //Initializes the pointer held in r680While -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-velocityPxl-On({r6}{r}/256,{r6+2}{r}/256) //Draws the pixelr6+8->r6                                //Moves the pointer in r6 up 8 bytes aka now it points to the next particler1EndDispGraphClrDraw         //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 »