アニメーションの基本とキャラクター アニメーション

コメントする / Unity / 2022年10月16日

今回のテーマ

  1. 前提知識: マテリアルの透過
  2. アニメーションの基本
  3. キャラクターをアニメーションさせる

学習環境のセットアップ

Unity 2020 以降を想定しています。

  1. プロジェクトを用意する
  2. Package Manager から ProBuilder をインストールする
  3. Asset Store から Basic Motions Free アセットをインポートする
  4. アセット パッケージ GameDev1-3-3.unitypackage をダウンロード・インポートする

前提知識: マテリアルの透過

解説動画

解説

（Standard シェーダーを使っている場合）マテリアルの色 (Albedo) は透明にすることはできない。透明にしたい時は Rendering Mode を Transparent か Fade にする。Transparent の場合は透明にしても完全な透明にならず、外観が見える。Fade の場合は完全に透明になる。

参考資料

アニメーションの基本

解説動画

学習手順

  1. 今回学ぶ内容を確認する
    1. Assets/_LearnAnimation/1 Basics/Completed/DoorAnimation シーンを開いて実行する
      • これが今回学ぶ内容です
      • WASD でキャラクターが動きます
      • 青いスイッチを踏むと、ドアが開いて通れるようになります
      • ドアの開き方は「消える」と「下に開く」の２種類があります
      • このような開くドアをアニメーションを使って作る方法を学びます
  2. 学習用のシーンを開く
    1. Assets/_LearnAnimation/1 Basics/SampleScene シーンを開く
      • ここにドアのアニメーションを作っていきます
  3. アニメーションを作る
    1. Cube オブジェクトの名前を Door に変えて、Animator コンポーネントを追加する
    2. Animator Controller アセットを作り、名前を Door にして Animator コンポーネントに割り当てる
    3. Animation ウインドウを Animator ウインドウを開く
    4. Hierarchy から Door オブジェクトを選び、Animation を Create して、Fade と名付ける
      • これに「ドアが消えて通れるようになる」アニメーションを作ります
    5. Material を作って Red と名付け、Rendering Mode を Fade に変えて Albedo を赤にする
    6. 録画ボタンを押して、0 フレーム目で Material の Albedo を右クリックして Add Key する
    7. さらに Box Collider を右クリックして Add Key する
    8. アニメーションのヘッダーを 60 フレーム目に移動し、「Box Collider」を無効にして Material の Albedo の Alpha を 0 にする
    9. 録画ボタンをもう一度クリックして録画を停止し、再生ボタンをクリックしてプレビューを確認する
    10. Animator ウインドウをアクティブにしてシーンを実行し、ドアが消えることを確認する
    11. アニメーションがループしているので、Fade アセット（アニメーション クリップ アセット）の Loop Time のチェックを外す
    12. Animator ウインドウを操作して新たに State を作り、Default と名前を付ける
      • この State には Motion を割り当てなくてよい
    13. Default State を右クリックして "Set as Layer Default State" を選び、Entry ステートと Default State を接続する
    14. シーンを再生して、Door が消えないことを確認する
  4. アニメーションを再生する
    1. Button を作り、On Click に Door オブジェクト、Animator.Play(string) を割り当て、引数に Fade を指定する
    2. シーンを再生して Button をクリックし、ドアが消えることを確認する
      • つまり、スクリプトからこれと同じことをすれば、アニメーションが再生されてドアが消えます
  5. アニメーションを再生する（ドアを開く）スイッチを作る
    1. Cube を作り、以下のように編集する
      1. 名前を Switch に変える
      2. 高さを 0.1 にする
      3. Box Collider の Is Trigger にチェックを入れて、Size を 0.6, 1, 0.6 にする
    2. 新たに Blue という名前のマテリアルを作り、Albedo を青にして、Cube に割り当てる
    3. Cube に SwitchController スクリプト コンポーネントを追加する
    4. Inspector から SwitchController の On Enter に Door オブジェクト、Animator.Play(string) を割り当て、引数に Fade を指定する
    5. シーンを実行し、キャラクターを操作して Switch を踏んでドアが消えることを確認する
  6. Door と Switch を配置する
    1. Door と Switch を適切な場所に配置する
    2. Door と Switch をプレハブ化し、プレハブを適切に配置する
    3. 新たに配置した Switch に先ほどと同じように Door の Animator.Play(string) を割り当て、引数に Fade を指定する
    4. 新たに配置した Switch を踏んで、新たに配置した Door が開くことを確認する
  7. 違うパターンで開くドアを作る
    1. Door プレハブをもう一つ配置する
    2. Door を選んだ状態で Animator ウインドウから Create New Clip して、Open と名前を付ける
    3. Animation ウインドウの録画ボタンを押し、0 フレーム目で Transform の Position を右クリックして Add Key する
    4. ヘッダーを 60 フレームに移動して、ドアを地面の下まで移動し、録画を停止する
    5. Open アニメーション アセットの Loop Time のチェックを外す
    6. Animator ウインドウを見て、Open ステートが増えている事を確認する
    7. Switch プレハブを配置し、On Enter に Door オブジェクト、Animator.Play(string) を割り当て、引数に Open を指定する
    8. Switch を踏んで、Door が開く事を確認する
  8. このやり方の問題点を確認する
    1. Switch を踏んだら下に開く Door を別の場所に移動して Switch を踏む
    2. Door が「元の位置に戻ってから下に開く」という問題が起きることを確認する
  9. 問題を解決する
    1. 問題の Door の Animator コンポーネントの Apply Root Motion にチェックを入れる
    2. Open アニメーションに記録された Position を全て削除し、アニメーションを再生し直す
    3. 問題の Door を移動してシーンを実行して Switch を踏み、期待通りにドアが開くこと、先程の問題が起きないことを確認する
  10. 「下に開く」ドアをもう一つ配置する
    1. 「下に開く」ドアと Switch を Duplicate して適切な場所に配置する
    2. シーンを実行し、各 Switch を踏んで、各 Door が期待通りに開くことを確認する

