Reproduce DOM element example

Phaser 3
1

I’m trying to reproduce the following example https://phaser.io/examples/v3/view/game-objects/dom-element/input-test, but I’m getting errors: GET http://localhost:8080/<style>.login{background: 404 (Not Found) and Uncaught TypeError: Cannot read property ‘style’ of undefined.

I’m using the following template: https://github.com/photonstorm/phaser3-project-template and installed html-loader and added:

{
    test: /\.html$/i,
    use: [ {
      loader: 'html-loader',
      options: {
        minimize: true
      }
    }],
  }

to the base.js file that’s used for the wepack config file. I made sure to import the assets and update accordingly instead of using the html address given in the example. I can’t seem to be able to reproduce the example so far because of these errors. Can someone suggest what I might be doing wrong? Thank you!

EDIT: Here’s the index.js code:

    import Phaser from "phaser";
import cards from "./assets/cards.png";
import cardsAtlas from "./assets/cards.json"
import form from "./assets/form.html";

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

var game = new Phaser.Game(config);

function preload ()
{
  this.load.html('form', form);
  this.load.atlas('cards', cards, cardsAtlas);
}

function create ()
{
  //  Create a stack of random cards

  var frames = this.textures.get('cards').getFrameNames();

  var x = 100;
  var y = 100;

  for (var i = 0; i < 64; i++)
  {
      var image = this.add.image(x, y, 'cards', Phaser.Math.RND.pick(frames)).setInteractive({ draggable: true });

      x += 4;
      y += 4;
  }

  this.input.on('dragstart', function (pointer, gameObject) {

      this.children.bringToTop(gameObject);

  }, this);

  this.input.on('drag', function (pointer, gameObject, dragX, dragY) {

      gameObject.x = dragX;
      gameObject.y = dragY;

  });

  var text = this.add.text(300, 10, 'Please enter your name', { color: 'white', fontSize: '20px '});

  var element = this.add.dom(400, 0).createFromCache('form');

  element.addListener('click');

  element.on('click', function (event) {

      if (event.target.name === 'playButton')
      {
          var inputText = this.getChildByName('nameField');

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

              //  Hide the login element
              this.setVisible(false);

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

  });

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

}
2

Hello, I guess a workaround could be rename the extension of that html pieces, e.g. form.html let’s say to form.tpl (tpl for template or whatever) and add that extension (tpl) to the webpack “file-loader” test as any other resource.

3

It’s don’t work with the html adress?
Try to load a simple html page first.
The problem seem to be in the style tag, remove all style tag in your html document.

4

In preload(), remove this.load.html(…).

In create(), change to

var element = this.add.dom(400, 0).createFromHTML(form);
5

This worked! Do you have an explanation for the need to skip the preload? I’d like to understand more why this works! But regardless, thank you so much! (It works with style tags in-line and even if the style if defined with tags as well.

6

If you’re using html-loader then you already “loaded” the document when you imported it, and form (the imported value) is a string.