Add HUD.

.gitignore

@@ -0,0 +1 @@
+.DS_Store

js/demo/demo.js

@@ -35,6 +35,7 @@ define(function(require) {
         engine.addEntity(player);
         engine.world.tilemap = maps.get('overworld');
         engine.world.tilemap.setCell(1, 1);
+        engine.world.hud.moveToBottom();
 
         document.querySelector('#game').appendChild(engine.canvas);
         engine.start();

js/demo/hud.js

@@ -0,0 +1,85 @@
+define(function(require) {
+    var TiledGraphic = require('flux/graphics/tiled');
+    var Util = require('flux/util');
+
+    var loader = require('demo/loader');
+
+    loader.register('hearts', 'img/hearts.png', 'image');
+    loader.register('hud', 'img/hud.png', 'image');
+    loader.register('font', 'img/font.png', 'image');
+
+    function HUD(world) {
+        this.x = 0;
+        this.y = 0;
+
+        this.world = world;
+        this.font = new TiledGraphic(loader.get('font'), 8, 8);
+        this.hearts = new TiledGraphic(loader.get('hearts'), 8, 8);
+        this.hud_graphic = loader.get('hud');
+    }
+
+    HUD.prototype = Object.create({
+        FULL_HEART: 0,
+        HALF_HEART: 1,
+        EMPTY_HEART: 2,
+        bg: '#FFFF8B',
+        render: function(ctx) {
+            ctx.save();
+            ctx.fillStyle = this.bg;
+            ctx.fillRect(this.x, this.y, 160, 16);
+            ctx.drawImage(this.hud_graphic, this.x, this.y);
+
+            this.renderHealth(ctx, this.x + 104, this.y);
+            this.renderMoney(ctx, this.x + 80, this.y + 8);
+
+            ctx.restore();
+        },
+
+        renderHealth: function(ctx, x, y) {
+            var hx = x;
+            var hy = y;
+            var health = this.world.player.health;
+            var max_health = this.world.player.max_health;
+
+            for (var k = 0; k < max_health; k++) {
+                // Determine which heart to draw
+                var tile = this.EMPTY_HEART;
+                if (k < health) {
+                    if (k + 1 > health) {
+                        tile = this.HALF_HEART;
+                    } else {
+                        tile = this.FULL_HEART;
+                    }
+                }
+
+                this.hearts.renderTile(ctx, tile, hx, hy);
+                hx += 8;
+
+                // Second row
+                if (k === 7) {
+                    hy += 8;
+                    hx = x;
+                }
+            }
+        },
+
+        renderMoney: function(ctx, x, y) {
+            // Zero pad money string
+            var money = '' + this.world.player.money;
+            var padding = '';
+
+            for (var k = 3; k > money.length; k--) {
+                padding += '0';
+            }
+
+            Util.renderText(ctx, padding + money, x, y, this.font, 24);
+        },
+
+        moveToBottom: function() {
+            this.x = 0;
+            this.y = this.world.engine.camera.height;
+        }
+    });
+
+    return HUD;
+});

js/demo/player.js

@@ -24,6 +24,10 @@ define(function(require) {
 
         this.direction = 'down';
         this.walking = false;
+
+        this.health = 2.5;
+        this.money = 10;
+        this.max_health = 3;
     }
 
     Player.prototype = Object.create(Entity.prototype);

js/demo/world.js

@@ -1,12 +1,16 @@
 define(function(require) {
     var DefaultWorld = require('flux/worlds/default');
 
+    var HUD = require('demo/hud');
+
     function ZeldaWorld() {
         DefaultWorld.call(this);
 
         this._tilemap = null;
         this._transition = null;
         this.alpha = 0;
+
+        this.hud = new HUD(this);
     }
 
     ZeldaWorld.prototype = Object.create(DefaultWorld.prototype);
@@ -33,6 +37,8 @@ define(function(require) {
 
         DefaultWorld.prototype.render.call(this, ctx);
 
+        this.hud.render(ctx);
+
         // Fade
         ctx.fillStyle = 'rgba(255,255,255,'+this.alpha+')';
         ctx.fillRect(0, 0, this.engine.width, this.engine.height);