javascript - 如何在Phaser3中添加Lottie动画？

Question

I am trying to add Lottie animation in the Phaser 3 in my game.

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

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

以下是 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 游戏 Canvas 中，但它仅包含在我的 HTML DOM 元素中。

Answer 1

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

不幸的是，Lottie json 文件的结构与 expected format 不匹配-- [example] -- 对于 this.load.animation() 加载器。

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

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

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

然后您可以将 Lottie 动画加载到 HTML 中，并使用 CSS 适当定位到 Canvas 后面。