[無料配布]自作スクリプト・ツール

【Spine】使い方を解説!ちびキャラ作成!骨入れからセットアップ(リギング)まで

1

eyecatch-spine-bone-insert-setup

すいみん
こちらのCGメソッドの記事ではちびキャラ作成!骨入れからセットアップ(リギング)までを紹介します!

すいみん
前回は3つのコンストレイントのうち「パス・コンストレイン」を使ってセットアップしましたが、今回は「トランスフォーム・コンストレイント」と「IKコンストレイント」の2つを用いて見ました。
eyecatch-spine-how-to-use 【Spine】初心者向けチュートリアル!インストールから使い方まで解説
すいみん
こんな感じリグを組んでみました。
この記事の著者
CGブロガー すいみん

CGブロガー

すいみん

Suimin

プロフィール

某美大の油絵科を卒業後、大手CG映像プロダクションに入社。
その後ゲーム業界に転職。
現在は技術系のCGデザイナーをしています。 書籍:Unity デザイナーズ・バイブル
プロフィール詳細はこちら

[Spine]参考&前提条件

参考にしたのは下記の記事のチュートリアルの項目で紹介したCG Worldのモデルデータを参考にしております。
eyecatch-spine-beginners 【Spine】Spineとは?初心者向けの始め方解説

またSpineの基本的な機能の使い方は下記の記事を習得した前提で記事を書きました。
はじめて触る方は下記の記事から見ることをおすすめします。
eyecatch-spine-how-to-use 【Spine】初心者向けチュートリアル!インストールから使い方まで解説

[Spine]下絵(テンプレート)の準備

下絵は下記の目的で使います。
※Phoshopの書き出しの際に出力することも可能です。今回は手動で画像を追加してみました。

  • 元絵とずれてないか確認するため
  • 骨の位置のあたりとして
STEP.1
関節部分に赤を入れた下絵(テンプレート)を用意
骨を入れるあたりとして使います。
名前は「template」
背景を透明にしてPNG保存します。

STEP.3
rootへドラッグ&ドロップ
下絵「template」をrootへドラッグ&ドロップ。
親階層にスロットも生成されます。
STEP.4
アタッチメントの調整
下絵のアタッチメント選択しトランスレートツールを動かして位置合わせします
さらに「選択」をOFFにして下絵が動かないように。
あとはお好みでカラーの透明度を調整します。


[Spine]ちびキャラの骨(ボーン)の作成

骨の作成方法はビューパネルの下の「作成ボタン」を押して、ドラッグ&ドロップで作成していきます。

基本の骨の作成

あとで微調整できるので、必要な骨をガンガン作成します!(計16本)

  • 股間➡腰➡首元➡顎(4箇所)
  • 肩➡肘➡手首(左右で6箇所)
  • 足の付け根➡ひざ➡足首(左右で6箇所)
※腕の骨の位置はテンプレートを参考にしてます。

リグ用の骨の作成

※下記画像のピンク部分

「リグ用」に追加で骨をいれます(計10箇所)

  • 前髪
  • 横髪
  • 後ろ髪
  • 顔の前方
  • 顔の中央
  • 顔の後方
  • 左右の肩(×2)
  • 左右の股(×2)

骨の微調整

Compensateの「ボーン」と「イメージ」をONに
これで調整した骨だけ調整することができます。

トランスレートや回転ツールで骨の位置を調整します。
回転;できればすべて整数に直しましょう。(動かしてしまった時に値を把握しやすい)
位置:骨の先端と次の骨の根本のリングが重なるように調整しましょう
骨の長さ:骨を選択しツリーパネルの下「長さ」の値を変更します。

データ整理

一旦データを整えます。
まずは階層の整理と骨の名前をつけます(下記の画像参考)

※ツリーパネルの矢印アイコンを右クリックすると全展開します

  • 腰(body)
  • 胸(body_upper)
  • 鎖骨中央(body_neck)
  • 頭(head)
  • 肩(armOuter,armInner)
  • 肘(armOuter_lower,armInner_lower)
  • 手首(armOuter_hand,armInner_hand)
  • 足の付け根(legOuter,legInner)
  • ひざ(legOuter_lower,legInner_lower)
  • 足首(legOuter_foot,legInner_foot)
  • 前髪(head_hairOuter)
  • 横髪(head_hairInner)
  • 後髪(head_back)
  • 追加した肩の骨(armOuter_shoulder,armInner_shoulder)
  • 追加した足の骨(legOuter_hip,legInner_hip)
  • 追加した顔の前方の骨(head_Controller)
  • 追加した顔の中央の骨(head_face)
  • 追加した顔の後方の骨(head_Controller_sub)

