如何在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適當地放置在畫布后面。