Excalibur游戏引擎场景切换与淡入淡出效果实现详解

Excalibur游戏引擎场景切换与淡入淡出效果实现详解

Excalibur是一款优秀的2D游戏引擎，它提供了丰富的功能来简化游戏开发流程。本文将重点讲解如何使用Excalibur实现场景之间的切换以及添加淡入淡出过渡效果，这是游戏开发中非常常见的需求。

场景基础概念

在Excalibur中，Scene类是构建游戏世界的基本单元。每个场景可以包含自己的游戏对象、逻辑和渲染内容。合理划分场景有助于组织游戏结构，例如：

• 主菜单场景
• 游戏主场景
• 暂停菜单场景
• 游戏结束场景等

创建自定义场景

示例中展示了如何创建两个简单的场景：

class MyScene extends ex.Scene {
  public onInitialize(): void {
    this.add(
      new ex.Actor({
        pos: ex.vec(200, 200),
        color: ex.Color.Red,
        width: 100,
        height: 200
      }))
  }
}

class MyOtherScene extends ex.Scene {
  public onInitialize(): void {
    this.add(
      new ex.Actor({
        pos: ex.vec(200, 200),
        color: ex.Color.Blue,
        width: 200,
        height: 100
      }))
  }
}

这两个场景的主要区别在于：

1. MyScene包含一个红色、竖长方形的角色
2. MyOtherScene包含一个蓝色、横长方形的角色

onInitialize方法是场景生命周期的关键部分，在这里我们可以添加场景初始化的逻辑和游戏对象。

场景注册与管理

创建场景后，需要将它们注册到游戏实例中：

game.add('scene1', {
  scene: MyScene,
  transitions: {
    in: new ex.CrossFade({duration: 1500, blockInput: true }),
  }
});

game.add('scene2', { 
  scene: MyOtherScene,
  transitions: {
    in: new ex.CrossFade({duration: 1500, blockInput: true }),
  }
});

这里有几个关键点：

1. game.add()方法用于注册场景，第一个参数是场景名称，第二个参数是场景配置
2. 配置中可以指定场景类和过渡效果
3. transitions.in定义了进入场景时的过渡效果

淡入淡出过渡效果

Excalibur提供了CrossFade类来实现场景间的淡入淡出效果，其配置选项包括：

• duration: 过渡持续时间（毫秒），示例中设置为1500毫秒（1.5秒）
• blockInput: 是否在过渡期间阻止用户输入，防止过渡期间误操作

这种过渡效果会平滑地将当前场景淡出，同时将新场景淡入，创造出流畅的视觉体验。

场景切换控制

示例中通过鼠标点击事件来切换场景：

game.input.pointers.primary.on('down', () => {
  game.currentSceneName === 'scene2' ? game.goto('scene1') : game.goto('scene2');
});

这段代码实现了：

1. 监听鼠标主按钮（通常是左键）的按下事件
2. 根据当前场景名称决定切换到哪个场景
3. 使用game.goto()方法进行场景切换

游戏启动

最后，游戏以第二个场景作为初始场景启动：

game.start('scene2');

实际应用建议

在实际游戏开发中，可以扩展这个基础模式：

1. 场景预加载：在切换前预加载资源，避免卡顿
2. 多种过渡效果：除了淡入淡出，还可以实现滑动、缩放等效果
3. 场景间数据传递：通过全局变量或事件系统在场景间传递游戏状态
4. 过渡回调：添加过渡开始和结束时的回调函数，执行特定逻辑

总结

通过Excalibur的场景管理系统，开发者可以轻松实现复杂的场景切换逻辑和视觉效果。淡入淡出过渡是提升游戏专业感和用户体验的简单而有效的方式。掌握这些基础后，可以进一步探索Excalibur提供的其他高级场景管理功能。