Skip to content
FLAVIO COPES
flaviocopes.com
2026

Setting up a project to build a JavaScript game with Phaser

By

Learn how to set up a modern Phaser game with npm and Vite, create a scene, run the local development server, and build the game for production.

~~~

Phaser is an open source framework for building 2D games with JavaScript or TypeScript.

It renders through WebGL or Canvas in the browser. You can publish the result as a web game or package it for other platforms with additional tools.

This tutorial creates a small Phaser project with npm and Vite. Phaser also provides an official interactive project generator if you prefer a ready-made template.

Create the project

Create a directory and install Phaser plus Vite:

mkdir phaser-game
cd phaser-game
npm init -y
npm install phaser
npm install --save-dev vite

You can instead choose an official template with:

npm create @phaserjs/game@latest

The generator offers current JavaScript, TypeScript, framework, and bundler combinations. See Phaser’s installation guide and project templates.

Add development scripts

Update the scripts field in package.json:

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  }
}

Vite provides the local development server, browser reloads, module bundling, and the production build. There is no need to install Parcel or BrowserSync globally.

Create the HTML page

Create index.html:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Phaser game</title>
  </head>
  <body>
    <div id="game"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

Phaser will add its canvas inside the #game element.

Create a scene

Create src/main.js:

import Phaser from 'phaser'

class MainScene extends Phaser.Scene {
  constructor() {
    super('main')
  }

  create() {
    this.add
      .text(400, 250, 'Hello, Phaser!', {
        color: '#ffffff',
        fontFamily: 'sans-serif',
        fontSize: '42px'
      })
      .setOrigin(0.5)

    const player = this.add.rectangle(400, 350, 80, 80, 0x00aaff)

    this.tweens.add({
      targets: player,
      angle: 360,
      duration: 2000,
      repeat: -1
    })
  }
}

const config = {
  type: Phaser.AUTO,
  parent: 'game',
  width: 800,
  height: 600,
  backgroundColor: '#111827',
  scene: MainScene
}

new Phaser.Game(config)

Phaser.Game creates the renderer and starts the game loop.

Phaser.AUTO tries WebGL and falls back to Canvas when needed. The scene’s create() method runs after the scene is ready, so it is a good place to create initial game objects.

The Phaser Game guide explains the configuration object and lifecycle.

Run the game

Start the development server:

npm run dev

Open the local URL printed by Vite.

Do not open index.html directly with a file:// URL. Games commonly load modules, images, audio, and data through browser APIs that expect an HTTP server.

Add local assets

Put game files under public/assets/. For example:

public/
  assets/
    logo.png

Load them in a scene’s preload() method and use them in create():

class MainScene extends Phaser.Scene {
  preload() {
    this.load.image('logo', '/assets/logo.png')
  }

  create() {
    this.add.image(400, 300, 'logo')
  }
}

Asset keys such as logo identify loaded resources inside the game. Use local assets or a reliable host you control rather than depending on an examples server at runtime.

Phaser’s first game tutorial introduces loading, scenes, sprites, input, and Arcade Physics.

Build for production

Create an optimized build:

npm run build

Vite writes the result to dist/.

Test that build locally:

npm run preview

Deploy the generated directory to a static host. If the game will live under a subdirectory instead of the domain root, configure Vite’s base path before building.

This is the introduction to the Phaser series. See the other Phaser posts.

Tagged: Phaser · All topics
~~~

Related posts about phaser: