# Make a lives display in HUD, Flash AS3 (not text!)

I've been searching the internet all day and I can't find the answer I'm looking for.

In my HUD I want to use orange dots to represent lives. The user starts off with 5 lives and every time they die, I want a dot to be removed. Pretty straight forward.

So far my idea is to make a movie clip that has the five dots in a line. There would be 5 frames on the timeline (because after the last life it goes to a game over screen right away).

I would have a variable set up to store the number of lives and a function to keep track of lives. So every hit of an obstacle would result in livesCounter--;. Then I would set up something like this:

switch(livesCounter){

case 5: livesDisplay.gotoAndPlay(1);
break;

case 4: livesDisplay.gotoAndPlay(2);
break;

case 3: livesDisplay.gotoAndPlay(3);
break;

case 2: livesDisplay.gotoAndPlay(4);
break;

case 1: livesDisplay.gotoAndPlay(5);
break;
}


I feel like there has to be an easier way to do this where I could just have a movie clip of a single orange dot that I could replicate across an x value based on the number of lives. Maybe the dots would be stored in an array? When the user loses a life, a dot on the right end of the line is removed.

So in the end the counter would look like this:

* * * * *
* * * *
* * *
* *
*      (last life lost results in the end game screen)


EDIT: code based on suggestions by Zhafur and Arthur Wolf White

package  {
import flash.display.MovieClip;
import flash.events.*;
import flash.ui.Multitouch;
import flash.ui.MultitouchInputMode;
import flash.display.Sprite;
import flash.text.*;
import flash.utils.getTimer;

public class CollisionMouse extends MovieClip{

public var mySprite:Sprite = new Sprite();
Multitouch.inputMode = MultitouchInputMode.TOUCH_POINT;
public var replacement:newSprite = new newSprite;
public var score:int = 0;
public var obstScore:int = -50;
public var targetScore:int = 200;
public var startTime:uint = 0;
public var gameTime:uint;
public var pauseScreen:PauseScreen = new PauseScreen();
public var hitTarget:Boolean = false;
public var hitObj:Boolean = false;
public var currLevel:Number = 1;
public var heroLives:int  = 5;
public var life:Sprite;

public function CollisionMouse() {
mySprite.graphics.beginFill(0xff0000);
mySprite.graphics.drawRect(0,0,40,40);
mySprite.x = 200;
mySprite.y = 200;

pauseScreen.x = stage.width/2;
pauseScreen.y = stage.height/2;

life = new Sprite();
life.x = 210;

//checkLevel();
timeCheck();
trackLives();
}
public function timeCheck(){
}

public function showTime(e:Event) {
gameTime = getTimer()-startTime;
rm1_mc.timeDisplay.text = clockTime(gameTime);
rm1_mc.livesDisplay.text = String(heroLives);
}

public function clockTime(ms:int) {
var seconds:int = Math.floor(ms/1000);
var minutes:int = Math.floor(seconds/60);
seconds -= minutes*60;
var timeString:String = minutes+":"+String(seconds+100).substr(1,2);
return timeString;
}

public function trackLives(){

for(var i:int=0; i<heroLives; i++){
life.graphics.lineStyle(1, 0xff9900);
life.graphics.beginFill(0xff9900, 1);
life.graphics.drawCircle(i*15, 45, 6);
life.graphics.endFill();
}
}

function followMouse(e:MouseEvent){
mySprite.x=mouseX;
mySprite.y=mouseY;

trackCollisions();
}

function trackCollisions(){
if(mySprite.hitTestObject(rm1_mc.obst1) || mySprite.hitTestObject(rm1_mc.obst2)){
hitObjects();
}
else if(mySprite.hitTestObject(rm1_mc.target_mc)){
hitTarg();
}
}

function hitObjects(){
mySprite.x ^= replacement.x;
replacement.x ^= mySprite.x;
mySprite.x ^= replacement.x;
mySprite.y ^= replacement.y;
replacement.y ^= mySprite.y;
mySprite.y ^= replacement.y;

stage.removeEventListener(MouseEvent.MOUSE_MOVE, followMouse);
removeChild(mySprite);
hitObj = true;
checkScore();
}

function hitTarg(){
mySprite.x ^= replacement.x;
replacement.x ^= mySprite.x;
mySprite.x ^= replacement.x;

mySprite.y ^= replacement.y;
replacement.y ^= mySprite.y;
mySprite.y ^= replacement.y;

stage.removeEventListener(MouseEvent.MOUSE_MOVE, followMouse);
removeEventListener(Event.ENTER_FRAME, showTime);
removeChild(mySprite);
hitTarget = true;
currLevel++;
checkScore();
}

function checkScore(){
if(hitObj){
score += obstScore;
heroLives--;
removeChild(life);
}
else if(hitTarget){
score += targetScore;
}
rm1_mc.scoreDisplay.text = String(score);
rm1_mc.livesDisplay.text = String(heroLives);
trackLives();
}
}
}

