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

2023.03.17
注目記事ゲームづくりの知識チュートリアル見た目を良くするゲームの舞台裏Blenderアンリアルエンジンゼロから分かるBlender講座
この記事をシェア!
Twitter Facebook LINE B!
Twitter Facebook LINE B!

こんにちは、株式会社ヒストリアのアートディレクター くろさわです。Blender講座をはじめたいと思います。

今回のBlender講座はピコピコハンマー編の後編です。Vol.2でモデリングしたピコピコハンマーをUnreal Engineにインポートして、動かします。タメの動き、ハンマーの効果音も付け、プロップらしく仕上げていきますよ!

Vol.02の講座をまだやっていない人はそちらを終えてから、今回の講座に挑戦してみてくださいね。

TEXT / くろさわ

EDIT / 酒井 理恵

目次

UE5にテクスチャとFBXデータをインポートする

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

関連記事
ゼロから分かるBlender講座 Vol.02―ピコピコハンマーをモデリングするまでのチュートリアル
2023.03.14

ここからは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秒のときに-900.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よりも大きな値になり戻ってくる動きを作ってください。

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

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

効果音をつける

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

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

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

Interface & Item Sounds Pack

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

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

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

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

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

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

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

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

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

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

ゲームづくりを始めよう!
くろさわ

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

関連記事

500以上のアニメーションを同梱。UE5.4の「Motion Matching」学習に役立つサンプルプロジェクトをEpic Gamesが無料公開
2024.06.13
Blender4.2 LTSのベータ版がリリース。EEVEEの改善やレンダリングの強化による主要な既存機能の変更をピックアップ
2024.06.12
「Unreal Engine」2024年6月の無料マーケットプレイスコンテンツが公開!バイキングの家をイメージしたアセットや、インベントリを実現するブループリントアセットなど
2024.06.05
Unreal Engine 5.4.2がリリース。「Motion Design」のClonerにおける機能改善や、リターゲットに関する不具合の修正など
2024.06.05
docomo発の「MetaMe」プラットフォームでUE5開発者を募集中!気軽にエントリー可能な総額450万円の支援金配布プログラム「WaveHack Global」を活用したメタバース開発のススメ
2024.06.05 [PR]
業界のプロも薦めるゲームクリエイター向けの書籍28冊を一挙紹介!【プログラミングからプロデュースまで】
2024.06.04

注目記事ランキング

2024.06.09 - 2024.06.16
VIEW MORE

連載・特集ピックアップ

イベントカレンダー

VIEW MORE

今日の用語

マーケットプレイス(Market Place)
マーケットプレイス
  1. インターネット上で売買を行う仕組みやウェブサイト自体を示す。
  2. Epic Games LauncherやアンリアルエンジンのWebサイトからアクセスできる、アンリアルエンジン用のオンラインストア。アセットやプラグインなどの販売・購入が可能。
VIEW MORE

Twitterで最新情報を
チェック!