How to work simply with module

Phaser 3
1

Hi,

When is use Three.js with modules, no problems. But with Phaser it seems that it’s not the the same logical…Why ? Could you explain what i’m doing wrong and the solution ? (I would like to use the simplest way like in three.js…not with webpack or parcel…)

Here a basic example, my error is this (see my 01.png)

01
011224×409 21.9 KB

index.html

<!DOCTYPE html>
<html>
<head>
	<script type=module src=main.js></script>
</head>
</html>

main.js

import * as Phaser from "https://cdn.jsdelivr.net/npm/phaser@3.15.1/dist/phaser.js"
var config = {
	type: Phaser.AUTO,
	width: 800,
	height: 600,
	physics: {
		default: 'arcade',
		arcade: {
			gravity: {
				y: 200
			}
		}
	},
	scene: {
		preload: preload,
		create: create
	}
};
console.log('ok')

var game = new Phaser.Game(config);

function preload() {
	this.load.setBaseURL('http://labs.phaser.io');

	this.load.image('sky', 'assets/skies/space3.png');
	this.load.image('logo', 'assets/sprites/phaser3-logo.png');
	this.load.image('red', 'assets/particles/red.png');
}

function create() {
	this.add.image(400, 300, 'sky');

	var particles = this.add.particles('red');

	var emitter = particles.createEmitter({
		speed: 100,
		scale: {
			start: 1,
			end: 0
		},
		blendMode: 'ADD'
	});

	var logo = this.physics.add.image(400, 100, 'logo');

	logo.setVelocity(100, 200);
	logo.setBounce(1, 1);
	logo.setCollideWorldBounds(true);

	emitter.startFollow(logo);
}
2

Nobody ???

3

Phaser 3 doesn’t export an ES module.

4

ohhhhhh…

5

Modules work fine for me… Here’s the example from the Phaser NPM page… note that I am using webpack to build the main.js and serving with node server…

templates/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Phaser Testing</title>
    <style>
        html, body {
            overflow: hidden;
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
        #renderCanvas {
            width: 100%;
            height: 100%;
            touch-action: none;
        }
    </style>
    <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
    <script src="main.js"></script>
</body>
</html>

src/index.js

import {
    Game, Scene, AUTO,
} from 'phaser';
// import * as phaser from 'phaser';

class Example extends Scene {
    constructor() {
        super();
        this.sky = 'assets/skies/space3.png';
        this.logo = 'assets/sprites/phaser3-logo.png';
        this.red = 'assets/particles/red.png';
    }

    preload() {
        console.log('running preload()');
        this.load.setBaseURL('https://labs.phaser.io');
        this.load.image('sky', this.sky);
        this.load.image('logo', this.logo);
        this.load.image('red', this.red);
    }

    create() {
        console.log('running create()');
        this.add.image(400, 300, 'sky');

        const particles = this.add.particles(0, 0, 'red', {
            speed: 100,
            scale: { start: 1, end: 0 },
            blendMode: 'ADD',
        });

        const logo = this.physics.add.image(400, 100, 'logo');

        logo.setVelocity(100, 200);
        logo.setBounce(1, 1);
        logo.setCollideWorldBounds(true);

        particles.startFollow(logo);
    }

    update(time, delta) {
        super.update(time, delta);
        console.log('updating');
    }
}

function main() {
    const config = {
        type: AUTO,
        width: 800,
        height: 600,
        physics: {
            default: 'arcade',
            arcade: {
                gravity: { y: 200 },
            },
        },
        scene: Example,
    };

    // eslint-disable-next-line no-unused-vars
    const game = new Game(config);
}

main();
6