CODEWITHSUNDEEP
javascriptanimationhtml5-canvasphaser-frameworklottie
Ravi Kapuriya
Ravi Kapuriya

Reputation: 33

How to add Lottie Animation in Phaser3?

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

But I am not able to add. Here problem is, this animation I am attaching to the HTML DOM elements and so that the animation comes above the Phaser game canvas, Due to what I am not able to interact with my phaser game elements. I am not able to include the Lottie animation JSON file inside my Phaser game canvas.

I have also tried to make container to be the canvas, but it is not working.

Here is the example of the Lottie animation used in HTML5: Lottie animation Demo

This is the link to the Lottie animation file: Lottie animation JSON file example

Here is the code I am using for this,

 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.
    });

I want to include this Lottie animation to be include inside Phaser game canvas, but it is only including to my HTML DOM element.

Upvotes: 1

Views: 1494

Answers (1)

brae
brae

Reputation: 1122

It's possible there is not yet a supported way to load Lottie animations into a Phaser game canvas. Phaser can only display objects in the game canvas that are brought in with a loader, like this.load.sprite(), in the preload() method.

Unfortunately, it looks like the structure of Lottie json files doesn't match with the expected format -- [example] -- for the this.load.animation() loader.

You could attempt to parse the Lottie JSON file into the appropriate format, but that's probably going to be very complicated.

If you want to use your Lottie animation as a background, you could set the Phaser canvas to transparent in the config object like this:

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

And then you can load the Lottie animation into your HTML positioned appropriately with CSS to sit behind your canvas.

Upvotes: 1

Related Questions