Creating Your First Project

In this chapter, we'll be setting up a PhaserJS project using Vite, which will give us a super-fast development environment. 🚀 No more waiting around for your project to load—thanks, Vite! 🎉

Step 1: Create a New Vite Project

Let’s start by creating a new Vite project. Open your terminal and run the following command:

npm create vite@latest your-project-name --template vanilla

This will create a basic Vite project using the vanilla template. After the project is created, move into the project folder:

cd your-project-name

Now install the necessary dependencies:

npm install

Step 2: Install Phaser

Once your Vite project is ready, the next step is to install Phaser. You can do this by running the following command:

npm install phaser

This will add Phaser to your project, allowing us to use its awesome features to build our game.

Step 3: Project Structure

At this point, your project is set up, but we need to organize the files and write some basic code to get Phaser up and running. We’ll cover the detailed project structure and explain the important files in the next section.

Step 4: Create the Main Game File

Inside the src folder, create a file called main.js. This is where the magic happens—your game’s main code will go here. Let’s add a simple Phaser configuration to get started:

import Phaser from 'phaser';
 
const config = {
  type: Phaser.AUTO,
  width: 800,
  height: 600,
  scene: {
    preload: preload,
    create: create
  }
};
 
const game = new Phaser.Game(config);
 
function preload() {
  this.load.image('sky', 'assets/sky.png');
}
 
function create() {
  this.add.image(400, 300, 'sky');
}

This code sets up a basic Phaser game with a background image. You can replace the sky.png with your own image in the assets folder (don’t worry, we’ll get into assets and file structure soon).

Step 5: Run the Development Server

With everything set up, it’s time to run your project and see the game in action! In your terminal, run:

npm run dev

This will start the development server. Open your browser and go to http://localhost:5173 to see your game live!

Using the Pre-Built PhaserJS Template

To make things even easier for you, I have already created a PhaserJS template with Vite. Instead of setting up everything manually, you can use this template to get started faster! 🎉

Download the PhaserJS Vite Template and follow the instructions in the README file to set it up. This template already has Phaser integrated with Vite, so you can focus more on building your game.

In the upcoming topics, we’ll be updating this project step by step, so you’ll have all the files and progress from previous chapters without needing to set up Phaser every time.

Project Structure and Files Explanation

In this section, we'll break down the project structure and explain the purpose of each file in the PhaserJS + Vite template. Understanding the structure will help you easily navigate and expand your project as we build more features.

Root Folder

At the root level, you’ll find files like package.json, .gitignore, index.html, and the public and src folders. Let’s take a look at each one in detail.

1. package.json

The package.json file contains important metadata about the project and manages the dependencies. Here's what each part does:

• name: The name of your project.
• version: The current version of your project.
• scripts: Defines the commands to run your project (dev, build, preview).
• dependencies: Lists the packages your project relies on, like Phaser.
• devDependencies: Lists the packages needed only for development, like Vite.

Example content:

{
  "name": "phaser-vite-boilerplate",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "devDependencies": {
    "vite": "^5.2.0"
  },
  "dependencies": {
    "phaser": "^3.80.1"
  }
}

2. index.html

This is the entry point for the web page. It includes basic meta tags, links to stylesheets, and imports the main JavaScript file (main.js). It also sets up the viewport and favicon.

Important parts:

• link: Includes the stylesheet located in src/style.css.
• script: Loads the main.js file to kickstart Phaser.

Example content:

<!doctype html>
<html lang="en">
 
<head>
  <meta charset="UTF-8" />
  <link rel="icon" type="image/svg+xml" href="/logo.svg" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Phaser 3 + Vite Js Boilerplate</title>
  <meta name="description" content="Phaser 3 + Vite Js Boilerplate" />
  <link rel="stylesheet" href="/src/style.css">
</head>
 
<body>
  <script type="module" src="/src/main.js"></script>
</body>
 
</html>

3. src Folder

This is where the core game logic resides. It contains the main game files, scenes, configurations, and utilities. Let's break it down:

/scenes

This folder holds the different scenes of the game. Each scene represents a specific stage of the game.

• gameScene.js
• loadingScene.js
• mainScene.js

Example content of gameScene.js:

import Phaser from "phaser";
 
export default class GameScene extends Phaser.Scene {
    constructor() {
        super({
            key: "GameScene"
        });
    }
    preload() {
 
    }
    create() {
 
    }
    update() {
 
    }
}

config.js

The config.js file sets up the basic game configuration, like the canvas size and the scenes to load. This file is crucial as it tells Phaser how to render the game and what scenes to include.

Example content:

import Phaser from "phaser";
import GameScene from "./scenes/gameScene";
import LoadingScene from "./scenes/loadingScene";
import MainScene from "./scenes/mainScene";
 
const config = {
    type: Phaser.AUTO,
    width: 800,
    height: 800,
    min: {
        width: 400,
        height: 400
    },
    scale: {
        mode: Phaser.Scale.FIT,
        autoCenter: Phaser.Scale.CENTER_BOTH
    },
    scene: [LoadingScene, MainScene, GameScene]
}
 
export default config;

main.js

The main.js file initializes Phaser and uses the config.js settings to create the game instance.

Example content:

import Phaser from "phaser";
import config from "./config";
 
const game = new Phaser.Game(config);

style.css

This file holds the basic styling for your game or UI elements. Although it’s not heavily used in Phaser games (since most visuals are inside the canvas), you can use it for any additional UI or custom elements outside the game area.

4. public Folder

The public folder contains static assets that can be directly served to the client, like logos or images. In this case, we have a logo.svg file that is used as the favicon for the project.

5. .gitignore

The .gitignore file ensures that certain files are not included in version control. For example, files like node_modules or environment-specific files that don’t need to be shared with others.

Now you have a solid understanding of the project structure and what each file does. In the next sections, we'll be building on this setup to add functionality and expand our game.