From 5c848fb46d930241a61feb60fc41b5bb5551d32e Mon Sep 17 00:00:00 2001 From: Justin Worthe Date: Mon, 8 Sep 2014 13:33:19 +0200 Subject: Added HUD with controller diagram and score --- assets/images/controller-diagram.svg | 195 +++++++++++++++++++++++++++++++++++ assets/images/hud-bg.svg | 63 +++++++++++ config.json | 4 +- game/main.js | 2 +- game/prefabs/hud.js | 48 +++++++++ game/states/play.js | 56 +++++----- game/states/preload.js | 3 + 7 files changed, 340 insertions(+), 31 deletions(-) create mode 100644 assets/images/controller-diagram.svg create mode 100644 assets/images/hud-bg.svg create mode 100644 game/prefabs/hud.js diff --git a/assets/images/controller-diagram.svg b/assets/images/controller-diagram.svg new file mode 100644 index 0000000..902bf05 --- /dev/null +++ b/assets/images/controller-diagram.svg @@ -0,0 +1,195 @@ + + + + + + + + + + image/svg+xml + + + + + + + + + + + + Move + + + + + + + + + + Droppoison + + + diff --git a/assets/images/hud-bg.svg b/assets/images/hud-bg.svg new file mode 100644 index 0000000..848e15c --- /dev/null +++ b/assets/images/hud-bg.svg @@ -0,0 +1,63 @@ + + + + + + + + + + image/svg+xml + + + + + + + + + diff --git a/config.json b/config.json index 0ac8700..51a4efa 100644 --- a/config.json +++ b/config.json @@ -1,5 +1,5 @@ { "projectName": "Interactive Pacbot", - "gameWidth": "1100", - "gameHeight": "950" + "gameWidth": "1750", + "gameHeight": "1100" } \ No newline at end of file diff --git a/game/main.js b/game/main.js index a44c949..e67845c 100644 --- a/game/main.js +++ b/game/main.js @@ -2,7 +2,7 @@ //global variables window.onload = function () { - var game = new Phaser.Game(1100, 950, Phaser.AUTO, 'interactive-pacbot'); + var game = new Phaser.Game(1750, 1100, Phaser.AUTO, 'interactive-pacbot'); var Orientation = require('./plugins/orientation'); game.orientation = new Orientation(); diff --git a/game/prefabs/hud.js b/game/prefabs/hud.js new file mode 100644 index 0000000..13f8f51 --- /dev/null +++ b/game/prefabs/hud.js @@ -0,0 +1,48 @@ +'use strict'; + +var Hud = function(game, player, x, y, scorefontKey) { + Phaser.Group.call(this, game); + this.x = x; + this.y = y; + this.player = player; + this.scale = {x: 0.02, y: 0.02}; + + + this.background = new Phaser.Sprite(this.game, 0, 0, 'hud-bg'); + this.add(this.background); + this.scoreText = new Phaser.BitmapText(this.game, 172, 10, scorefontKey, '0', 100); + this.add(this.scoreText); + + this.poisonIndicator = new Phaser.Sprite(this.game, 200, 150, 'poison-pill'); + //this.poisonIndicator.scale = {0.1, 0.1}; + this.poisonIndicator.anchor = {x:0.5, y:0.5}; + this.add(this.poisonIndicator); + + this.controllerDiagram = new Phaser.Sprite(this.game, 0, 300, 'controller-diagram'); + this.controllerDiagram.scale = {x: 0.5, y: 0.5}; + this.add(this.controllerDiagram); + + this.sendToBack(this.background); + + this.currentScore = 0; +}; + +Hud.prototype = Object.create(Phaser.Group.prototype); +Hud.prototype.constructor = Hud; + +Hud.prototype.update = function() { + if (this.currentScore !== this.player.score) { + this.currentScore = this.player.score; + this.scoreText.setText(this.player.score+''); + + var numberOfDigits = Math.floor(Math.log(this.currentScore)/Math.log(10))+1; + this.scoreText.x = 200 - numberOfDigits*30; + } + + if (this.poisonIndicator && !this.player.hasPoisonPill) { + this.poisonIndicator.destroy(); + this.poisonIndicator = null; + } +}; + +module.exports = Hud; diff --git a/game/states/play.js b/game/states/play.js index 26242b3..cf4bf62 100644 --- a/game/states/play.js +++ b/game/states/play.js @@ -5,6 +5,7 @@ var Pill = require('../prefabs/pill'); var BonusPill = require('../prefabs/bonusPill'); var Wall = require('../prefabs/wall'); var PoisonPill = require('../prefabs/poisonPill'); +var Hud = require('../prefabs/hud'); function Play() {} @@ -15,15 +16,18 @@ Play.prototype = { this.readLevelFile(); this.world.scale = {x:50, y:50}; - this.world.bounds = {x: -25, y:-25, width: this.game.width, height: this.game.height}; + this.world.bounds = {x: -425, y:-25, width: this.game.width, height: this.game.height}; this.world.camera.setBoundsToWorld(); this.setupPlayerControls(); - this.playerAScoreText = this.game.add.bitmapText(-0.1, -0.4, 'spaced-scorefont-a','0',2); - this.playerBScoreText = this.game.add.bitmapText(this.world.width/this.world.scale.x - 4.5, -0.4, 'spaced-scorefont-b','0',2); - this.gameWon = false; + + this.hudA = new Hud(this.game, this.playerA, this.gameWidth-0.5, -0.5, 'spaced-scorefont-a'); + this.hudB = new Hud(this.game, this.playerB, -8.5, -0.5, 'spaced-scorefont-b'); + //this.game.add.existing(this.hudA); + //this.game.add.existing(this.hudB); + }, update: function() { this.checkForPlayerPillCollisions(); @@ -170,9 +174,9 @@ Play.prototype = { var levelText = this.game.cache.getText('level'); var splitRows = levelText.split('\n'); - for (var x=0; x