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

Loading and Displaying Images

Next ►
►

In this section, you’ll learn how to load and display images in your Phaser game. Images are essential for creating game graphics, backgrounds, characters, and objects. Mastering this topic is a key step in building visually engaging games.

  1. Key Concepts

  • Assets: Files such as images, audio, and data used in your game.
  • Preloading: Loading assets before the game starts to ensure smooth gameplay.
  • Displaying Images: Adding images to the game scene so players can see them.

  1. The Asset Pipeline in Phaser

Phaser uses a two-step process for working with images:

Step Description
Preload Load the image file into memory before the game starts.
Create Add the image to the scene so it becomes visible and interactive if needed.

  1. Loading Images: The preload Method

The preload method is where you load all your assets. Phaser provides the this.load.image function for loading images.

Syntax:

this.load.image(key, url);
  • key: A unique string to reference the image later.
  • url: The path to the image file.

Example:

preload() {
  this.load.image('sky', 'assets/sky.png');
  this.load.image('star', 'assets/star.png');
}

Explanation:

  • 'sky' and 'star' are keys you’ll use to refer to these images.
  • 'assets/sky.png' and 'assets/star.png' are the file paths.

  1. Displaying Images: The create Method

Once images are loaded, you can display them using this.add.image.

Syntax:

this.add.image(x, y, key);
  • x, y: Coordinates where the image will appear (in pixels).
  • key: The key you used in preload.

Example:

create() {
  this.add.image(400, 300, 'sky');   // Centered background
  this.add.image(100, 450, 'star');  // Star near the bottom left
}

Explanation:

  • The first image ('sky') is placed at (400, 300).
  • The second image ('star') is placed at (100, 450).

  1. Complete Example: Loading and Displaying Images

Here’s a minimal Phaser scene that loads and displays two images:

class MyGameScene extends Phaser.Scene {
  preload() {
    this.load.image('sky', 'assets/sky.png');
    this.load.image('star', 'assets/star.png');
  }

  create() {
    this.add.image(400, 300, 'sky');
    this.add.image(100, 450, 'star');
  }
}

const config = {
  type: Phaser.AUTO,
  width: 800,
  height: 600,
  scene: MyGameScene
};

const game = new Phaser.Game(config);

Explanation:

  • The preload method loads the images.
  • The create method adds them to the scene.
  • The game is configured to be 800x600 pixels.

  1. Practical Exercise

Exercise:
Load and display three different images at different positions on the screen.

Instructions:

  1. Download or create three images and place them in an assets folder.
  2. Use the preload method to load them with unique keys.
  3. Use the create method to display them at different coordinates.

Starter Code:

class MyGameScene extends Phaser.Scene {
  preload() {
    // Load your images here
  }

  create() {
    // Display your images here
  }
}

const config = {
  type: Phaser.AUTO,
  width: 800,
  height: 600,
  scene: MyGameScene
};

const game = new Phaser.Game(config);

Solution:

class MyGameScene extends Phaser.Scene {
  preload() {
    this.load.image('sky', 'assets/sky.png');
    this.load.image('star', 'assets/star.png');
    this.load.image('player', 'assets/player.png');
  }

  create() {
    this.add.image(400, 300, 'sky');     // Center
    this.add.image(100, 500, 'star');    // Bottom left
    this.add.image(700, 100, 'player');  // Top right
  }
}

Common Mistakes & Tips:

  • Mistake: Misspelling the key or file path.
    Tip: Double-check your keys and file paths.
  • Mistake: Trying to display an image before it’s loaded.
    Tip: Always load images in preload before using them in create.
  • Tip: Use descriptive keys for your images to avoid confusion in larger projects.

  1. Summary

  • Images must be preloaded before they can be displayed.
  • Use this.load.image(key, url) in the preload method.
  • Use this.add.image(x, y, key) in the create method to show images.
  • Always check your file paths and keys for accuracy.

Next:
You’re now ready to add visual elements to your game! In the next section, you’ll learn how to work with text in Phaser, allowing you to display scores, messages, and more.

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