morganpage.tech (3).png

Phaser 3 Quick Tips - Get Started Quickly!

How to get started quickly with a new phaser 3 project

How to get started quickly with a new phaser 3 project.png

How to get started quickly with a new phaser 3 project

Procrastinating about starting up a Phaser project? Must install node, must download starter project... nah... Create 2 files, index.html & MainScene.js, paste in the html and js code below. Done!

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Phaser Quick Start</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/phaser/3.23.0/phaser.min.js"></script>
  </head>
  <body>
    <script type="module">
      import MainScene from "./MainScene.js";
      var config = {
        type: Phaser.AUTO,
        width: 512,
        height: 512,
        backgroundColor: '#999',
        physics: {
          default: "arcade",
          arcade: {
            gravity: { y: 200 },
          },
        },
        scene: [MainScene],
      };
      var game = new Phaser.Game(config);
    </script>
  </body>
</html>

MainScene.js

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

  create(){
    let graphics = this.add.graphics();
    graphics.lineStyle(8, 0xff0000);
    graphics.strokeCircle(256, 256, 128);
  }
}