4
7

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のSkeleton Viewerを使ってみよう

Last updated at Posted at 2016-05-25

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が立ち上がってくれました。

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
なお、画像が見つからない場合、白いべた塗りでデータが表示されます。この状態でもViewerの機能はすべて使えます。

girl.png
スキン(見た目)の切り替えに対応しているデータの場合、Skin欄に一覧が並ぶのでここで選択できます。

boy.png
複数のアニメーションが含まれる場合もAnimation欄に一覧が並ぶので、ここから選択できます。なおMix値はアニメーション切り替え時の切り替えにかかる秒数です。大きくするとゆっくり2つのアニメーションが混ぜ合わさって切り変わります。

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

#ヒゲもしくは白ブチ対応

この画像のようにパーツの重なり部分が白くなったり、逆に黒くなったりする場合がありますが、バグではないです。Viewer内のAlpha部分、項目のチェックを変更してみてください。正しく表示されるようになります。PremultipliedAlphaについてはこの辺とかこの辺を参照の事。

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

ps.png
ポーズとテクスチャが編集された図 データ提供者が怒るやつかもしれない

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

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

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

4
7
1

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
4
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?