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)

SpineのHotkeyを設定してみた

f:id:spinegirl:20161006232344p:plain

昨日、メッシュの移動とかのショートカットってないのかな~といったことを記事に書いてましたが、

ちょっと調べたらすぐに「設定の中にホットキーってあるじゃん!!」ってなりました。

ホットキーから「開く」のボタンを押すと設定のテキストファイルが表示されて、そこにキーを登録できるようです。ちなみに、テキストファイルを保存して、設定を保存しても、Spineを再起動するまでは適用されないようです。

これを使って、いっつも「H」がイメージの非表示切り替えになっていることに苦しんでいたのを、Pan Dragに変更することも出来ました。

PhotoshopIllustratorのハンドツールの癖で、パンしたい時にいっつも「H」を押しちゃうんですよね。紛らわしかったので変更できてハッピーです。

アニメーション用の素材作りのこと。

こんばんわ。

仕事で絶賛、Spineで動かすためのキャラクターのパーツ切り出し中です。

Youtubeでかなり再生されているHwadock Jang氏による「spine workflow」でも一番最初に切り出しの様子がちゃんと撮影されてますね…。

 

www.youtube.com

 

これもめっちゃ大変な作業だろうなと思うのですが、私の今やってる作業もなかなか大変です…。

別の人が描いた絵をSpine用に切り出しているのですが、隠れちゃっている部分を補足したりしてパーツを作っていく作業は、思っていた以上に頭を使いますね。

 

この動画のモデルほどではありませんけど、今動かそうとしているのは装飾品もてんこもりなキャラクターなので、メッシュを設定するのも時間かかりそうだなぁ。

いつも思うのですが、メッシュの「生成」「移動」「削除」とかのツールを簡単に切り替えられるショートカットってないんですかねぇ。
自分で設定すればいいのか…。
Spineは機能の数のわりには初期で入っているショートカットが少ない気がします…。

また明日調べてみよう~

はじめまして。

はじめまして。

ゲーム開発の現場でSpineを使ってお仕事をしている者です。

一応プロフィールにはニックネーム:せぼねと登録しておきました。

名前を使う時があるかはわかりませんが、どうぞよろしくお願いします。

 

一応、とってもたまたまアクセスされた方もいらっしゃるかと思うので、

「"Spine"って何?」ということを補足しておきたいと思います。

 

■Spineって何?

一応"ゲーム用"ということになっている2Dアニメーションソフトウェアです。

頭に一応と書いたのは、別にゲームの素材を作る目的じゃなくても使えるからです。

書き出し出来る形式はゲーム向けにJSONで書き出せるほか、.movや.aviといった動画形式や、.gif/.jpeg/.pngといった静止画連番画像で書き出すことも出来ます。

特にキャラクターのアニメーションがやりやすい!と注目されていますが、

UIアニメーションなども作れますし、色々と応用が利くソフトだと思います。

といっても、他のツールとなにが違うの?っていうのはなかなか伝わりにくいと思うので…ぜひぜひ公式サイトの「画廊」(←この日本語訳どうかと思うのですが…英語サイトではShowcaseです)から見れる、「#madewithspine」のページ、これをまず見てほしいです。

は?これが2D静止画パーツを組み立てたアニメーションなの??え??って驚くような作品例が色々載ってます。

en.esotericsoftware.com

個人的な話ですが、こういうすげー!っていうアニメーション見ると超萌えます。

萌えアニメとかそういう話じゃなくて、なんかとってもきゅ~んとします。早く私もこのレベルになりたい。

 

■Spine頑張りたいブログを立ち上げた経緯

そのまんますぎるブログタイトルですが、Spineを頑張りたいんです。ほんとそうなんです。

頑張りたいも何も、今実際に仕事で使っているので、頑張らなきゃ"いけない"状況ではあるんですが、今Spineはとっても需要があがっている中で、高い技術を持っている人は少なく、また企業で導入する場合は非常に高価(買い切りではなく、まず1台目を導入するのに年額で25万円かかります。ひええ。)なので、流行ってるからってジャンジャン導入できるもんでもないといった感じ…です。(若干推測を含みます!)

なので、Spineについて解説本とかもまだありませんし、私自身もまだまだ経験が浅いので、比較的早くにSpineを使い始めた者として、役立てる情報は発信していきたいし、自分の成長記録なんかもつけておいた方があとあと自分が楽しめるかなと思い、ブログを始めてみました。

 

ここ最近は、チュートリアルを載せてくださっている日本人の方のサイト、ブログがそこそこ増えてきたような気がしますので、私はあんまり自分でガッツリとチュートリアルを書いたりする気はありません。ただ、このブログ記事良かったですよ!とか、これを参考にしましたよ!という紹介はやっていきたいなぁと思います。

結構企業のブログとかで情報が載っていることが多くて、もっとフランクに、うまくいかないよ~!しぬ~!ハゲる!とか言ってるブログがあっても良いんじゃないかなぁと思ったというのもあって、フリーダムにやっていこうと思います…。

 

今からSpine初めて触るよ!という方がもしこのブログを見ていましたら。

具体的な使い方については「Spine チュートリアル」とかでググれば良いチュートリアルがあるのでそちらをご覧ください。

でももし分からないことがあってつまずいていたりしていたら、お気軽にコメント欄に質問などを書いてください。出来るだけ頑張ってお答えします!(わからないことでも調べますが調べた結果わからなかったらごめんなさい!

 

ではでは、これからどうぞよろしくお願いします~!