Monday, May 13, 2013

Fire Particles - An ActionScript 3 Tutorial

Well, hello there neighbor!

Below, you'll see something quite amazing that I happened to stumble across while trying to figure out how to make a starfield for my upcoming SHMUP.

Okay, it's amazing to me.  I'm not even a year old in the programming field, and much less than that in the ActionScript 3 language, so I must say I'm quite impressed with myself for coming up with something like this.

So below is the final product.  I'll be talking you through this, but not in a hand holding way, so if you don't know the basics of AS3 or how to use the FLASH IDE then this is not the proper starting point for you.



Pretty sweet, right? Let's start off with something simple:  the graphics.
DISCLAIMER: I'm using CS5 so if you're using anything else I can't guarantee this will work the same.

I set my stage up to run at 30 FPS and set both the width and height to 480.

Create a 50 pixel yellow ball with a size 10 orange stroke, so it looks something like this.

Turn this into a symbol with F8. "Fire" would be a good symbol name. Give it an instance name of "fire".

Next create a 10 pixel orange square.  Symbolize it calling it "FireParticle" and export it for ActionScript.

All of these will be created dynamically so delete this symbol from the stage, making sure it's still in the Library.

The last graphic is the Bounce button.   Create a 116 px by 38 px orange box.  Symbolize it calling it "ButtonBounce" and give it an instance name of "btnBounce".  Get inside the ButtonBounce symbol and create a Dynamic Text field, giving it an instance name of "txtBounce".  I used the "_sans" font so I don't have to embed it, and sized it to 24 pt.


Cool beans.  Now, let's get into the code.  First, set the Document Class to Main and pop that beautiful baby open.  Save it as "Main.as".  It should already extend MovieClip, but if not go ahead and make it so.
//Main.as
package  
{
 import flash.display.MovieClip;

 public class Main extends MovieClip
 {
  public function Main() 
  {

  }
 }

}

Alrighty. The first thing I like to do is establish the size of my stage for easy reference with a couple of constants.
 
//Main.as
  internal const SWIDTH:Number = 480;
  internal const SHEIGHT:Number = 480;
The most important thing is getting the Fire Particles to show up on screen. Right away in our "Main.as" in our Main() function we'll instantiate 80 of them but we want all of them to be above our fire object.
//Main.as
   //this will instantiate 80 fire particles and that's it.  
   //We'll use the "FireParticle.as" (which we haven't created yet)
   //to get them to reinitialize themselves.
   for (var i:int = 0; i < 80; i++)
   {
    //creates a new FireParticle at the index above our fire so it's always on top.
    addChildAt(new FireParticle(), getChildIndex(fire) + 1);
   }
That's it. If you test now it won't do much because we need to set everything inside the "FireParticle.as".

Go ahead and create that now. Let's add a listener so we know it's been added to the stage. We'll also give it some members (properties), one a reference to our root and the other a variable which will control our particle's speed.
//FireParticle.as
package  
{
 import flash.display.MovieClip;

 public class FireParticle extends MovieClip
 {
  //MEMBERS
  private var ROOT:Object;//our "Main.as" is our root so we need to access it somehow
  
  private var ySpeed:Number;//our particles have to move.  What better way than giving them some speed?
  
  //METHODS
  public function FireParticle() 
  {
   addEventListener(Event.ADDED_TO_STAGE, init, false, 0, true);
  }
  
  private function init(e:Event = null) : void//we set this to "null" so we can use reinitialize it later
  {

  }
 }

}
Now, for prettiness, we know we don't want all of our particles to look exactly alike. That's just boring. So we'll want each individual particle to have a different alpha. This is simple, but it adds a lot of depth to our fire. Let's add a x and a y value so we can see the particles on stage. We'll also go ahead and set a ySpeed and a call to our ENTER_FRAME listener.
 
//FireParticle.as
   ROOT = root;//get our root MovieClip

   alpha = Math.random();

   x = ROOT.fire.x;//sets the x in the center of our fire
   y = ROOT.fire.y;//sets the y in the center or our fire

   ySpeed = 4;//will be used in our ENTER_FRAME listener

   addEventListener(Event.ENTER_FRAME, update, false, 0, true);
Let's go ahead and add our ENTER_FRAME listener, so our particles will move up. As well, if the particle reaches an alpha of "0" we want to reinitialize it, creating an endless cycle without instantiating a new particle.
 
//FireParticle.as
  private function update(e:Event) : void
  {
   y -= ySpeed;//moves this particle toward the top of the screen
   
   alpha -= 0.01;//lowers this particle's alpha every frame
   if (alpha <= 0)//if this particle becomes invisile...
   {
    init();//...we want to reset it
    //this is why we set our "init()" function to a default of "null"
   }
  }
