FlashのStage3DでSpineが動くのか検証しました。
検証にあたり、kikkisnrdec様のkikki's tech noteに記載されたSpineをAction Script(Flash)で使ってみたを参考にさせていただきました。
使用するための準備
早速Stage3Ｄで使用するための準備を行います。
Spineライブラリ
Spine公式サイトより、ライブラリをダウンロードします。
たくさんのライブラリがある中、必要なのは以下の二つです
・spine-as3
・spine-starling
Starlingライブラリ
今回使用したStarlingライブラリのバージョンは1.7です。
Spineデータ
Spine再生に必要なデータは以下の三つです
・atlas
・json or anim
・png
ただ表示するだけならjson、アニメーションを表示（再生）したい場合はanimファイルです。
SWFに埋め込むなり、サーバーに置くなりしてspineデータを読み込めるようにしてください。
これで準備が整いました。
サンプルソース
サンプルソースです。
このサンプルソースはspineデータがサーバーに配置してあると仮定して作成しています。
SpineCharacterComponent
/**
* Spineキャラクターコンポーネント
*
* @author ogino
*/
public class SpineCharacterComponent extends Sprite
{
//-----------------------------------------------------
//コンポーネント
//-----------------------------------------------------
/** スケルトンアニメーション */
private var skeleton:SkeletonAnimation;
/** テクスチャー画像 */
private var image:Bitmap;
/** テクスチャー */
private var texture:Texture;
/** アタッチメントローダー */
private var attachmentLoader:AttachmentLoader;
//-----------------------------------------------------
//コンストラクタ
//-----------------------------------------------------
/**
* コンストラクタ
*/
public function SpineCharacterComponent()
{
loadSpine();
}
//-----------------------------------------------------
//メソッド
//-----------------------------------------------------
/**
* Spineデータをロード
*/
public function loadSpine():void
{
var loader:Loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, textureLoadComplete);
var assetUrl:String = "テクスチャーファイルのＵＲＬ(pngファイル）";
loader.load(new URLRequest(assetUrl), new LoaderContext());
}
/**
* アニメーション再生
*
* @param name
*/
public function animationPlay(name:String):void
{
skeleton.state.setAnimationByName(0, name, true);
}
//-----------------------------------------------------
//イベントハンドラー
//-----------------------------------------------------
/**
* テクスチャーロード完了イベントハンドラー
*
* @param e
*/
private function textureLoadComplete(e:Event):void
{
LoaderInfo(e.currentTarget).removeEventListener(Event.COMPLETE, textureLoadComplete);
// テクスチャーに変換
image = Bitmap(LoaderInfo(e.currentTarget).content);
texture = Texture.fromBitmap(image);
// atlasファイルを読み込む
var loader:URLLoader = new URLLoader();
loader.addEventListener(Event.COMPLETE, atlasLoadComplete);
var assetUrl:String = "atlasファイルのＵＲＬ";
loader.load(new URLRequest(assetUrl));
}
/**
* アトラスロード完了イベントハンドラー
*
* @param e
*/
private function atlasLoadComplete(e:Event):void
{
URLLoader(e.currentTarget).removeEventListener(Event.COMPLETE, atlasLoadComplete);
var spineAtlas:Atlas = new Atlas(URLLoader(e.currentTarget).data, new StarlingTextureLoader(image));
attachmentLoader = new AtlasAttachmentLoader(spineAtlas);
// animファイルを読み込む
var loader:URLLoader = new URLLoader();
loader.addEventListener(Event.COMPLETE, animLoadComplete);
var animUrl:String = "animファイルのＵＲＬ";
loader.load(new URLRequest(animUrl));
}
/**
* アニメーションロード完了イベントハンドラー
*
* @param e
*/
private function animLoadComplete(e:Event):void
{
URLLoader(e.currentTarget).removeEventListener(Event.COMPLETE, animLoadComplete);
var json:SkeletonJson = new SkeletonJson(attachmentLoader);
var skeletonData:SkeletonData = json.readSkeletonData(URLLoader(e.currentTarget).data);
var stateData:AnimationStateData = new AnimationStateData(skeletonData);
// Spineアニメーションデータをセット
skeleton = new SkeletonAnimation(skeletonData, false, stateData);
// アニメーション再生 ここではwaitという名前を指定
animationPlay("wait");
// Stage3DにSpine描画
addChild(skeleton);
Starling.juggler.add(skeleton);
}
}
これでSpineアニメーションが再生されます。
予想以上に簡単に実装できました。
Stage3Dはライブラリのおかげで非常に楽にSpineが利用できます。