18 March 2010

Energy Bar Flash Game AS3 Tutorial

In some Flash games author often has a need to display energy bar for hero character or enemy character or both. In this tutorial you will learn how to create reusable energy bar which you can ..., well reuse, in all your future projects. Code is pure ActionScript 3.0. I'm trying to develop this habit to write small chunks of useful code for my future games :)






step 1 - energyBar class


First obvoius step is to write energyBar class. Here is the code:


package
{
import flash.display.Sprite;
import flash.geom.Rectangle;
import flash.events.Event;

public class energyBar extends Sprite
{
private var _do:Sprite;
private var _ev:uint;

public function energyBar(displayObj, energyValue)
{
_do = displayObj;
_ev = energyValue;
init();
addEventListener(Event.ENTER_FRAME, onFrame);
}

private function onFrame(evt:Event):void
{
x = _do.x;
y = _do.y - 20;
}

private function init():void
{
x = _do.x;
y = _do.y - 20;

this.graphics.lineStyle(1);
this.graphics.beginFill(0x000000);
this.graphics.drawRect(0,0,102,15);
this.graphics.endFill();
this.graphics.beginFill(0x00ff00);
this.graphics.drawRect(1,1,_ev,13);
this.graphics.endFill();
}

public function updateBar(newval):void
{
_ev = newval;
this.graphics.clear();
this.graphics.lineStyle(1);
this.graphics.beginFill(0x000000);
this.graphics.drawRect(0,0,102,15);
this.graphics.endFill();
this.graphics.beginFill(0x00ff00);
this.graphics.drawRect(1,1,newval,13);
this.graphics.endFill();
}
}
}

And now code explanation. First we need to import some classes like Sprite, Rectangle and Event. Then we write our class. We are extending Sprite class so we can draw that energy bar. We have two private variables: _do which is Display Object, in this case Sprite of our hero character and _ev which holds energy value. With this kind of class you can pass what ever Sprite you want and attach energy bar to it.

Inside constructor function we have init() function call and on enter frame event listener. Listener function will change energy bar position on every frame so our bar can follow hero around the stage. Change value to suit your needs. Now, init function will draw energy bar with provided values. Notice updateBar function which is almost the same as init function, but it is declared as public, so we can update energy value later.


step 2 - hero class

Insert your hero. My hero is simple blue circle shape with big H letter inside. Very creative. Anyway, set linkage properties as image shows, name this class 'hero' and use next code to create hero class.


package
{
import flash.display.MovieClip;
import flash.events.Event;

public class hero extends MovieClip
{

public function hero()
{
addEventListener(Event.ENTER_FRAME, onFrame);
}
private function onFrame(evt:Event):void
{
x++;
y++;
}
}
}

Place .as file in same folder where your .fla file is saved. You haven't saved it yet? That's bad practice - do it now!


Previous code is just for testing purposes and you can also get away without it.


step 3 - game class

Final step in this tutorial (yes, we are almost over) is to make game.as class to put things together and make everything works right. Here is your code:


package
{
import flash.display.Sprite;
import energyBar;
import flash.events.Event;
import flash.events.MouseEvent;

public class game extends Sprite
{
private var b:energyBar;
private var val:uint = 80;

public function game()
{
init();
}

private function init():void
{
var a:hero = new hero();
a.x = 50;
a.y = 50;
addChild(a);

b = new energyBar(a, val);
addChild(b);

a.addEventListener(MouseEvent.CLICK, onClick);
}

private function onClick(evt:Event):void
{
if(val > 1) {
val-=5;
b.updateBar(val);
}else{
trace("game over.");
}
}
}
}

Notice that we have to import energyBar class besides other classes. MouseEvent is for testing purposes too. When you click the hero, energy will decrease if energy value is greater than 1 and accordingly using updateBar function from energyBar class (remember that public function ?) we will update our drawing. However, if energy value drops below 0, you will get nice relaxing message in output panel that says "game over."

When you make your own game you will probably not use energyBar in this way, but instead energy value will decrease if your hero character gets shot or is eaten by invisible cosmic monster from Betelgeuse star system or whatever.

Thanks for your time, I hope you have found this tutorial useful. And fun.

*_*

8 comments:

sinozzuke said...

wow. you're tutorials are great! XD
One question... how can we make those graphics without FlashIDE?

Flanture said...

thanks for your comment,
for energy bar you don't need Flash IDE, it's a code only graphics

sinozzuke said...

I know. But I was wondering how to make the H blue graphic and put this in AS3 without flash.

flanture said...

try this flash tutorial - as3 drawing API examples, hope it helps

Flanture

Games said...

Great tutorials. and thanks for the support you provide to all.

waluyo said...

tutorials that are very important and should be read by me. I wait for the next tutorial

Masta said...

Nice tutorial. I usually create the energy bar using movie clip.

dmc said...

I was looking for a tut like this for my Flash game, thanks! :)

 

template by blogger templates