Flash(Stage3D)でSpineを動かしてみる

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が利用できます。