Bootstrap

Phaser引擎开发：游戏场景与状态管理_游戏场景与状态管理的实际案例分析

游戏场景与状态管理的实际案例分析

在上一节中，我们讨论了Phaser引擎的基本场景与状态管理机制，了解了如何创建和切换不同的游戏场景。本节将通过实际案例来深入分析如何在Phaser引擎中有效地管理和切换游戏场景，以及如何处理不同场景之间的状态传递和数据交换。

案例1：简单的多场景游戏

为了更好地理解Phaser引擎的场景管理，我们首先通过一个简单的多场景游戏来展示基本的场景创建、切换和状态管理。这个案例将包括一个主菜单场景、一个游戏场景和一个游戏结束场景。

1.1 主菜单场景

主菜单场景是游戏的入口，玩家在这里可以选择开始游戏或退出游戏。我们将创建一个简单的主菜单场景，用户可以通过点击按钮来切换到游戏场景。

代码示例

// 主菜单场景

class MainMenuScene extends Phaser.Scene {

    constructor() {

        super({ key: 'MainMenuScene' });

    }



    preload() {

        // 加载必要的资源

        this.load.image('bg', 'assets/main-menu-bg.png');

        this.load.image('playButton', 'assets/play-button.png');

    }



    create() {

        // 添加背景

        this.add.image(400, 300, 'bg');



        // 添加开始游戏按钮

        const playButton = this.add.image(400, 400, 'playButton').setInteractive();



        // 为按钮添加点击事件

        playButton.on('pointerdown', () => {

            // 切换到游戏场景

            this.scene.start('GameScene');

        });

    }

}

1.2 游戏场景

游戏场景是玩家进行实际游戏的地方。在这个场景中，我们将创建一个简单的平台跳跃游戏，玩家可以通过控制角色来完成任务。

代码示例

// 游戏场景

class GameScene extends Phaser.Scene {

    constructor() {

        super({ key: 'GameScene' });

    }



    preload() {

        // 加载游戏资源

        this.load.image('ground', 'assets/ground.png');

        this.load.image('star', 'assets/star.png');

        this.load.image('sky', 'assets/sky.png');

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

    }



    create() {

        // 添加背景

        this.add.image(400, 300, 'sky');



        // 创建地面

        const platforms = this.physics.add.staticGroup();

        platforms.create(400, 568, 'ground').setScale(2).refreshBody();



        // 创建玩家

        this.player = this.physics.add.sprite(100, 450, 'dude');

        this.player.setBounce(0.2);

        this.player.setCollideWorldBounds(true);



        // 创建动画

        this.anims.create({

            key: 'left',

            frames: this.anims.generateFrameNumbers('dude', { start: 0, end: 3 }),

            frameRate: 10,

            repeat: -1

        });



        this.anims.create({

            key: 'turn',

            frames: [{ key: 'dude', frame: 4 }],

            frameRate: 20

        });



        this.anims.create({

            key: 'right',

            frames: this.anims.generateFrameNumbers('dude', { start: 5, end: 8 }),

            frameRate: 10,

            repeat: -1

        });



        // 设置玩家的碰撞检测

        this.physics.add.collider(this.player, platforms);



        // 创建星星

        this.stars = this.physics.add.group({

            key: 'star',

            repeat: 11,

            setXY: { x: 12, y: 0, stepX: 70 }

        });



        // 设置星星的碰撞检测

        this.physics.add.collider(this.stars, platforms);

        this.physics.add.collider(this.player, this.stars, this.collectStar, null, this);



        // 创建得分文本

        this.score = 0;

        this.scoreText = this.add.text(16, 16, '得分: 0', { fontSize: '32px', fill: '#000' });



        // 创建游戏结束条件

        this.physics.add.collider(this.player, this.stars, this.endGame, null, this);

    }



    update() {

        // 控制玩家的移动

        const cursors = this.input.keyboard.createCursorKeys();

        if (cursors.left.isDown) {

            this.player.setVelocityX(-160);

            this.player.anims.play('left', true);

        } else if (cursors.right.isDown) {

            this.player.setVelocityX(160);

            this.player.anims.play('right', true);

        } else {

            this.player.setVelocityX(0);

            this.player.anims.play('turn');

        }



        if (cursors.up.isDown && this.player.body.touching.down) {

            this.player.setVelocityY(-330);

        }

    }



