SpineをAction Script(Flash)で使ってみた

本章では、SpineをActionScriptに導入するまでの流れについて共有します。

Spineデータをエクスポート

Spineで、「JSON」フォーマットでファイルを出力します。
そしてエクスポートする際に、「atlas」も合わせて生成します。
ファイル形式は、「atlas」で問題ありません。

ActionScriptプロジェクトを作成

以下手順で、プロジェクトファイルを作成します。

1. Fileを選択
2. Newを選択
3. ActionScriptプロジェクトを選択

ActionScriptプロジェクトにライブラリ・Spineデータをインポート

Starlingライブラリのインポート

まずStarling公式サイトより、SWCファイルをダウンロードします。
Starling - The Cross Platform Game Engine
次に、以下の通り、ライブラリのパスをプロジェクトに通します。

Spineライブラリのインポート

まずSpine公式サイトより、ライブラリファイルをダウンロードします。
EsotericSoftware/spine-runtimes · GitHub
ここで必要なライブラリは、以下の2つです。

• spine-as3
• spine-starling

上記ライブラリの「/src/spine」以下のファイルをプロジェクトにコピーします。

Spineデータのインポート

Spineから出力された以下のファイルを「src」直下に配置します。

• atlas
• json
• png

Spineデータをコントロールするスクリプトの作成

以下2つのスクリプトを作成して実行すると、Spineデータが再生されます。

[Main.as]

package {
	import flash.display.Sprite;
	import flash.events.Event;
	import starling.core.Starling;

	public class Main extends Sprite {
		private var _starling:Starling;
		
		public function Main():void {
			if (stage)
				init();
			else
				addEventListener(Event.ADDED_TO_STAGE, init);
		}
		
		private function init(e:Event = null):void {
			removeEventListener(Event.ADDED_TO_STAGE, init);
			
			_starling = new Starling(StarlingApp, stage);
			_starling.start();
		}
	}
}

[StarlingApp.as]

package {
	import flash.utils.setTimeout;	
	import mx.controls.Text;	
	import spine.SkeletonData;
	import spine.SkeletonJson;
	import spine.animation.AnimationStateData;
	import spine.atlas.Atlas;
	import spine.attachments.AtlasAttachmentLoader;
	import spine.attachments.AttachmentLoader;
	import spine.starling.SkeletonAnimation;
	import spine.starling.StarlingTextureLoader;	
	import starling.core.Starling;
	import starling.display.Sprite;
	import starling.textures.Texture;
	
	public class StarlingApp extends Sprite {
		[Embed(source = "spineboy.atlas", mimeType = "application/octet-stream")]
		static public const SpineBoyAtlas:Class;		
		
		[Embed(source="spineboy.png")]
		static public const SpineBoyAtlasTexture:Class;
		
		[Embed(source="spineboy.json",mimeType="application/octet-stream")]
		static public const SpineBoyJson:Class;
		
		private var _skeleton:SkeletonAnimation;
		
		public function StarlingApp() {			
			var texture:Texture = Texture.fromBitmap(new SpineBoyAtlasTexture());			
			var spineAtlas:Atlas = new Atlas(new SpineBoyAtlas(), new StarlingTextureLoader(new SpineBoyAtlasTexture()));
			var attachmentLoader:AttachmentLoader = new AtlasAttachmentLoader(spineAtlas);
						
			var json:SkeletonJson  = new SkeletonJson(attachmentLoader);
			var skeletonData:SkeletonData = json.readSkeletonData(new SpineBoyJson());
			var stateData:AnimationStateData = new AnimationStateData(skeletonData);
						
			// Setup how to morph between different animation sets
			stateData.setMixByName("idle", "walk", 0.4);
			stateData.setMixByName("walk", "idle", 0.6);
			stateData.setMixByName("idle", "jump", 0.3);
			stateData.setMixByName("jump", "idle", 0.3);
			stateData.setMixByName("walk", "jump", 0.3);
			stateData.setMixByName("jump", "walk", 0.4);
			stateData.setMixByName("jump", "jump", 0.2);
			
			_skeleton = new SkeletonAnimation(skeletonData, false, stateData);
			_skeleton.x = 200;
			_skeleton.y = 600;
			_skeleton.state.setAnimationByName(0, "idle", true);
			
			setTimeout(walk, 3000);
			setTimeout(idle, 5000);
			setTimeout(walk, 7000);
			setTimeout(makeJump, 9000);
			setTimeout(idle, 11000);
			
			addChild(_skeleton);
			Starling.juggler.add(_skeleton);
		}
		
		private function idle():void 
		{
			_skeleton.state.setAnimationByName(0, "idle", true);
		}
		
		private function walk():void {
			_skeleton.state.setAnimationByName(0, "walk", true);
		}
		
		private function makeJump():void {
			_skeleton.state.setAnimationByName(0, "jump", false);
		}
	}
}

総括

Flashは、一昔前ほど利用されてはいませんが、業務の現場レベルではまだ粘り強く利用されています。
Flashでアニメーションを作るだけでなく、Spineを利用してゲーム開発の分業も可能なので、一度ご利用してみてください。