Permalink
Browse files

Add HUD.

  • Loading branch information...
1 parent 2c454a1 commit ef737b5c5b8d78346eda30241ceb07f5beff1ffd @Osmose committed May 10, 2012
Showing with 98 additions and 1 deletion.
  1. +1 −0 .gitignore
  2. BIN img/font.png
  3. BIN img/hearts.png
  4. BIN img/hud.png
  5. +1 −0 js/demo/demo.js
  6. +85 −0 js/demo/hud.js
  7. +4 −0 js/demo/player.js
  8. +6 −0 js/demo/world.js
  9. +1 −1 js/lib/flux
View
@@ -0,0 +1 @@
+.DS_Store
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
@@ -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();
View
@@ -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;
+});
View
@@ -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);
View
@@ -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);
Submodule flux updated 1 files
+25 −0 flux/util.js

0 comments on commit ef737b5

Please sign in to comment.