Login Form with Typescript

Phaser 3
1

Hello,
First time using Phaser, but I’m trying to implement a login form for my game project.
However, all my attempts have failed so far.
I followed the example on Phaser official page.

This is my scene code (lab.ts):

// You can write more code here

/* START OF COMPILED CODE */

import Phaser from "phaser";

export default class Lab extends Phaser.Scene {
  constructor() {
    super("Lab");

    /* START-USER-CTR-CODE */
    // Write your code here.
    /* END-USER-CTR-CODE */
  }

  editorCreate(): void {
    // bG_challenge1
    this.add.image(960, 540, "BG_challenge1");

	var element = this.add.dom(400, 600).createFromCache('nameform');
	
	var text = this.add.text(10, 10, 'Please login to play', { color: 'white', fontFamily: 'Arial', fontSize: '32px '});

    //element.setPerspective(800);

	element.addListener('click');

	element.on('click', function (this: any, event: any) {

        if (event.target.name === 'loginButton')
        {
            var inputUsername = this.getChildByName('username');
            var inputPassword = this.getChildByName('password');

            //  Have they entered anything?
            if (inputUsername.value !== '' && inputPassword.value !== '')
            {
                //  Turn off the click events
                this.removeListener('click');

                //  Tween the login form out
                this.scene.tweens.add({ targets: element.rotate3d, x: 1, w: 90, duration: 3000, ease: 'Power3' });

                this.scene.tweens.add({ targets: element, scaleX: 2, scaleY: 2, y: 700, duration: 3000, ease: 'Power3',
                    onComplete: function ()
                    {
                        element.setVisible(false);
                    }
                });

                //  Populate the text with whatever they typed in as the username!
                text.setText('Welcome ' + inputUsername.value);
            }
            else
            {
                //  Flash the prompt
                this.scene.tweens.add({ targets: text, alpha: 0.1, duration: 200, ease: 'Power3', yoyo: true });
            }
        }

    });
 
    this.tweens.add({
        targets: element,
        y: 300,
        duration: 3000,
        ease: 'Power3'
    });

    this.events.emit("scene-awake");
  }

  /* START-USER-CODE */

  // Write your code here

  preload() {
    this.load.html("nameform", "assets/loginForm.html");
  }

  create() {
    this.editorCreate();
  }

  /* END-USER-CODE */
}

/* END OF COMPILED CODE */

// You can write more code here

Right now, the scene loads with no form at all. There are no errors in the console so I’m stuck because I have no idea what the problem is.

Would really appreciate any help!

Thank you

2

:wave:

See the game config in the example.

3

Thank you for replying!

Do you mean this?
I have added “dom” to the config, but nothing changed.

const game = new Phaser.Game({
    width: 1920,
    height: 1080,
    backgroundColor: "#2f2f2f",
    scale: {
        mode: Phaser.Scale.ScaleModes.FIT,
        autoCenter: Phaser.Scale.Center.CENTER_BOTH
    },
    dom: {
        createContainer: true
    },
    scene: [Boot, Preload, Level, Lab]
});
4

Do you see “Please login to play?”

5

Yes, I do.

6

Find the game canvas in the DOM Inspector, then look for the login form.

domContainer

7

It is not showing up in the DOM inspector.

image
image1284×170 8.29 KB

8

There is no DOM container either.

I think you need to add parent to the game config.

9

Thank you so much!
Problem solved!!