引言

一、技术背景

1.1 场景（Scene）的核心定义

• 独立渲染单元：每个场景拥有自己的节点树（包含角色、UI、背景等），场景切换时原场景的资源（如纹理、音频）可能被释放（取决于切换方式）。
• 生命周期可控：通过 onLoad、onStart、onEnter、onExit等回调方法，开发者可以精确控制场景的初始化、显示与销毁逻辑。
• 数据隔离与传递：不同场景的变量默认相互独立，需通过全局管理器（如单例模式）或引擎提供的参数传递机制（如 userData）共享数据。

1.2 场景切换的三种核心方式

二、应用使用场景

2.1 典型场景映射

三、不同引擎下的代码实现

3.1 Cocos Creator（TypeScript 实现）

场景切换与生命周期完整示例

场景 1：主菜单（MainMenu）→ 战斗场景（BattleScene，replace 方式）

import { _decorator, Component, Node, Button, director } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('MainMenu')
export class MainMenu extends Component {
    @property(Button) startGameBtn: Button | null = null; // 开始游戏按钮

    start() {
        // 绑定按钮点击事件
        this.startGameBtn?.node.on(Button.EventType.CLICK, this.onStartGame, this);
    }

    private onStartGame() {
        // 方式1：直接替换场景（销毁当前主菜单，加载战斗场景）
        director.replaceScene('BattleScene'); // 'BattleScene' 是场景资源名称（需在编辑器中设置）

        // 方式2（可选）：传递参数（通过 userData）
        // director.replaceScene('BattleScene', { level: 1, difficulty: 'easy' });
    }

    // 场景生命周期回调（Cocos Creator 3.x）
    onLoad() {
        console.log('MainMenu: 资源加载完成（onLoad）');
    }

    onStart() {
        console.log('MainMenu: 节点首次激活（onStart）');
    }

    onEnable() {
        console.log('MainMenu: 节点变为可用（onEnable）');
    }

    onDisable() {
        console.log('MainMenu: 节点变为不可用（onDisable）');
    }

    onDestroy() {
        console.log('MainMenu: 场景被销毁（onDestroy）');
    }
}

import { _decorator, Component, Node, director } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('BattleScene')
export class BattleScene extends Component {
    start() {
        console.log('BattleScene: 战斗场景初始化');
    }

    // 战斗结束返回主菜单（通过 push/pop 或 replace）
    onBattleEnd() {
        // 方式1：直接返回主菜单（替换当前战斗场景）
        director.replaceScene('MainMenu');

        // 方式2：压栈返回（保留战斗场景历史，通过 pop 返回）
        // director.popScene(); // 需之前通过 pushScene 进入战斗场景
    }

    onLoad() {
        console.log('BattleScene: 资源加载完成（onLoad）');
    }

    onDestroy() {
        console.log('BattleScene: 战斗场景被销毁（onDestroy）');
    }
}

场景 2：使用 push/pop 实现“设置界面”返回功能

import { _decorator, Component, Node, Button, director } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('GameScene')
export class GameScene extends Component {
    @property(Button) pauseBtn: Button | null = null; // 暂停按钮

    start() {
        this.pauseBtn?.node.on(Button.EventType.CLICK, this.onPauseGame, this);
    }

    private onPauseGame() {
        // 暂停当前游戏逻辑（例如停止角色移动、冻结计时器）
        this.pauseGameLogic();

        // 压栈进入设置界面（保留游戏场景状态）
        director.pushScene('SettingScene');
    }

    private pauseGameLogic() {
        console.log('游戏逻辑已暂停');
    }

    onDestroy() {
        console.log('GameScene: 游戏场景被销毁（若未 pop 则可能触发）');
    }
}

// SettingScene.ts（设置界面脚本）
import { _decorator, Component, Node, Button, director } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('SettingScene')
export class SettingScene extends Component {
    @property(Button) backBtn: Button | null = null; // 返回按钮

    start() {
        this.backBtn?.node.on(Button.EventType.CLICK, this.onBackToGame, this);
    }

    private onBackToGame() {
        // 弹栈返回游戏场景（恢复游戏逻辑）
        director.popScene();
    }

    onDestroy() {
        console.log('SettingScene: 设置界面被销毁');
    }
}

3.2 Cocos2d-x（C++ 实现）

场景切换核心代码（Cocos2d-x v4.x）

场景 1：主菜单（MainMenuScene）→ 战斗场景（BattleScene，replace 方式）

#include "MainMenuScene.h"
#include "BattleScene.h"
#include "cocos2d.h"

USING_NS_CC;

Scene* MainMenuScene::createScene() {
    return MainMenuScene::create();
}

bool MainMenuScene::init() {
    if (!Scene::init()) return false;

    // 创建“开始游戏”按钮
    auto startBtn = ui::Button::create("start_btn.png");
    startBtn->setPosition(Vec2(400, 300));
    startBtn->addClickEventListener([](Ref* sender) {
        // 替换场景：销毁当前主菜单，加载战斗场景
        auto battleScene = BattleScene::createScene();
        Director::getInstance()->replaceScene(battleScene);
    });
    this->addChild(startBtn);

    return true;
}

// 场景生命周期回调（Cocos2d-x）
void MainMenuScene::onEnter() {
    Scene::onEnter();
    log("MainMenuScene: 进入场景（onEnter）");
}

void MainMenuScene::onExit() {
    Scene::onExit();
    log("MainMenuScene: 退出场景（onExit）");
}

void MainMenuScene::onEnterTransitionDidFinish() {
    Scene::onEnterTransitionDidFinish();
    log("MainMenuScene: 场景切换动画完成（onEnterTransitionDidFinish）");
}

