Setting up Phaser

  1. Download the boilerplate code from here- ADD LINK and put it in your game directory.

  2. Open terminal and navigate to your project directory cd my_game

  3. Download all the node_modules from your boilerplate code npm install

  4. Paste the following code into the <head></head> of your index.html page

<head>
  ... rest of code ...
  <script src="//cdn.jsdelivr.net/npm/[email protected]/dist/phaser.js"></script>
</head>

Use http-server (while in the root of your project directory) in your terminal and copy the path that is provided into your browser to open your index.html file in Chrome. In the example below, I would go to: http://127.0.0.1:8080 or localhost:8080in Chrome. Make sure that your index.html page is appearing properly before moving on to the next step.

Paste the following code into your game.js file.

var config = {
        type: Phaser.AUTO,
        width: 800,
        height: 600,
        parent: 'game',
        physics: {
            default: 'arcade',
            arcade: {
                gravity: { y: 200 }
            }
        },
        scene: {
            preload: preload,
            create: create
        }
    };

    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);
    }
}

Just like adding a red background to test that our CSS is connected, we want to make sure that Phaser has been connected properly as well. If everything went according to plan, you should see something like the following in your browser (note the URL):

Once you've confirmed that Phaser is running as expected, delete all the code from game.js, and move on to the Main Project to get started on building out your first Phaser game!

results matching ""

    No results matching ""