Spine頑張りたいブログ

ゲーム用2Dアニメーションソフト「Spine」について、学んだことや悩み等を書いていくブログ。

Spineの素材はいちいち完成図に沿って並べ直さないといけないかっていう話

こんにちは。表題の件について、とっても基礎的な部分ですが色々痛い目みて学んだので書かせてください。

 

まず、完成図に沿って並べ直すってどういう状況のこと??って点については、

フーモアさんが掲載してくださっているSpineの使い方のチュートリアル記事で1ステップ目に書かれている部分の作業のことです。

whomor.com

 

私これがなんで必要なのかを理解していなくてですね。

「素材を透明部分も含めたpngで書き出したらすぐ元絵の通り並べられるんじゃないの??」と思ってたんです。

もちろんすぐ思い浮かぶ問題としては、最後にアトラス画像を書き出した時に余白がそのまま書き出されないか?って点です。

ところがこれに関しては、現バージョン時点(3.4)でエクスポートのアトラス設定(テクスチャバッカー設定)で画像の空白部分の削除は可能なんですね。

f:id:spinegirl:20161019065649p:plain

赤枠で示した、「空白X削除」「空白Y削除」の部分です。

デフォルトだとこれがオフになっていますが、オンにする(チェックマークを入れておく)と、アトラス書き出し時に空白を削除してくれるので、ちゃんとパーツが敷き詰まった状態になります。↓

f:id:spinegirl:20161019065942p:plain

こういうやつですね。

 

です

メッシュを使用している状態でこれやるとUnityにインポートした際、盛大にズレるということが判明し…。

 

結局、アニメーションが完成した後で全部の素材を並べ直しました…。

1キャラだけじゃなくて複数キャラのモーションつけた後だったので、かなり時間がかかりました…( ;∀;)ほんと馬鹿すぎる~~

 

ちなみに。メッシュを使っている部分以外は、ズレませんでした。ボーンにはちゃんとくっついてくれるんですね。なのでメッシュを使わない方はそのやり方でもイケます。おそらく!(それにしても非推奨だと思いますけどね)

 

でもほんとに並べ直す必要あるのかな!?って思って調べ直したら、

公式でプラグインあるじゃん!!!

ってことに今更気づきました…。

その辺の解説についてはコチラ。

qiita.com

(基本編って書いてある…!基本がわかってなかった人間で恥ずかしい…!!)

というか確かに、Spineの公式チュートリアル動画でも解説されてたし、「そういえばあったわ…」って感じでした。

 

引用したのはどちらも主にPhotoshopを解説していますが、

IllustratorやAfterEffectsにも対応しているということで…

Illustratorスクリプトは多少機能が少ないものの、Photoshopスクリプトとよく似ています。必要な場合、Illustrator内で「ファイル」、「エクスポート」、「PSD」をクリックし、PhotoshopでエクスポートされたPSDを開き、上記のPhotoshopスクリプトを実行することができます。

 ってありますが、多少機能が少ないってどんな感じなんだろ…と気になったので試してみました。

 

 

f:id:spinegirl:20161019075707p:plain

画面はこんな感じです。(なんかキャラの立ち絵ないかな~と思ったんですがレイヤー分けがしっかりしてなかったので即席で星図形をレイアウトしましたすみません)

Photoshopではパディング(余白)を決めたりスキンとして書き出すなどが出来るのに対して、Illustratorだと本当に「レイヤーごとにpng書き出すのとJSONの書き出しが一緒にできるよ!」ぐらいのシンプルさですね。

 

あとはSpineで「データインポート」からJSONを読み込むだけですね。

f:id:spinegirl:20161019074951p:plain

わー、なんて便利!!

(この程度の基本機能で喜ぶごとに自分の初心者さが露呈していく…。)

 

Spine先生はもっと賢いソフトだよっていう認識を持っていかねばなりませんね。

普通にチュートリアルに載ってることなのに抜け落ちていることとかまだまだありそうです…。

引き続きもっと勉強して参ります(T_T)