パスワードを忘れた? アカウント作成
14982644 journal
日記

yumeの日記: Unity制作(っていうかSpine) #42

日記 by yume

メデューサ・ゲーム(仮)

--

●Spine続き
昨日触ってみた感じ一番感触がよかったので、そのままSpineのProfessional版を購入した。
さしあたっての目標は、ディアティスというキャラクターをベースに:
・視点を動かせる
・表情を変えられる、顔のパーツの細かい位置やスケールの調整ができる
・口のパーツにしゃべっているようなアニメーションをさせる
・ポーズを変えて、身振り手振りを加えられる
というところを実現してみたい。

というわけで、実際Spineの使い方を覚えるために、公式のガイドを読んでいく。また勉強だ。
Spineをmacで起動すると……UIちっさ!これはSpineロゴ>設定からサイズを2倍にしていすればうまくいった。

●基本コンセプト
・スケルトン
Spineで編集できるものの概念、ボーンとかスプライトとか様々なものの集合体。例えばキャラひとりのスプライトとボーンとアニメーションとかの集まりがひとつのスケルトン。
ひとつのプロジェクトで複数のスケルトンを同時に編集することもできる。

・ボーン
ボーンはトランスフォーム情報(回転、位置やスケール)をもち、また親子関係を持てる。
子ボーンは親ボーンの変形に影響される。

・アタッチメント
スケルタルアニメーション、イメージ、メッシュ、その他の「アタッチメント」はボーンに装着され、ボーンの変形に応じて変形する。
しかし、Spineのアタッチメントはボーンに直接装着されるわけではない。アタッチメントは「スロット」に装着されており、ボーンには「スロット」が装着される。

・スロット
スロットは表示順序を制御するための概念。
表示順序はインスペクタの青いアイコン「表示順序」に並んでいる。
例えば「胴体ボーン」に腹部とシャツのスロットを入れ、臀部ボーンにズボンスロットを入れても、腹部はズボンの下で、シャツはズボンの上、というような表示順序を保つことができる。
>これはつまり、描画順序をインスペクタ上でわかりやすく表現するための概念だろうか。

・イメージ
bitmap画像のこと。Spineは画像編集機能はないので、Photoshopなりで作ってインポートする。
スケルトンはボーンに装着されたイメージの集合で構成される。

・イメージノード
イメージが入っているフォルダのこと。スケルトンはフォルダを参照して自分に使う画像ファイルをまとめて扱える。
フォルダの中身を更新して、そのままプロジェクトに反映できる。
イメージをエディターエリアにドラッグすると、スロットと領域アタッチメントをルーとボーンの下に作成してくれる。

・ツリーフィルター
ツリーに表示される要素をフィルターできる。

●ツール

・選択
選択ツールとかがあるわけじゃなく、単にエディタ上のものをクリックすれば選択できる。+cmdで複数選択も可能。escかスペースバー、エディタエリアをダブルクリックで選択をクリアできる。

・選択グループ
cmd+1~9で選択範囲の記憶ができる。RTSみたいだ。

●トランスフォームツール
回転、移動、スケール、シアーができる。

・軸
変形軸の基準をローカル・親・ワールドのいずれかにできる。

・トランスフォームコピー
cmd+cで選択したボーンのトランスフォーム値をコピーできる。cmd+vで他のボーンにこれを反映できる。同じ値を入れたいときなどに。

・回転
ボーンの回転の原点は常にボーンとなる(?)。
>多分ボーンの付け根のことかな。
軸:ローカル・親の場合、アイテムの親に対する回転の度合い(親が90度で子が90なら、世界から見て180度になる)。ワールドの場合は世界に対する絶対値で回転する(90度=世界に対して90度)

・トランスレート(移動)
軸:
        ローカル:親に対する距離。X軸はアイテムの回転方向。
        親:親に対する距離。親のローカル軸を使う。X軸は親の回転方向。
        ワールド:ワールド原点に対する距離。

・スケール
スケールのX軸はアイテムの回転方向。
-1スケールは反対側を向く(反転)

・ボーンながさツール
ボーンの先端を選択すると長さを調節できる。

●ポーズツール
ポーズツールをアクティブにして複数ボーンを選択すると、IKで関節を動かせる。
>Unityでちょっとだけ触ったあれか。
例えば複数ボーンからなる恐竜のしっぽをぐねぐね動かせる。

●ウェイトツール
詳しくは別ページで!ってあってリンク切れしとるぞ。

●作成ツール
新規ボーンを作成できる。これは設定モードでのみ可能。
親になるボーンを選択したから作ると、その子ボーンとして作成
ボーンの長さはIKコンストレイントや自動ウェイトを使うとき以外に意味は無い。長さゼロのボーンは十字レティクルみたいなやつで表示される。

新しいボーンを作る前に、cmdを押しながらアタッチメントを選択すると、アタッチメントのスロットがボーンに反映され、ボーンの名前もアタッチメントと同名になる。ボーンの名前を入力する手間がはぶける。

