*

「Spine」の使い方をおさらいしよう!IKボーン入れ方講座

公開日: : 最終更新日:2016/02/01 ,

こんにちは、フーモアCG開発室のCGアニメーターです。

フーモアでは2Dアニメーションツール「Spine」を主に使用した、スプライトアニメーション制作をしています。そのSpineが2016年1月10日に、新バージョンである3.0.0をリリースしました。

Spine: ゲーム用 2D アニメーション ソフトウェア
Spine は、ソフトウェア開発とゲーム開発専用の 2D アニメーション ソフトウェアです。アニメータとアーティスト、プログラマが協力してゲームに命を吹き込みます。

また、今月末の1月29日に、2Dアニメーションツール勉強会でSpineをテーマに発表を行います。詳しくは下記をご覧ください。

今回のwhomor Picturesでは、改めてSpineの基本的な使い方をおさらいしていきます。Spineは2.1.27バージョンを使用しています。

今回の記事で学べること

・Spineの基本的なセットアップがわかるようになる
・CG用語である「IK」と「FK」が理解できるようになる
・SpineでIKの入れ方がわかるようになる

1.キャラクターの画像を読み込み、パーツを並べる。

それでは、早速Spineを立ち上げましょう。キャラクターを動かすための準備をしていきます。

img1

左上のメニューから「New Project(Ctrl+Shift+N)」を選び、新規プロジェクトを立ち上げます。

img03

画面右の「Tree(ツリー)」ウィンドウ内にある黄色いフォルダアイコンの「Images(画像)」を選び、右下の「Browse(参照)」を選びます。

img3

素材が入っているフォルダを選びます。これで、Spineでセットアップするための画像を読み込む準備ができました。

girl

まずはSpineでキャラクターの完成図を背景にするための一枚絵を用意しましょう。今回はこの女の子を用意しました。ファイル名は「99_temp.png」としています。

02_3

画面下にある「Translate(移動)」ボタンを押し、画像を動かせるようにして中央に配置します。目安としては、初めから存在する「root」Bone(骨)を地面と考えます。rootは今後作成するボーンの親となるボーンです。その「root」に対して、図のように体の中心と足先を揃えていきます。

slot

画面右の「Tree」タブ内に「root」のすぐ下に読み込んだ画像名がついたものがあります。この丸い形のアイコンを「Slot(スロット)」と呼びます。

img5

Slotを選ぶと「Color(カラー)」で画像全体の色を変えることができます。今回は色を赤にしてみましょう。はっきりした色を選んでおくと、パーツを並べやすくなります。

これでキャラクターパーツを並べる準備が出来ました。

続いて、キャラクターパーツをこの背景に沿って並べていきましょう。「Images」内にあるパーツ画像をSpine上に表示していきます。

img6

1枚1枚ドラッグすることもできますが、1番上の素材をクリックし、Shiftキーを押しながら1番下の素材をクリックすることで全てを選択でき、そのまま一気にドラッグすることができます。

02_5

ここで図の画像名のように番号をつけておくと、その番号順にレイヤーの順番を決めてくれるため非常に便利です。この方法だと数字が高い方が、上のレイヤーに置かれていきます。

02 (13724)

あとは福笑いと同じように一つ一つ丁寧に並べていきます。……とここでは簡単に書いておりますが、この並べる作業は結構時間を使ってしまいます。あせらず丁寧に並べていきましょう。

img07

並べていく最中に、既に並べた素材が邪魔をしている場合があります。そんな時は、画面右のところに目のマークがある行の下の点を押してみましょう。ここが表示/非表示の欄になります。ここで、既にならべた素材を非表示にしていくと、他の素材がならべやすくなります。

また、背景となる画像(99_temp.png)を動かしたくない場合には画像を選択し「Background」にチェックをしておきましょう。これで画像が背景となって、画像にロックがかかり動かせなくなります。

全ての素材を並べ終えたら、非表示にしていた素材を全て表示します。また、並べるために使用した1枚絵は、最終的にはいらないので消すようにしてください。

2.骨を入れる

キャラクター画像を動かすためのBoneを入れていきます。

03-(00395)

画面左下の「Create(生成)」を選びます。

03-(00518)

「root」Boneを一度選んでから、次にboneを作りたい場所をクリックします。

03-(00589)

これで新しいBoneを作れます。「root」と同じようなBoneができたと思います。