    collectStar(player, star) {

        star.disableBody(true, true);

        this.score += 10;

        this.scoreText.setText('得分: ' + this.score);



        // 如果所有星星都被收集完，切换到游戏结束场景

        if (this.stars.countActive(true) === 0) {

            this.stars.children.iterate(function (child) {

                child.enableBody(true, child.x, 0, true, true);

            });



            this.player.x = 100;

            this.player.y = 450;

            this.scene.start('GameOverScene', { score: this.score });

        }

    }



    endGame(player, star) {

        this.scene.start('GameOverScene', { score: this.score });

    }

}

1.3 游戏结束场景

游戏结束场景用于显示玩家的最终得分，并提供重新开始游戏或返回主菜单的选项。

代码示例

// 游戏结束场景

class GameOverScene extends Phaser.Scene {

    constructor() {

        super({ key: 'GameOverScene' });

    }



    preload() {

        // 加载必要的资源

        this.load.image('bg', 'assets/game-over-bg.png');

        this.load.image('retryButton', 'assets/retry-button.png');

        this.load.image('menuButton', 'assets/main-menu-button.png');

    }



    create(data) {

        // 添加背景

        this.add.image(400, 300, 'bg');



        // 显示得分

        this.add.text(400, 200, '最终得分: ' + data.score, { fontSize: '32px', fill: '#000' }).setOrigin(0.5);



        // 添加重新开始按钮

        const retryButton = this.add.image(400, 350, 'retryButton').setInteractive();

        retryButton.on('pointerdown', () => {

            this.scene.start('GameScene');

        });



        // 添加返回主菜单按钮

        const menuButton = this.add.image(400, 450, 'menuButton').setInteractive();

        menuButton.on('pointerdown', () => {

            this.scene.start('MainMenuScene');

        });

    }

}

1.4 场景管理配置

在游戏的主配置中，我们需要添加所有场景，并设置初始场景为MainMenuScene。

代码示例

// 游戏配置

const config = {

    type: Phaser.AUTO,

    width: 800,

    height: 600,

    physics: {

        default: 'arcade',

        arcade: {

            gravity: { y: 300 },

            debug: false

        }

    },

    scene: [MainMenuScene, GameScene, GameOverScene]

};



// 创建游戏实例

const game = new Phaser.Game(config);

案例2：多关卡游戏（续）

在上一节中，我们展示了如何在Phaser引擎中管理多个关卡，并在关卡之间传递数据。本节将继续探讨关卡2场景的实现，并总结多关卡游戏的管理方法。

2.2 关卡2场景

关卡2场景是一个稍微复杂一些的平台跳跃关卡，玩家需要避开敌人并收集所有星星。我们将在这个场景中添加敌人，并设置相应的碰撞检测逻辑。

代码示例

// 关卡2场景

class Level2Scene extends Phaser.Scene {

    constructor() {

        super({ key: 'Level2Scene' });

    }



    preload() {

        // 加载关卡2资源

        this.load.image('ground', 'assets/ground.png');

        this.load.image('star', 'assets/star.png');

        this.load.image('sky', 'assets/sky.png');

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

        this.load.image('enemy', 'assets/enemy.png');

    }



