2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

SpineをStarling1.7で使う:2種類のTextureAtlasに注意 の巻

Last updated at Posted at 2016-05-24

SpineのラインタイムもStarling2.0に対応してくれる予定だ( Starling v2 support : trelloのタスク )ということで、とても待ち遠しい訳なのですが、ライブラリのコア部分はStarlingが1.xだろうと2.0だろうと一緒で、描画周りのコードが変わるだけです。今のうちからStarling1.7で予習を始めようと思います。
(Starlingが最新でないのは、Spine公式サンプルで使っているのStarlingのバージョンに合わせたからです。)

スクリーンショット 2016-05-25 2.15.31.jpg
とりあえず公式のデモソースを改造して動かしてみました。ここで実際に確認できます。2つ表示してもドローコールは1で、高速に動いてます。ちゃんとSpine最大売りのメッシュアニメにも対応していますね。すばらしきかな。

#2種類のTextureAtlas
さて、いきなり最初からつまずく事実がいくつかあったので軽くまとめます。StarlingにはStarling仕様のTextureAtlasクラスが存在し、1枚のテクスチャに画像パーツを詰め込む用途で広く使われている訳ですが、SpineにはSpineの仕様のTextureAtlasクラスが存在します。

公式のゴブリンのデモでは、その2つの読み込み方をきりかえて使えるサンプルソースが用意されています。

  • Starlingアトラス初期化 (TexturePackerから書き出したもののようだ)

アトラス画像

アトラス定義ファイル https://github.com/EsotericSoftware/spine-runtimes/blob/master/spine-starling/spine-starling-example/src/goblins-mesh-starling.xml

sample.as
// Starlingアトラス 初期化部分を抜粋&編集したソース
var texture:Texture = Texture.fromBitmap(new GoblinsStarlingAtlasTexture());
var xml:XML = XML(new GoblinsStarlingAtlas());
var starlingAtlas:TextureAtlas = new TextureAtlas(texture, xml);
var attachmentLoader:AttachmentLoader = new StarlingAtlasAttachmentLoader(starlingAtlas);
  • Spineアトラス初期化 (Spineツールから書き出したもの)

アトラス画像

アトラス定義ファイル https://github.com/EsotericSoftware/spine-runtimes/blob/master/spine-starling/spine-starling-example/src/goblins-mesh.atlas

sample.as
// Spineアトラス 初期化部分を抜粋&編集したソース
var spineAtlas:Atlas = new Atlas(new GoblinsAtlas(), new StarlingTextureLoader(new GoblinsAtlasTexture()));
var attachmentLoader:AttachmentLoader = new AtlasAttachmentLoader(spineAtlas);
  • モーションデータ紐付けと実体化の共通部分
sample.as
var json:SkeletonJson = new SkeletonJson(attachmentLoader);
var skeletonData:SkeletonData = json.readSkeletonData(new GoblinsJson());
var skeleton:SkeletonAnimation = new SkeletonAnimation(skeletonData, true); // これがDisplayObject!
addChild(skeleton);

すでに登場人物(クラス)が多くて面食らいますが、公式サンプルソースでは、アセットをソースコードにEmbedしていますので、GoblinsStarlingAtlasTexture(Bitmap) 、GoblinsStarlingAtlas(Xml) 、GoblinsAtlasTexture(Bitmap)、GoblinsAtlas(Text)、これらは通常外部データとなる部分です。

また、SkeletonAnimationがDisplayObjectなので、ここから先は触っていて楽しい箇所になるかと思います。また、ここはStarling(ActionScript3)に限らずC#やC++でも同じクラス構成なので、一度覚えてしまえば、Unityでもcocosでも同じようなコーディングになる_はず_で安心です。

--

さて、一般的にはSpineフォーマット側のデータを使うサンプルが多いでしょうが、実際にディープに使う場合は、他の画像素材と1枚にまとめて扱う必要性など踏まえ、Starlingのアトラス形式を使ったほうがよいかもしれません。
Spineに読み込んでいる画像を別途テクスチャーパッカーなどでパッキングするといいでしょう。この際、サブフォルダの扱いなどで書き出しの食い違いが起きるかもしれないので、注意したほうがよさそうです。

とはいえ、入手しやすいデータはSpine形式のアトラスであるものが大半だと思うので、しばらくはSpine形式のTextureAtlasとお付き合いしてみようと思います。

さらにはまる

Spine形式のTextureAtlasをAssetManagr経由で読み込んで初期化しようとすると大きな問題がある事がわかりました。それは。。

次の投稿に続く。
SpineをStarling1.7で使う:AssetManager経由の初期化に苦労する の巻

2
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?