#include "BattleScene.h"
#include "MainMenuScene.h"
#include "cocos2d.h"

USING_NS_CC;

Scene* BattleScene::createScene() {
    return BattleScene::create();
}

bool BattleScene::init() {
    if (!Scene::init()) return false;
    log("BattleScene: 战斗场景初始化");
    return true;
}

void BattleScene::onExit() {
    Scene::onExit();
    log("BattleScene: 战斗场景退出");
}

场景 2：push/pop 实现“设置界面”返回

#include "GameScene.h"
#include "SettingScene.h"
#include "cocos2d.h"

USING_NS_CC;

Scene* GameScene::createScene() {
    return GameScene::create();
}

bool GameScene::init() {
    if (!Scene::init()) return false;

    auto pauseBtn = ui::Button::create("pause_btn.png");
    pauseBtn->setPosition(Vec2(100, 100));
    pauseBtn->addClickEventListener([](Ref* sender) {
        // 压栈进入设置界面
        auto settingScene = SettingScene::createScene();
        Director::getInstance()->pushScene(settingScene);
    });
    this->addChild(pauseBtn);

    return true;
}

#include "SettingScene.h"
#include "GameScene.h"
#include "cocos2d.h"

USING_NS_CC;

Scene* SettingScene::createScene() {
    return SettingScene::create();
}

bool SettingScene::init() {
    if (!Scene::init()) return false;

    auto backBtn = ui::Button::create("back_btn.png");
    backBtn->setPosition(Vec2(100, 100));
    backBtn->addClickEventListener([](Ref* sender) {
        // 弹栈返回游戏场景
        Director::getInstance()->popScene();
    });
    this->addChild(backBtn);

    return true;
}

四、原理解释与核心特性

4.1 场景切换流程图

sequenceDiagram
    participant Director as 导演(Director)
    participant CurrentScene as 当前场景
    participant NewScene as 新场景
    participant SceneStack as 场景栈（仅push/pop）

    Note over Director: 场景切换触发（如按钮点击）
    Director->>CurrentScene: onExit()（当前场景退出）
    alt replace 方式
        Director->>CurrentScene: onDestroy()（销毁当前场景）
        Director->>NewScene: createScene()（创建新场景）
        Director->>NewScene: onLoad()（资源加载）
        Director->>NewScene: onEnter()（进入场景）
    else push 方式
        Director->>SceneStack: push(CurrentScene)（当前场景入栈）
        Director->>NewScene: createScene()
        Director->>NewScene: onLoad()
        Director->>NewScene: onEnter()
    else pop 方式
        Director->>SceneStack: pop()（弹出顶部场景）
        Director->>CurrentScene: onExit()
        Director->>PreviousScene: onEnter()（栈底场景恢复）
    end

4.2 核心特性

五、环境准备与实战测试

5.1 开发环境配置

• Cocos Creator：下载 创建 2D 项目，新建多个场景（如 MainMenu、BattleScene、SettingScene）。
• Cocos2d-x：下载配置 CMake 和 IDE（如 Visual Studio），创建多个场景类（继承 cocos2d::Scene）。

5.2 测试步骤（以 Cocos Creator 为例）

测试 1：replace 方式切换（主菜单→战斗场景）

1. 步骤 1：在编辑器中创建“MainMenu”场景（添加“开始游戏”按钮），绑定 MainMenu.ts脚本。
2. 步骤 2：创建“BattleScene”场景（添加“战斗结束”按钮，绑定返回逻辑）。
3. 步骤 3：运行游戏，点击“开始游戏”按钮，观察控制台输出：
   • 主菜单触发 onDestroy()（replace 方式）。
   • 战斗场景触发 onLoad()和 onEnter()。
4. 验证点：主菜单资源是否释放？战斗场景是否正常显示？

测试 2：push/pop 方式切换（游戏→设置→返回）

1. 步骤 1：创建“GameScene”（添加“暂停”按钮），绑定压栈进入“SettingScene”。
2. 步骤 2：创建“SettingScene”（添加“返回”按钮），绑定弹栈返回“GameScene”。
3. 步骤 3：运行游戏，点击“暂停”→“返回”，观察控制台：
   • 游戏场景触发 onPauseGameLogic()（暂停逻辑）。
   • 设置场景触发 onEnter()，返回后游戏场景触发 onEnter()（恢复）。
4. 验证点：游戏逻辑是否在设置界面期间暂停？返回后是否正常恢复？

六、疑难解答

6.1 常见问题

6.2 调试技巧

• 打印日志：在每个场景的 onLoad、onEnter、onExit中添加 console.log，跟踪场景状态变化。
• 场景预览：在 Cocos Creator 编辑器中直接预览单个场景，确认节点树与逻辑正确。
• 性能分析：通过 Profiler​ 工具检查场景切换时的内存占用与 CPU 消耗。

七、未来展望与技术趋势

1. 场景异步加载：支持后台预加载下一个场景资源（如战斗关卡的复杂模型），减少切换时的等待时间。
2. 跨平台一致性：统一 Web、原生（iOS/Android）和小游戏平台的场景切换行为（如动画效果兼容性）。
3. 状态持久化：结合本地存储（如 PlayerPrefs/SQLite）保存场景间的关键数据（如玩家进度、设置选项）。
4. 3D 场景扩展：随着 Cocos Creator 3.x 对 3D 的支持增强，场景切换将涵盖 3D 模型加载与相机视角过渡。

八、总结

• replace​ 适用于“单向流程”（如主菜单→游戏），简洁高效但不可返回；
• push/pop​ 适用于“多级导航”（如游戏→设置→返回），保留历史状态提升用户体验；
• 生命周期回调​ 提供了精确控制场景初始化、显示与销毁的时机，是资源管理与数据传递的关键。