1,002 views

Spineマニュアル・小技集⑤ ~初心者でも分かり易かったらいいのに~

皆さんこんにちは!
某ショッピングモールで、ふざけて娘を小脇に片手で抱え、

僕「誘拐だー!」
娘「キャー!!(喜)」

とか走り回って遊んでたら、

 

 

本気で警備員を呼ばれた父・齋藤です。

 

 

 

 

 

呼ぶ方もどうかと思う。

 

……とか考えたら怒られるんでしょうか?

 

 

という訳で、5sgモーションデザイナーの齋藤です。

いやー、前回からどんだけ経ったんスかね?
5か月? アホか。

大人の事情でとりあえず部内のブログが一通り止まって再始動。
とりあえず全員で、ゆるゆると進めて参りますので、
引き続き何卒よろしくお願いいたします。

 

さて、本気でシリーズタイトルを忘れかけておりました
僕の初心者向けSpine講座ですが、

 

 

 

 

 

 

 

 

前回は何やってましたっけ?

 

 

 

 

 

 

 

 

この体たらくですから、もう着いて来てる人なんて皆無と見ておりますが、えーと。

 

 

 

 

 

 

 

ああ、モーション付けたのね。

 

 

 

 

 

 

 

では……そうだな……。

2つやります。

一つは簡単に、Spineの『ツリー』の中で僕が引っかかった事のアドバイス。
それと、どこを見回してもイマイチやり方がはっきりしない
『スキン』の作成方法について解説させていただきましょう。

 

●画像表示/非表示の切り替え『アタッチメント』『スロット』

画面上で、見えていない部分にアニメーションをつける時って、
画像を消したいですよね?
Photoshopとかだと目のマークを消せば一時的に画像が消えます。

ではSpineだとどうやるのか?

これ、初心者の時、僕が盛大に理解していなくて、
危うくアニメーションを全て作り直さなければならないほどの事態を
招きかけた内容なのでここで解説しとこうと思います。

 

パーツ画像が消える操作は2つあります。

一つは『スロット』のオン/オフを切り替える事。
もう一つは同じく『アタッチメント』のオン/オフを切り替える事。

01
画像の白くて丸いアイコンが『スロット』、
緑の点が付いているアイコンが『アタッチメント』です。

左側の灰色の丸を消せばオン/オフを切り替えられます。

 

この二つですが、理解していないと
確実に製作中のアニメーションを大崩壊させます。

 

結論から言います。

スロットのオン/オフは、行ってもアニメーションには影響しません。
ですが、アタッチメントのオン/オフは、
行うと選択しているフレームから先のアニメーションでその画像が消え去ります。

逆に言うと、アニメーションの最中で不必要なものを消したい時には、
このアタッチメントをオフにすればいいのです。
スロットをオフにしても意味がないのでご注意って感じですね。

で、見えない部分の確認のために消す時は、
スロットを使用すればいい訳です。

 

アタッチメントをオフにすると、アニメーションのタイムライン上に、

02
こんな感じで『アタッチ』に灰色のキーが打たれます(古いバージョンだと
黄色のキーです)。
これでこのキーフレームから先、この画像は表示されなくなります。

 

例えばブーメラン。
ブーメランを投げたりする時、
投げる前までは手の動きに付いていかせたいですよね?

そういう時は『手を親としたブーメランのボーン』と、
体の動きとは全く別な動きをする『独立したブーメランのボーン』の
2つを用意して、

 

投げた時に『手を親としたブーメランのボーン』のアタッチメントを非表示。
同時に『独立したブーメランのボーン』のアタッチメントを表示。

ブーメランの動きを表現。

戻ってきた時に『独立したブーメランのボーン』のアタッチメントを非表示。
同時に『手を親としたブーメランのボーン』のアタッチメントを表示。

 

とやるといいですね。(ブログの最後にサンプルあり。)

『手を親としたブーメランのボーン』だけだと、
投げた後、体の動きに合わせて動いちゃうから、
思った通りの動きをさせるには相当な苦労を要します。ってか、

 

 

 

 

 

 

 

 

 

そんな作業はご免だコノヤロー。(しゃくれ)

 

 

 

 

 

 

 

 

 

