Starting a Phaser3 Game

Here’s how to get started building any Phaser3 game (SkilStak) style). We take advantage of every modern JavaScript thing we can and shun the use of function and var in our JavaScript.. This makes our way of doing it slightly different than the many examples you will see out there, but also a lot easier and more fun to code.

💡 This approach also sets you up well to turn your game into an actual app with Electron or PWA later.

Step by Step

Create a directory for your game in a GitLab project repo.

Change into your game directory, so for a directory game I would do this, but change to your needs.

cd game

If you are using VSCode you will want to open it now and reset it to the current directory.

code -r .

Now we need to get phaser.js. We can always replace it with the minified phaser.min.js later when releasing the game.

curl -O https://cdn.jsdelivr.net/npm/phaser@3.17.0/dist/phaser.js

Create an index.html page with the touch command.

As your game grows you may need more than just the game.js file, but it is good for a start.

First we have the index.html page:

touch index.html

Now add the following. It’s better to type it it. But you can copy and paste it just by clicking on it if you really want or if you already know how and just want to save time.

<!doctype html>
<html>
  <head>
    <style>
        html, body {
            height: 100%;
            margin: 0;
            background: #000000;
        }
    </style>
  </head>
  <body>
    <script src='phaser.js'></script>
    <script src='game.js'></script>
  </body>
</html>

And all we need is the starter game.js file now:

touch game.js

Here’s enough to get you going. This is the minimum you will need.

let k

class Main extends Phaser.Scene {

  preload() {
  }

  create() {
    k = this.input.keyboard.addKeys('LEFT,RIGHT,SPACE,UP,DOWN,W,A,S,D')
  }

  update() {
  }

}

const game = new Phaser.Game({
  scene: Main,
  scale: Phaser.Scale.FIT,
  autoCenter: Phaser.Scale.CENTER_BOTH,
})