Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse code

Add HUD.

  • Loading branch information...
commit ef737b5c5b8d78346eda30241ceb07f5beff1ffd 1 parent 2c454a1
Michael Kelly authored
1  .gitignore
... ... @@ -0,0 +1 @@
  1 +.DS_Store
BIN  img/font.png
BIN  img/hearts.png
BIN  img/hud.png
1  js/demo/demo.js
@@ -35,6 +35,7 @@ define(function(require) {
35 35 engine.addEntity(player);
36 36 engine.world.tilemap = maps.get('overworld');
37 37 engine.world.tilemap.setCell(1, 1);
  38 + engine.world.hud.moveToBottom();
38 39
39 40 document.querySelector('#game').appendChild(engine.canvas);
40 41 engine.start();
85 js/demo/hud.js
... ... @@ -0,0 +1,85 @@
  1 +define(function(require) {
  2 + var TiledGraphic = require('flux/graphics/tiled');
  3 + var Util = require('flux/util');
  4 +
  5 + var loader = require('demo/loader');
  6 +
  7 + loader.register('hearts', 'img/hearts.png', 'image');
  8 + loader.register('hud', 'img/hud.png', 'image');
  9 + loader.register('font', 'img/font.png', 'image');
  10 +
  11 + function HUD(world) {
  12 + this.x = 0;
  13 + this.y = 0;
  14 +
  15 + this.world = world;
  16 + this.font = new TiledGraphic(loader.get('font'), 8, 8);
  17 + this.hearts = new TiledGraphic(loader.get('hearts'), 8, 8);
  18 + this.hud_graphic = loader.get('hud');
  19 + }
  20 +
  21 + HUD.prototype = Object.create({
  22 + FULL_HEART: 0,
  23 + HALF_HEART: 1,
  24 + EMPTY_HEART: 2,
  25 + bg: '#FFFF8B',
  26 + render: function(ctx) {
  27 + ctx.save();
  28 + ctx.fillStyle = this.bg;
  29 + ctx.fillRect(this.x, this.y, 160, 16);
  30 + ctx.drawImage(this.hud_graphic, this.x, this.y);
  31 +
  32 + this.renderHealth(ctx, this.x + 104, this.y);
  33 + this.renderMoney(ctx, this.x + 80, this.y + 8);
  34 +
  35 + ctx.restore();
  36 + },
  37 +
  38 + renderHealth: function(ctx, x, y) {
  39 + var hx = x;
  40 + var hy = y;
  41 + var health = this.world.player.health;
  42 + var max_health = this.world.player.max_health;
  43 +
  44 + for (var k = 0; k < max_health; k++) {
  45 + // Determine which heart to draw
  46 + var tile = this.EMPTY_HEART;
  47 + if (k < health) {
  48 + if (k + 1 > health) {
  49 + tile = this.HALF_HEART;
  50 + } else {
  51 + tile = this.FULL_HEART;
  52 + }
  53 + }
  54 +
  55 + this.hearts.renderTile(ctx, tile, hx, hy);
  56 + hx += 8;
  57 +
  58 + // Second row
  59 + if (k === 7) {
  60 + hy += 8;
  61 + hx = x;
  62 + }
  63 + }
  64 + },
  65 +
  66 + renderMoney: function(ctx, x, y) {
  67 + // Zero pad money string
  68 + var money = '' + this.world.player.money;
  69 + var padding = '';
  70 +
  71 + for (var k = 3; k > money.length; k--) {
  72 + padding += '0';
  73 + }
  74 +
  75 + Util.renderText(ctx, padding + money, x, y, this.font, 24);
  76 + },
  77 +
  78 + moveToBottom: function() {
  79 + this.x = 0;
  80 + this.y = this.world.engine.camera.height;
  81 + }
  82 + });
  83 +
  84 + return HUD;
  85 +});
4 js/demo/player.js
@@ -24,6 +24,10 @@ define(function(require) {
24 24
25 25 this.direction = 'down';
26 26 this.walking = false;
  27 +
  28 + this.health = 2.5;
  29 + this.money = 10;
  30 + this.max_health = 3;
27 31 }
28 32
29 33 Player.prototype = Object.create(Entity.prototype);
6 js/demo/world.js
... ... @@ -1,12 +1,16 @@
1 1 define(function(require) {
2 2 var DefaultWorld = require('flux/worlds/default');
3 3
  4 + var HUD = require('demo/hud');
  5 +
4 6 function ZeldaWorld() {
5 7 DefaultWorld.call(this);
6 8
7 9 this._tilemap = null;
8 10 this._transition = null;
9 11 this.alpha = 0;
  12 +
  13 + this.hud = new HUD(this);
10 14 }
11 15
12 16 ZeldaWorld.prototype = Object.create(DefaultWorld.prototype);
@@ -33,6 +37,8 @@ define(function(require) {
33 37
34 38 DefaultWorld.prototype.render.call(this, ctx);
35 39
  40 + this.hud.render(ctx);
  41 +
36 42 // Fade
37 43 ctx.fillStyle = 'rgba(255,255,255,'+this.alpha+')';
38 44 ctx.fillRect(0, 0, this.engine.width, this.engine.height);
2  js/lib/flux
... ... @@ -1 +1 @@
1   -Subproject commit d3728f0331bda50e35ee6c93547986353ce8870f
  1 +Subproject commit a20b084250c62734e418c06ffa0fc043c5728a40

0 comments on commit ef737b5

Please sign in to comment.
Something went wrong with that request. Please try again.