Developing a Cross-Platform Mobile Game with React Native and Phaser #GameDev #ReactNative #Phaser

Day 6: Adding Animations, Sound Effects, and Background Music

Welcome to Day 6 of building your cross-platform mobile game with React Native and Phaser. Now that the core gameplay works, it’s time to add juice — visuals and audio that make your game feel polished and fun.

🧠 What You’ll Learn

• How to animate sprites in Phaser
• How to play sound effects on events (e.g. collisions, power-ups)
• How to add and control background music
• How to preload and manage assets efficiently

🎨 Step 1: Add an Animated Player Sprite

Let’s replace the static player logo with a sprite sheet animation.

1. Preload a sprite sheet

In preload():

this.load.spritesheet('playerAnim', 'https://labs.phaser.io/assets/sprites/mushroom2.png', {
  frameWidth: 32,
  frameHeight: 32
});

2. Create an animation

In create():

this.anims.create({
  key: 'wiggle',
  frames: this.anims.generateFrameNumbers('playerAnim', { start: 0, end: 3 }),
  frameRate: 10,
  repeat: -1
});

player = this.physics.add.sprite(160, 400, 'playerAnim');
player.setCollideWorldBounds(true);
player.play('wiggle');

🔊 Step 2: Add Sound Effects

1. Preload sounds in preload()

this.load.audio('hit', 'https://labs.phaser.io/assets/audio/SoundEffects/explosion.mp3');
this.load.audio('powerup', 'https://labs.phaser.io/assets/audio/SoundEffects/pickup.wav');
this.load.audio('music', 'https://labs.phaser.io/assets/audio/loops/SpaceHarrier.mp3');

2. Add to create():

hitSound = this.sound.add('hit');
powerupSound = this.sound.add('powerup');
bgMusic = this.sound.add('music', { loop: true, volume: 0.5 });
bgMusic.play();

💥 Step 3: Play Sounds on Events

In hitEnemy():

hitSound.play();

In collectPowerup():

powerupSound.play();

🛑 Optional: Stop Music on Game Over

In endGame():

if (bgMusic && bgMusic.isPlaying) {
  bgMusic.stop();
}

Restart music in this.scene.restart() if needed.

📱 Step 4: Test Animations and Sounds

1. Start your game.
2. Watch the animated player sprite.
3. Hear music play and sound effects trigger on events.
4. Adjust volume or loop settings as needed.

✅ What You’ve Achieved

• Integrated sprite sheet animations
• Triggered event-based sound effects
• Added looping background music
• Enhanced the feel and feedback of your mobile game

📌 Up Next

In Day 7, we’ll focus on building multiple levels/scenes, and introduce a start menu and pause/resume functionality — essential for a production-ready mobile game.

Your game now looks and sounds great — let’s give it structure next!