如何在 Phaser3 中添加 Lottie 动画？

Question

我正在尝试在我的游戏中的 Phaser 3 中添加 Lottie 动画。

但我无法添加。这里的问题是，我将此动画附加到 HTML DOM 元素，因此动画位于 Phaser 游戏画布上方，由于我无法与我的 Phaser 游戏元素交互。我无法在我的 Phaser 游戏画布中包含 Lottie 动画 JSON 文件。

我也尝试让容器成为画布，但它不起作用。

以下是 HTML5 中使用的 Lottie 动画示例：Lottie animation Demo

这是 Lottie 动画文件的链接： Lottie animation JSON file example

这是我为此使用的代码，

 this.animation = bodymovin.loadAnimation({
      container: document.getElementById("game"), // Required
      path: "assets/json/RainLoop.json", // Required
      renderer: "canvas", // Required
      loop: true, // Optional
      autoplay: true, // Optional
      name: "Hello World", // Name for future reference. Optional.
    });

我想将这个 Lottie 动画包含在 Phaser 游戏画布中，但它只包含在我的 HTML DOM 元素中。

Answer 1

可能尚不支持将 Lottie 动画加载到 Phaser 游戏画布中的方式。 Phaser 只能在 preload() 方法中显示通过加载器（例如 this.load.sprite()）引入的游戏画布中的对象。

不幸的是，Lottie json 文件的结构看起来与 expected format -- [example] -- 的 this.load.animation() 加载程序不匹配。

您可以尝试将 Lottie JSON 文件解析为适当的格式，但这可能会非常复杂。

如果您想使用 Lottie 动画作为背景，您可以在配置对象中将 Phaser 画布设置为透明，如下所示：

var config = {
  type: Phaser.AUTO,
  transparent: true,
  ...
};

然后您可以将 Lottie 动画加载到您的 HTML 中，并使用 CSS 将其放置在您的画布后面。