SpineのSkeleton Viewerを使ってみよう

Spineから書き出したアニメーションデータのビューアがSpine公式サイトで配布されています。ざっと使ってみたので、ハマった場所などふまえて手順をメモがてら投稿します。
<img width="798" src="https://qiita-image-store.s3.amazonaws.com/0/8302/41e6e56e-bbea-0d28-b8e5-03353f48541b.png">
_メッシュやボーンの状態を確認しつつ、アニメを再生したり、スキンを切り替えたりできます (アニメーションおよび画像データは [wwikii](https://twitter.com/wwikii/status/733996833731543045)さんに提供いただきました )_

#ダウンロードして起動
（自分が使用しているOSはMacのOSX Yosemiteです。）
Skeleton Viewerを立ち上げるのは簡単で、[公式ページ](http://ja.esotericsoftware.com/spine-skeleton-viewer)からskeletonViewer.jarをダウンロードしてダブルクリック(もしくは右クリックメニュー)で開くだけ。。のはずなんですが起動するとエラーになりうまくいきません。`java -jar skeletonViewer.jar`と、コマンドで直接起動してみると、`Unsupported major.minor version 51.0`などと怒られています。 どうやらjavaのバージョンが低いらしくJava7以上が必要との事。`java -version`すると`java version "1.6.0_65"`とでました。（Adobeの古いソフトを動かすためかなにかで古いのを入れた気がする。）そこで、[MacにJava(JDK)をインストール](http://qiita.com/ryo0301/items/3c9a02e03b4e9a41f576)というQiita記事を参考にJRE8をいれてみたのですが、どこにインストールされたのかわからない。探しまくった結果、`/Library/Internet\ Plug-Ins/JavaAppletPlugin.plugin/Contents/Home/bin/java`と、変なところに存在していたので、こちらでjarを起動したところうまくSkeleton Viewerが立ち上がってくれました。

```sample.sh
/Library/Internet\ Plug-Ins/JavaAppletPlugin.plugin/Contents/Home/bin/java -jar ./skeletonViewer.jar
```

通常は現状のままJava6を使いたく、上記にパスは通さないので、上記のような起動Scriptでも書くかと思いましたが、一度立ち上がった後はskeletonViewer.jarのダブルクリックでSkeleton Viewerが立ち上がるようになっていました。めでたしめでたし。

#雑な使い方説明
OPENボタンでアニメーションデータjson(もしくはバイナリファイル）を開くと、アトラスファイルが同名(hoge.json -> hoge.atlas)で横にあるとして画像のロードが行われるようです。簡単な制限事項ですね。オープンボタン横の"-"ボタンを押すと、UIが最小化します。

![white.png](https://qiita-image-store.s3.amazonaws.com/0/8302/c757c19e-7318-6079-f91c-9e3e2edaeb58.png)
なお、画像が見つからない場合、白いべた塗りでデータが表示されます。この状態でもViewerの機能はすべて使えます。

![girl.png](https://qiita-image-store.s3.amazonaws.com/0/8302/34c9b804-0645-c50c-82a3-6d09b3f017a0.png)
スキン(見た目)の切り替えに対応しているデータの場合、Skin欄に一覧が並ぶのでここで選択できます。

![boy.png](https://qiita-image-store.s3.amazonaws.com/0/8302/575adb7f-cb4e-63f4-dd3f-e9442fee3403.png)
複数のアニメーションが含まれる場合もAnimation欄に一覧が並ぶので、ここから選択できます。なおMix値はアニメーション切り替え時の切り替えにかかる秒数です。大きくするとゆっくり２つのアニメーションが混ぜ合わさって切り変わります。

他の細かいところはいじっていれば分かるでしょう。。(雑)
とりあえず、キャラのドラッグ移動がやりずらいです！

#ヒゲもしくは白ブチ対応
<img width="312" src="https://qiita-image-store.s3.amazonaws.com/0/8302/a7154147-6023-df30-7293-6f1ec1f82a10.png">
この画像のようにパーツの重なり部分が白くなったり、逆に黒くなったりする場合がありますが、バグではないです。Viewer内のAlpha部分、項目のチェックを変更してみてください。正しく表示されるようになります。PremultipliedAlphaについては[この辺](http://ja.esotericsoftware.com/forum/viewtopic.php?p=15772)とか[この辺](http://compojigoku.blog.fc2.com/blog-entry-5.html)を参照の事。

#データファイルのウォッチ
開いている最中のファイルに更新が入ると自動的にビューアに反映されるとの事だったのでやってみました。jsonファイル内をテキストエディタで開き、数値を書き換えて保存すると確かにすぐさまポーズが変わります。また、アトラス画像の方ですが、これをPhotoShopなどで書き換えて保存すると、ビューア側で自動的に更新が、、、はいりませんでした。再度同じjsonファイルを読み込ませると画像の加工が反映されます。まあ当然ですが。

![ps.png](https://qiita-image-store.s3.amazonaws.com/0/8302/29d6dd89-c153-389a-25d0-33ca1935b24f.png)
_ポーズとテクスチャが編集された図 データ提供者が怒るやつかもしれない_

Spineツールが手元にない場合など、簡易的な調整・テストに使えるかもしれません。Spine互換のデータを書き出すツールやデータを編集するツールなどを作った場合このViewerと組み合わせて使うと便利そうです。

#データ確認以外の使い道
公式のSkeleton Viewerは[libgdx](https://libgdx.badlogicgames.com/)というゲームフレームワーク用のランタイムライブラリ(spine-libgdx)を利用して作られており、他の言語のランタイムもspine-libgdxをベースにしている事から、何か言語別のランタイムの動作がおかしかった場合に、spine-libgdxとそれとどちらに問題があるのかの見極めにもこのSkeleton Viewerを使ってくれとの事です。

#おわりに
本当は自分でViewerを作ろうと思ったんですが、すでにあるよなと思って探したら公式にあった次第です。自分はStarlingフレームワークでSpineをいじってみていますので、Webブラウザ上で動くStarlingランタイムを利用した同じようなViewerを作るかもしれません。これまたすでにありそうな気もしますが。