3
2

More than 3 years have passed since last update.

pixi.jsからAdobe Animateで作ったコンテンツを使いたい

Last updated at Posted at 2020-10-09

はじめに

皆さんはゲームを作る際、デザイナーが作ったUI・アニメーションをどのような形で実装しているでしょうか?

Unityのようにそのあたりの実装機能を持つIDEが内蔵されていればいいんですが、
スクリプトのみでやらなければいけない場合、目コピしたりプロパティ変化を見てみたりと
わりと面倒だったりするんですよね。

私はHTML5ゲームを作るのに、主に pixi.js を使用しているんですが、
シンプルなゲームであればまだしも、アプリ然としたゲームになってくるにしたがって
このアニメーション実装時間かかるよ問題が重くのしかかってくるように。1

そんなこんなで

pixi.jsからAdobe Animateでパブリッシュしたコンテンツを使用できるプラグイン
pixi-animate-container

を作ってみました。

ドキュメントとサンプル

使いかた

用意するもの

  • CreateJS 1.0.0
  • pixi.js 5.3.2
  • pixi-animate-container 3.0.1
  • Adobe Animateでパブリッシュしたコンテンツ一式

ファイルの読み込み

<script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
<script src="pixi.5.3.2.min.js"></script>
<script src="pixi-animate-container.min.js"></script>
<script src="content/content.js"></script> <!-- Adobe Animateでパブリッシュしたコンテンツ一式のjsファイル -->
  1. 最初にpixi.js及びCreateJS(順不同)
  2. 次にpixi-animate-container
  3. 最後にcontent/content.js

という順で読み込むようにしてください。

実装

アプリケーションを作る

const app = new PIXI.Application({
    width: 450,
    height: 800,
    antialias: true,
    resolution: pRatio,
    backgroundColor: 0xFFFFFF
});

普通にアプリケーションを作ればいいです。

初期化する

PIXI.animate.init({
    useSynchedTimeline: true,
    useDeltaTime: false,
    ticker: app.ticker
});
  • tickerには、コンテンツのループ処理に使うtickerを指定します。
    独自にticker作って処理しますというのでなければ、PIXI.Application#tickerを入れればOK。

コンテンツの準備をする

const prepare = PIXI.animate.loadAssetAsync({
    id: [conposition id],
    basepath: [content directory path],
    options: {
        crossOrigin: false
    }
});
  • 引数は使用するコンテンツのデータオブジェクト。
    使用するコンテンツが複数あれば、データオブジェクト配列を指定することも可能。

    • id
      content.js内でlib.properties.idとして定義されている32文字くらいの文字列。
    • basepath
      「Adobe Animateでパブリッシュしたコンテンツ一式ディレクトリ」の HTMLから見た相対パス、または絶対パスのいずれか。
    • options.crossOrigin
      アセットの読み込みがcrossOriginになるかどうか。
      basepathに絶対パスを使用、かつオリジンが異なる場合はtrueにする。

使用する

prepare.then(function(lib) {
    class Root extends PIXI.animate.Container {
        constructor() {
            super();

            this.addCreatejs(new lib.game());
        }
    }

    app.stage.addChild(new Root());
    document.body.appendChild(app.view);
});
  • PIXI.animate.loadAssetAsyncは、指定されたコンテンツのlibで解決される。
    仮に複数のコンテンツが指定されている場合は、libの配列で解決される。

  • PIXI.animate.Container#addCreatejsの引数に、libに定義されている任意のクラスインスタンスを指定する

補足

PIXI.animate.Container#addCreatejsの戻り値は、引数に指定したcreatejsインスタンスそのものです。
ですので例えば

  • 'lib.game'クラスインスタンスのinstance_3プロパティに格納されているインスタンスを0フレームで止める
this.addCreatejs(new lib.game()).instance_3.gotoAndStop(0);
  • lib.game'クラスインスタンスのalphaを0.5にする
this.addCreatejs(new lib.game()).alpha = 0.5;

のような処理が可能です。
またこれらの処理によって描画内容が変化する場合、もちろん見た目(pixi.jsで作ったcanvasの表示)に反映されます。

おわりに

みんなもpixi.js使ってね!


  1. pixi.jsはspineが使えるので、そっちに行くのもありなんですが、
    AnimateないしFlashに慣れ親しんだデザイナーが多いという背景もあり… 

3
2
5

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
2