Cannot add child stage using pixijs and pixi-animate

Question

I am using PixiJs 4.4.2 and Pixi-animate to load stages generated by Adobe animate. in my project,

I have divided my project into components and generated adobe stage pixijs code for each component. Now want to combine them into one project. I have succeeded to load one component as the main stage but cannot load other components as child.

Here is my code, where I have loaded my main stage:

var waterfall = lib.Waterfall_PixiAnimate;
var bear = lib.reference_BearLevel_PixiAnimate;

var salmon = new PIXI.animate.Scene(3840, 2160, {}, true)
document.body.appendChild(salmon.view);
salmon.load(waterfall)

In the above code, I have succeeded to add waterfall stage but on that stage, I want to render my child stage bear but cannot render on waterfall stage.

How can I add child stage?

Answer 1

One way is to publish your projects to the same folder, giving them different stage names and namespaces in publish settings.... (I'm sorry I cannot post images, not enough rep!)

...and then combine them by using one Scene but call load for each exported js file.

<canvas id="stage" width="550" height="400"></canvas>
<script src="libs/pixi.js"></script>
<script src="libs/pixi-animate.js"></script>
<script src="square.js"></script>
<script src="circle.js"></script>
<script>
    var scene = new PIXI.animate.Scene(550, 400, {
        view: document.getElementById("stage"),
        backgroundColor: 0xffffff,
        antialias: true
    });
    scene.load(lib1.circle);
    scene.load(lib2.square);
</script>

Alternatively if you have your own pixi application or stage already, you could bypass the Scene and just use the pixi-animate load function in isolation (in ES6 for brevity):

import { Application } from 'pixi.js';
import { load } from 'pixi-animate';

const square = require('./square'),
 circle = require('./circle'),
 app = new Application();

document.body.appendChild(app.view); 

load(square.stage, app.stage);
load(circle.stage, app.stage);