ゼロから分かるBlender講座 Vol.03―アニメーションに挑戦！制作したピコピコハンマーをUE5で動かしてみよう

Vol.02ではピコピコハンマーをゲームエンジンで使いやすいようにモデリングしました。

ここからはUE5での作業になりますので、まだアンリアルエンジンを触ったことのない人は以下のチュートリアル記事に挑戦してみてください。

プロジェクトはキーボーを作成したときのものを開こう。

UE5のコンテンツドロワーをクリックして、モデルデータのFBXファイルをドラッグ＆ドロップしてインポートしてください。

FBXのインポートの際は、前回同様「メッシュ」の「詳細設定」にある「Combine Meshes」にチェックを入れ、さらに「Normal Import Method」の項目で「Import Normals and Tangents」を選んでください。

「Import Normals and Tangents」に設定するとBlenderで作成した法線のままインポートできる。

次はキーボーに「ハンマーを振る」という新しいアクションを追加していくぞ。

画面上部の「編集」メニューから「プロジェクト設定」を開いてください。

「エンジン」の「インプット」をクリックします。

次に「バインディング」の「アクションマッピング」の横にある「＋」ボタンを押します。

追加された項目の上を見ると、すでに「Jump」というアクションが設定されている。これは前回、キーボーに設定されていたジャンプのキー入力イベントだ。

今回は「＋」ボタンを押してできた新しい項目にハンマーを振る操作を加えていくよ。

アクションの名前は「Attack」に変更してください。

キーアサインは以下を割り当てます。

• ゲームパッド：ゲームパッド方向キー左
• キーボード：左 Shift

キー割り当てを増やすには、追加した「Attack」アクションの横の「+」ボタンを押そう。

これでキー入力の設定はおしまい。

こんなふうに、アクションマッピングを使うことで、複数のキー入力に簡単に対応できるんだ。

さぁ、次はハンマーをキーボーに持たせるぞ！

ピコピコハンマーを表示させ、大きさを調整します。

コンテンツドロワーのフォルダ階層から「All」>「コンテンツ」>「ThirdPersonBP」>「Blueprints」を選択し、ThirdPersonCharactorをダブルクリックします。

新しく開いたウィンドウ上部の「ビューポート」タブをクリックします。

ビューポートにすると、背景がグレーの空間に切り替わる

コンテンツドロワーから「SM_PikoHammer」を選択し、「コンポーネント」の「追加」から、「StaticMesh（SM_PikoHammer）」を選択してください。

コンテンツドロワーで「SM_PikoHammer」を選択しておくと、コンポーネント追加時に「StaticMesh（SM_PikoHammer）」が表示される。追加するコンポーネントの名前もつけてくれるので非常に便利だ

ハンマーは追加できたけれど持ち手がキーボーを突き抜けてしまっているね。

ハンマーの位置と大きさを調整しよう。

追加したハンマーのスタティックメッシュコンポーネントの位置と大きさを調整して、キーボーが右手に持っているくらいのサイズに調整してください。その際ハンマーは地面に当たるように調整してください。

キーボーが自然にハンマーを持っているようにみえるように細かくバランスを調整しよう

移動は右上にある十字の矢印アイコンを選択

大きさの調整は右上にある四角に矢印のアイコン

キーボードやゲームパッドで「Attack」の操作をする設定はできたけど、今のままでは「Attack」がどんな動きなのかはわからない。

次は「Attack」の挙動をハンマーに設定しよう。

ハンマーを振り被った状態はどうすれば作れるだろう？

回転ツールを使ってハンマーを垂直にしてみよう。

回転は右上にある円状の矢印のアイコン

この位置をActionボタンを押す前の初期位置とします。ハンマーを立てているときと、地面にぶつかったときの2つの座標を比べてみると、「回転」のXの値が-90から0に変化しており、それ以外の値は何も変わっていないことがわかります。

それじゃあ、これから「Attack」ボタンを押したときに「回転」のXの値を変化させる処理を書いていこう。

ハンマーのタイムラインを設定する

ThirdPersonCharactor_BPの「イベントグラフ」タブをクリックします。

イベントグラフのなにもないところで右クリックして、ノード検索欄にAttackと打ち込んでEnterを押し、Attackという名前のInputActionのイベントを作成します。このイベントにハンマーを回転させる処理を加えましょう。

ハンマーは0.05秒くらいの一瞬で振り下ろす。

一瞬とはいえ時間の長さを持っているので、タイムラインノードを使って時間の中で動きがどう変化したかを設定しよう。

タイムラインノードはこの処理をグラフで直感的に作れるんだ。

新しくタイムラインノードを作成します。

タイムラインはイベントグラフの何もないところで右クリック→検索欄に「timeline」と入力→「タイムラインを追加する」をクリックで追加

作成したノードをダブルクリックしてタイムラインを編集します。

タイムラインノードを追加しよう

「長さ」の値に0.05と入力して、このグラフの長さを決めてください。つぎに「+トラック」ボタンを押して「フロートトラックを追加」を選びます。