スロットとアタッチメントの機能、基本中の基本ですが、
だからこそしっかり覚えておきたいですね。

 

●スキンについて

さて、先ほども言いましたが、なんかどこのサイト見ても、
スキンの作成方法というのが非常に分かり辛いんですよね。
結局僕は、それらを手掛かりにはさせてもらいましたが、
ほぼ独学で方法を取得した感じです。

という訳で、このサイトで理解してもらえたらいいなという期待を込めて、
やり方を紹介してみましょう。

 

……と、その前に。

最初に、僕がしていたスキンの盛大な誤解をお伝えしときます。

 

僕はスキンを、

 

アニメーションの途中で切り替えられるもの

 

だと思っていました。

 

 

違います。

 

 

スキンは、キャラの外観を選ぶための『設定を行うもの』で、
Spineのアニメーション作成中に、
途中から唐突に変える事ができるものではないのです。

なので、こちら向きのキャラを急に背中向きにする、とかいうアニメーションは、
スキンで行うものではありません。
(その方法もいずれ機会があったらやりましょう。結構手間ですけどね)

もちろんUnityなどのプログラムで、
アニメーションの途中でスキンを変えられたりはしますが、
とりあえずSpine上では『キャラの外観の設定をしておくもの』だと
思ってください。

 

では今回の素材。

03
今回はこの子に登場してもらいました。
この子の髪の毛を

04
ピンク髪に切り替えるスキンの設定をしてみます。
2Pカラーっぽくていいですね。

 

緑はいらない子。

 

ピンクはいん

 

 

……うわなにをするやめくぁwせdrftgyふじこ

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

……はい、修正されて戻ってきました。

05
まずはパーツを書き出して、
このキャラと同じ『images』フォルダに置いておきます。

06
で、Spineのツリー内で、切り替えをする画像のアタッチメントを選択しまして、

07
ツリーの右下辺りにあるコレは複製ボタンです。
このボタンで画像をそのまま複製します。

08
次に、この『Image path』を、
ピンク髪の画像のファイル名に書き換えてみてください。

察しの良い方はお分かりと思いますが、
この部分が『そのアタッチメントで使用する画像』になります。
画像を投入すると、基本は同じ名前がここに書かれますが、
アタッチメントと名前が違う画像を指定することもできますよー。
アタッチメントの名前を変えて、同じパーツ画像を使う事も出来ます。

09
で、ここを書き換えると。

10
メッシュなどの設定や位置も全く同じ状態で複製できます。
(ただし今回のように色替えのみのデータに限ります。
画像のサイズなどが変わるとまた話が変わってきますのでご注意ください)

という事を、切り替える画像があるスロット内ですべて行いまして、
とりあえず準備完了。

 

11
さて、ではまずこの個所にあるスキンというボタンを選択しまして、
下の新規スキンをクリック。

12
そうすると、ダイアログボックスが出るので、分かり易い名前を入れます。
何をしているかというと、スキンを切り替える『ボタン』を作っています。

とりま、青髪とピンク髪の入れ替えを行うボタンなので、
2つ作りまして『blue』と『pink』にしときましょう。
日本語も入れられますが、プログラムで使う事を想定して、半角英字がベストです。

13
こんな感じ。
スキン内のボタンは、どれか一つしか選べない状態になります。

14
次に、先ほどの切り替えを行う画像のあるスロットを選択して、
下の新規をクリック。

15
『スキンプレースホルダー』を選択しましょう。
ここで出てくるダイアログボックスに名前を入れて、
切り替えを行う画像を格納する場所を作ります。
色を変える画像の格納場所なので『color』にしときましょうか。

16
こんな感じになります。
これを切り替えを行う画像のあるスロット全てで作成します。

さて、この後が重要です。
多分、この後の内容が色んな所で足りてない情報なんじゃないかなと。

17
まず、スキン内の左の灰色の丸で『blue』を選択してください。

この状態で、先ほど作成した『color』に
青髪の画像のアタッチメントを入れていきます。
18
全てのスロットで行いましょう。

19
終わったら、スキンの『pink』を選択。

20
青い髪の毛がすべて消えて、
かわいそうな事になってしまいますが気にしないでください。

