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

Adding and Moving Sprites

Next ►
►

Sprites are fundamental building blocks in 2D game development. In Phaser, sprites represent images or animations that can be positioned, moved, and interacted with in your game world. This section will guide you through the process of adding sprites to your game and making them move, both manually and using Phaser’s built-in features.

  1. What is a Sprite?

  • Definition: A sprite is a 2D image or animation integrated into a larger scene.
  • Usage: Sprites are used for characters, objects, enemies, collectibles, and more.
  • Phaser Sprite Object: In Phaser, sprites are created using the this.add.sprite method within a scene.

  1. Adding a Sprite to the Scene

Step-by-Step Example

Let’s add a simple sprite to your game scene.

1. Load the Sprite Image

Before you can add a sprite, you need to load its image in the preload method:

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

Explanation:

  • this.load.image tells Phaser to load an image with the key 'player' from the specified path.
  • The key 'player' will be used to reference this image later.

2. Add the Sprite in the Scene

Add the sprite in the create method:

create() {
  this.player = this.add.sprite(100, 150, 'player');
}

Explanation:

  • this.add.sprite(x, y, key) creates a sprite at position (x, y) using the image loaded with the key 'player'.
  • The sprite is stored in this.player for later use.

  1. Moving Sprites

There are several ways to move sprites in Phaser:

A. Manual Movement (Changing Position Directly)

You can change the sprite’s position by updating its x and y properties in the update method:

update() {
  this.player.x += 2; // Moves the sprite 2 pixels to the right every frame
}

Explanation:

  • The update method runs every frame.
  • Increasing x moves the sprite right; decreasing moves it left.
  • Similarly, modify y to move up or down.

B. Moving with Keyboard Input

Let’s move the sprite using arrow keys.

1. Set Up Cursor Keys

create() {
  this.player = this.add.sprite(100, 150, 'player');
  this.cursors = this.input.keyboard.createCursorKeys();
}

2. Update Position Based on Input

update() {
  if (this.cursors.left.isDown) {
    this.player.x -= 2;
  } else if (this.cursors.right.isDown) {
    this.player.x += 2;
  }

  if (this.cursors.up.isDown) {
    this.player.y -= 2;
  } else if (this.cursors.down.isDown) {
    this.player.y += 2;
  }
}

Explanation:

  • this.input.keyboard.createCursorKeys() creates an object to track arrow key presses.
  • In update, check which key is pressed and adjust the sprite’s position accordingly.

C. Using Physics for Movement

Phaser’s physics system can handle movement and collisions. Here’s a basic example using Arcade Physics:

1. Enable Physics on the Sprite

create() {
  this.player = this.physics.add.sprite(100, 150, 'player');
  this.cursors = this.input.keyboard.createCursorKeys();
}

2. Move with Velocity

update() {
  this.player.setVelocity(0);

  if (this.cursors.left.isDown) {
    this.player.setVelocityX(-160);
  } else if (this.cursors.right.isDown) {
    this.player.setVelocityX(160);
  }

  if (this.cursors.up.isDown) {
    this.player.setVelocityY(-160);
  } else if (this.cursors.down.isDown) {
    this.player.setVelocityY(160);
  }
}

Explanation:

  • this.physics.add.sprite creates a sprite with physics enabled.
  • setVelocityX and setVelocityY control the speed and direction.
  • Setting velocity to 0 at the start of update stops the sprite when no key is pressed.

  1. Comparison Table: Sprite Movement Methods

Method Code Example Location Use Case Pros Cons
Manual (x/y update) update() Simple movement, no physics Easy to implement No collision/physics
Keyboard Input update() Player-controlled movement Interactive Needs input handling
Physics-based create(), update() Realistic movement, collisions Physics, collisions, gravity More setup required

  1. Practical Exercise

Exercise: Add and Move a Sprite with Arrow Keys

Task:

  1. Load an image called 'star' from 'assets/star.png'.
  2. Add the sprite to the scene at position (200, 200).
  3. Allow the player to move the sprite using the arrow keys.

Starter Code:

class MyGame extends Phaser.Scene {
  preload() {
    // 1. Load the image here
  }

  create() {
    // 2. Add the sprite and set up input here
  }

  update() {
    // 3. Move the sprite with arrow keys here
  }
}

Solution

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

  create() {
    this.star = this.add.sprite(200, 200, 'star');
    this.cursors = this.input.keyboard.createCursorKeys();
  }

  update() {
    if (this.cursors.left.isDown) {
      this.star.x -= 2;
    } else if (this.cursors.right.isDown) {
      this.star.x += 2;
    }

    if (this.cursors.up.isDown) {
      this.star.y -= 2;
    } else if (this.cursors.down.isDown) {
      this.star.y += 2;
    }
  }
}

Common Mistakes & Tips:

  • Mistake: Forgetting to load the image in preload will cause the sprite not to appear.
  • Tip: Always check the image path and key.
  • Mistake: Not storing the sprite in a variable (e.g., this.star) makes it hard to reference later.
  • Tip: Use this to store important game objects for access in other methods.

  1. Summary

  • Sprites are essential for representing objects in your game.
  • You add sprites using this.add.sprite (or this.physics.add.sprite for physics).
  • Sprites can be moved by directly changing their position, responding to input, or using physics.
  • Practice adding and moving sprites to build interactive and dynamic games.

Next Up:
You’ll learn how to animate sprites, bringing your game characters and objects to life!

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