Experience bar help

(Nate ) #1

Hey guys, I have done tons of health or experience bars in some example games and projects but they have always been done horizontally… What I am currently trying to achieve is an experience bar that will sit on the left corner of the screen and as the player gains experience I would like it to move upwards.

This is how I typically handle a health bar, I think I need to do something like this but in reverse and portrait not landscape style:

package entities
{
	import net.flashpunk.Entity;
	import net.flashpunk.FP;
	import net.flashpunk.graphics.Image;
	import entities.*
	
	public class HealthBar extends Entity
	{
		public var bar:Image = Image.createRect(200, 32, 0xFF0000);
		
		public function HealthBar() 
		{
			super(0, 0, bar);
			bar.clipRect.width = 200;
			(bar as Image).alpha = 0.7;
			
			layer = 0;
		}
		
		override public function update():void
		{
			bar.clipRect.width = thePlayer.health;
			bar.clear();
			bar.updateBuffer();
			
			bar.x = FP.camera.x;
			bar.y = FP.camera.y;
		}
		
	}

}

Thanks for any input guys!

(Zachary Lewis) #2

You mentioned you’d done them horizontally in the past, and now you want them vertical. Have you tried swapping bar.clipRect.width for bar.clipRect.height? How did that work out?

(Nate ) #3

Yes the code I provided is horizontal, it just behaves odd I think because I was increasing the experience the wrong direction and I had to handle to the Y value of the bar because if not it would fly off the screen, because I wanted it to move up. I’m not sure how to explain it but it seemed slightly more difficult to make it work vertically.