Spineから書き出したアニメーションデータのビューアがSpine公式サイトで配布されています。ざっと使ってみたので、ハマった場所などふまえて手順をメモがてら投稿します。
メッシュやボーンの状態を確認しつつ、アニメを再生したり、スキンを切り替えたりできます (アニメーションおよび画像データは wwikiiさんに提供いただきました )
#ダウンロードして起動
(自分が使用しているOSはMacのOSX Yosemiteです。)
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)をインストールというQiita記事を参考にJRE8をいれてみたのですが、どこにインストールされたのかわからない。探しまくった結果、/Library/Internet\ Plug-Ins/JavaAppletPlugin.plugin/Contents/Home/bin/java
と、変なところに存在していたので、こちらでjarを起動したところうまくSkeleton Viewerが立ち上がってくれました。
/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が最小化します。
なお、画像が見つからない場合、白いべた塗りでデータが表示されます。この状態でもViewerの機能はすべて使えます。
スキン(見た目)の切り替えに対応しているデータの場合、Skin欄に一覧が並ぶのでここで選択できます。
複数のアニメーションが含まれる場合もAnimation欄に一覧が並ぶので、ここから選択できます。なおMix値はアニメーション切り替え時の切り替えにかかる秒数です。大きくするとゆっくり2つのアニメーションが混ぜ合わさって切り変わります。
他の細かいところはいじっていれば分かるでしょう。。(雑)
とりあえず、キャラのドラッグ移動がやりずらいです!
#ヒゲもしくは白ブチ対応
この画像のようにパーツの重なり部分が白くなったり、逆に黒くなったりする場合がありますが、バグではないです。Viewer内のAlpha部分、項目のチェックを変更してみてください。正しく表示されるようになります。PremultipliedAlphaについてはこの辺とかこの辺を参照の事。
#データファイルのウォッチ
開いている最中のファイルに更新が入ると自動的にビューアに反映されるとの事だったのでやってみました。jsonファイル内をテキストエディタで開き、数値を書き換えて保存すると確かにすぐさまポーズが変わります。また、アトラス画像の方ですが、これをPhotoShopなどで書き換えて保存すると、ビューア側で自動的に更新が、、、はいりませんでした。再度同じjsonファイルを読み込ませると画像の加工が反映されます。まあ当然ですが。
ポーズとテクスチャが編集された図 データ提供者が怒るやつかもしれない
Spineツールが手元にない場合など、簡易的な調整・テストに使えるかもしれません。Spine互換のデータを書き出すツールやデータを編集するツールなどを作った場合このViewerと組み合わせて使うと便利そうです。
#データ確認以外の使い道
公式のSkeleton Viewerはlibgdxというゲームフレームワーク用のランタイムライブラリ(spine-libgdx)を利用して作られており、他の言語のランタイムもspine-libgdxをベースにしている事から、何か言語別のランタイムの動作がおかしかった場合に、spine-libgdxとそれとどちらに問題があるのかの見極めにもこのSkeleton Viewerを使ってくれとの事です。
#おわりに
本当は自分でViewerを作ろうと思ったんですが、すでにあるよなと思って探したら公式にあった次第です。自分はStarlingフレームワークでSpineをいじってみていますので、Webブラウザ上で動くStarlingランタイムを利用した同じようなViewerを作るかもしれません。これまたすでにありそうな気もしますが。