    create(data) {

        // 添加背景

        this.add.image(400, 300, 'sky');



        // 创建地面

        const platforms = this.physics.add.staticGroup();

        platforms.create(400, 568, 'ground').setScale(2).refreshBody();



        // 创建玩家

        this.player = this.physics.add.sprite(100, 450, 'dude');

        this.player.setBounce(0.2);

        this.player.setCollideWorldBounds(true);



        // 创建动画

        this.anims.create({

            key: 'left',

            frames: this.anims.generateFrameNumbers('dude', { start: 0, end: 3 }),

            frameRate: 10,

            repeat: -1

        });



        this.anims.create({

            key: 'turn',

            frames: [{ key: 'dude', frame: 4 }],

            frameRate: 20

        });



        this.anims.create({

            key: 'right',

            frames: this.anims.generateFrameNumbers('dude', { start: 5, end: 8 }),

            frameRate: 10,

            repeat: -1

        });



        // 设置玩家的碰撞检测

        this.physics.add.collider(this.player, platforms);



        // 创建星星

        this.stars = this.physics.add.group({

            key: 'star',

            repeat: 7,

            setXY: { x: 12, y: 0, stepX: 70 }

        });



        // 设置星星的碰撞检测

        this.physics.add.collider(this.stars, platforms);

        this.physics.add.collider(this.player, this.stars, this.collectStar, null, this);



        // 创建敌人

        this.enemies = this.physics.add.group({

            key: 'enemy',

            repeat: 2,

            setXY: { x: 12, y: 0, stepX: 200 }

        });



        // 设置敌人的碰撞检测

        this.physics.add.collider(this.enemies, platforms);

        this.physics.add.collider(this.player, this.enemies, this.endGame, null, this);



        // 创建得分文本

        this.score = data.score || 0;

        this.scoreText = this.add.text(16, 16, '得分: ' + this.score, { fontSize: '32px', fill: '#000' });



        // 创建关卡结束条件

        this.physics.add.collider(this.player, this.stars, this.endLevel, null, this);

    }



    update() {

        // 控制玩家的移动

        const cursors = this.input.keyboard.createCursorKeys();

        if (cursors.left.isDown) {

            this.player.setVelocityX(-160);

            this.player.anims.play('left', true);

        } else if (cursors.right.isDown) {

            this.player.setVelocityX(160);

            this.player.anims.play('right', true);

        } else {

            this.player.setVelocityX(0);

            this.player.anims.play('turn');

        }



        if (cursors.up.isDown && this.player.body.touching.down) {

            this.player.setVelocityY(-330);

        }



        // 控制敌人的移动

        this.enemies.children.iterate(function (enemy) {

            enemy.setVelocityX(100);

            if (enemy.x > 800 || enemy.x < 0) {

                enemy.setVelocityX(-enemy.body.velocity.x);

            }

        });

    }



    collectStar(player, star) {

        star.disableBody(true, true);

        this.score += 10;

        this.scoreText.setText('得分: ' + this.score);

    }



    endGame(player, enemy) {

        this.scene.start('GameOverScene', { score: this.score, level: 2 });

    }



    endLevel(player, star) {

        if (this.stars.countActive(true) === 0) {

            this.scene.start('Level3Scene', { score: this.score });

        }

    }

}

2.3 关卡3场景

关卡3场景是一个更复杂的平台跳跃关卡，玩家需要在移动平台上跳跃并避开敌人，同时收集所有星星。我们已经在上一节中展示了关卡3场景的实现，这里再重复一下主要代码，以便更好地理解。

代码示例

// 关卡3场景

class Level3Scene extends Phaser.Scene {

    constructor() {

        super({ key: 'Level3Scene' });

    }



    preload() {

        // 加载关卡3资源

        this.load.image('ground', 'assets/ground.png');

        this.load.image('star', 'assets/star.png');

        this.load.image('sky', 'assets/sky.png');

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

        this.load.image('enemy', 'assets/enemy.png');

        this.load.image('movingPlatform', 'assets/moving-platform.png');

    }