Oops, there's a problem now. Our particles show up but it's all very boring and in a straight line. To change that we'll create a new function, one that is very useful in many areas of gaming. Let's do that now.
 
//FireParticle.as
  private function randomRange(minNum:Number, maxNum:Number) : Number
  {
   return Math.floor((Math.random() * (maxNum - minNum + 1)) + minNum);
  }
Confusing much? I'll try and break it down. What it does over all is take two input numbers (minNum and maxNum) and returns a number within that range. The floor function rounds the number down to a whole number so if we come up with say 5.43 we'd be able to get 5. Let's plug some numbers in for a more practical example, using "3" and "5" for our minNum and maxNum, respectively.
 
//EXAMPLE
  private function randomRange(minNum:Number, maxNum:Number) : Number
  {
   return Math.floor((0.2 * (5 - 3 + 1)) + 3);
  }
If the Math.random() returned "0.2" (Math.random() returns a number from 0 - 1 only) we would then multiply it by "6" which comes out to "1.2".  The Math.floor() function makes our return "1". Make sense? No? Check this link out. That's where I learned it.
Now we can use this function to make our fire that much cooler...well, you know what I mean. We'll change our starting x and y values as well as our ySpeed.
 
//FireParticle.as
   ROOT = root;//get our root MovieClip

   alpha = Math.random();

   x = randomRange(ROOT.fire.x - ROOT.fire.width / 2, ROOT.fire.x + ROOT.fire.width / 2);//this makes our particle's x initialize somewhere within the width of our fire object on the stage
   y = randomRange(ROOT.fire.y - ROOT.fire.height / 2, ROOT.fire.y);//this makes our particle's y initialize somewhere in the top half of our fire object on the stage
   
   ySpeed = randomRange(3, 5);//setting a random speed makes it look that much more believable, much as the random alpha value

   addEventListener(Event.ENTER_FRAME, update, false, 0, true);
So that's it if you just want to know how to make the particles dance like magic. If you want to make the ball bounce continue on, brave soldier.

We'll head back into our "Main.as" file for the duration. First up we'll add some new members to the family.
 
//FireParticle.as
  private var bounce:Boolean = false;//start it off false if you want it to be stationary from the get go, true if you want it to start off bouncing
  private var xSpeed:Number = 15;//this will be our fire's speed in the x direction
  private var ySpeed:Number = 15;//this will be our fire's speed in the y direction
Pretty basic stuff.

Now we need to put some listeners in our Main() function.
 
//Main.as
   btnBounce.addEventListener(MouseEvent.CLICK, toggleBounce, false, 0, true);//when we click on the button it will either start or stop the bounce
   addEventListener(Event.ENTER_FRAME, update, false, 0, true);
We'll do this in one go, because I'm tired. The comments should cover everything.
 
//Main.as  
  private function update(e:Event) : void
  {
   if (bounce)//if bounce is true...
   {
    //...we'll make the fire move in both x and y directions
    fire.x += xSpeed;
    fire.y += ySpeed;
    
    if (fire.x - fire.width / 2 < 0)//if it hits the left side we push it back to the right
    {
     fire.x = fire.width / 2;//repositions it so it doesn't get stuck.  Same for all the other ones
     xSpeed *= -1;//this makes the speed the opposite, ie "15" becomes "-15".  Same for all the other ones
    }
    
    if (fire.x + fire.width / 2 > SWIDTH)//if it hits the right side we push it back to the left
    {
     fire.x = SWIDTH - fire.width / 2;
     xSpeed *= -1;
    }
    
    if (fire.y - fire.height / 2 < 0)//if it hits the top we push it back to the bottom
    {
     fire.y = fire.height / 2;
     ySpeed *= -1;
    }
    
    if (fire.y + fire.height / 2 > SHEIGHT)//if it hits the bottom we push it back to the top
    {
     fire.y = SHEIGHT - fire.height / 2;
     ySpeed *= -1;
    }
   }
   else//if it's not bouncing then it sits at it's home 
   {
    fire.x = SWIDTH / 2;
    fire.y = SHEIGHT * 0.85;
   }
  }
  
  private function toggleBounce(me:MouseEvent) : void//when clicked...
  {
   if (!bounce)//..if it's not bouncing yet then we will make it bounce...
   {
    btnBounce.txtBounce.text = "STOP";//changes the dynamic text box
    bounce = true;
   }
   else//...otherwise we stop it
   {
    btnBounce.txtBounce.text = "BOUNCE";//changes the dynamic text box
    bounce = false;
   }
  }
Okay, all. I'm tired. Writing tutorials are much more time consuming than I thought. I really hope this helps you out. If it does, hit me up and let me know how you've used the concept or if you have any questions. Peace out!

Friday, May 3, 2013

Miracle and Late to the Party: Finished Review of BioShock