骨に色をつけて、アイコンを変更する

見やすいように色をつけます。骨を選択して「カラー」部分を調整
また追加した骨はアイコンを変更します。

  • 腕と足の付け根は■のアイコンに
  • 他は十字のアイコンに

最終的に下記の様な見た目になりました。

[Spine]ちびキャラのセットアップ(リギング)

各アタッチメントを骨とバインドして、ウェイト調整をしていきます。

パーツのメッシュ化

アタッチメント(パーツの画像)を選択して、ツリービューのメッシュ編集ボタンをおします。

「作成」ボタンで頂点を打ち、「変更」ボタンで位置調整します。
また頂点を打つ時にドラッグ&ドロップするとオレンジのラインのエッジをつけることができます。

エッジを引くことで、自分の意図したメッシュの割り方をすることができます。

※今回はすべてのアタッチメントをメッシュ化します(10箇所)
※肘や膝の関節部分は3重ほど密集したメッシュをつくりましょう。

パーツのバインド

メッシュと骨を関連付けるウェイト調整をしていきます。

右上の「ビュー」からウェイトパネルを表示します。
メッシュを選択して「バインド」から必要な骨を選択。

メッシュすべてにバインドしていきます(計10箇所)
対応する骨は下記の通り

  • 前髪➡head, hair_outer
  • 横髪➡head, hair_inner
  • 後髪➡head, head_back
  • 顔のパーツ➡head, head_face, head_Controller_sub
  • 顔➡head, head_Controller, head_Controller_sub
  • 右腕➡armInner, armInner_Lower, armInner_hand※左腕も同様
  • 右足➡legInner, legInner_Lower, legInner_hand※左足も同様
  • 体➡

パーツのウェイト調整

  • 前髪➡hair_outer一色
  • 横髪➡head_inner一色
  • 後髪➡head_backBack一色
  • 顔のパーツ➡head_face一色
  • 顔➡head一色
  • 右腕➡関節を境目に3本均等に
  • 右足➡関節を境目に3本均等に
  • 体➡7本の骨を影響範囲を考えて塗り分け

またウェイトの塗り方は4種類あって好みに応じて使い分け、影響範囲を変更していきます。

  • ダイレクト➡骨を選択して上下にドラッグして値を直接調整
  • 追加➡値分、影響度を追加する
  • 取り除く➡値分、影響度を削る
  • 置換➡指定した値に置き換えられる。0にして消す時に便利

※「オーバーレイ」と「選択済み」にチェックをいれると影響範囲が見やすくなります。
※この時点ではざっくりでOKです。最終的にアニメーションさせながら微調整します。

かかとのIKコンストレインの設定

「IK_legInner」の位置を動かすと膝が回転する仕掛けです。

  1. 右足「legOuter」骨を選択
  2. ツリービュー>新規>IKコンストレインを選択
  3. ターゲットは同じ「legOuter」を選択
  4. コンストレイン名は「IK_legOuter」、「IK_legOuter」という骨も作成されます。
  5. 「IK_legOuter」の骨を選択して子を追加「legOuter_lower」に指定。
  6. 「IK_legOuter」の骨を選択して、テンプレートを見ながら元の基本の位置まで調整

つま先のIKコンストレインの設定

「IK_footOuter」の位置を動かすとつま先が回転する仕掛けです。

  1. 「legOuter_foot」を選択
  2. 新規>IKコンストレインを選択
  3. ターゲットは「legOuter_foot」を選択
  4. コンストレイン名は「IK_footOuter」
  5. 階層を整えます。作成した「IK_footOuter」の骨の下に「IK_legOuter」をドラッグ&ドロップ
  6. 最後にrootの下にある「IK_footOuter」と子の「IK_legOuter」の位置を微調整

以上で

  • 「IK_legOuter」の位置を動かせば、膝が曲がり
  • 「IK_footOuter」の位置を上下に動かせば、つま先が曲がります。

これ繰り返してもう片方の足にも同じIKの設定をします。

顔のトランスフォーム・コンストレイント

