記事の目次

    こんにちは。HERMIT WORKSの柴田章成です。前回までで、Spineのリギングにおける基本から応用までを紹介しました。今回は実際にアニメーションを付けてみます。これまでも走りや簡単な待機のアニメーションのつくり方は解説しましたが、様々な要素を取り入れた複雑な動きは解説していませんでした。ゲームのキャラクターの動きは、歩き、待機、通常攻撃などの単純なものばかりではありません。そこで今回は、必殺技のような複数の要素で構成された動きのつくり方について、メイキング動画も交えながら解説します。

    TEXT＿柴田章成 / Akinari Shibata（HERMIT WORKS / Twitter：＠AkinariShibata）
    ILLUSTRATION＿平野悟史 / Satoshi Hirano（HERMIT WORKS）
    EDIT＿尾形美幸 / Miyuki Ogata（CGWORLD）

    簡単操作で綺麗に羽が開閉する、デーモンのリグ

    今回は複雑なアニメーションの一例として、複数の動きで構成されたアニメーションを作成します。今回の作例キャラクター（以降、デーモンと呼びます）が実際にゲームに実装された場合の必殺技に相当する、以下の動画のようなリッチな動きを目指します。

    ▲「歩き→ジャンプ→打ち下ろし→着地」のながれで、ダイナミックな攻撃をさせてみました


    アニメーションを作成する下準備として、まずはデーモンの体と羽のリグを作成します。今回はあまりテクスチャパーツ数を分けない前提で作成するので、体幹、左下肢（左脚）、右肩のパーツを一体化しています。また、上肢（腕）や下肢（脚）の関節も基本的には分割していません。例外として、右手の指の部分のみ、拳を握ったときにパーツが重なる順番を調整する必要があるので分割しています【上図内A】。パーツ分割は、求められる動きを実現できる最低限の数にするよう心がけましょう。 ［アニメ化モード］で軽くポーズや動きをつけながら、全身のボーンを設定し、［ウェイト］を付けていきます【上図内B】（リギングの基本的なながれは過去の連載を参照してください）。


    上肢のリグを作成する際、体幹の［スケール］の影響を受けないように設定します。上腕、前腕、手のボーンにおける、オプションの ［継承］内の［スケール］のチェックボックスの選択を外しておきましょう【上図内A】。【上図】と【下図】では、奥行きを表現するために上腕を縮小しています。前腕の［スケール］のチェックボックスを選択した場合【上図内A】と、選択を外した場合【下図内A】を比較すると、【下図】では前腕が縮小していないことが見てとれます。


    体のリグ作成が終わったら、羽のリグも作成します。羽が動くしくみ自体は簡単につくれますが、簡単に動かせるようにするためには、少しコツが必要です。本記事では、リグの作成が容易で、動かすことも容易な、バランスのいい方法を紹介します。


    まずは下準備として、羽のテクスチャにメッシュを設定します。ものすごく細かい動きを付けたい場合でもない限り、パーツ分割と同様、メッシュの頂点も最低限の数に絞るよう心がけましょう【上図】。 羽のメッシュを切るときには、1点から複数のラインが広がる扇形を意識すると、綺麗に動くようになります。


    メッシュを切り終えたら、今度はボーンを配置しましょう。まずは羽全体の動きを制御するボーンを、羽の付け根にひとつ作成します【上図内A】。次に、羽の上側のふちに沿うように2本のボーン作成した後、［IKコンストレイント］を設定します【上図内B】。先端のボーンのチルドレンとして、広がった羽に沿うように2本のボーンを作成し、上側のボーンの方に［IKコンストレイント］を設定します【上図内C】。以上の設定によって、下肢のリグを作成するときと同じように、2本のIKと1本のIKを組み合わせたリグを組むことができました（下肢のリグについては、本連載の 第2回で解説しています）。


    羽のボーン作成が終わったら、羽全体が綺麗に広がるしくみを［トランスフォーム・コンストレイント］を使って作成します。真ん中にある羽のボーン【上図内A】を選択し、上側のボーン【上図内B】を［ターゲット］として、［トランスフォーム・コンストレイント］を設定します。このとき、［ターゲット］にするボーンを間違えないようにしましょう（［トランスフォーム・コンストレイント］の詳細は、本連載の 第3回で解説しています）。さらに［ミックス］の［回転］の値を70に設定します【上図内C】。


    以上の設定によって、上側のボーンを広げた際には自動で羽全体が綺麗に広がり【上図】、閉じた際には羽全体が綺麗に閉じるようになります【下図】。【上図】では、［IKコンストレイント］を設定した上側のボーンを動かした際に、羽全体が広がっていることが確認できます。一方で【下図】のように、羽を閉じるときもひとつのボーンで制御できます。 これで羽のリグは完成です。反対側の羽にも、同様の設定を施します。


    尻尾は、本連載の 第5回で解説したポニーテール用のリグと同様に、［パス・コンストレイント］によって滑らかに動くようにします。【上図】では、尻尾の先端に作成したひとつのボーンだけで、尻尾の揺れを制御できるようにしています。


    ▲最終的に、この動画のような感じで、全体を動かせるようにしました


    以降では、前述のリグを使い、ダイナミックな攻撃アニメーションをつくっていきます。


    次ページ：
    ダイナミックな攻撃アニメーションと軌跡エフェクト

    [[SplitPage]]

    ダイナミックな攻撃アニメーションと軌跡エフェクト

    1箇所に留まった、移動のない単純なアクションであれば楽に作成できますが、移動をともなうアニメーションの作成は大変です。こういう場合は［root］ボーンを一時的に移動させながらアニメーションを付けると、ある程度簡単に動きを作成できます。動きのつくり方を文章で説明するのは難しいので、以降では工程ごとに動画も使いながら解説していきます。


    どんな動きをつくるときでも、全体の動きの雰囲気を把握しておくことが大切です。まずはデーモンの［root］ボーンのX軸だけを動かして、どの位のタイミングで、どの位置にいてほしいかを決めます【上図内A】。このとき［ゴースト化］の［キーフレーム］のチェックボックスを選択しておくと【上図内B】、前後の動きやタイミングを把握しながら調整できるので便利です。【上図】では、横の移動距離だけに注目し、［トランスレート］にキーを打っています。


    横の動きを付け終えたら、今度はジャンプするタイミングで腰のボーンを移動させ、縦の動きも付けます。このとき、腰のボーンのX軸は動かさず、Y軸だけで高さを調整することが大切です【上図】。両方の下肢に［IKコンストレイント］を設定しているため、腰のボーンを上下させるだけで、ある程度ジャンプと着地を表現できます。


    ▲この段階では全体の雰囲気を把握することが大切なので、動きの正確さは求めません。［root］ボーンのX軸の動きと、腰のボーンのY軸の動きだけを付け、タイミングを掴むことに集中します


    次に、ジャンプと、着地の際の反動を付けます。ここで重要なのは、体全体の弾みを付けつつ、デーモンの重さや、力の強さを表現することです。ジャンプの前の予備動作や、着地した後の体重の逃がし方も含め、納得できるまでつくり込みます。 この時点から、腰のボーンのX軸にも動きを付け、全体のバランスの調整も始めています【上図】。


    ▲前方に移動して、ジャンプして、攻撃して、着地するまでのアニメーション全体のタイミングは、この時点で決定させています


    いよいよ体の細かい動きを付けていきます。基本的には腰→下肢→体幹（胸部）→頭部→上肢の順番で、ボーンひとつずつに動きを付けます。必ず見せたい「決めポーズ」などがある場合は、そのフレームでポーズをつくり、必要なボーン全てにキーを打ちます。この時点では体の動きだけを見たいので、羽は非表示にして作業しています【上図】。


    ▲歩き方、ジャンプする際の動作、腕の打ち下ろし方など、ゴリラの動きをイメージしながら作成しています


    最後に羽と尻尾の動きを付けて終了です。羽ばたくタイミングや尻尾の揺れ方などは、物理法則を意識しながら設定することが重要です。羽は1枚のテクスチャでつくられていますが、全体の左右反転と、［IKコンストレイント］を設定したボーンの左右反転を組み合わせることで、表側と裏側が重なって見えるような表現が可能です【上図内A】。


    ▲羽と尻尾は事前にきちんとリグを組んでおいたので、複雑な動きに見える反面、アニメーション作成時の手間はそれほどかかっていません


    アニメーションとしてはこのままでも十分ですが、攻撃の軌跡エフェクトを付けることで、ひとつ上の表現を目指します。本来ならば、手描きの連番素材を用意し、それを配置するのがセオリーですが、ある程度の表現は素材を追加することなく作成できます。 まずはエフェクトを付けたい部分のテクスチャを複製します。今回は左腕を振り下ろす際の軌跡エフェクトをつくりたいので、左腕のテクスチャを複製します。複製したテクスチャは、わかりやすいように横へ移動させます。［ツリー］ビューから左腕の［スロット］を選択し【上図内A】、［複製］ボタン【上図内B】を押して［スロット］を複製します。複製した［スロット］を［root］ボーンの直下に移動させます【上図内C】。


    • 次に、エフェクト素材として使いやすいようにメッシュを調整していきます。複製したテクスチャのメッシュを一度リフレッシュし、新規にメッシュ編集作業をします。 通常、メッシュを切る際には形に沿うように頂点を配置しますが、エフェクトに使う場合は、メッシュがブロック状になるように頂点を配置すると便利です。今回は正方形を2列に並べるようにメッシュを編集しましたが、より複雑な形にしたい場合は3列～4列で配置するといいでしょう。【左図】では最初に四隅の頂点をとり、［生成］ボタンを連打することで、各頂点をいい感じに整列させています。


    メッシュの編集を終えたら、［アニメ化モード］に移り、実際にエフェクトの形に変形させます。基本的に、始点【上図内A】→1番大きく変形する点【上図内B】→消える直前【上図内C】の3点を順番に作成すれば問題ありません。細かく形を調整し過ぎると、違和感のある変形になってしまい、制御が大変になるので、なるべくシンプルになるよう心がけます。 最後に［スロット］で色を調整したら完成です。


    ▲拳と同じタイミングでエフェクトを伸ばしてもいいですが、少しだけエフェクトが先行するように配置しておくと、形はズレますが、動かしたときの威力や速度感が増し、より迫力のある表現となります


    今回は綺麗に羽が開閉するリグと、それを使ったダイナミックな攻撃アニメーションのつくり方、簡易的な軌跡エフェクトのつくり方を解説しました。羽のあるキャラクターをつくる機会はよくあるので、覚えておいて損はない手法だと思います。アニメーションのつくり方に関しては、今回は動きを付けるときの考え方を中心に解説してみました。これらの解説が何かしらのお役に立てれば嬉しく思います！



    第7回の公開は、2020年2月を予定しております。

    プロフィール

    • 柴田章成
      HERMIT WORKS所属のデザイナー・アニメーター・テクニカルディレクター。3度の飯よりリグが好き。
      Twitter：＠AkinariShibata

    • HERMIT WORKS
      主にアートディレクターで構成されたデザイナー集団。ハイクオリティなデータ制作でゲーム開発をサポートしています。本記事やSpine、そのほかのツールに関するお問い合わせは、下記メールアドレスまでお送りください。
      shibata.hermitworks@gmail.com
      hermitworks.jp