Phaser: How to Add Images

In this post, we will discuss how to add images as GameObjects in Phaser. It is important to note that in order to display images when the game starts, they need to be preloaded in the preload() function and assigned an identifier. Then, they can be added as an image asset in the create() function.

Here’s an example of how to preload and add an image in Phaser:

function preload() {
  this.load.image('apple', 'apple.png');
}

function create() {
  this.add.image(200, 200, 'apple');
}

In the above code, the image ‘apple’ is preloaded in the preload() function using the load.image() method. The image is then added to the game scene in the create() function using the add.image() method, with the specified position (200, 200).

By default, the position is set to the center of the image. However, if you prefer to set the position to the top left corner, you can use the setOrigin() method on the image object:

const image = this.add.image(200, 200, 'apple');
image.setOrigin(0, 0);

Additionally, once an image is added, you can perform various operations on it. For example, you can scale the image using the setScale() method:

image.setScale(2);

You can also flip the image vertically or horizontally using the flipY and flipX properties, respectively:

image.flipY = true;
image.flipX = true;

These are just a few examples of the things you can do with images in Phaser. Experiment with different methods and properties to customize your game visuals.

Tags: Phaser, images, GameObjects