How to setup Phaser.io to make games for website?

3 min readOct 16, 2023

Phaser

Phaser is a fun, free and fast 2D game framework for making HTML5 games for desktop and mobile web browsers, supporting Canvas and WebGL rendering.

Vite

Vite is a frontend tool that is used for building fast and optimized web applications. It uses a modern build system and a fast development server to provide a streamlined and efficient development experience.

How to setup it?

After getting the knowledge of these techs, we can go on setup for any game for website. Phaser is very popular and good framework that we can use to make the games. It provides us many features like Responsive, Camera, Sounds etc.

Create the Vite Project

To create the vite project, we need to run the following command using npm or yarn where we want to make the folder for that project.

npm create vite@latest my-game-project

Install the Phaser

After creating the project using vite, we need to go inside that folder using cd command, and then need to install the phaser package inside it using npm or yarn.

npm install phaser

Folder and Files Structure

We have done the setup almost now need to config the phaser inside our project for that we need to set sturcture of our project first then write code in the files. Structure will look like this,

Sample Code

Her is sample code for a starting developing your game, you can paste this code and start working on project. Below is index.html, main.js, config.js and gameScene.js to start working.

<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <link rel="icon" type="image/svg+xml" href="/logo.png" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Puzzle Frenzy</title>
  <style>
    * {
      padding: 0px;
      margin: 0px;
      box-sizing: border-box;
    }

    body {
      width: 100%;
      height: 100vh;
      display: flex;
      background-color: white;
      overflow: hidden;
    }

    canvas {
      display: block;
      width: 100%;
      height: 100%;
    }
  </style>
</head>

<body>
  <script type="module" src="/src/main.js"></script>
</body>

</html>

import Phaser from "phaser";
import GameScene from "./scenes/gameScene";



const config = {
    type: Phaser.WEBGL,
    width: 1280,
    height: 760,
    backgroundColor: "#5230af",
    parent: "body",
    scale: {
        mode: Phaser.Scale.FIT,
        autoCenter: Phaser.Scale.CENTER_BOTH
    },
    dom: {
        createContainer: true
    },
    physics: {
        default: "arcade",
        arcade: {
            debug: true
        }
    },
    scene: [GameScene],
};

export default config;

import Phaser from "phaser";
import config from "./config";


const game = new Phaser.Game(config);

import Phaser from "phaser";


class GameScene extends Phaser.Scene {
    constructor() {
        super("GameScene");

        this.player = null;
    }

    preload() {
        this.load.image("bg", "/images/bg.png");
        this.load.image("player", "/images/player.png");
    }

    create() {
        const bg = this.add.image(0, 0, "bg").setOrigin(0, 0).setDisplaySize(this.game.config.width, this.game.config.height);
        this.player = this.add.image(0, 0, "player").setOrigin(0, 0).setDisplaySize(100, 100);
    }

    update() {
        this.player.x += 1;
    }
}

export default GameScene;

That’s all the code to start working, Hopefully that will helpful for you to start making game.

Conclusion

Phaser is a framework that use to make website games and we can setup it using vite for it. Vite is used to make the build of project and manage it’s files for the frontend. All setps are mentioned above to setup the project correctly with code. It can save your time. Follow me for more this type of atricles. Happy Coding!!