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

  • 1
    いいね
  • 0
    コメント
この記事は最終更新日から1年以上が経過しています。

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