電通総研のブログ

2023/04/19

こんにちは、ISID 金融ソリューション事業部の岡崎です。今回は ZBrush で作成した3Dモデルを、UE5のタイムラインという機能を活用して、簡単なアニメーションを作成する手順をご紹介します。はじめに UE5でオブジェクトにアニメーションをつける方法としてBlueprintのタイムラインを使用する方法があります。タイムラインで設定した時間（タイミング）に、あらかじめ定義した値を出力する仕組みで、簡単なアニメーションが実装できます。タイムラインを使用せずに、複雑なアニメーションを作成する手順も今後配信予定です。今回はDCCツールの ZBrush を使用して、大砲の3Dオブジェクトを作成し、UE5内でその大砲を動かしたり弾を発射させるなどのアニメーションをつけていきます。検証環境/ツール Unreal Engine5.1.1 ZBrush 2022.0.6 実装手順 ZBrush で大砲を作成 ZBrush で作成したオブジェクトをエクスポート UE5でFBXファイルをインポート UE5でタイムラインを使用したアニメーションの作成 1. ZBrush で大砲を作成まず初めに ZBrush を使用して大砲の3Dオブジェクトを作成します。今回詳しい作成方法は割愛しますが、 ZBrush の操作方法やオブジェクト作成手順につきましては、今後記事を配信予定です。まずはバレル（銃身）部分を作成します。今回は下記画像のようなバレルの形状で作成しています。次にバレルを装着するベースの部分の作成を行います。今回は本題ではないため割愛しますが、 ZBrush のローポリ編集を使用することで、下記画像のような無機質な形状も作成できます。今回の実装のポイントとしては、バレルとベースの部分を2つの部品として、別々のオブジェクトで作成することです。これにより、後述するタイムラインを利用したアニメーションに使用できます。 2. ZBrush で作成したオブジェクトをエクスポート ZBrush で作成したオブジェクトをUEで使用できるようにFBXに変換してエクスポートする必要があります。 ZBrush のZ プラグインという機能を使用して、FBXエクスポートの手順を紹介します。主にエクスポートで変更するのは下記部分になります。出力する情報を選択 FBXのバージョンを選択ファイルの形式を選択メッシュを三角メッシュにするかどうかポリペイントの出力をするかどうかエクスポート ① 出力する情報を選択出力する情報を下記から選びます。選択のみ : 選択したサブツール表示のみ : 表示してあるサブツールすべて : 全てのサブツール今回は、バレル部分とベースの部分で2種類のFBXを出力したかったので、それぞれ個別に選択を行い「Select」を選びました。 ② FBXのバージョンを選択「FBX2020」の部分をクリックすることで、バージョンが選択できます。今回は「FBX2020」を選択しました。 ③ ファイルの形式を選択ファイルの形式を下記から選びます。 bin ascii binの方がファイルサイズが小さく一般的なので、今回はこちらを選択しました。 ④ メッシュを三角メッシュにするかどうかメッシュを三角ポリゴンとしてエクスポートしたい場合はオンにします。三角ポリゴンにすると、ポリゴン数が減りファイルが軽くなる代わりに、メッシュの再編集がしにくくなります。今回は小さなファイルだったので、設定はオフのまま進めました。 ⑤ ポリペイントの出力をするかどうか ZBrush 上でもポリペイントという機能を使用することでオブジェクトに色をつけることができます。サブツール内の筆のマークをオンにすることで、ポリペイントもFBXに含めることができます。今回は、マテリアルや色の設定はUEで行うので、オフのまま進めます。 ⑥ エクスポートエクスポートボタンを押下し、モデルのエクスポートを行います。 3. UE5でFBXファイルをインポート前工程で、バレルとベースの部分で2種類のFBXファイルを作成したので、今回はそれらをUE5にインポートを行います。今回は2種類のFBXファイル名を以下のように作成しています。 cannon.fbx cannon_base.fbx Content Drawerを開き、右クリックから「Import to Game」を押下し、前工程で作成した2つのFBXファイルをインポートします。マテリアルに関してはUEで作成していくので、「Create New Materials」を選択します。　インポートすると下記キャプチャのに表示されます。インポートしてきたcannon.fbxをダブルクリックしてアセットの編集画面を開きます。想定していたものより小さくインポートされていたので、右側の詳細画面から「Transform」の値を変更します。今回は「Import Uniform Scale」の値を16に変更します。またデフォルトでの向きを変更するために「Import Rotation」のY軸を90に変更します。この設定値はインポートする際の設定値になるので、画面上部にある「Reimport Base Mesh」を押下し、再度インポートします。インポートが完了するとオブジェクトの大きさや向きが変わります。次にマテリアルを変更します。 UEでプロジェクトを作成時、Starter Contentsを含める設定をしていると様々なマテリアルがデフォルトでインストールされているので、今回はそこからマテリアルを選んでいきます。右側の詳細画面からMaterial Slotsを開きます。セレクトボックスから「M_Metal_ Chrome 」を選択します。最後にこのアセット編集画面を保存することで、FBXファイルのデフォルト値を変更できます。 cannon_base.fbxも同様に編集します。大きさや向きはcannon.fbxと同じように変更しました。マテリアルに関しては、「M_Metal_Burnished_Steel」を選択しました。同様に保存を行うことで、Content Drawerの表示もマテリアルが適応された形に変化します。 Content Drawerで2種類のFBXファイルを選択し、View Portにドラッグ&ドロップすることで、オブジェクトの大きさやマテリアルの見え方を確認できます。以上で、FBXのインポートの説明を終わります。次は実際にインポートしたファイルにBlueprintを利用してアニメーションをつけていきます。 4. UE5でタイムラインを使用したアニメーションの作成大砲の球を作成まずは大砲のアニメーションを作成する前に、大砲から発射される球を作っていきます。 Content Drawerを開き、大砲の球用のActorのBlueprintを作成します。今回は「BP_projectile」という名前で生成しました。 Blueprintを作成したら、まずはコンポーネントを追加します。「 Sphere Collision」という衝突判定を行うコンポーネントを作成します。「DefaultSceneRoot」に「 Sphere Collision」をドラッグ&ドロップを行います。これでこのコンポーネントが親コンポーネントとして設定されます。次に「DefaultSceneRoot」に設定した「 Sphere Collision」の子コンポーネントとして「 Sphere 」を追加します。大きさやマテリアルを右側の詳細画面で変更します。 Transformから大きさを変更します。今回はMaterialで「M_Metal_Gold」を選択しました。指定が終わると、下記キャプチャのように大きさとマテリアルが変更されます。次に「Projectile Movement」というコンポーネントを追加します。これはこのBlueprint内のオブジェクトを発射物として一定方向に移動させ続けることができます。最後にContent Drawerに戻り、作成したBlueprintをView Portにドラッグ&ドロップして配置してみます。下記動画のように移動している鉄球ができれば大砲の球は完成です。次にインポートしてきた大砲にアニメーションをつけていきます。大砲から球を発射させる大砲の球を作った時と同じように新規のBlueprintを作成します。今回は「BP_cannon」という名前で生成しました。大砲の球の時と同様に「 Sphere 」のコンポーネントを追加し、「DefaultSceneRoot」にドラッグ&ドロップを行い親コンポーネントとします。ここでは名前を「cannon_base」と変更しました。次に右側の「Static Mesh」から、FBXでインポートした「cannon_base」を選択します。次に、「cannon_base」の子コンポーネントとして「cannon_barrel」という名前で「 Sphere 」のコンポーネントを追加します。同様に「Static Mesh」から、FBXでインポートした「cannon」を選択します。ここで詳細画面の「Collision Presets」を「No Collision」に変更しておきます。次に、このActorをSpawnさせる際の位置や向きを取得するために「Arrow」コンポーネントを追加します。名前を「Projectile Spawn Point」に変更し、「cannon_barrel」の子コンポーネントとして設定します。 View Port上に矢印が追加されるので、大砲の球を生成したい位置に矢印を移動します。次に、大砲から球を出すBlueprintを作成します。「BP_cannon」のEvent Graphを開きます。「Event BeginPlay」ノードから「Delay」ノードを作成し、「Duration」を1秒に設定します。次に「SpawnActor Actor from Class」ノードを繋ぎ、Classの属性を「BP_Projectile」を選択します。左側のComponentsから「Projectile Spawn Point」をドラッグ&ドロップしてView Portに配置します。さらにそこから「Get World Location / Rotation」の2つのノードを作成し、「SpawnActor Actor from Class」のノードに繋ぎます。繰り返し球が出るように、「SpawnActor Actor from Class」から「Delay」につなげることで、球の発射されるBlueprintは完了です。ここで一旦、作成したBlueprintをView Portに配置してみます。この段階ではまだバレルに動きはありませんが、バレルの先端から球が発射されるようになりました。大砲の発射時にアニメーションをつける（バレルのアニメーション）次にBlueprintのタイムラインという機能を使って大砲の発射時にアニメーションをつけていきます。「BP_cannon」のEvent Graph上で右クリックを行い「Timeline」を検索しノードを作成します。名前を「Cannon fire Timeline」と変更しました。ダブルクリックをすることでタイムラインの編集に入れます。次に左上の「＋Track」を押下し「Add Float Track」を選択し、「Cannon Barrel location」というトラックを作成します。出てきたトラック上で右クリックで「Add key」を選択し、表の中にkeyを3つ作りました。 keyの値は下記の通りにしています。 Time:0.0 / Value :0 Time:0.2 / Value :70 Time:0.6 / Value :0 Event Graphに戻ると「Cannon fire Timeline」のノードに「Cannon Barrel Location」というアウトプットピンが追加されているのがわかります。ここの返り値として、秒数ごとに上で設定した Value の値が排出されます。今回の例で言うと、このタイムラインが発火したタイミングでValue0が返却され、0.2秒後にValue70が返却される。さらに発火から0.6秒後にはValue0が返却されるという式になります。次に設定した Value の分だけ大砲のバレル部分を動かして、球が発射される時の挙動を作っていきます。左下からCannon Barrel コンポーネントを配置し、「Set Relative Location」と繋ぎます。タイムラインで排出される Value の値を、バレルのX軸に対して適応することで、秒数ごとにバレルが伸び縮みする仕組みが作成できます。次に、タイムラインが発火したことを知らせる値を作成します。再びタイムライン編集画面に戻り、「＋Track」を押下し、「Add Event Track」を選択し「Cannon fired」と名前を変更します。発火したことを伝えるだけでいいので、値は気にせず「Time:0.0 / Value :0」のkeyを作成します。「Cannon Fired」というピンが作成されたのを確認します。「Event BeginPlay」から続く流れに、今回作成したタイムラインのノードを含めるために「SpawnActor Actor from Class」の実行ピンを「Cannon fire timeline」のPlay from Startピンに接続します。次に「Cannon Fired」ピンをDelayノードに接続し直します。これにより球を発射するたびにバレルが動くようになります。 View Portに配置するとこのように見えます。ついにバレルが動くようになりました。大砲の発射時にアニメーションをつける（爆発のエフェクト）最後に、大砲が球を発射するときに、爆発のエフェクトを追加します。「Spawn Emitter at Location」というノードを使うことで、任意のEmitter（今回は爆発エフェクト）を任意の場所に出すことができます。 Starter Contentsに含まれている「P_Explosion」をセレクトボックスから選びます。次に「Get Actor Location」を作成し、現在の大砲の位置をBlueprint上に引用し、「Spawn Emitter at Location」のLocationピンに繋ぎます。爆発が出る位置を、バレルの先端に変更したいので、「LocationX」だけの値を90に変更しました。最後に、作成した爆発エフェクトのノードを大砲の球が生成される直前のノードに追加することで、爆発エフェクトを付加できます。 View Portで確認すると以下の動画のように見えます。以上が、 ZBrush で作成した3Dモデルから、UE5のタイムラインという機能を活用して、簡単なアニメーションを作成する手順のご紹介でした。所感今回は ZBrush で作成したシンプルなモデルを、UEのタイムラインを用いてアニメーションさせました。タイムラインで出力する値を利用する方法は、簡単なアニメーションを作るにはとても便利な手段だと感じました。例えばユーザーに気づいてもらいたいアイテムを定期的に光らせたりするアニメーションはノンゲームの領域でも利用価値がとてもありそうです。次回以降は、より複雑なアニメーションを作成する手順にも挑戦してみようと思います。現在ISIDは web3領域のグループ横断組織を立ち上げ、Web3およびメタバース領域のR&Dを行っております（カテゴリー「3DCG」の記事はこちら）。もし本領域にご興味のある方や、一緒にチャレンジしていきたい方は、ぜひお気軽にご連絡ください！私たちと同じチームで働いてくれる仲間を、是非お待ちしております！ ISID採用ページ（Web3/メタバース/AI）参考 https://www.udemy.com/course/unrealblueprint/learn/lecture/13833864#overview https://mononoco.com/creative/zbrush/fbx-exportimport 執筆： @okazaki.wataru 、レビュー： @wakamoto.ryosuke （ Shodo で執筆されました）

電通総研 の技術ブログ

コンテンツ

電通総研の技術ブログ