「head_Controller」の位置を動かすと、顔が回り込みの変形をする仕掛けです。

  1. 顔パーツ「head_face」を選択して、トランスフォームコンストレイン
  2. ターゲットは「head_Controller」を選択
  3. ツリービュー下の設定
    ・リンクスライダーにチェック
    ・ミックスの値は4
  4. パーツが動いてしまう場合は、オフセットの「一致ボタン」を押すと元に位置に戻ります。

以上で「head_Controller」の位置を動かした時に顔のパーツも追従します。

同様に他の頭のパーツも「head_Controller」をターゲットにしてトランスフォームコンストレインをかけます。

項目コンストレイン名ミックスの値
顔のパーツcons_head_face4
横髪cons_head_hairInner2.5
前髪coms_head_hairOuter3
後ろ髪cons_head_back-1
顔の後方のコントローラーcons_head_subController-100

肩のコンストレイン

「armOuter」を左右に位置移動させた時に肩が回り込むように回転する仕掛けです。

  1. 「armInner_shoulder」を選択してトランスフォーム・コンストレイント
  2. ターゲットは「armInner」
  3. ミックスのトランスフォームの値を100
  4. 同様に「armOuter_shoulder」を選択してトランスフォーム・コンストレイント
    ターゲットは「armOuter」
    ミックスのトランスフォームの値を150
    以上の設定でarmInnerまたはarmOuterを位置移動した時に体も追従するようになります。

さらに両肩が連動する設定です。

  1. 「armInner」を選択
  2. ターゲットを「armOuter」
  3. 生成されたコンストレインのオプションのローカルにチェック
  4. ミックスのトランスレートを-40
  5. オフセットの一致を押して、パーツのずれた分調整

以上で「armOuter」を左右に動かした時に「armInner」も連動して体の傾きが調整できます。

腰のコンストレイン

同様に「legOuter」を左右に位置移動させた時に肩が回り込むように回転する仕掛けです。

  1. 「legOuter_hip」を選択してトランスフォーム・コンストレイント
  2. ターゲットは「legOuter」
  3. ミックスのトランスレートは140
  4. 続いて「legInner_hip」を選択してトランスフォーム・コンストレイント
  5. ターゲットは「legInner」
  6. ミックスのトランスレートは140

両足が連動する設定です

  1. 「legInner」を選択してトランスフォーム・コンストレイント
  2. ターゲットは「legOuter」
  3. 生成されたコンストレインのオプションのローカルにチェック
  4. ミックスのトランスレートは-65
    オフセットの一致ボタンを押しても元の位置に(※基本1回クリックですが場所によっては数回クリックする必要があります)

以上でリグ(仕組み)ができました。

すいみん
あとはアニメーションさせて、違和感のある場所はウェイトを再調整しましょう!

[おまけ]メッシュ編集しないで関節を曲げる場合

骨の回転だけで手足を曲げる場合です。

  1. 関節ごとに手足のパーツをわける
  2. 別個でPhotoshop書き出し
  3. データインポートでアタッチメントを追加
  4. 各対応した骨の下に入れる

以上です。

メッシュ化しないほうが、負荷は減るのでモバイルに向いてます。
ちびキャラのような単純な形状の場合は単純に曲げたほうが良いです。

ポイント
曲げてみてつなぎ目がずれた場合は、Compensateの「ボーン」と「イメージ」をONにして骨を調整しましょう。
隠したい部分はツリービューの▼アイコンの項目を右クリックしてやると階層下すべて非表示になります。

ちびキャラ作成!骨入れからセットアップまでまとめ

今回、全てメッシュしたセットアップなので、ゲームなどにはあまり向いてないですが、「トランスフォーム・コンストレイント」と「IKコンストレイント」の2つを用いて見ました。

うまく連動する仕掛け(リグ)ができると、アニメーションを打つ場所が減るので、効率化します。

すいみん
冒頭で書いたとおり、今回のセットアップは下記の記事に書いたチュートリアルを参考にしています。
eyecatch-spine-beginners 【Spine】Spineとは?初心者向けの始め方解説
すいみん
今回使ったイラスト作成と素材分けは下記の記事にまとめました
eyecatch-sd-character-creation-illustration-import-to-spine 【Spine】ちびキャラ作成!イラスト作成からSpineへのインポートまで

以上、すいみん(@cg_method)でした!

1