flash
Stage3D
ActionScript3
Spine
Staling

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

More than 1 year has passed since last update.

FlashのStage3DでSpineが動くのか検証しました。

検証にあたり、kikkisnrdec様のkikki's tech noteに記載されたSpineをAction Script(Flash)で使ってみたを参考にさせていただきました。


使用するための準備

早速Stage3Dで使用するための準備を行います。


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 = "テクスチャーファイルのURL(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ファイルのURL";
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ファイルのURL";
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が利用できます。