相机特效:淡入淡出与闪光——场景切换的"电影感"

举报
yd_296221794 发表于 2026/09/14 09:10:34 2026/09/14
【摘要】 > 相机特效是 Phaser 的"电影语言"——它让场景切换不那么"硬"。## 相机特效概览NEON RUNNER 2077 里用到了三种相机特效:1. **淡入(fadeIn)**:场景出现时2. **淡出(fadeOut)**:场景离开时3. **闪光(flash)**:过渡瞬间## 淡入:GameScene 的入场```ts// GameScene.tsthis.cameras.mai...

> 相机特效是 Phaser 的"电影语言"——它让场景切换不那么"硬"。


## 相机特效概览


NEON RUNNER 2077 里用到了三种相机特效:


1. **淡入(fadeIn)**:场景出现时

2. **淡出(fadeOut)**:场景离开时

3. **闪光(flash)**:过渡瞬间


## 淡入:GameScene 的入场


```ts

// GameScene.ts

this.cameras.main.fadeIn(500, 10, 10, 15);

```


`fadeIn(500, 10, 10, 15)` 表示:500ms 内从黑色(RGB 10,10,15)淡入到正常画面。这个特效在 `GameScene` 的 `create()` 里调用——玩家从菜单进入战斗时,画面从黑屏慢慢亮起来。


### 为什么是 (10, 10, 15)


RGB (10, 10, 15) 不是纯黑(0, 0, 0),而是带一点点蓝的黑色。这个颜色和 `DEEP_BLACK`(`#0A0A0F`)一致——淡入完成后,背景颜色和相机淡入的颜色无缝衔接。


## 淡出:场景切换的过渡


`MenuScene` 里进入 GameScene 的淡出:


```ts

this.cameras.main.fadeOut(400, 10, 10, 15);

this.cameras.main.once('camerafadeoutcomplete', () => {

  this.scene.start('GameScene');

});

```


`fadeOut(400, 10, 10, 15)` 表示:400ms 内从正常画面淡出到黑色(RGB 10,10,15)。淡出完成后,回调触发 `this.scene.start('GameScene')`。


### 为什么用 `once` 而不是 `on`


`once('camerafadeoutcomplete', ...)` 确保回调只触发一次。如果用 `on`,每次淡出完成都会触发——如果玩家反复按 ESC,会连续切场景。


## 退出游戏的淡出:红色暗示危险


`MenuScene` 里退出游戏的淡出:


```ts

this.cameras.main.fadeOut(400, 255, 0, 60);

this.cameras.main.once('camerafadeoutcomplete', () => {

  this.scene.start('MenuScene');

});

```


`fadeOut(400, 255, 0, 60)` 用的是红色(255, 0, 60)——品红。这个颜色暗示"危险"、"退出"、"断开连接"。


### 为什么退出游戏不是真的退出


`this.scene.start('MenuScene')` 不是真的退出游戏,而是切回菜单。在网页游戏里,"退出"通常意味着"回到菜单",而不是"关闭浏览器"——后者需要用户手动操作,游戏无法控制。


## 闪光:PreloadScene 的过渡


`PreloadScene` 里加载完成后,用 `flash` 过渡:


```ts

this.cameras.main.fadeOut(500, 10, 10, 15);

this.cameras.main.once('camerafadeoutcomplete', () => {

  this.scene.start('MenuScene');

});

```


`PreloadScene` 里用的是 `fadeOut`,不是 `flash`。`flash` 是瞬间闪白/闪黑,适合"爆炸"、"击中"等瞬间效果。`fadeOut` 是渐变,适合"场景切换"。


## 相机特效的 API 对比


| 特效 | 方法 | 参数 | 用途 |

|---|---|---|---|

| 淡入 | `fadeIn(duration, r, g, b)` | 时长 + 颜色 | 场景出现 |

| 淡出 | `fadeOut(duration, r, g, b)` | 时长 + 颜色 | 场景离开 |

| 闪光 | `flash(duration, r, g, b)` | 时长 + 颜色 | 瞬间过渡 |


## 为什么相机特效很重要


相机特效是"电影感"的来源。如果没有特效,场景切换是"瞬间"的——玩家会觉得"卡了一下"。有了特效,场景切换是"流畅"的——玩家会觉得"这是一个有分量的游戏"。


在赛博朋克语境里,相机特效还暗示**"系统重启"**——淡出是"关机",淡入是"开机"。这个隐喻和 `BootScene` 的"开机"主题一脉相承。


## 下一章预告


相机特效讲完了,但 NEON RUNNER 2077 的代码质量里还有一个关键话题——**TypeScript 严格模式**。`strict` 模式下的类型检查是怎么帮我们挡住错误的?下一章我会拆解这个设计。


> 相机特效的核心原则:**过渡要平滑,颜色要一致**。淡入和淡出的颜色必须和背景色一致,否则会出现"色差"。

【声明】本内容来自华为云开发者社区博主,不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息,否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。