Example Code breaks in Scene Class

Hey guys, I am trying to better understand this example code for entering a name with an on screen keyboard and I am trying to understand why it works in the global scope but stops working when you put it into a class that extends Phaser.Scene.

Here is a link to the example: Phaser - Examples - Enter Name

Otherwise the code is below & the example put into a class(which isn’t working) is under the example code.

var config = {
    type: Phaser.AUTO,
    parent: 'phaser-example',
    width: 800,
    height: 600,
    pixelArt: true,
    scene: {
        preload: preload,
        create: create
    }
};

var game = new Phaser.Game(config);

function preload() 
{
    this.load.image('block', 'assets/input/block.png');
    this.load.image('rub', 'assets/input/rub.png');
    this.load.image('end', 'assets/input/end.png');
    this.load.bitmapFont('arcade', 'assets/fonts/bitmap/arcade.png', 'assets/fonts/bitmap/arcade.xml');
}

function create ()
{
    var chars = [
        [ 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J' ],
        [ 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T' ],
        [ 'U', 'V', 'W', 'X', 'Y', 'Z', '.', '-', '<', '>' ]
    ];
    var cursor = { x: 0, y: 0 };
    var name = '';

    var input = this.add.bitmapText(130, 50, 'arcade', 'ABCDEFGHIJ\n\nKLMNOPQRST\n\nUVWXYZ.-').setLetterSpacing(20);

    input.setInteractive();

    var rub = this.add.image(input.x + 430, input.y + 148, 'rub');
    var end = this.add.image(input.x + 482, input.y + 148, 'end');

    var block = this.add.image(input.x - 10, input.y - 2, 'block').setOrigin(0);

    var legend = this.add.bitmapText(80, 260, 'arcade', 'RANK  SCORE   NAME').setTint(0xff00ff);

    this.add.bitmapText(80, 310, 'arcade', '1ST   50000    ').setTint(0xff0000);
    this.add.bitmapText(80, 360, 'arcade', '2ND   40000    ICE').setTint(0xff8200);
    this.add.bitmapText(80, 410, 'arcade', '3RD   30000    GOS').setTint(0xffff00);
    this.add.bitmapText(80, 460, 'arcade', '4TH   20000    HRE').setTint(0x00ff00);
    this.add.bitmapText(80, 510, 'arcade', '5TH   10000    ETE').setTint(0x00bfff);

    var playerText = this.add.bitmapText(560, 310, 'arcade', name).setTint(0xff0000);

    this.input.keyboard.on('keyup', function (event) {

        if (event.keyCode === 37)
        {
            //  left
            if (cursor.x > 0)
            {
                cursor.x--;
                block.x -= 52;
            }
        }
        else if (event.keyCode === 39)
        {
            //  right
            if (cursor.x < 9)
            {
                cursor.x++;
                block.x += 52;
            }
        }
        else if (event.keyCode === 38)
        {
            //  up
            if (cursor.y > 0)
            {
                cursor.y--;
                block.y -= 64;
            }
        }
        else if (event.keyCode === 40)
        {
            //  down
            if (cursor.y < 2)
            {
                cursor.y++;
                block.y += 64;
            }
        }
        else if (event.keyCode === 13 || event.keyCode === 32)
        {
            //  Enter or Space
            if (cursor.x === 9 && cursor.y === 2 && name.length > 0)
            {
                //  Submit
            }
            else if (cursor.x === 8 && cursor.y === 2 && name.length > 0)
            {
                //  Rub
                name = name.substr(0, name.length - 1);

                playerText.text = name;
            }
            else if (name.length < 3)
            {
                //  Add
                name = name.concat(chars[cursor.y][cursor.x]);

                playerText.text = name;
            }
        }

    });

    input.on('pointermove', function (pointer, x, y) {

        var cx = Phaser.Math.Snap.Floor(x, 52, 0, true);
        var cy = Phaser.Math.Snap.Floor(y, 64, 0, true);
        var char = chars[cy][cx];

        cursor.x = cx;
        cursor.y = cy;

        block.x = input.x - 10 + (cx * 52);
        block.y = input.y - 2 + (cy * 64);

    }, this);

    input.on('pointerup', function (pointer, x, y) {

        var cx = Phaser.Math.Snap.Floor(x, 52, 0, true);
        var cy = Phaser.Math.Snap.Floor(y, 64, 0, true);
        var char = chars[cy][cx];

        cursor.x = cx;
        cursor.y = cy;

        block.x = input.x - 10 + (cx * 52);
        block.y = input.y - 2 + (cy * 64);

        if (char === '<' && name.length > 0)
        {
            //  Rub
            name = name.substr(0, name.length - 1);

            playerText.text = name;
        }
        else if (char === '>' && name.length > 0)
        {
            //  Submit
        }
        else if (name.length < 3)
        {
            //  Add
            name = name.concat(char);

            playerText.text = name;
        }

    }, this);

}

wrapped with class that extends Phaser.Scene:

import Phaser from "phaser";
import arcadePNG from "./assets/bitmap/arcade.png";
import arcadeXML from "./assets/bitmap/arcade.xml";
import block from "./assets/input/block.png";
import rub from "./assets/input/rub.png";
import end from "./assets/input/end.png";
var config = {
  type: Phaser.AUTO,
  parent: "phaser-example",
  width: 800,
  height: 600,
  pixelArt: true,
  scene: NewGame,
};

var game = new Phaser.Game(config);
class NewGame extends Phaser.Scene {
  constructor() {
    super("NewGame");
  }
  preload() {
    this.load.image("block", block);
    this.load.image("rub", rub);
    this.load.image("end", end);
    this.load.bitmapFont("arcade", arcadePNG, arcadeXML);
  }

  create() {
    var chars = [
      ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J"],
      ["K", "L", "M", "N", "O", "P", "Q", "R", "S", "T"],
      ["U", "V", "W", "X", "Y", "Z", ".", "-", "<", ">"],
    ];
    var cursor = { x: 0, y: 0 };
    var name = "";

    var input = this.add
      .bitmapText(130, 50, "arcade", "ABCDEFGHIJ\n\nKLMNOPQRST\n\nUVWXYZ.-")
      .setLetterSpacing(20)
      .setAlpha(0.0);

    input.setInteractive();

    var rub = this.add.image(input.x + 430, input.y + 148, "rub").setAlpha(0.0);
    var end = this.add.image(input.x + 482, input.y + 148, "end").setAlpha(0.0);

    var block = this.add
      .image(input.x - 10, input.y - 2, "block")
      .setOrigin(0)
      .setAlpha(0.0);

    var legend = this.add
      .bitmapText(80, 260, "arcade", "NAME")
      .setTint(0xff00ff)
      .setAlpha(0.0);

    const enterName = () => {
      input.setAlpha(1.0);
      rub.setAlpha(1.0);
      block.setAlpha(1.0);
      legend.setAlpha(1.0);
    };

    var playerText = this.add
      .bitmapText(560, 310, "arcade", name)
      .setTint(0xff0000);

    this.input.keyboard.on("keyup", function (event) {
      if (event.keyCode === 37) {
        //  left
        if (cursor.x > 0) {
          cursor.x--;
          block.x -= 52;
        }
      } else if (event.keyCode === 39) {
        //  right
        if (cursor.x < 9) {
          cursor.x++;
          block.x += 52;
        }
      } else if (event.keyCode === 38) {
        //  up
        if (cursor.y > 0) {
          cursor.y--;
          block.y -= 64;
        }
      } else if (event.keyCode === 40) {
        //  down
        if (cursor.y < 2) {
          cursor.y++;
          block.y += 64;
        }
      } else if (event.keyCode === 13 || event.keyCode === 32) {
        enterName();
        //  Enter or Space
        if (cursor.x === 9 && cursor.y === 2 && name.length > 0) {
          //  Submit
        } else if (cursor.x === 8 && cursor.y === 2 && name.length > 0) {
          //  Rub
          name = name.substr(0, name.length - 1);

          playerText.text = name;
        } else if (name.length < 3) {
          //  Add
          name = name.concat(chars[cursor.y][cursor.x]);

          playerText.text = name;
        }
      }
    });

    input.on(
      "pointermove",
      function (pointer, x, y) {
        var cx = Phaser.Math.Snap.Floor(x, 52, 0, true);
        var cy = Phaser.Math.Snap.Floor(y, 64, 0, true);
        var char = chars[cy][cx];

        cursor.x = cx;
        cursor.y = cy;

        block.x = input.x - 10 + cx * 52;
        block.y = input.y - 2 + cy * 64;
      },
      this
    );

    input.on(
      "pointerup",
      function (pointer, x, y) {
        var cx = Phaser.Math.Snap.Floor(x, 52, 0, true);
        var cy = Phaser.Math.Snap.Floor(y, 64, 0, true);
        var char = chars[cy][cx];

        cursor.x = cx;
        cursor.y = cy;

        block.x = input.x - 10 + cx * 52;
        block.y = input.y - 2 + cy * 64;

        if (char === "<" && name.length > 0) {
          //  Rub
          name = name.substr(0, name.length - 1);

          playerText.text = name;
        } else if (char === ">" && name.length > 0) {
          //  Submit
        } else if (name.length < 3) {
          //  Add
          name = name.concat(char);

          playerText.text = name;
        }
      },
      this
    );
  }
}

Put the config at the end (after the class definition).

1 Like

Wow, super dumb of me. Totally turned my brain off. Thank you so much Milton.