ここで学んだこと

  1. アニメーションのさせ方
    • Animator コンポーネント、Animator Controller アセット、Animation アセットを組み合わせる
  2. アニメーションの記録方法
    • Animator ウインドウの録画ボタンを押してアニメーションを記録する
  3. Root Motion について
    • 元の位置から相対的な位置に移動させるには、Apply Root Motion にチェックを入れてアニメーションを記録・再生する
  4. UnityEvent クラス
    • GameObject の指定、コンポーネント・メソッド（またはプロパティ）の指定、引数（または代入する値）の指定を Inspector からコードを書かずに指定できる

参考資料

キャラクターをアニメーションさせる

解説動画

学習手順

  1. 今回学ぶ内容を確認する
    1. Assets/_LearnAnimation/2 Character/Character Animation シーンを開いて実行する
      • これが今回学ぶ内容です
      • WASD でロボットが走り回り、Space でジャンプします
      • このように「キャラクターをアニメーションさせる」方法を学びます
  2. アニメーションさせるモデルをセットアップする
    1. Asset Store から unity chan を検索し、Unity-Chan! Model という無料アセットをダウンロード・インポートする（自分の好きなモデルを使ってもよい）
    2. Assets/unity-chan!/Unity-chan! Model/Prefabs/for Locomotion/unitychan プレハブをシーンにドラッグ＆ドロップする
      • 動画ではプレハブを使っているが、Assets/unity-chan!/Unity-chan! Model/Art/Models の下にあるモデルを直接使った方がよいでしょう
    3. シーンに配置した GameObject から Unity Chan Control Script With Rigid Body コンポーネントと Face Update コンポーネントを Remove する
    4. 配置したモデルに Animator コンポーネントが付いていて Apply Root Motion にチェックが入っている場合は外しておく
    5. 配置したモデルの Animator コンポーネント（なければ追加する）の Controller に Robot Kyle を追加する（パス Assets/_LearnAnimation/2 Character/ にある)
    6. 配置したモデルに SimpleCharacterMove スクリプト コンポーネントを追加する（パス Assets/_LearnAnimation/2 Character/ にある)
      • 配置したオブジェクトにコンポーネントを追加できない場合はプレハブ編集モードで追加する
      • SimpleCharacterMove コンポーネントは接地判定のために足下に Trigger を必要とするので足下に Sphere Collider をトリガーとして追加する
    7. シーンを実行して、モデルを操作できてアニメーションすることを確認する
      • 動かない場合は SimpleCharacterMove の Move Speed と Jump Power を調整する
  3. Animator Controller を作る
    1. 新しく Animator Controller アセットを作り、任意の名前を付ける
    2. State と Transition（State を右クリックして "Make Transition" を選び、他の State をクリックすると接続できる）を以下のように設定する
各ステートには「ステート名 + 01」という名前の Motion をセットすること
  1. 新しく設置したモデルの Animator コンポーネントの Controller プロパティに、新しく作った Animator Controller アセットをセットして期待した通りの動きをするか確認する
    • 大抵は設定した初期状態では「アニメーションの切り替えが遅い」ため、Transition でのアニメーションのブレンドを調整することになる

ここで学んだこと

  • キャラクターのアニメーションのさせ方
  • Transition を使ったアニメーションステートの遷移
  • Transition の際のアニメーションのブレンド

参考資料

  1. アニメーションシステム概要
  2. アニメーターコントローラー
  3. アニメーション遷移
  4. Unity ゲーム プログラミング・バイブル
    • 01：3D RUNゲーム
    • 02：3D RUN&射撃ゲーム
    • 03：メガネっ娘の街散歩

コメントする

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です