如何在Phaser3中添加Lottie Animation？

Question

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

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

我也试图使容器成为画布，但是它不起作用。

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

这是Lottie动画文件的链接： Lottie动画JSON文件示例

这是我正在为此使用的代码，

 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() 。

不幸的是，对于this.load.animation()加载器，似乎Lottie json文件的结构与预期格式不匹配[示例] 。

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

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

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

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