pablo.gg
🎮
codinggames

Adding transition when entering a stage on Phaser JS - Game Devlog #16

Written in December 29, 2020 - 🕒 1 min. read

Wassup everyone, I’m once again late with my “weekly” devlog, due to the holidays and stuff. But let’s drop the small talk and cut to the chase.

This is very simple to do, but it adds a nice polishing level to the game. First I created a new scene called StagePresentationScene. In it, I get the variable stageName and show it in the middle of the screen for 1.5 seconds.

import { Scene } from 'phaser';
import { handleSceneEnd } from '../utils/scenes';

class StagePresentationScene extends Scene {
    constructor() {
        super('StagePresentationScene');
    }

    init(data) {
        this.initData = data;
    }

    create() {
        this.add.text(
            this.cameras.main.width / 2,
            80,
            this.initData.stageName
        ).setDepth(50).setOrigin(0.5, 0.5);

        this.time.delayedCall(
            1500,
            () => handleSceneEnd(this, 'GameScene', this.initData)
        );
    }
}

export default StagePresentationScene;

I can access the stageName attribute from Tiled with a simple filter function.

// stageNameProperty will be an object with a property value in it
const stageNameProperty = stageJson?.properties?.find(
    (property) => property.name === STAGE_NAME
);

This is very simple to do but makes the game way better looking.

Stage transition

And that’s it. Don’t forget to add the stageName property to your Tiled map properties. See you next week.

Tags:

Post a comment
Comments

No comments yet.