How to embed phaser3 game into html

Question

I'm competely new to node.js and phaser3. I followed this tutorial yesterday, so far so good. How do I embed the client game into an html file? The webpack that the phaser3 project template uses, simply takes the index.html that comes with the project template and references main.js (which is part of the webpack I guess):

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
<script type="text/javascript" src="main.js"></script></body>
</html>

The phaser3 tutorial simply puts the phaser config and the game Scene object into the same html file. I do not like this solution, I'm sure there is way to put all the scenes into separate files. But how?

If I do following (modified phaser 3 project template):

src/scenes/MaGame.js

import Phaser from 'phaser';
import logoImg from '../assets/logo.png';

export default class MyGame extends Phaser.Scene {
    constructor() {
        super();
    }

    preload() {
        this.load.image('logo', logoImg);
    }

    create() {
        const logo = this.add.image(400, 150, 'logo');

        this.tweens.add({
            targets: logo,
            y: 450,
            duration: 2000,
            ease: "Power2",
            yoyo: true,
            loop: -1
        });
    }
}

game.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>my title</title>
    <script src="//cdn.jsdelivr.net/npm/phaser@3.11.0/dist/phaser.js"></script>
    <script src="src/scenes/MyGame.js"></script>
</head>
<body>


    <script type="text/javascript">
        const config = {
            type: Phaser.AUTO,
            parent: 'phaser-example',
            width: 800,
            height: 600,
            scene: MyGame
        };

        const game = new Phaser.Game(config);

    </script>
</body>
</html>

I get the following error when I open/navigate to game.html (in the developer console):

Uncaught SyntaxError: Cannot use import statement outside a module - MyGame.js:1

Uncaught ReferenceError: MyGame is not defined at game.html:20

This does not help: if I define it as a module in the package.json or rename the file to.mjs, I can not launch it with npm start.

So the question: how do I properly embed the game into an html file? For dev purposes it is ok to launch with npm, but how can I later deploy the game to a webserver? I can not seem to find any useful information on this, however this is surely a very basic topic.

Answer 1

What I think you need is a module bundler. Look into Webpack or Parcel , I'd recommend Parcel since it needs no configuration and easy to use.

If you chose to use Parcel, you could just use your main html file as an entry point like so: parcel index.html

How to embed phaser3 game into html

Question

1 answers

solution1
1 ACCPTED 2020-12-26 16:22:41

How to embed phaser3 game into html

Question

1 answers

solution1 1 ACCPTED 2020-12-26 16:22:41

solution1
1 ACCPTED 2020-12-26 16:22:41