21
『pink』を選択した状態で、
今度は『color』にピンク髪の画像のアタッチメントを入れていきましょう。

この時点で青髪の素材(上記の場合だと数字の無い『hair』)は
消えていますが、これもキニシナイ。

そうして、スキンの『blue』と『pink』のボタンを切り替えると。

31
青髪とピンク髪が切り替わるようになりました!
これでスキンの設定が完了です。

 

スキンの設定を行った格納庫内のパーツ画像は、
そのスキンのボタンをオンにした時にしか表示されなくなります。

なので設定を失敗して入れ間違えた場合は、
慌てずスキンのボタンを切り替えて該当のパーツが出るようにし、
格納場所から取り出して、正しいスキンのボタンをオンにして
格納し直してください。

 

とまぁ、ひとまずこのような感じでスキンの解説を行ってみました。
スキンの最大の利点は、一つのモーションを作成しておけば、
スキンの切り替えを行う事で、違う姿をした同じモーションをするキャラが
作成できるという点
です。

……が。
実はたくさんのキャラを作成しなければならないソシャゲアプリでは
微妙に使いづらい機能です。

というのも、ソシャゲアプリは、色んなキャラが出てきますよね?
それぞれ姿が違いますよね?

同じ戦士でも、軽装の戦士もいれば、重甲冑の戦士もいます。
それらのパーツの『画像』はそれぞれ固有であることが多く、
例えば肩の甲冑とか、前述の2人の戦士じゃ全然違いますよね?

そう言う場合、スキンを切り替えた時、
パーツのサイズの差が大きければ大きいほど、位置が大きくずれます。
当然Spineはちょうどいい場所になんか配置してくれません。
それらを一つ一つ調整を行わなければならないという手間が発生します。

これを回避するには、パーツのサイズを設計段階で決定しておき、
透明な隙間が多くても、必ずそのサイズ内で、パーツ同士の接合部分も意識して
画像を作成するなどの工夫がいると思います。

まぁ、画像に手間をかけるか、パーツの位置調整に手間をかけるかの差ですかね。
色替えモンスターや、モブキャラにはいいかもしれません。
……でも色替えでいいなら、そのままファイルコピーして、
imagesフォルダの画像差し替えちゃえば……うーん……うーん……。

 

……今回のブログは役に立ってないんじゃないかって?

 

 

 

 

 

 

 

 

黙りこくれ。

 

 

 

 

 

 

 

 

以上、今回の講座はここまでとさせていただきます。

『ご静聴』ありがとうございました。

 

次回に続くって、いつだよ次。

 

●アタッチメントの切り替え

サンプルのブーメラン動画です。

30
画面内に見えているボーンは
『手を親としたブーメランのボーン』と『独立したブーメランのボーン』。
体から離れた位置に見えるボーンの方が独立している方です。最初は消しています。

20フレーム目で表示を切り替えています。
明るい灰色は表示のキー、暗い灰色は非表示のキーですね。
で、42フレーム目でまた切り替えることで、
キャッチして体と一緒に動くようになる、という描写にしています。

慣れない人にはヘンな動画に見えますが、
結局、こう言うのは『どう見えるか』のごまかしの技術ですからねw

シェアする

プロフィール

齋藤 啓介 Lv 40

誘拐犯(娘限定)

HP : 19 /77

SP : 1 /24

ゲームさえあれば割とどこでも生きていけるモーションデザイナー。
文章作家属性も持ち、そのためにSpineの勉強のためのアクションゲームのみならず
文章ベースのアドベンチャーゲームも大好き。

2017年5月11日現在、ネタバレをかいくぐり、やっとダンロンV3をプレイ中。
しかし、お気に入りのキャラが殺された事で、ロス具合が激しい日々。

▼ おすすめ記事

  • 開発の謎

    北京の体験談(食生活観光編)

  • クリエイティブ・オブ・ゴッド

    これからイラストレーターとして就活を考えいるキミ、フリーとして営業を行うあなたへアドバイス!~その1~ポートフォリオ編

  • クリエイティブ・オブ・ゴッド

    夢がデビューする よろしくっ!

  • クリエイティブ・オブ・ゴッド

    55年間ゲームグラフィックの進化