pixi-animate-container

"pixi-animate-container" is a plugin for using content created by Adobe Animate with "pixi.js".

---

Overview

Each original (simplified) flow

• createjs contents created with Adobe Animate

• pixi.js contents

Flow to be realized

Supported version

• A complete set of content created with Adobe Animate version 24.0.1
• pixi.js 5.3.x

I have not confirmed the operation on other versions.

Setup

NPM

npm install --save pixi.js @tawaship/pixi-animate-container
Copy

import * as PIXI from 'pixi.js';
import * as PixiAnimate from '@tawaship/pixi-animate-container';
Copy

Browser

git clone https://github.com/tawaship/pixi-animate-container
Copy

<script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.3.2/pixi.min.js"></script>
<script src="/path/to/dist/pixi-animate-container.min.js"></script>
<script src="[your content].js"></script>
Copy

Usage

For browsers, this module is stored in the namespace "PIXI.animate".

const app = new PIXI.Application();

PIXI.animate.loadAssetAsync([{
    id: "[conposition id]", // "lib.properties.id" in Animate content.
    basepath: "[content directory path]", // Directory path of Animate content.
    options: {
        crossOrigin: false
    }
}]).then(function(lib) {
    // If you load multiple contents, the argument "lib" will be an array and the "lib" of each content will be stored in order.
    class Root extends PIXI.animate.Container {
        constructor() {
            super();
            app.ticker.add(this.handleTick, this);
            this.addCreatejs(new lib.game()); // The class you want to use.
        }
    }
    
    app.stage.addChild(new Root());
    document.body.appendChild(app.view);
});
Copy

See here for complete options for PIXI.animate.loadAssetAsync.

Change log

1.0.0

• Overrides

  name	class
  createjs.MovieClip	CreatejsMovieClip

2.0.0

• Integrate core modules into source code
• Changed the method of linking with pixi.js ticker
• Supports sound playback
• Improving accuracy of interaction processing