Sample Project

[ajaysinghthakur]

I have been trying to use the library, I have successfully exported the fla file into js and HTML files. The problem is that I didn't find any sample project using pixi-animate that uses all its methods like nested child stag anyone has please share.

[matthewww]

One way is to publish your projects to the same folder, giving them different stage names and namespaces in publish settings.

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>

Or in the words of @bigtimebuddy:

Another way around that problem is to export FLAs as CommonJS compatible modules. Then use browserify or webpack to bundle them together. This will keep them from polluting the global lib namespace.

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:

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

Or for more control over your hierarchy, you could still use load, but access the stage constructors once loaded.

load(circle.stage).onComplete.once(() => {
     const circleStage = new circle.stage();
     app.stage.addChild(circleStage);
});

load(square.stage).onComplete.once(() => {
     const squareStage = new square.stage();
     app.stage.addChild(squareStage);
});