Vue + Phaser 3 Webpack boilerplate

Phaser 3
1

I created a Webpack template that sets up a Vue project with Phaser 3 integration. It’s really minimal but can get people started.

Feel free to hit me with questions or suggestions.

https://github.com/Sun0fABeach/vue-phaser3

Cheers

2 Likes
2

Hey I was wondering if loading html using this.load.html then adding it to dom element works for you. Ive been using your boilerplate and I’m trying to load a generic html to display it and I’m having problems. I would appreciate any help that I can get.

I’m trying to replicate https://labs.phaser.io/view.html?src=src\game%20objects\dom%20element\form%20input.js on your boiler plate and I’m having difficulties.

Does the the boiler plate support the latest DOM + HTML? I checked the package.json and it’s 3.17… https://rexrainbow.github.io/phaser3-rex-notes/docs/site/domelement/

3

If you are providing the path to your HTML file as a string literal like in the Phaser example, it won’t work. When using Webpack, all assets have to be imported as modules. Like so:

import loginForm from 'path/to/html'

// in your preload method
this.load.html('nameform', loginForm);
4

Is there a html-loader I need to install with this boilerplate? When I try to import as a module it gives an error:

Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
> <!-- <html lang="en">
| <head>
|     <meta charset="UTF-8">

I tried using https://github.com/jantimon/html-webpack-plugin but I’m not entirely sure if this is the approach or how to configure the vue.config.js in the boilerplate to support html

thanks in advance

5

Right, you need to install the html-loader.

npm install --save-dev html-loader

You will also have to setup the loader by modifying the builtin Webpack config. So in your vue.config.js, add the following to the exported object:

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

Now you should be good to go!

6

Hey, so I forked your repo and tried loading it and the html-loader works but it has issues when I try to add dom it shows the black screen where it should exist but doesn’t add HTML to DOM element. I checked that the phaser version is 3.17. I’m wondering if you have any idea why that is. It’s definitely import/loading HTML and it doesn’t cause any errors. I wonder if it has anything to do with phaser or the boilerplate. I tried running the exact code but using a CDN(latest version of phaser) and a single file format where its not modularized on a server on XAMPP and it loads but it doesn’t load currently with the boilerplate.

Supposedly phaser 3.17 supports DOM https://phaser.io/news/2019/05/phaser-3170-released

and I checked the package.json and its the most up to date version

The repo I have testing html: https://github.com/TseIvan/vue-phaser3

Thanks for all the help.

7

Looks like using this Phaser DOM feature just doesn’t play well with the Webpack config that comes with projects scaffolded by the Vue-CLI. Which is kind of understandable, because you are supposed to build your HTML using Vue templates. Not much I can do about that, sorry. So it seems like you have to choose between having a Vue UI or inserting HTML directly into Phaser. No mixing allowed, unfortunately.