[翻译]在Phaser 3中使用淡出进行场景过渡(Scene Transition with Fade Out in Phaser 3)

[zhang0ZGC]

原文地址：https://blog.ourcade.co/posts/2020/phaser-3-fade-out-scene-transition/
在学习过程中顺便翻译，也算是提升自己的能力吧😊

你是否正在寻找一种改进场景转换的快速方法？
从一个场景生硬切换到另一个场景有时候是可取的。
但有一个淡出效果的柔和过渡，并等待一段时间，然后淡入，会更加引人注目。
即使是短暂的淡出、淡入也会让人感觉更加优美。
Phaser 3 通过在摄像机(Camera)中内置淡出和淡入效果使得这一切变得非常容易。
本文将向你展示如何使用淡入淡出效果并在新场景中在淡入淡出之前添加延迟以增加戏剧性！

示例构建

示例中包含两个场景，一个是 Ourcade 的 logo，另一个是 Phaser 3 的 logo。

然后我们将使用 Space 键来触发从一个场景淡出并从另一个场景淡入。

代码使用 TypeScript 编写，但如果你不熟悉也不要担心。 Phaser 使这种效果的使用变得很简单，以至于 TypeScript 看起来与现代 JavaScript 没有太大区别！

如果你一直犹豫不决，这就是一个接触 TypeScript 的好机会。

我们还有一本免费的书来帮助你开始使用 TypeScript 和 Phaser 3。

注：https://ourcade.co/books/infinite-runner-phaser3/

Ourcade Logo 场景

我们的第一个场景是 OurcadeLogoScene，它只是加载 Ourcade 的 logo 并显示它。

import Phaser from 'phaser'

export default class OurcadeLogoScene extends Phaser.Scene
{
  constructor()
  {
    super('ourcade-logo')
  }

  preload()
  {
    this.load.image('ourcade-logo', 'assets/ourcade-logo.png')
  }

  create()
  {
    this.cameras.main.setBackgroundColor('#421278')

    this.add.image(400, 300, 'ourcade-logo')
  }
}

一切都相当简单。

请注意，我们将此场景的背景颜色设置为了 #421278，即深紫色。

Phaser Logo 场景

下一步，我们使用与 OurcadeLogoScene 相似的方式创建 PhaserLogoScene:

import Phaser from 'phaser'

export default class PhaserLogoScene extends Phaser.Scene
{
  constructor()
  {
    super('phaser-logo')
  }

  preload()
  {
    this.load.image('phaser-logo', 'assets/phaser-logo.png')
  }

  create()
  {
    this.add.image(400, 300, 'phaser-logo')
  }
}

这个场景更简单，因为我们没有设置自定义背景颜色。

你有没有注意到这段代码与现代 JavaScript 非常相似？

TypeScript 没什么好怕的！ 任何有效的 JavaScript 也是有效的 TypeScript。

从场景淡出

现在我们创建好了场景，让我们淡出 OurcadeLogoScene 并启动 PhaserLogoScene。

一旦按下空格键，将开始淡出。

// in OurcadeLogoScene

create()
{
  // previous code...

  this.input.keyboard.once('keydown-SPACE', () => {
    // fade to black
    this.cameras.main.fadeOut(1000, 0, 0, 0)
  })

  this.cameras.main.once(Phaser.Cameras.Scene2D.Events.FADE_OUT_COMPLETE, (cam, effect) => {
    this.scene.start('phaser-logo')
  })
}

我们在第 7 行为 keydown-SPACE 事件添加一个监听器，然后在第 9 行，事件发生时启动淡出效果。

第一个参数是以毫秒为单位的时间，我们设置为 1000。

接下来的 3 个参数定义要淡出的颜色的红色、蓝色和绿色值。 我们为所有值选择了 0，即黑色。

接下来，我们监听在淡出效果完成后触发的 Phaser.Cameras.Scene2D.Events.FADE_OUT_COMPLETE 事件并启动 phaser-logo 场景。

你会看到当前场景淡出，然后下一个场景突然出现。

淡入场景

现在有了场景，让我们淡出 OurcadeLogoScene 场景并启动 PhaserLogoScenen。

一旦按下Space 键，就开始淡出。

// in PhaserLogoScene

create()
{
  // previous code...

  this.cameras.main.fadeIn(1000, 0, 0, 0)
}

那一行就是你所需要的！ 它与我们之前使用的 fadeOut() 方法具有相同参数列表。

这将使场景花费 1000 毫秒从黑色淡入。

淡入前延迟

Now, let's add a dramatic delay before starting the next Scene.
现在，让我们在开始下一个场景之前添加一个戏剧性的延迟。

将 OurcadeLogoScene 中的 this.scene.start() 调用替换为：

// in OurcadeLogoScene

create()
{
  // previous code...

  this.cameras.main.once(Phaser.Cameras.Scene2D.Events.FADE_OUT_COMPLETE, (cam, effect) => {
    this.time.delayedCall(1000, () => {
      this.scene.start('phaser-logo')
    })
  })
}

新的代码行在第 8 行，我们使用 delayedCall 在启动 phaser-logo 场景之前等待 1000 毫秒或 1 秒。

将其与 Fade Out a Scene 部分中的代码进行比较，以更好地了解更改的内容。

淡出，延迟，然后淡入将如下所示：

via GIPHY

可选的淡入效果

我们的示例始终淡入 PhaserLogoScene，但您可能正在从游戏中的不同点过渡到场景，并且可能并不总是希望它淡入。

我们可以通过在启动场景时将附加数据传递给场景，然后使用该数据来确定场景是否应该淡入，从而使其成为可选的。

这是 TypeScript 类型信息的来源：

// in PhaserLogoScene

create(data: { fadeIn: boolean })
{
  // other code...

  if (data.fadeIn)
  {
    // wrap this line inside this if block
    this.cameras.main.fadeIn(1000, 0, 0, 0)
  }
}

我们向 create() 方法添加了一个 data 参数。 它有一个名为 fadeIn 的属性，它的类型是 boolean。

然后我们在第 7 行检查 data.fadeIn 是否为真，然后再执行淡入。

这意味着我们在 OurcadeLogoScene 中的现有代码在启动 phaser-logo 场景时将不再导致淡入。

以下是如何让它再次淡入的示例：

// in OurcadeLogoScene

create()
{
  // other code...

  this.cameras.main.once(Phaser.Cameras.Scene2D.Events.FADE_OUT_COMPLETE, (cam, effect) => {
    this.time.delayedCall(1000, () => {
      this.scene.start('phaser-logo', { fadeIn: true })
    })
  })
}

当我们启动 phaser-logo 场景时，我们在第 9 行传入了对象 {fadeIn: true }。

接下来

Phaser 3 带有 一些其他效果，你可以单独使用或混合搭配作为场景转换。

您还可以通过调整传递给 fadeOut() 和 fadeIn() 的毫秒值，或者使用不同的颜色来获得不同的外观和感觉，从而从长时间的淡出到快速淡入。