タイムラインの見方は、横軸が時間の長さで縦軸が値です。

今回作りたいタイムラインは、ボタンを押す前のハンマーを立てているときに「回転」のXが-90で、Attackのボタンを押した0.05秒後に地面にぶつかり、「回転」のXが0になるというものです。

それでは、0秒のときに-90、0.05秒のときに0という2つのキーフレームを追加しましょう。

キーフレームはグラフ内をダブルクリックすると追加できます。

キーフレームは追加した後にドラッグして場所を動かしたり、数値を入力して値を調整できる。

まずは大体の場所にキーフレームを追加してみよう。

タイムラインにカーソルを合わせF2キーを押し、出力名を「Attack」に変更します。

これでタイムラインの作成はおしまい。タブをタイムラインからイベントグラフに切り替えよう。

次はこのタイムラインを「回転」のXのノードにつないでピコピコハンマーが動くようにしよう！

ハンマーの動きをノードに接続する

タイムラインで設定した値を回転の値に使用します。

イベントグラフに「Set Relative Rotation(SM_PikoHammer)」というノードを新規作成してください。

「Set Relative Rotation(SM_PikoHammer)」を選択することで、ノードのターゲットにSM_PikoHammerが接続された状態で追加される

「SM_PikoHammer」はコンポーネントからドラッグして追加することも可能

ここにノードを接続して、ハンマーの動きを設定していこう。

Attackにタイムラインで設定した叩く動きを再生するよう設定するよ。

「Attack」の「Pressed」と「タイムライン_0」の「Play」を接続します。さらに「タイムライン_0」の「Update」と「Set Relative Rotation」を接続します。

「Set Rerative Rotation」の「NewRotation」を見てみよう。

3軸が一つの値でコントロールされるようになっているね。

今回、操作したいのはX軸だけなのでSplit（分離）しておこう。

New Rotationを右クリックして「構造体ピンを分割」をクリックします。

これで回転のXYZを別々にコントロールできるようになったぞ。

タイムラインノードの「Attack」と「New Rotation X(Roll)」の値を接続してください。また、ハンマーの回転Zの値はいつも-90になるため、「-90」と入力しておきましょう。

これで叩く動きができた。

でも、今のままでは叩き終わった後にハンマーを振り上げる動きがない。

叩き終わった後に戻ってくる動作は、叩く動きを逆再生して使おう。

「インプットアクション Attack」の「Relased」（ボタンを離したとき）を「タイムライン_0」の「Reverse」（逆再生）に接続してください。

一度作った動きを逆再生したり、速度を変えたりして流用できるのもタイムラインのすごいところだ

ここまでできたら画面上部の「保存」を押し、緑の三角マークのPlayボタンを押してキーボーを動かしてみよう。

キーボードの左側のShiftボタンを押してハンマーが動くかな？

ハンマーの動きにタメを作る

タイムラインにちょっとした味付けをして、動きをより迫力のあるものにしてみよう。

「タイムライン_0」をダブルクリックしてフロートトラックの画面にします。

先ほど追加したキーフレームの上で右クリックを押して、キーフレームの補完方法を「自動」にしてください。

キーフレームは2つあるので2つとも「自動」にすると、緩やかなS字のカーブになるぞ。

これで出始めが、わずかに緩やかになり、いわゆるタメが作れた。

キーフレームの補間を変更してS字にすると、タメツメが作れる

次にカーブの上で右クリックを押して、「CurveFloat_0にキーを追加」をクリックしてください。これでキーフレームが新たに作られました。作成したキーフレームを動かして画像のように一度0よりも大きな値になり戻ってくる動きを作ってください。

これによって、ピコピコハンマーは地面にめり込んでいることになる。

実際にはピコピコハンマーが地面にめり込むことはないけれど、誇張した動きで迫力をつけているんだ。

効果音をつける

ピコピコハンマーに効果音をつけてみよう。

振った瞬間に音が出るようになるよ！

今回の効果音は無料でダウンロードできるこちらを使います。

「プロジェクトに追加」を押してUnreal Engineにインポートしてください。

音はハンマーを叩くボタンを押したときにだけ出したい。

ピンを順番に実行するSequenceノードを使って、ハンマーを叩いたときのタイムラインと音を同時に処理しよう。

イベントグラフにPlay Sound 2Dノード・Sequenceノードを新規作成します。

Play Sound 2DノードとSequenceノードを下記の画像のように接続します。

ノードを別のノードに接続しなおすには、Ctrlキーを押しながらノードを選択し、接続したい接続先までドラッグ＆ドロップ

Play Sound 2Dノードの「Sound」をダブルクリックして、インポートしたサウンドアセットから好きなサウンドを割り当てます。ハンマーが振り落とされるときに適した音を選んでください。

各サウンド上のプレイボタンを押せばサウンドのプレビュー再生も可能

これでピコピコハンマーは完成。

さぁ、キーボーを動かして叩きまくってみよう！

くろさわ

株式会社ヒストリア　アートディレクター／テクニカルアーティスト
海外インディーゲームとホワイトビールが好き。