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

はじめに

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

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

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

そんなこんなで

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に慣れ親しんだデザイナーが多いという背景もあり… ↩