●実際にボーンを入れてみる
まずはディアティスのイラストを描く。
もろもろの反省点を生かして、アニメーションさせやすい感じになった。肩幅が狭くなって子供っぽさが増したけど……。サンプルでは服装をスキン機能で差し替えたりしてたので、いずれ変えられると信じてここはこれでいこう。
illustratorで各パーツをレイヤー分けし、Photoshopに書き出す。
Photoshop上で原点を指定(股下直下の足元とした)からスクリプトでjsonとPNGを書き出す。

そんでボーンをいれる。

●アニメーション
Spineもキーをもとにアニメーションを制御していくらしい。キーの間の動きはSpineが補完してくれる。

まずは「アニメ化モード」に移行する。たぶんSpineは設定モードとアニメ化モードの二つしかない。
アニメ化モードに移ると、インスペクタの内容などもアニメ化モードのための要素に制限されたりする。

・タイムライン
スケルトンのポーズはキーとタイムラインの現在位置で構成される。
タイムラインはドープシートビューに表示される(画面下側のビュー)。

・キー
アニメ化モード中にスケルトンに変更が加わると、変更が自動的にキーとして描き込まれる。しかしそのままタイムラインの現在位置を変えると変更が破棄される。変更を確定するには、ツールバーみたいなとこの鍵マーク(キーマーク)のボタンを押すようだ。緑色は変更が加わっていないところ、オレンジ色は変更したけど確定していないところ、赤色は変更も確定したところ、のようだ。

Kキーを押すことで、変更すべてを確定することもできる。

回転のキー入力は、その前の入力からの最短経路をとる。180度以上回転させようとすると、想像の逆方向に回転してしまう。こういう場合は複数のキーを打つ。

インスペクタにある鍵マークは、アタッチメントの非表示を切り替えたときなどにキーを打ち込むためのもの。

アタッチメントの色を変える場合、カラーはスロットに設定する。
非表示にするためにアルファを0にするのではなく、単に非表示にする方が計算量的に効率が良い。

●実際に動かしてみる

まず腕の単純回転はキーフレームを打つだけでいいが、メッシュを入れておかないと無理のある個所もちらほら。
メッシュを打つには、対象のアタッチメントを選択し:
・メッシュにチェックを入れる
・メッシュ編集>トレースで輪郭をとる
・「作成」や「生成」でメッシュの中のポイントを必要なだけ打つ。
さらに、ウェイト調整モードに入り:
・アタッチメントにバインドするボーンを選択する
・バインドを確定し、自動生成されたウェイトをチェックし、必要に応じてウェイト量を調節する。

ウェイト調節がうまくいってるかを確認するためにポーズを曲げると、それをもとに戻さないといけない(ポーズはプレビュー用じゃなくてガチの初期ポーズっぽいので)
あるいはアニメーションで確認する。まぁその方がいいだろう。アニメーションではあくまでボーンを動かしているだけなので、実際どのように曲がるかはここでじっくり動かしながら確認したほうが確実だ。

ざっくりやってみた感じ:
・まずはメッシュを綺麗に作る。ゆがみ方がすごかったらメッシュをさらに作り直す。
・わずかな歪みまでもっていったらウェイトで調整
という順の方がうまくいった。メッシュは曲がる部分には多めにポイントを打つこと、特に境界線上に多めに打てばやわらかい曲がり方になっているように見える……気がする。
もうちょっとやってたらコツがつかめそうな感じもする。とにかくやっていこう。

●瞳をマスクする
クリッピングという機能を使う。
まず空のスロットを作成し、そこに新規>クリッピング
できたクリッピングを編集し、頂点を打ってポリゴンを作る。ポリゴンが閉じたらその中以外がマスクされるようになる。
実際にマスクを反映するには、できたクリッピングを表示順序の中の、隠したいイメージより下に持っていかなければならない。そうすれば、そのイメージ以上のすべてがマスクされる。
瞳を隠す場合、隠したい対象は瞳ただひとつなので、それ以上のすべてがマスクされると都合が悪い。これはインスペクタからクリッピングを選び、クリッピングが終わる場所(この場合瞳そのもの)を指定すると、その範囲のものだけをマスクするようになる。

瞳のマスクはわかったがやはり腕周りが気に入らない。もうちょっといろいろ調べてみよう。
cgworldの連載にメッシュの取り方のコツのような内容があった。
・メッシュの頂点はトレース>間隔を均等っぽくならす>
・ウェイト調整にブラシのような機能を使える
・ウェイト調整はアニメ化モードでやると曲げながらが簡単でいい

なんとなくざっくり:
・トレースでざっくりとる
・端っこじゃないとこで近すぎるポイントがあったら間引く
・だいたい等間隔でポイントを追加
・関節に近いエリアはさらに間にポイントを追加
・ボーンにそった中心線にポイントを追加。関節回りは多めに

という具合で入れると、ほとんどウェイト調節しなくてもそこそこ見栄えよく曲がるようになってくれた。

●口をアニメーションさせる
アニメでしゃべってるときのあのパラパラっと切り替わるアレ。
・一つのスロットに複数のイメージを入れておく
・アニメーション上で必要なフレームでイメージの表示を切り替える

それらを組み合わせて……。
できた! できたぞ!!

この議論は賞味期限が切れたので、アーカイブ化されています。 新たにコメントを付けることはできません。
typodupeerror

長期的な見通しやビジョンはあえて持たないようにしてる -- Linus Torvalds

読み込み中...