SpineのBoneは2種類あります。

tensen

「root」のようなで表示されるものと、のように表示されるものがあります。主に体の関節となる部分は線ボーンを使用し、関節とならない部分を点ボーンを用います。線のように表示されるBoneはドラッグすると作れます。

実際にBoneを入れていきましょう。

hip

まず、「root」から体の中心に向けてBoneを作ります。ここではhipと名前を付けました。

このhipを体の重心と考え、これを中心に残りのBoneを作っていきます。

03 (00908)

右足にBoneを入れていきましょう。hipを選び、ももの付け根から膝にかけてドラッグしていきます。

right

出来たboneにright_legなどと名前を付けます。

right_slot

画面右からright_legの「Slot」素材を先ほど作ったBoneにドラッグします。こうすることで、Boneを動かすと一緒に画像も動くようになりました。

……非常に手間がかかりますね。一つだけならまだしも、これを全てにやっていくのはかなり時間がかかってしまいます。

そこで、ここでは別の方法もご紹介しておきます。

03 (00699)

hipを選びます。ここまでは同じです。

Ctrlを押しっぱなしにします。すると、並べておいたパーツ画像が選べるようになります。

03 (01400)

この状態でクリックすると、素材の外枠が青くなります。この状態になったらCtrlを離して大丈夫です。

03 (02019)

後は同じようにドラッグしてBoneを作成してください。すると、作成したBoneの名前が先ほど選んだ素材の名前と一緒になりBoneのすぐ下にその素材が入っています。

文章にすると長く感じるかもしれませんが、実際に作業すると名前を変更する手間が無くなります。また自動で素材をboneの下に入れてくれるため、早くBoneを入れることが出来るはずです。

このような感じで、残りの部分のBoneも入れていきます。全て入れ終わったら、実際にBoneを移動・回転させて動きを確認します。

3.Boneの位置を調整する

動きを確認した際に、Boneの位置を調整したいことがあると思います。

04-(02382)

しかし、既にBoneと画像が繋がっているため、Boneを動かすと画像も一緒に動いてしまいます。

04-(02525)

この状態からBoneだけ動かしたい場合は、画面下の[Compensate]の[Bones][Images]それぞれにチェックを入れます。こうするとBoneだけ動かすことが可能となります。

ただし、この方法はいつでも直せるわけではありません。

画像を曲げることが出来る[Mesh]機能を使って複雑な設定をした後だと、上手く調整することができない場合もあります。なので、早い段階でBoneの位置を調整し決めておいたほうがいいでしょう。

4.この骨組みの問題点

調整したBoneの構成により、色々なポーズを取ることができるようになったと思います。

しかし体の重心のBoneを上下に動かしても、単純にキャラクター全体が上下に動くだけになっています。キャラクターは現在の位置を地面として立っているはずです。

なので、かかとの位置が現在の位置より低くならないように制約(Constraint)をかけたいです。こういった時にSpineで使いたい機能が「IK Constraint」です。

5.IK・FKとは

Spineで「IK Constraint」を使う前に、IKについて簡単に説明します。

ikfk

IKはInverse Kinematics(インバースキネマティクス)の略語です。

これと対になる考えがFKです。

FKはForward Kinematics(フォワードキネマティクス)の略語です。

日本語にすると、FKが順運動学、IKが逆運動学となります。

自分の腕を肩・ひじ・手の3つのパーツとしてイメージしてください。

FKは肩→ひじ→手と、体の構造の親子関係の順に沿って動かしていく考え方です。対してIKは逆に親子関係の子である手から動かし、その後に肩とひじの位置を調整する考え方です。

どちらにも長所・短所があるため、状況によって使い分けが必要になります。

6.Spineで「IK Constraint」機能を使う

今までのBoneは全てFKとして入れていました。

ここで足にIKを導入することにより、かかとの位置を基準にBoneを動かせるようにしていきます。

img_001

まず、IKとして使用するBoneを先に作ります。「root」Boneのすぐ下の層で作ってください。

「IK Constraint」機能を使うとIKボーンは自動で作られますが、あらかじめ位置を決めておいた方が後々楽になります。

img_002

足のBoneの”もも”と”ひざ”の2つのBoneをCtrlキーを押しながら選びます。

残念ながら、現状SpineのIKは1つか2つのBoneにしか入れることができません。

