Track hearts in a HUD

(Lozza JP) #1

Anyone got good ideas on doing this? Downloaded some game sources, looked at some other stuff on the internet. Mostly it would suggest having say 3 images of 1 x heart, 2 x heart, 3 x heart. And leave in the players update section tracking the health as an integer, and displaying the correct image depending on players health.

Seems a bit redundant, especially if you have more than 3 hearts. Displaying health as a number is obviously easy and very dynamically easy to change.

Another thought was a spritemap and toggling which frame to play, but then this is tricky if you have extra hearts acquired in game.

Currently my only thought is to hard code n number of heart images, hard code their x,y in the HUD and have the visible or not depending on current health?

(s corneil) #2

For what it is worth : I did as you plan to do (visible / invisible depending on health) Except that I was switching between red and grey colors (but same principle). I had 5 hearts in the HUD …
example game

(Darrin) #3

There are lots of ways to do this. Here is one implementation.

package

{

import net.flashpunk.Entity;
import net.flashpunk.graphics.Image;
import net.flashpunk.graphics.Graphiclist;
/**
 * ...
 * @author Darrin Adams
 */
public class Heart extends Entity
{
	[Embed(source = "../lib/heart_icon.png")] private var IMAGE:Class;
	private static var img1:Image;
	private static var img2:Image;
	private static var img3:Image;
	private static var img4:Image;
	private static var img5:Image;
	private static var gl:Graphiclist;
	public static var lives:int = 5;
	
	public function Heart() 
	{
		this.x = 10;
		this.y = 10;			
	
		img1 = new Image(IMAGE);
		img1.x = this.x;
		img1.y = this.y;
		
		img2 = new Image(IMAGE);
		img2.x = 70;
		img2.y = this.y;
		
		img3 = new Image(IMAGE);
		img3.x = 130;
		img3.y = this.y;
		
		img4 = new Image(IMAGE);
		img4.x = 190;
		img4.y = this.y;
		
		img5 = new Image(IMAGE);
		img5.x = 250;
		img5.y = this.y;
		
		
		gl = new Graphiclist();
		gl.add(img1);
		gl.add(img2);
		gl.add(img3);
		gl.add(img4);
		gl.add(img5);


		graphic = gl; 
		lives = 5; 
		
	}
	
	private static function setHearts():void {
		switch (lives) {
			case 1:
				gl.add(img1);					
				break;
			case 2:
				gl.add(img2);					
				break;
			case 3:
				gl.add(img3);					
				break;					
			case 4:
				gl.add(img4);					
				break;
			case 5:
				gl.add(img5);					
				break;
		}
	}
	public static function addLife():void {
		if (lives < 5){
			lives++;
			setHearts();
		}
	}
	public static function gameOver():Boolean {
		switch (lives) {
			case 1:
				gl.removeAll();
				lives = 5;
				return true;					
				break;
			case 2:
				gl.remove(img2);					
				break;
			case 3:
				gl.remove(img3);					
				break;					
			case 4:
				gl.remove(img4);					
				break;
			case 5:
				gl.remove(img5);					
				break;
		}
		
		lives--;
		return false;
	}
	
	
}

}