    create(data) {

        // 添加背景

        this.add.image(400, 300, 'sky');



        // 创建地面

        const platforms = this.physics.add.staticGroup();

        platforms.create(400, 568, 'ground').setScale(2).refreshBody();



        // 创建移动平台

        this.movingPlatforms = this.physics.add.group();

        const movingPlatform1 = this.movingPlatforms.create(200, 400, 'movingPlatform').setScale(2).setImmovable();

        const movingPlatform2 = this.movingPlatforms.create(600, 400, 'movingPlatform').setScale(2).setImmovable();



        movingPlatform1.setVelocityX(100);

        movingPlatform2.setVelocityX(-100);



        // 创建玩家

        this.player = this.physics.add.sprite(100, 450, 'dude');

        this.player.setBounce(0.2);

        this.player.setCollideWorldBounds(true);



        // 创建动画

        this.anims.create({

            key: 'left',

            frames: this.anims.generateFrameNumbers('dude', { start: 0, end: 3 }),

            frameRate: 10,

            repeat: -1

        });



        this.anims.create({

            key: 'turn',

            frames: [{ key: 'dude', frame: 4 }],

            frameRate: 20

        });



        this.anims.create({

            key: 'right',

            frames: this.anims.generateFrameNumbers('dude', { start: 5, end: 8 }),

            frameRate: 10,

            repeat: -1

        });



        // 设置玩家的碰撞检测

        this.physics.add.collider(this.player, platforms);

        this.physics.add.collider(this.player, this.movingPlatforms);



        // 创建星星

        this.stars = this.physics.add.group({

            key: 'star',

            repeat: 5,

            setXY: { x: 12, y: 0, stepX: 70 }

        });



        // 设置星星的碰撞检测

        this.physics.add.collider(this.stars, platforms);

        this.physics.add.collider(this.stars, this.movingPlatforms);

        this.physics.add.collider(this.player, this.stars, this.collectStar, null, this);



        // 创建敌人

        this.enemies = this.physics.add.group({

            key: 'enemy',

            repeat: 3,

            setXY: { x: 12, y: 0, stepX: 200 }

        });



        // 设置敌人的碰撞检测

        this.physics.add.collider(this.enemies, platforms);

        this.physics.add.collider(this.enemies, this.movingPlatforms);

        this.physics.add.collider(this.player, this.enemies, this.endGame, null, this);



        // 创建得分文本

        this.score = data.score || 0;

        this.scoreText = this.add.text(16, 16, '得分: ' + this.score, { fontSize: '32px', fill: '#000' });



        // 创建关卡结束条件

        this.physics.add.collider(this.player, this.stars, this.endLevel, null, this);

    }



    update() {

        // 控制玩家的移动

        const cursors = this.input.keyboard.createCursorKeys();

        if (cursors.left.isDown) {

            this.player.setVelocityX(-160);

            this.player.anims.play('left', true);

        } else if (cursors.right.isDown) {

            this.player.setVelocityX(160);

            this.player.anims.play('right', true);

        } else {

            this.player.setVelocityX(0);

            this.player.anims.play('turn');

        }



        if (cursors.up.isDown && this.player.body.touching.down) {

            this.player.setVelocityY(-330);

        }



        // 控制敌人的移动

        this.enemies.children.iterate(function (enemy) {

            enemy.setVelocityX(100);

            if (enemy.x > 800 || enemy.x < 0) {

                enemy.setVelocityX(-enemy.body.velocity.x);

            }

        });



        // 控制移动平台的移动

        this.movingPlatforms.children.iterate(function (platform) {

            platform.setVelocityX(100);

            if (platform.x > 800 || platform.x < 0) {

                platform.setVelocityX(-platform.body.velocity.x);

            }

        });

    }



    collectStar(player, star) {

        star.disableBody(true, true);

        this.score += 10;

        this.scoreText.setText('得分: ' + this.score);

    }



    endGame(player, enemy) {

        this.scene.start('GameOverScene', { score: this.score, level: 3 });

    }



    endLevel(player, star) {

        if (this.stars.countActive(true) === 0) {

            this.scene.start('GameOverScene', { score: this.score, level: 3 });

        }

    }

}

2.4 更新游戏配置

我们需要在游戏配置中添加所有关卡场景，并确保初始场景为MainMenuScene。这样，玩家可以从主菜单开始游戏，依次通过各个关卡，最终到达游戏结束场景。

代码示例

// 游戏配置

const config = {

    type: Phaser.AUTO,

    width: 800,

    height: 600,

    physics: {

        default: 'arcade',

        arcade: {

            gravity: { y: 300 },

            debug: false

        }

    },

    scene: [MainMenuScene, Level1Scene, Level2Scene, Level3Scene, GameOverScene]

};



// 创建游戏实例

const game = new Phaser.Game(config);

2.5 游戏结束场景的改进

为了更好地显示玩家的进展，我们可以在游戏结束场景中显示玩家完成的关卡数。这样，玩家可以清楚地知道他们当前的进度。

