The Project | About Us | Contribute | Donations | License
HOME My courses Completed
◄ Previous
◄

Your First Phaser Project

Next ►
►

Welcome to your first hands-on experience with Phaser! In this section, you’ll create a simple Phaser game project from scratch. This will help you understand the basic structure of a Phaser game and get you comfortable with the development workflow.

  1. Project Structure

Before writing any code, let’s organize your project files. A typical Phaser project has the following structure:

File/Folder Purpose
index.html The main HTML file that loads your game
main.js The main JavaScript file with game logic
assets/ Folder for images, sounds, and other assets

Tip: Keeping your files organized makes your project easier to manage as it grows.

  1. Creating the HTML File

Create a file named index.html with the following content:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My First Phaser Game</title>
  <script src="https://cdn.jsdelivr.net/npm/phaser@3/dist/phaser.js"></script>
</head>
<body>
  <script src="main.js"></script>
</body>
</html>

Explanation:

  • The Phaser library is loaded from a CDN.
  • The main.js script will contain your game code.

  1. Writing Your First Game Code

Create a file named main.js in the same folder as your index.html. Add the following code:

// Game configuration object
const config = {
    type: Phaser.AUTO, // Automatically use WebGL or Canvas
    width: 800,        // Game width in pixels
    height: 600,       // Game height in pixels
    backgroundColor: '#3498db', // Set a background color
    scene: {
        preload: preload, // Function to load assets
        create: create,   // Function to set up the game
        update: update    // Function called every frame
    }
};

// Create a new Phaser Game instance
const game = new Phaser.Game(config);

// Preload function: load assets here
function preload() {
    // Example: this.load.image('logo', 'assets/logo.png');
}

// Create function: set up your game objects here
function create() {
    // Add text to the center of the screen
    this.add.text(400, 300, 'Hello, Phaser!', {
        font: '32px Arial',
        fill: '#ffffff'
    }).setOrigin(0.5);
}

// Update function: called every frame (60 times per second)
function update() {
    // Game logic goes here (empty for now)
}

Explanation:

  • config: Sets up the game’s size, background, and which functions to call for each phase (preload, create, update).
  • preload: Used to load images, sounds, etc. (empty for now).
  • create: Adds a text object to the center of the screen.
  • update: Runs every frame; used for animations and game logic.

  1. Running Your Game

To see your game in action:

  1. Make sure your files are organized as described.
  2. Open index.html in your web browser.

You should see a blue background with the text “Hello, Phaser!” centered on the screen.

  1. Exercise: Add an Image

Task:
Download an image (e.g., a logo) and place it in an assets/ folder. Update your game to display this image in the center of the screen.

Step-by-step:

  1. Place an image named logo.png in the assets/ folder.
  2. Update your preload and create functions as follows:
function preload() {
    this.load.image('logo', 'assets/logo.png');
}

function create() {
    // Add the logo image to the center
    this.add.image(400, 300, 'logo').setOrigin(0.5);

    // Add text below the image
    this.add.text(400, 400, 'Hello, Phaser!', {
        font: '32px Arial',
        fill: '#ffffff'
    }).setOrigin(0.5);
}

Solution Explanation:

  • this.load.image('logo', 'assets/logo.png'): Loads the image and assigns it the key 'logo'.
  • this.add.image(400, 300, 'logo'): Adds the image to the center of the screen.
  • .setOrigin(0.5): Centers the image at the given coordinates.

Common Mistakes & Tips:

  • Make sure the path to your image is correct (assets/logo.png).
  • If the image doesn’t appear, check the browser console for errors (e.g., file not found).

  1. Summary

In this section, you learned how to:

  • Set up a basic Phaser project structure.
  • Create an HTML file that loads Phaser and your game code.
  • Write a simple Phaser game that displays text.
  • Load and display an image using Phaser’s asset management.

Next Steps:
You’re now ready to dive deeper into Phaser’s core concepts, such as the game loop, scenes, and handling user input. In the next section, you’ll learn how the game loop works and how Phaser manages updates and rendering.

◄ Previous
◄
Next ►
►
The Project | About Us | Contribute | Donations | License
© Copyright 2024. All rights reserved