icon本記事ではUnityのアニメーションの応用方法を、アバターにアニメーションをつけることで説明します。今回は、人型のアバターに複数のアニメーションをつけ、アニメーション遷移をコントロールする方法を学んでいきます。さまざまなアニメーションを使い分け、より複雑な表現にチャレンジしてみましょう。本コースでは人型のアバターを用意し、Unityを使ってそのアバターに複数のアニメーションをつけ、アニメーション遷移をコントロールできるようになることを目指します。具体的には、以下のように待機する歩く走る止まるという一連の流れを作成し、各アニメーションの再生タイミングを自分で設定できるようになりましょう。遷移するタイミングを調節しようMixamoを使ってみようこのセクションでは、Adobe社が提供する「Mixamo」というサービスを利用して、今回のコースで使うアバターを用意します。https://www.mixamo.com/#/Mixamoは「キャラクター」×「アニメーション」を自由に組み合わせてダウンロードすることができます。それぞれ一覧から選び、画面右側でプレビュー。Skin」を選択してください。ダイアログの「DOWNLOAD」ボタンを押すと実際にファイル(.fbx形式)のダウンロードが始まります。(例)ty@Walking.fbxキャラクターは手持ちのファイルをアップロードし、Mixamoのアニメーションを適用してダウンロードすることも可能ですが、本講座では割愛します。Stop以上の4つです。(WalkやRunningなどの汎用アニメーションはアニメーションが複数ある場合があります。その場合、動きの違いはこの後の操作に影響しないため、気に入ったアニメーションをダウンロードしてください。)画面右上の入力フォームからアニメーション名を検索できます。好きなキャラクターを選び、4つのアニメーションをダウンロードしましょう。ダウンロードしたファイルをUnityシーンに配置しようダウンロードしたfbxファイルをUnityにインポートします。プロジェクトウィンドウのアセットの下に「Models」というフォルダを作り、そこにfbxファイルをインポートしましょう。WindowsならExplorer、MacならFinderからファイルをドラッグ&ドロップしてインポートします。fbxの左の▼をクリックし展開した状態にすると、fbxに含まれる各種データが閲覧でき、fbxに含まれるデータを確認できます。プロジェクトウィンドウ:リスト表示プロジェクトウィンドウ:最大アイコン表示インポートしたモデルデータのMaterialを調整する何もしていない状態では、インポートしたfbxをシーンに配置すると、テクスチャが適用されていないことに気が付くかと思います。インポートしたモデルと、マテリアル・テクスチャの参照がうまくかみ合っていないためこのような表示になっています。Settings(インスペクター)で設定を行います。※選択するのは配置したシーンビュー(ヒエラルキー)の方ではありません。Settings内の「Materials」タブを選択します。いくつか方法がありますが、今回はLocationという項目で調整します。Materials」となっているかと思います。Settingsでは設定を変更したら適用するために「Apply」ボタンを押す必要があります。すると以下の2つのフォルダが生成されます。「Materials」フォルダ「”キャラクター名”@”アニメーション名”」フォルダ「Materials」フォルダには、キャラクターの顔や体に使われているマテリアルが、「”キャラクター名”@”アニメーション名”」フォルダにはキャラクターに使われるテクスチャが格納されています。各マテリアルに対し、同名のテクスチャを適用して、Mixamoと同じ見た目にしましょう。テクスチャの適用はマテリアルを選択し、Albedoの隣の四角にテクスチャをドラッグ&ドロップすることで可能です。Typeを「Humanoid」に変更しましょう。これで、モデルのインポート/初期設定は完了です。Controllerを作成します。Controllerを使用しました。Controller単体で作成する方法を使用します。シーンのオブジェクトを選択し、インスペクターをみるとTransform以外に「Animator」というコンポーネントがすでに付加されています。Animatorはアバターを動かすための必須コンポーネントです。AnimatorのプロパティにControllerというものがあり、None(何もない)となっています。Controllerというアセットを作っていきます。Controller]を選択し作成します。Controllerの名前は「Avatar」としました。Controllerをダブルクリックすると、Animatorウィンドウが開きます。Controllerアセット(ファイル)」としてそのデータが保存されています。デフォルトで「AnyState」と「Entry」,「Exit」という箱がありますが、それぞれが「State」です。Controllerに、Mixamoで作ったアニメーションデータを設定する必要があります。Clipを選択します。押すと、fbxの外に複製されます。複製したアニメーションを、Animatorウィンドウにドラッグ&ドロップしましょう。するとアニメーション名と同じ名前のステートが作成され、Entryステートから矢印が伸びた状態になるかと思います。Clipの配置は完了です。Unityのプレイボタンを押して、アニメーションが再生されるか確認してみましょう。アニメーションを遷移させよう今の状態では1つのアニメーションしか再生されないため、アニメーションを追加しましょう。今回はモデルが用意できているため、マテリアル等の設定は不要です。Controllerに追加します。*実施しないとアニメーションがスムーズに遷移しない、アニメーション移行時に位置が原点に戻る問題が発生しますアニメーションの複製が終了したら、ループの設定をします。Runningといったアニメーションは一歩進むアニメーションを繰り返してモデルを移動させるため、ループさせる必要があります。Time」にチェックを入れます。次に、アニメーションのTransitionを設定します。Transitionの設定が終わったら再び再生してみましょう。待機」という一連の流れがアニメーションされるようになりました。歩いている時間や走っている時間が短いため、違和感があります。次のセクションで、アニメーションの時間を決める方法を解説します。遷移するタイミングを調節しよう前のセクションにかけて、複数のアニメーションをアバターで再生できるようになりました。ここでは、各アニメーションの再生時間をコントロールする方法を解説します。アニメーション遷移に関する設定はTransitionの矢印をクリックし、Inspectorの「Settings」から確認できます。Settingsのドロップダウンメニューを展開すると以下の項目が表示されます。Durationを時間で設定します。Duration:遷移にかかる時間です。Source:遷移の割り込み設定です。Timeを変更します。Timeを5に設定してみましょう。Transitionの設定後、シーンを再生してみましょう。Runningのアニメーションが長く再生されるようになりました。以上でアバターにアニメーションをつけ、遷移をコントロールする解説は終了になります。アニメーション知識の応用として、Mixamoを利用してアバターとアニメーションを用意し、Unityでコントロールする方法を解説しました。今回学んだ応用方法を使えば、さまざまなアニメーションをアバターに適用し、自由にコントロールすることができます。storeなどからアニメーションを入手することもできます。さまざまなアニメーションを試し、表現の幅を広げていきましょう。Venue」プロジェクトでんぱ組.incとXRクリエイターが協力し、渋谷スクランブル交差点で新しい音楽体験を創り出そう。総額300万円の還元金、制作アセットの提供、審査にはでんぱ組.incも参加!あなたのアイデアで都市をステージに変えましょう。スマホがなくなる日』(幻冬舎)10年後のテクノロジーを誰が想像できるだろうか──。2024年、ついに「空間を身にまとう時代」の実現を加速するデバイスが登場!人類はスマホの小さな画面から解放され、空間という無限のキャンバスを手に入れる。スマホがなくなる日、次世代デバイスでどんなミライをつくれるのか。スマホがなくなる日──。この先に続くミライは、本書を読んで創造してみてください。