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

Tweens and Animations

Next ►
►

In this section, you’ll learn how to create smooth, dynamic movements and effects in your Phaser games using tweens and animations. These tools are essential for bringing your game world to life, making objects move, fade, scale, and animate in response to player actions or game events.

  1. What are Tweens and Animations?

  • Tween: Short for "in-betweening," a tween smoothly transitions a property (like position, scale, or alpha) of a game object over time.
  • Animation: In Phaser, an animation is a sequence of frames (usually from a spritesheet) played in order to create the illusion of movement (e.g., a character walking).
Feature Tween Animation
Purpose Transitions object properties over time Plays a sequence of frames
Example Move a sprite from left to right Character running or jumping
Typical Use Movement, fading, scaling, rotation Character actions, effects, UI feedback

  1. Creating Tweens

Basic Tween Example

Let’s move a sprite smoothly from left to right.

// Inside your scene's create() method
let player = this.add.sprite(100, 200, 'player');

// Create a tween to move the player to x = 400 over 2 seconds
this.tweens.add({
    targets: player,
    x: 400,
    duration: 2000, // in milliseconds
    ease: 'Linear'
});

Explanation:

  • targets: The object(s) to animate.
  • x: 400: The final x position.
  • duration: How long the tween lasts (in ms).
  • ease: The easing function (controls the rate of change).

Tweening Multiple Properties

You can tween several properties at once:

this.tweens.add({
    targets: player,
    x: 400,
    y: 100,
    alpha: 0.5, // fade out
    duration: 1500,
    ease: 'Cubic.easeOut'
});

Looping and Yoyo Tweens

  • Loop: Repeat the tween multiple times.
  • Yoyo: Reverse the tween after it completes.
this.tweens.add({
    targets: player,
    x: 400,
    duration: 1000,
    yoyo: true,
    repeat: 2 // Will play 3 times (initial + 2 repeats)
});

  1. Creating Animations

Preparing a Spritesheet

Animations require a spritesheet (an image with multiple frames). Example: player_run.png with 6 frames.

Loading the Spritesheet

// In preload()
this.load.spritesheet('player_run', 'assets/player_run.png', {
    frameWidth: 32,
    frameHeight: 48
});

Defining an Animation

// In create()
this.anims.create({
    key: 'run',
    frames: this.anims.generateFrameNumbers('player_run', { start: 0, end: 5 }),
    frameRate: 10,
    repeat: -1 // -1 means loop forever
});

Playing an Animation

let player = this.add.sprite(100, 200, 'player_run');
player.anims.play('run');

  1. Combining Tweens and Animations

You can use tweens and animations together for richer effects.

let player = this.add.sprite(100, 200, 'player_run');
player.anims.play('run');

this.tweens.add({
    targets: player,
    x: 400,
    duration: 2000,
    onComplete: () => {
        player.anims.stop();
    }
});

  1. Practical Exercise

Exercise: Make a Coin Spin and Move

Task:

  • Load a coin spritesheet (6 frames).
  • Create a coin sprite at (100, 150).
  • Animate the coin spinning.
  • Tween the coin to move to (400, 150) over 2 seconds.

Solution

// In preload()
this.load.spritesheet('coin', 'assets/coin.png', { frameWidth: 32, frameHeight: 32 });

// In create()
this.anims.create({
    key: 'spin',
    frames: this.anims.generateFrameNumbers('coin', { start: 0, end: 5 }),
    frameRate: 12,
    repeat: -1
});

let coin = this.add.sprite(100, 150, 'coin');
coin.anims.play('spin');

this.tweens.add({
    targets: coin,
    x: 400,
    duration: 2000,
    ease: 'Power1'
});

Common Mistakes & Tips:

  • Make sure the spritesheet is loaded before creating the animation.
  • The frameWidth and frameHeight must match your spritesheet.
  • If the animation doesn’t play, check the animation key and frame numbers.

  1. Summary

  • Tweens are used to smoothly change properties of game objects (position, scale, alpha, etc.).
  • Animations play sequences of frames from a spritesheet to create movement.
  • You can combine tweens and animations for dynamic effects.
  • Practice by animating and moving objects to reinforce your understanding.

Next: You’ll learn about timers and delayed events to control when actions happen in your game!

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