はじめに
皆さんはゲームを作る際、デザイナーが作った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ファイル -->
- 最初にpixi.js及びCreateJS(順不同)
- 次にpixi-animate-container
- 最後に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使ってね!
-
pixi.jsは
spine
が使えるので、そっちに行くのもありなんですが、
AnimateないしFlashに慣れ親しんだデザイナーが多いという背景もあり… ↩