Add autosizing texboxes, Convert to billboards

moonrabbit-kingdom · Jan 31, 2017 · 7ee2176 · 7ee2176
1 parent 3db9658
commit 7ee2176
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 67 deletions.
diff --git a/game/assets/js/entities/ui/TextBox.js b/game/assets/js/entities/ui/TextBox.js
@@ -1,8 +1,8 @@
-MoonMage.entities.ui.TextBox = function (game, text, x, y, width) {
+MoonMage.entities.ui.TextBox = function (game, text, x, y) {
     this.game = game;
     this.x = x;
     this.y = y;
-    this.width = width;
+    this.width = 0;
     this.text = text;
 
     this._setupBox();
@@ -11,84 +11,40 @@ MoonMage.entities.ui.TextBox = function (game, text, x, y, width) {
 
 MoonMage.entities.ui.TextBox.prototype = {
     _setupBox() {
+        var constants = {
+            X_PADDING: 30,
+            Y_PADDING: 5,
+        };
         var centerX = this.x;
         var centerY = this.y;
-
+        var style = { font: '28px Arial', fill: '#000000', align: 'left' };
+        var text = this.game.add.text(0, 0, this.text, style);
+
         var textBoxGraphics = this.game.add.graphics(0, 0);
         textBoxGraphics.beginFill(0xFFFFFF, 1);
         textBoxGraphics.lineStyle(2, 0x000000);
         textBoxGraphics.drawRoundedRect(
-            centerX,
-            centerY,
-            this.width,
-            60,
-            20
+            0,
+            0,
+            text._width + constants.X_PADDING * 2,
+            text._height + constants.Y_PADDING * 2,
+            2
         );
 
         var textBoxTexture = textBoxGraphics.generateTexture();
         textBoxGraphics.destroy();
 
         this.textBox = this.game.add.sprite(
-            centerX,
-            centerY,
+            this.x,
+            this.y,
             textBoxTexture
         );
 
-        var style = { font: '36px Arial', fill: '#000000', align: 'left' };
-        var text = this.game.add.text(- (this.width / 2.6), -20, this.text, style);
         this.textBox.addChild(text);
 
-        this.textBox.anchor.set(0.5, 0.5);
-    },
-
-    //_setupButton(x, y, text, callback) {
-    //    var button = this.game.add.button(x, y, null, callback, this);
-    //    button.input.useHandCursor = true;
-
-    //    var style = { font: '28px Arial', fill: '#000000', align: 'left' };
-    //    var text = this.game.add.text(0, 0, text, style);
-    //    button.addChild(text);
-
-    //    this.textBox.addChild(button);
-    //},
-
-    //isPaused: function() {
-    //    return this.pause.isPaused;
-    //},
-
-    //openPauseMenu: function() {
-    //    var tween = this.pause.tween;
-
-    //    if ((this.pop !== null && tween.isRunning) || this.pause.isPaused) {
-    //        return;
-    //    }
+        text.x += constants.X_PADDING;
+        text.y += constants.Y_PADDING + 3;
 
-    //    this.pause.isPaused = true;
-    //    this.pause.tween = this.game.add.tween(this.textBox.scale).to( { x: 1, y: 1 }, 100, Phaser.Easing.Linear.None, true);
-    //},
-
-    //closePauseMenu: function() {
-    //    var tween = this.pause.tween;
-
-    //    if (tween && tween.isRunning || !this.pause.isPaused) {
-    //        return;
-    //    }
-
-    //    this.pause.isPaused = false;
-    //    this.pause.tween = this.game.add.tween(this.textBox.scale).to( { x: 0, y: 0 }, 150, Phaser.Easing.Linear.None, true);
-    //},
-
-    //_exitPlay: function() {
-    //    this.game.world.setBounds(0, 0, MoonMage.config.viewport.width, MoonMage.config.viewport.height);
-    //    this.state.start('MainMenu');
-    //},
-
-    //_toggleFullScreen: function() {
-    //    if (this.game.scale.isFullScreen) {
-    //        this.game.scale.stopFullScreen();
-    //    }
-    //    else {
-    //        this.game.scale.startFullScreen(false);
-    //    }
-    //}
-}
+        //this.textBox.anchor.set(0.5, 0.5);
+    },
+}
diff --git a/game/assets/js/states/Level2.js b/game/assets/js/states/Level2.js
@@ -34,8 +34,9 @@ MoonMage.states.Level2.prototype = {
         this.player = new MoonMage.entities.player(this.game, this, 32, this.game.world.height - 300);
 
         // create text instructions
-        var firstText = new MoonMage.entities.ui.TextBox(this.game, "'↑' to jump", 500, 80, 250);
-        var secondText = new MoonMage.entities.ui.TextBox(this.game, "hold 'space' to invoke moon powers", 1500, 80, 700);
+        var firstText = new MoonMage.entities.ui.TextBox(this.game, "→", 80, 380);
+        var firstText = new MoonMage.entities.ui.TextBox(this.game, "↑", 535, 380);
+        var secondText = new MoonMage.entities.ui.TextBox(this.game, "'space'  &  ← ↑ →", 1300, 380);
 
         this.game.camera.follow(this.player.sprite, Phaser.Camera.FOLLOW_PLATFORMER);