Would you kindly not be so frakkin amazing?!

::SPOILERS:: 
Come on, this came is six years old, you should have finished it by now.  If not, then don't read.

Yes, this game came out in 2007.  Yes, it's 2013.  But I've finally finished it!  This is two games I've finished in as many days.  It's been a long, drawn, tiresome way of finishing video games and I'll admit that some of the grandeur of this game was lost because of that.  But it's totally worth it.  I originally started the game back in 2010 (still very, very late to the party).  I played it on the hardest difficulty.  I died a lot.  I got frustrated.  I quit.  In 2011 I fired up Steam and clicked to play it, only my saved data had all been destroyed.  I had sunk four hours into it, yet all for not.  So I didn't play it.
Until I accidentally had it spoiled for me while browsing the interwebs, would you kindly.  So I said I have to play this game now, because that's just awesome.
So I did.
On Easy difficulty.
Man this game is a breeze!  I found an utter love for playing on Easy.  I said it would let me play and beat more games and I was right.  I will always play on Easy or Normal difficulty from now on.  I think I only died once the whole playthrough, and that was because I blew myself up.
I played the good guy route, saving the Little Sisters, because I'm such a sweet dude.  The ending was totally worth it when the Little Sisters stabbed Fontaine to death with their harvesters.  Such sweet innocence.  And the ending scene was short, but it was to the point.  Perfect in fact.  And then I didn't have to sit through the credits.  Pretty awesome.
I should probably talk about the game.  You get a bunch of weapons.  You shoot stuff (although killing big daddies with a wrench is super  satisfying).  You get superpowers like telekinesis, pyrokinesis, cryokinesis, magicbeeskinesis and you kill stuff with those too.  You can sneak.  You can use the environment to help you murder everyone in sight.  It's a great way to spend ten hours.
Plus, the story is amazing and very well written with a few a few surprises thrown in.  I think everyone compared it to System Shock 2 (I'm not fact checking), but I never got into that game so I won't.  I would compare it, storytelling-wise, to the Portal series, probably 2 more than 1.
Also, the atmosphere of this game is phenomenal.  Even though I was hardly in danger on Easy difficulty, I felt scared at points.  The sound engineers did a great job.  Bravo.  I think you guys don't get as much recognition as you should.
The point is, get this game and play it if you haven't already.  It's amazing and on Steam sales you can usually get it for five bucks.

Thursday, May 2, 2013

Miracle: A Finished Game Review - Spec Ops: The Line

War.  War never changes.

So, I don't finish games.  Even short ones.
But I was feelings sick and my natural...chosen pick me up in the past has always been play video games.  So I fired up Spec Ops:  The Line again, deciding to see what was what.  Yeah I was pretty close to the end of the game.
At the end it tells you how much time you spent playing the game.  4 hrs 32.  Yeah that's about four hours less than I actually played it, because I die alot.  I almost switched to playing an easier difficulty (and the game asked me to many, many, many times) but I held strong and ended the way I started it.
I went back and played two missions because I had left some of the intel laying around.  I played them on FUBAR mode and didn't die once.  Crazy that I'm only bad when I'm trying to get through the game.
Anyhoo.  Man, this game rocks my socks off.  There are four endings to this game and I went through everyone of them, because they make it easy to do.  All four point to the utter horror that is war and this game shows just how ugly it is.  I talked a bit about that in my unfinished review.  I won't ruin it for anyone who hasn't beat it, but this game is very psychological.  As Captain Walker you get Post-Traumatic Stress and it doesn't go away, even by the happy ending.

So beautiful...Let's blow it up!
Which leads me to the main thing I want to talk about.  This game is more of a role-playing-game than any I have ever played.  It truly puts you in the role of Captain Walker and it doesn't let you go.  You HAVE to go through what he's going through.  Unless you just skip the cutscenes.  Then it's just a fun third person shooter.  But I was fully engaged even with all the start/stop I did along the way, and it's because Walker was so well written, and the story was laid out so well, that I couldn't help but remember all that had happened previously.  Much like Amnesia:  The Dark Descent (which I also haven't finished, although that's more due to me being too scared to finish it) this non-role-playing-game is one of the best role-playing-games ever.  While I loved Mass Effect (only the first one) I still felt like Shepard was just a puppet whose strings I was pulling, much like any of the Bioware/Obsidian/Black Isle games.  In Spec Ops:  The Line I truly felt I WAS Walker.  And that's hard to do, especially when I'm generally taken out of the immersive storytelling when I'm constantly being killed.

So bottom line, if this game is good enough for me to finish it, then it's good enough for you to go out and get it.

Actually that's not saying anything.  I hated Mass Effects 2 & 3 but I still beat them.

Regardless, play and beat this game.  Yager deserves your money.