代码示例

// 游戏结束场景

class GameOverScene extends Phaser.Scene {

    constructor() {

        super({ key: 'GameOverScene' });

    }



    preload() {

        // 加载必要的资源

        this.load.image('bg', 'assets/game-over-bg.png');

        this.load.image('retryButton', 'assets/retry-button.png');

        this.load.image('menuButton', 'assets/main-menu-button.png');

    }



    create(data) {

        // 添加背景

        this.add.image(400, 300, 'bg');



        // 显示得分

        this.add.text(400, 200, '最终得分: ' + data.score, { fontSize: '32px', fill: '#000' }).setOrigin(0.5);



        // 显示完成的关卡数

        const level = data.level || 1;

        this.add.text(400, 250, '完成关卡: ' + level, { fontSize: '32px', fill: '#000' }).setOrigin(0.5);



        // 添加重新开始按钮

        const retryButton = this.add.image(400, 350, 'retryButton').setInteractive();

        retryButton.on('pointerdown', () => {

            this.scene.start('Level1Scene');

        });



        // 添加返回主菜单按钮

        const menuButton = this.add.image(400, 450, 'menuButton').setInteractive();

        menuButton.on('pointerdown', () => {

            this.scene.start('MainMenuScene');

        });

    }

}

2.6 总结

通过上述案例，我们可以看到Phaser引擎提供了强大的场景管理功能，使得在游戏的不同阶段之间切换变得非常简单。每个场景都可以独立管理其资源、逻辑和状态，同时通过场景切换时传递的数据实现场景之间的连续性和交互性。

  1. 场景创建：每个场景都继承自Phaser.Scene类，并在构造函数中指定场景的键名。

  2. 资源加载：在preload方法中加载场景所需的资源。

  3. 场景逻辑：在create方法中初始化场景的元素和逻辑，在update方法中处理每帧的更新。

  4. 场景切换：通过this.scene.start方法切换到其他场景，并可以传递数据。

  5. 状态传递：场景切换时可以通过传递数据对象来实现状态的传递，例如玩家的得分和完成的关卡数。

通过这些功能，我们可以轻松地创建多关卡游戏，并为玩家提供丰富的游戏体验。希望这些案例能帮助你更好地理解和应用Phaser引擎的场景管理机制。

2.7 扩展与优化

在实际开发中，多关卡游戏可能需要更多的扩展和优化。以下是一些常见的改进方法：

  1. 关卡数据管理：可以将关卡的数据（如地图布局、敌人位置、星星数量等）存储在外部文件中，通过加载这些文件来动态生成关卡。

  2. 关卡选择菜单：可以在主菜单中添加关卡选择功能，让玩家可以选择不同的关卡开始游戏。

  3. 进度保存：可以通过本地存储或服务器保存玩家的进度，以便玩家可以在不同设备上继续游戏。

  4. 音效与背景音乐：为每个场景添加不同的音效和背景音乐，增强游戏的沉浸感。

2.8 进一步学习

Phaser引擎的场景管理功能非常强大，除了基本的场景切换和状态传递外，还可以实现更多高级功能，如场景叠加、场景暂停等。以下是一些进一步学习的资源：

通过不断学习和实践，你将能够更熟练地使用Phaser引擎来创建复杂和有趣的游戏。祝你在游戏开发的道路上越走越远！
在这里插入图片描述

悦读

道可道，非常道；名可名，非常名。 无名，天地之始，有名，万物之母。 故常无欲，以观其妙，常有欲，以观其徼。 此两者，同出而异名，同谓之玄，玄之又玄，众妙之门。

最新收录
java/php/node.js/python社区服务微信小程序【2024年毕设】
基于java房屋出租计算机毕业设计源码+系统+lw文档+mysql数据库+调试部署
正则表达式的基于Java的应用
学习嵩山版《Java 开发手册》：编程规约 - 命名风格（P19）
具身大模型研究综述
python函数式编程
等级保护测评经验分享干货
DAY08
大语言模型中，role为user、assistant、system有什么区别
【算法工程师面试】大模型（LLM）相关-ChatGLM篇
;