const

画面右の「Tree」ウィンドウ内の一番下にある「Constraints」を選びます。

new

すると、更に下の欄に「New IK Constraint」という項目が出てきます。

こちらをクリックすると、上の方に「New IK Constraint:Choose Target」と出るので先ほど前もって作ったBoneを選んでください。

img_006

名前をつけると、IK用のオレンジ色のBoneが出来ます。

反対の足も同じようにして作っていきます。

作り終わったら、体の重心のBoneを上下に動かしてみましょう。

img_009

今度は両足の足先が勝手に回転してしまっていると思います。

最後にこれを修正します。

aaa

両足の足先のBoneを選択した状態で画面右下の[Inherit]の[Rotation]のチェックを外します。

こうすることで親であるひざの回転値の影響を受け継がないようになります。

もう1度、体の重心のBoneを上下に動かしてみましょう。

05.mp4_snapshot_05.52_[2016.01.15_16.05.25]

足が地面についているのように動いてくれると思います。

これでキャラクターにIKボーンを入れ込むことが出来ました。長文となってしまいましたが、ここまで読んでいただきありがとうございます。

7.まとめ

いかがでしたでしょうか。

今回はSpineの新バージョンがリリースされたり、2Dアニメーションツール勉強会に向けて今からSpineを覚えてみたい、改めて復習したいという方々に向けて書かせて頂きました。

少しでもお役に立てましたら有難い限りです。

2Dアニメーションツール勉強会でもSpineをテーマに発表を行います。こちらでは、よりゲームデザインやアートワークフローなどについての内容の予定となっております。ゲーム開発のスプライト系ツールとしてSpineの導入はいかがでしょうか。

▼3DCG・アニメーション制作のご相談はフーモアまでご連絡ください。

contact_button

Comments

comments

  • このエントリーをはてなブックマークに追加
  • LINEで送る

イラストレーター大募集中!!

漫画家大募集中!!

イラスト制作依頼ならフーモア!

プロの漫画制作ならフーモア!

関連記事

1

Live2D体験版をさわってみた その2

ども...牛丸です...   前回はViewerのレビューまで。 今回はAn

記事を読む

title

WhomorGames「あの星で君が待ってる」

https://yoyaku-top10.jp/u/a/OTk3NA &nbs

記事を読む

icatch

Spineアニメーションを、Unityの画面で確認してみよう!

こんにちは、CG開発室アニメーターの吉村です。今回は「SpineのデータがUnityに読み込めない…

記事を読む

勉強会

【資料公開】マスタッシュ ✕ フーモア共同開催Spine勉強会資料

平成27年1月20日にミクシィcollaboスペースで、スマートフォン向けゲームなどで需要拡

記事を読む

e14d883a2a6efd80446f6cad692a716b

第一回spine勉強会〜Mastache x フーモア共同開催(会場mixi)のお知らせ

フーモアピクチュアズの遠藤です。 さて、このたびMustasche × フーモア 共同開催

記事を読む

puppet2d

期待のツール!?Puppet2Dは使える?その他諸々

フーモアCG開発室の遠藤です。 ■なかなか忙しくさせていただいており、スタッフ一同、毎

記事を読む

1

Live2D体験版をさわってみた その1

CG開発室の牛丸です。     遠藤が行方不明になってしまったので

記事を読む

whomorPicturesBlog_140901C

Live2D風モーション、Spineの限界に挑め~spineをLive2D風にしてみました~

ご無沙汰しておりました。フーモアDCCツール研究開発局局長の遠藤です。 7月11日からブログ記事が

記事を読む

whomorPicturesBlog_140620D

Spineでエフェクトって付けれるの?Spine使い倒して頑張ってみた!

フーモアピクチャーズ技術部の遠藤です。 今回のテーマはエフェクトです。 UnityやCoco

記事を読む

10

グリー主催:中級者向け!2Dアニメーションツール勉強会レポート

 CG開発室の遠藤です。1月29日に、グリー様主催、WebTechnology様、Live

記事を読む


  • 「おもしろいMANGAを創る」をビジョンに今までになかった新しい価値観を創造する会社。イラストや漫画制作のディレクター集団。
    お問合せはこちらからお気軽にどうぞ
  • ブログ最新記事とクリエイティブに役立つ情報を日々配信しています。

PAGE TOP ↑