So what’s the point of having a flash game if there isn’t some way to keep score? Whether it be as simple as an incrementing number or as complex as graphics flying all over the place and icons flashing… your game (if it’s a typical game) has to track score. Ever since I’ve worked with games (particularly FPS games) we’ve called this our HUD. HUD stands for Heads Up Display and originated in combat air crafts. In our case, the HUD will keep track of our score in our game but it could be used to keep up with ammo, health, lives, awards, names…. anything. So let’s get started making a heads up display to display our scores 
You are reading AS3 Flash Games for Beginners Read more from this series of articles.
- AS3 Flash Games for Beginners: Adding Library Objects to Stage with AS3
- AS3 Flash Games for Beginners: Character Movement / Handling Multiple Keypresses
- AS3 Flash Games for Beginners: More Advanced Character Movement
- AS3 Flash Games for Beginners: Level Mechanics and Animated Backgrounds
- AS3 Flash Games for Beginners: Firing Weapons with Delays
- AS3 Flash Games for Beginners: Learn How to Make Enemies with Basic AI!!!
- AS3 Flash Games for Beginners: Registering Hit Tests
- AS3 Flash Games for Beginners: Using Frame Labels and Art Tweening
- AS3 Flash Games for Beginners: Scores, HUDS, and User Interface
This is the FINAL ARTICLE in the series AS3 Flash Games for Beginners. I hate to finish the series but it’s covered a lot of topics for building a flash game from scratch. A new series will begin soon that will cover packaging and set up of a flash game for public distribution so you can make some money off your game. Anyway, this is the final article in the series so if you would like to start from the beginning and follow through to here, just use the table of contents above.
You’ll need the source code from the last tutorial so grab it:
Previous Tutorial Final Source Code
Step 1: Drawing our Scores in our HUD
Alright so make a new MovieClip and name it scoreHud. Now draw how you want your HUD to look. Wow, that’s vague. Yep, very vague. But here’s the important part. Make sure your registration is at the top left of your artwork. This is my personal preference, All graphics and user interface objects I prefer to keep there registration at the top left. This way I can manage their ActionScript positioning the same way.
So you want some guidance on how to design the hud? If so here’s an image of my mockup to go by. But feel free to design your own. Just read the following paragraphs to make sure you know how to set everything up.
Image of the Game Score HUD in Flash. Used to display our game's score, kills, and times hit.
Okay, the image should be pretty self explanatory but here’s how I made it. I used the Rectangle Tool (R) to create the box (width: 223, height: 32). Then taking the Text Tool (T) I wrote out Kills, Times Hit, and Score then spaced them accordingly. There’s a simple line Tool (N) made divider between each section. Then I created 3 dynamic text fields to hold the values for kills, times hit, and score.
So since we haven’t talked about text yet in the series. Let’s take a second to discuss it. The font I am using is a pixel font. Pixel fonts are intended for small font sizes where normal fonts tend to blur and lose detail. A search on Google for free pixel fonts should return you plenty of results. If you use a pixel font I recommend changing the anti-alias option to Bitmap Text.
Fonts in Flash also must be embedded in order to insure the user will see the correct font. If you don’t embed your font and the client doesn’t have the font, they’ll likely see Times New Roman (at least on a Windows machine). Certain fonts like Arial are rather universal and should be on a LARGE majority of computers. To prevent users seeing the wrong font, we have two options.
First we can break apart our font, this works great if our text never changes. Like in the case of our HUD, kills will always say kills. So I broke apart the font. To do this, just right click the font (on the scene) and choose Break Apart. Now you should have a separate text field for each letter. Just right click again and select Break Apart once more. Now it should be vectorized, this text is good to go, no embedding is needed.
The Second option is to Embed the font. A dynamic and input text field must be embedded to ensure the user will display the correct font. So for the values of kills, times hit, and score let’s embed (104 in my drawing). To embed a font it must first be a dynamic or input text field. So to make a text field dynamic just set at the top left of the Properties window. It defaults to Static Text. Great, now click “Embed…” and select Numerals [0-9]. This will only embed numbers and in our case it’s all we need.
Properties Window for a Textfield in flash. Make sure to set your type to Dynamic in order to enable the Embed Option
Alright. Finally, you need to set an instance name for each of your dynamic text fields. I named them kills, hits, and score. I suggest for clarity sake through the rest of the tutorial that you do the same.
Okay our HUD user interface is designed… now let’s use it. Right click on scoreHud in the library and select Linkage… Export for ActionScript and set the class to com.asgamer.basics1.ScoreHUD and OK.
Step 2: Coding our HUD to update when Score change.
So we’ve got our ScoreHUD designed but we can’t display anything with our ScoreHUD when we haven’t coded it yet. So let’s go ahead and code our ScoreHUD.as class first. It’s a simple class so here’s all the source for it. I’ll explain it afterwards.
package com.asgamer.basics1 { import flash.display.MovieClip; import flash.display.Stage; import flash.text.TextField; import flash.events.Event; public class ScoreHUD extends MovieClip { private var stageRef:Stage; public var s_score:Number = 0; public var s_hits:Number = 0; public var s_kills:Number = 0; public function ScoreHUD(stageRef:Stage) { this.stageRef = stageRef; kills.text = "0"; hits.text = "0"; score.text = "0"; x = 10; y = stageRef.stageHeight - height - 10; } public function updateKills(value:Number) : void { s_kills += value; kills.text = String(s_kills); } public function updateHits(value:Number) : void { s_hits += value; hits.text = String(s_hits); } public function updateScore(value:Number) : void { s_score += value; score.text = String(s_score); } } }
Alright the breakdown:
- First we import everything we need. The only new import here is flash.text.TextField. We need this so we can edit the text in our dynamic text fields.
- We have our stageRef as a class variable with three number variables all prefixed with s_. The s_ just tells me it’s a stat variable. It’s not required and just a preference. Also it is because we cannot use kills, hits, and score as the variables since that is the name of our text field instances in the scoreHud MovieClip.
- In our constructor we set our stageRef reference to the class variable and then we default all our text fields to “0″. To change the text in a text field you just change the text property of the text field.
- Lastly in our constructor we put our ScoreHUD object in the bottom left of the screen with a 10 pixel padding from the edge.
- Now we have 3 functions: updateKills, updateHits, and updateScore. They are all pretty much identical, update the class variable and change what is being displayed in the HUD. We wrap String() around each of the variables because they need to be converted from Numbers to Strings before they can be set as the text property of a text field.
That’s pretty simple, and it’s all we need our ScoreHUD class to do. Just keep variables to store the numbers and with each update change what is being displayed to the user.
Step 3: Dispatching Events so they can be caught by addEventListener.
Okay so before we can use our HUD we’re going to have to track our stats. We’ll do this by setting up some new events that fire when and enemy gets killed and when our character ship gets hit.
Okay open Stinger.as we’ll add one simple thing… and fix a small bug.
package com.asgamer.basics1 { import flash.display.MovieClip; import flash.display.Stage; import flash.events.Event; public class Stinger extends MovieClip { private var stageRef:Stage; private var vy:Number = 4; private var ay:Number = .2; private var target:Ship; public var points:int = 1020; //the points for killing this enemy public function Stinger(stageRef:Stage, target:Ship) : void { stop(); this.stageRef = stageRef; this.target = target; x = Math.random() * stageRef.stageWidth; y = -5; addEventListener(Event.ENTER_FRAME, loop, false, 0, true); } private function loop(e:Event) : void { if (currentLabel != "destroyed") { vy += ay; y += vy; if (y > stageRef.stageHeight) removeSelf(); if (y - 15 < target.y && y + 15 > target.y) fireWeapon(); } if (currentLabel == "destroyedComplete") removeSelf(); } private function fireWeapon() : void { stageRef.addChild(new StingerBullet(stageRef, target, x, y, -8)); stageRef.addChild(new StingerBullet(stageRef, target, x, y, 8)); } private function removeSelf() : void { removeEventListener(Event.ENTER_FRAME, loop); if (stageRef.contains(this)) stageRef.removeChild(this); } public function takeHit() : void { if (currentLabel != "destroyed") //insure we can't keep killing the enemy ship... over and over { dispatchEvent(new Event("killed")); //our new ship killed event rotation = Math.random() * 360; gotoAndPlay("destroyed"); } } } }
We added a new class variable points. Everything else new is in takeHit. Here’s the Breakdown:
- public var points:int = 1020; I’m adding this in so we can give a special number of points for killing this enemy. If all our enemies have a points variable then we can take the points variable when the enemy dies and call it to get different points for killing different enemies. That was a mouth full. Simply put, each enemy can have a different points value that is awarded when they are killed, we’ll do this by giving each enemy a points variable.
- if (currentLabel != “destroyed”) This should have been added the last tutorial. Without it we can keep shooting the enemy ship over and over and it will keep exploding. Mistake on my part. Sorry… Don’t worry though, unless you’re flawless you’ll find little bugs like this are a part of programming.
- dispatchEvent(new Event(”killed”)); You know when we write addEventListener? Well it’s looking for these. Our addEventListener’s are looking for dispatched Events. So if we dispatch a new Event called “killed” we can use an addEventListener(”killed”, function) to listen for it. Simple, yet very effect.
Now we need our Ship to dispatch when it takes a hit. Just one problem… Currently our ship has no idea when it get’s hit. Yes yes, we do get a small yellow explosion when it happens. But our Ship class has no idea that ever occured… only the enemy bullet class knows it happened. So we’re going to need to classes updated here. Let’s open Ship.as and StingerBullet.as. We will make StingerBullet call the function takeHit in Ship when a hit occurs. So here’s the new source code for StingerBullet.
package com.asgamer.basics1 { import flash.display.MovieClip; import flash.display.Stage; import flash.events.Event; public class StingerBullet extends MovieClip { private var stageRef:Stage; private var target:Ship; private var vx:Number; public function StingerBullet(stageRef:Stage, target:Ship, x:Number, y:Number, vx:Number) : void { this.stageRef = stageRef; this.target = target; this.x = x; this.y = y; this.vx = vx; addEventListener(Event.ENTER_FRAME, loop, false, 0, true); } private function loop(e:Event) : void { x += vx; if (x > stageRef.stageWidth || x < 0) removeSelf(); if (hitTestObject(target.hit)) { target.takeHit(); stageRef.addChild(new SmallImplosion(stageRef, x, y)); removeSelf(); } } private function removeSelf() : void { removeEventListener(Event.ENTER_FRAME, loop); if (stageRef.contains(this)) stageRef.removeChild(this); } } }
One line added. That’s all.
- target.takeHit(); Well, you know exactly what this is. We’re calling takeHit function in the target. The target being the Ship class object… But we don’t have a takeHit function in Ship. Let’s make it.
Just add this function somewhere in your ship class.
public function takeHit() : void { dispatchEvent(new Event("hit")); }
Well… does this need a breakdown? Not really it’s the same as before. We’re just dispatching an event when our ship takes a hit. We’re calling it hit this time.
Step 4: Catching Events with addEventListener
So we’ve got our ship and our enemy ship dispatching events when they are killed or hit. Now we need to do something with them. Since our ship and the enemy ships are both created in the Engine class let’s catch our event dispatches there. And we need to create an object from our ScoreHUD class so let’s do it in the Engine class as well. Here’s the new source code for Engine.as:
package com.asgamer.basics1 { import flash.display.MovieClip; import flash.display.Stage; import flash.events.Event; public class Engine extends MovieClip { private var numStars:int = 80; public static var enemyList:Array = new Array(); private var ourShip:Ship; private var scoreHUD:ScoreHUD; //our HUD public function Engine() : void { ourShip = new Ship(stage); ourShip.x = stage.stageWidth / 2; ourShip.y = stage.stageHeight / 2; ourShip.addEventListener("hit", shipHit, false, 0, true); //if hit is dispatched call shipHit function stage.addChild(ourShip); scoreHUD = new ScoreHUD(stage); //create our HUD stage.addChild(scoreHUD); //and display it. for (var i:int = 0; i < numStars; i++) { stage.addChildAt(new Star(stage), stage.getChildIndex(ourShip)); } addEventListener(Event.ENTER_FRAME, loop, false, 0, true); } private function loop(e:Event) : void { if (Math.floor(Math.random() * 90) == 5) { var enemy:Stinger = new Stinger(stage, ourShip); enemy.addEventListener(Event.REMOVED_FROM_STAGE, removeEnemy, false, 0, true); enemy.addEventListener("killed", enemyKilled, false, 0, true); //catch when the enemy is killed enemyList.push(enemy); stage.addChild(enemy); } } private function enemyKilled(e:Event) : void { scoreHUD.updateKills(1); //add 1 to enemy kills scoreHUD.updateScore(e.currentTarget.points); //add that points variable we created earlier } private function removeEnemy(e:Event) : void { enemyList.splice(enemyList.indexOf(e.currentTarget), 1); } private function shipHit(e:Event) : void { scoreHUD.updateHits(1); //add 1 to number of hits } } }
And the breakdown:
- private var scoreHUD:ScoreHUD; simply adding it as a class variable.
- ourShip.addEventListener(”hit”, shipHit, false, 0, true); so if hit gets dispatched from our ship object we call the shipHit function
- scoreHUD = new ScoreHUD(stage); Just creating our scoreHUD, next line we add it to the stage. Nothing new really.
- enemy.addEventListener(”killed”, enemyKilled, false, 0, true); Our enemy is created now we need to make sure when he is killed we know it. So we add a listener to catch when “killed” is dispatched. When it is we call enemyKilled.
- private function enemyKilled(e:Event). In this function we simply use our ScoreHUD class functions to add a kill and add to our score. The points variable we added to enemy earlier is added to our total score. e.currentTarget allows us to grab the object that dispatched the event. We’ve used it before so you should have no problem understanding it.
- private function shipHit(e:Event). Here we simply add 1 to the number of times our ship has been hit.
Alright that’s everything. Compile your flash and you should have a working HUD!
Okay, in closing this series I want to remind everyone that this is a basics series. My goal was to take you through what you would need to know to begin developing a flash game. By now I think you have the gist of how flash works with game development. Where you go from here depends on your programming knowledge and willingness to experiment with the code. Please feel free to have fun with what we have already created and make something different. If you went your own way with this tutorial and created your own enemies, ships, bullets, and lasers I would love to see your games. Even feel free to write an article about how you used this tutorial to create a game and what you did differently. If I find your game or article interesting I’ll gladly add them to the site so you can get some publicity to start off your flash game development career
I also want to let you know that more series of articles will be appearing on the website in the nearby future that will take you through packaging and making a complete flash game for portal distribution. So stick around and keep an eye out for this new series.
Here’s the final final source code:
AS3 Flash Games for Beginners: Scores, HUDS, and User Interface Source Code Zip Archive
Tags: ActionScript, as3, Basics, Beginners, Game Development, HUD, Tutorial, user interface
here is my game:
http://www.spy15.ch/flash_files/spaceshooter/SpaceShooter.html
cool eh.
at this point a big thanks to the tutorial author.
Awesome! I’ll definitely make a post with your version in it very soon
I’m really glad to see this helped you, great work!
Great!!!! Keep it up.
Great tutorial. But before you end this series, you should make a tutorial on how to add a menu, a game over screen and a preloader to the game.
Hey Olve,
Thanks for the compliment. The new series I’ll start soon will talk about how to setup your game for a user interface and preloaders. There’s just so much involved setting all that up that it’s really a series in it’s own and the flash games for beginners series is already bigger than I originally intended it to be. Don’t worry we’ll definitely start discussing all that soon!
Hey Sir !
Thank you for the great tutorial and for the insane work you’ve done. I would like to see some Highscores box and some lives or something like that in the next tutorial :). Thank you ^^.
Hi there! Great tutorial.
One question. I already did the explosion of the ship, a shield graphic to show that the hit is taken and a game over screen when a certain quantity of hits are registered, but I don´t know how to stop all the listeners and by doing this, stop the game until a new listener activates the game again.
Can you give me a direction on how to do this?
Thanks!
you could create a destroy function for every object then loop through everything on the stage and call destroy when the gameover occurs.
Hi Par, thanks for the advice….you are right, by creating some function killers I can stop the listeners.
There is only one that can´t be reached from the engine class where i put the main killer function. It is the loop in the StingerBullet class.
I try creating: private var stingerBullet:StingerBullet in the engine class in order to reference the StingerBullet class….but it doesn´t works.
Any idea?
Thanks!
no need to create them at the engine do something like this.
var totalChildren:Number = stage.numChildren;
for (var i:int = totalChildren-1; i >= 0; i–)
{
stage.getChildAt[i].destroy();
}
Assuming everything has a destroy function.
Excellent tutorial, thank you for helping me get my foot in the door with as3.
Par, nice day. Your loop is looking for all the children in the stage and for each found calls a destroy function on each class…right?
I try this approach bt placing the loop inside a function but i can´t make it work.
This is the test http://www.miyijura.com/gameTest/game.html
It works nice, with 4 hits the game is over.
The local debugger shows no errors if the stage don´t find remaining bullets, otherwise (if bullets exists) fires hitTest errors cause there is no ship in the universe.
Also, a restart button can be a nice idea.
Any advice?
hey miyijura, sign up for a forum account if you don’t mind and post as much information as you can about your problem and your source code. Then I’ll be able to help you out with it better than in the comments here.
Sure Par, thanks for your help.
Wow, just want to say thanks alot for this guide! I have no previous experience of flash or AS, but this guide taught me alot. With nothing but this guide, I made this
http://glitcched.myhood.se/
and I’m learning more every hour =) I’m waiting eagerly for more tutorials from you, especially how to do a main menu and Highscoreboard =D
Nice! I like the custom elements you added to the game very cool
great job.
Hi 4-All
really great this guide, i’m making my 1 game in as3
i would like see this game with tiles map, will be more cool!
thanks for the guide,
Regards!
I’m really pleased to see what your doing here. I’ve struggled for along time to find good examples for game development.
I’m looking forward to hearing how to create a high score league, or anything way in which a community of users can interact with one another
Thanks a lot!
Very useful and clear explanations.
Hey,
This tutorial rock!
For years now I wanted to created a simple game by myself.. and finally… this tutorial is there.
I was only wondering.. is it possible to subtract points when you get hit.
I tried a few things like a new public function in scoreHUD:
public function degradeScore(value:Number) : void{
s_score -= value;
score.text = String(s_score);
}
and
public function degradeScore(value:Number) : void{
s_score -= s_hit;
score.text = String(s_score);
}
and to catch it in the engine:
scoreHUD.degradeScore(1);
but wel.. doesnt work… do you have any suggestions??
Hey no need to write one called degrade score.
All you have to do is pass -1 into update score.
nice tutorial! now i can finally finished my first flash game! here’s the link and a post about some thoughts i got outta from the tutorial: http://jianfeiliao.blogspot.com/2009/04/playing-around-with-actionscript-3.html
Reaaaaally good!
Congratulations. Very clear and well explained. It helped me a lot to start with AS3. Your tutorial works really nice. So much that I built a very simple space invaders game.
But the I wanted to continue and build a sort of application let’s say ChooseGame where the user can choose between many games by clickig buttons(and one of them is my space invaders) I have a problem. If I run SpaceInavers all alone it works nice. But if I want to use te game and call SpaceInavers class directly from ChooseGame.as. It says can’t call null object or prorperties (something like that). The thing is that when you run it alone, Engine HAS a stage, but if you run it from other container class, which in my case is GameChoose the Invaders.as has a null stage. Here you have a schema:
SpaceInvaders –> stage ok –> the game runs fine
ChooseGame –> SpaceInvaders –> stage null
The big consequence of all this is that you can’t develop games independently and use them into another container class. So if you want to do this, you will end with a huge unmanageble class main class with all sort of methods refering different game classes.
Any idea about how to implement it?
Congratulations for the tutorials I can’t wait to see more! Maybe some a bout sound
Apparently I did a sucky job of explaining how the stage works because you’re not the first one having some confusion with it
Here’s a simple rule, if the Movieclip is created at compile time on the stage or it is not the document class then the stage variable will be null.
So if you have a chooseGame and want to run space invaders then you need to pass the stage into space invaders.
I hope that makes sense.
>>enemy.addEventListener(Event.REMOVED_FROM_STAGE, removeEnemy, false, 0, true); enemy.addEventListener(”killed”, enemyKilled, false, 0, true);
<<
In the Engine, do these two enemy listeners not need to be removed - like in removeEnemy()?
thanks!
Dmennenoh, you’re definitely right. Remove them always if you can. I apparently forgot.
The positive; however, is that because it is weak referenced it won’t hold us up on clearing the enemy for garbage collection.
We weak referenced it when we typed “false, 0, true” and the last true makes our Event Listener weak referenced.
For some reason the engine hates
scoreHUD = new ScoreHUD(stage);
Hi great tutorial, I’ve been dragging the chain moving from AS2 to AS3 this tut has made it a lot easier.
Question: I modified the game so ourShip can take 50 hits then die = GameOver. I added GameOver screen and a Replay function - these appear to be working fine BUT… when the replay function is called, I have to click on the screen before ourShip will respond to keypress.
Any idea why this is so? OR how to avoid the problem
Many thanks.
How I can add sound when the ship shoots and enemies are destroyed?
can u teach how to create the sound for the shooting laser because i only can manage to add sound for the starting of the game, explosion of the Stinger when being hit and so….only the sound for the laser shot out from ship i could not manage to make it done…plz help me thx
Brilliant tutorial, explained a lot of things that I couldn’t get my head around since making the move to AS3 from previous versions. A great read with a bit of humour as well rather than some of the less interesting matter of fact tutorials out there. Thanks very much! Slingshot Web Design
Par,
Great tutorial! Here is my game if you would like to check it out: http://www.sharetherev.com/triangulation. It was so much fun working on this — thanks for your tutorial.
Scott
Thanks again for the tutorial! My website has changed to a more applicable name, http://www.gamesbyageek.com. The game I made from your tutorial, Triangulation, I developed using the 30 day trial of Flash CS4. How hard would it be to do something similar in pure AS3 using something like FlashDevelop, or should I just save up for Flash? Any thoughts?
Scott
I said that in former posts, but allow me to say it again: many thanks for this awesome tutorial!! It has been many years since I’ve wanted to make games and this gives me a pretty good and solid foundation to start off with something. It hasn’t been frustrating as other tutorials, I’ve been able to solve all the compiling errors thanks to your clear explanations, and it has been a good mixture of seriousness and fun that has made me reach the end of the tutorial. I’m your fan, PAR, long life to you! =)
Thanks very much for these well written, clear, and easy to understand tutorials. For a couple of days I’d been searching for an answer to a few questions.
Where to actually ‘put’ my actionscript? Does it go in the first frame, in external documents? What’s a package? What does it have to do with folders? How to get my non-main class objects (enemies/bullet etc) to access the stage/remove themselves from it. Can I access an animated movie clip like a normal object etc etc etc. I have programmed before but just getting passed those few initial and to the point where I can just get on with it was beginning to frustrate me until I found these wonderful tutorials.
Oh yeah this is just a personal preference but I also like the way you layout your code e.g. instead of all this nonsense:
if ( something == 1 ) {
// do some stuff
// so some more stuff
}
you do the same as me e.g.
if ( something == 1 )
{
// do some stuff
// do some more stuff
}
Thanks a lot for this whole tutorial. It’s been really helpful with coming to terms with AS3 and all the different functions of it I need to make a start at learning.
I’m still going to have to go through it a few times to engrain it all into my mind, but I’m looking forward to it. My finished product was pretty much exactly the same as yours, so I want to do it again and mess around with it more.
By the way, I don’t know if it’s the same for everyone, but your HUD section SWF isn’t working properly for me. I see no in the final compiled game!
Thanks again
Excelent tut!
I was wondering… How do you get your HUD to appear below the
ship instead of just covering it up?
I want an arrow to always be facing the ship. how do i do the pythagorean theorum function to keep arrow pointed at ship?
As if it weren’t said enough, great tutorial! I was having a really hard time with other ones but everything is so much clearer in this one. Also, something I noticed is that in the script above, all of the “>” are replaced with “>” and something similar for “<” and “&”. I wonder why? :S