Your First PhaserJS Game

Final Touches

Add a trampoline bounce effect in PhaserJS to launch the player with an exciting upward boost.

Welcome to the final chapter! It’s time to add that last little magic touch that brings our game to life. Remember the trampoline we set up back in the Level Design chapter? Now we’ll make it actually bounce our player high into the air! 🕴️ Imagine the player hitting it and getting a powerful boost upwards, perfect for reaching new heights or avoiding pesky spikes.

Step 1: Add the Trampoline Bounce Effect 🏅

Open mainScene.js and find the addTrampoline function where we added the collider between the player and the trampoline. Now, we’ll give that collider a callback function to make the trampoline really work.

Add this code to the addTrampoline function:

this.physics.add.collider(this.player, trampoline, (player, trampoline) => {
    player.setVelocityY(-800);
    player.anims.play("player_jump_anim", true);
    trampoline.anims.play("trampoline_jump_anim", true);
});

17

Explanation 🚀

Here’s how this trampoline feature works:

  • Collision Detection: When the player hits the trampoline, the collider callback function is triggered.
  • Bounce Velocity: setVelocityY(-800); gives the player an upward boost, simulating a powerful bounce! 💥
  • Animations: The player plays a jump animation (player_jump_anim), while the trampoline gets its own animated effect (trampoline_jump_anim) to look like it’s reacting to the bounce.

This bit of code makes it all happen, turning our trampoline into a launch pad for high-flying action!

And... That's a Wrap! 🎉

Congratulations! 🎊 You've now completed all the main features of your game. From controls to score systems, and now with a trampoline that actually works, your game is packed with fun and interaction. Well done for sticking through every line of code and bringing your game to life!

Course Overview: Your First Game with PhaserJS 🎮

Congratulations on completing the course! 🎉 You’ve embarked on an exciting journey of game development using PhaserJS, where you transformed your ideas into an engaging game. Here’s a quick overview of the key concepts you mastered along the way:

Building the Game World 🌍: You learned how to load and utilize various assets like images, sounds, and animations to create a vibrant game environment. Assets acted as your game’s toolkit, bringing characters, platforms, and backgrounds to life.

Designing Levels 🎨: With level design techniques, you added dynamic elements such as ground, platforms, collectable apples, spikes and trampoline. This gave your game unique challenges and visual appeal.

Implementing Game Physics 🔄: By introducing arcade physics, you simulated real-world behaviors like gravity, enabling your player to interact realistically with the game world. This included setting up collision detection, creating boundaries, and fine-tuning object interactions.

Character Controls 🎮: You programmed your player’s movement with keyboard controls, allowing for smooth navigation and exciting jumping mechanics.

Creating a Score and Health System 🏆❤️: You enhanced gameplay by tracking player performance with a scoring system and health mechanics. Collecting apples increased the score, while touching spikes posed a challenge that impacted the player’s health.

Adding Sound and Music 🎶: You enriched the gaming experience by incorporating background music and sound effects, making every action feel more impactful and enjoyable.

Final Touches 🎩: In the concluding chapter, you added interactive features like a trampoline, giving players a fun way to navigate your game world. This final touch brought together all your learned skills for a polished finish.

By the end of this course, you not only created an interactive game but also gained a solid understanding of essential game development concepts. Now you’re equipped to take your skills to the next level! Keep creating and experimenting—who knows what epic games you’ll develop next! 🚀🎉

Complete Code 📜

If you missed anything or made some accidental changes, here’s the complete code for reference! 💻🔧

import Phaser from "phaser";
import GameScene from "./scenes/gameScene";
import LoadingScene from "./scenes/loadingScene";
import MainScene from "./scenes/mainScene";
 
const config = {
    type: Phaser.AUTO,
    width: 800,
    height: 800,
    pixelArt: true,
    min: {
        width: 400,
        height: 400
    },
    scale: {
        mode: Phaser.Scale.FIT,
        autoCenter: Phaser.Scale.CENTER_BOTH
    },
    physics: {
        default: 'arcade',
        arcade: {
            gravity: { y: 600 },
            debug: false
        }
    },
    scene: [LoadingScene, MainScene, GameScene]
}
 
export default config;

Now you have everything! 🚀 Enjoy creating your awesome PhaserJS game!

Previous

8. Background Music and Sound Effects

On this page