• It is difficult to tell what is being asked. Feb 6 '14 at 6:28

If you want to keep your MovieClip, then you could set the frame with:

livesDisplay.gotoAndStop(6-livesCounter);


Or you could reverse the frames, thus the first frame would show 5 health, the second would 4 and so on.

Edit:
Then as Arthur Wulf White said, you can loop your hp and draw the graphics.Though the following example will use a custom shapes (the ones you have drawn) and not programmatically drawn shapes.
Example:

var hpContainer:Sprite = new Sprite(); //this will contain the graphics
var newHeart:MovieClip;
for(var i:int = 0;i<HERO.health;i++){
newHeart = new HeartMovieClip();//The HeartMovieClip is the AS Linkage
//of a movieclip in your library.
newHeart.x = i*(50);//50 represents the width of your heart graphics, you can
//of the equation.
newHeart.y = 0;//The Y position of every heart will be 0. (So they will be in the
//top left corner.
}//endfor
...
function refreshHud():void{
while(hpContainer.numChildren>0) hpContainer.removeChildAt(0); //removes every child
//places the graphics again.
for(var i:int = 0;i<HERO.health;i++){
newHeart = new HeartMovieClip();//The HeartMovieClip is the AS Linkage
//of a movieclip in your library.
newHeart.x = i*(50);//50 represents the width of your heart graphics, you can
//of the equation.
newHeart.y = 0;//The Y position of every heart will be 0. (So they will be in the
//top left corner.
}//endfor
}//endfunction


Or another way is to draw all the hearts once, then set the visibility of each one on hud refresh.

• I don't want to use the Movie Clip with 5 frames though because it would be too hard on bandwidth. Feb 7 '14 at 1:28
• Thanks for the example code. It was hard for me to visualize how to set up the loop. I will give this a try. Feb 9 '14 at 15:49

You seem to need to read the ActionScript 3 bible. This is not the way to do it. A slightly more reasonable way to do this is:

1. Create a Shape instance once.
2. Loop livesCounter times.
3. use Graphics to drawCircle in the correct place ie (i * 20, 10, 5)
4. Now addChild the shape.
5. Upon death removeChild the shape.
6. Use Graphics clear on it.
7. Deduct 1 from the livesCounter => go to step 2
• Thanks for responding and sticking up for me. I am a little new to AS3 and this is my first Flash game so you're right, I could use some major help. I understand enough about how to add a graphic but could you explain more about how the loop would work? I'm not sure I clearly see how setting up numbers 2-4 would work. Feb 7 '14 at 1:13
• It draws a circle and then moves a step to the left, then it draws and moves another step to the left and the steps are noted by i. Feb 7 '14 at 11:04
• Thank you. I will try this out. If I have any complications I will come back here. Feb 9 '14 at 15:50
• I'm getting the lives to deduct when the hero runs into an obstacle, as shown by the livesDisplay dynamic text. But when it get to the checkScore() function it won't remove the lives. I added my code above. Feb 9 '14 at 19:48