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

2023.03.17
注目記事ゲームづくりの知識チュートリアル見た目を良くするゲームの舞台裏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」をダブルクリックして、インポートしたサウンドアセットから好きなサウンドを割り当てます。ハンマーが振り落とされるときに適した音を選んでください。

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

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

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

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

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

関連記事

SDFを活用した低負荷なアニメ調のシェーディングをUE5で実装。alwei氏が解説記事を公開
2024.03.01
セル画調・イラスト調にレンダリングするBlender用アドオン「PSOFT Pencil+ 4 Material for Blender」、ピー・ソフトハウスが発売
2024.02.27
「Steam Audio」がオープンソース化。UnityやUEに統合できる、ゲームやVRアプリ用の空間オーディオツール
2024.02.22
実写映像を3Dアニメーション化するAIツール「Wonder Studio」にUEエクスポート機能追加。カメラやキャラクターアニメーションなどの要素に分解も可能
2024.02.16
Unreal Engine向けゲーム制作コンテスト『第21回UE5ぷちコン』開始!テーマは「おす」。応募締切は4/7(日)
2024.02.16
揺れ物を手軽に「かわいく」揺らせる疑似物理プラグイン「KawaiiPhysics」がアップデート。ボーン間の距離を維持して、モデルのスカート貫通問題を緩和しやすく
2024.02.12

注目記事ランキング

2024.02.27 - 2024.03.05
1
『フォートナイト』で動く本格的なゲームが作れるツール「UEFN」とは?従来のクリエイティブモードから進化したポイントを一挙紹介!
2
【CHALLENGE1】「クリエイター ポータル」を使って、UEFNで作成した島を世界中に公開する
3
【2022年5月版】今から始めるフォートナイトの「クリエイティブ」モードープレイ開始から基本的な操作方法まで解説
4
UEFNで使えるプログラミング言語「Verse」のノウハウが集結。『UEFN.Tokyo 勉強会 03 Verse Night』レポート
5
フォートナイト クリエイティブとUEFNで使える仕掛け一覧
6
フォートナイト クリエイティブとUEFNで使える仕掛け一覧 Vol.1「アイテム系」
7
フォートナイト クリエイティブとUEFNで使える仕掛け一覧 Vol.5「島の設定」
8
フォートナイトとUEFNがv28.30にアップデート。「NPCスポナー」が、スポーン・撃破時のエフェクトや移動速度のカスタマイズに対応
9
【STEP2】UEFNの基本的な使い方を覚えよう
10
【CHALLENGE2-1】フレンドと一緒にゲームを作ろう――UEFNプロジェクトをチームメンバーとリアルタイムで共同編集する
11
【STEP1】「UEFN」を入手しよう
12
まるで『マイクラ』?ボクセル地形を生み出す無料アセット「VoxelPlugin Free」で”地形を掘ったり積み重ねたり”して遊んでみよう
13
フォートナイト クリエイティブとUEFNで使える仕掛け一覧 Vol.4「ゲームシステム系」
14
フォートナイト クリエイティブとUEFNで使える仕掛け一覧 Vol.7「NPC系」Part1
15
フォートナイト クリエイティブとUEFNで使える仕掛け一覧 Vol.2「ユーティリティ系」
16
フルカラー書籍「UEFN(Unreal Editor For Fortnite)でゲームづくりを始めよう!」、ついに本日発売!全国書店で好評発売中!
17
【CHALLENGE3】UEFNの機能「ランドスケープ」を使ってオリジナルの地形を作る
18
NIKEのAir Maxをテーマにしたフォートナイトの島『Airphoria』、制作に関するチュートリアルが公開
19
フォートナイト クリエイティブとUEFNで使える仕掛け一覧 Vol.10「UI系」Part1
20
フォートナイト クリエイティブとUEFNで使える仕掛け一覧 Vol.10「UI系」Part2
21
『フォートナイト』で建築ビジュアライゼーション!?UEFNでオリジナルの世界観をどう作り上げたか、その手法を解説【UNREAL FEST 2023 TOKYO】
22
フォートナイト クリエイティブとUEFNで使える仕掛け一覧 Vol.3「プレイヤー系」
23
フォートナイト クリエイティブとUEFNで使える仕掛け一覧 Vol.6「チーム・対戦系」Part1
24
フォートナイト クリエイティブとUEFNで使える仕掛け一覧 Vol.7「NPC系」Part2
25
フォートナイトとUEFNがv26.30にアップデート。ロビー画面が一新され、クリエイターが島ごとにロビー背景を自由にカスタムできるように
26
【STEP6-1】「オリジナルキャラクターを登場させよう」――Fabでアセットをダウンロードしよう
27
「UEFN」って実際どうなの? 編集部が3時間で「みんなで遊べるアクションゲーム(?)」を作ってみた
28
【STEP4-2】リスポーンとチェックポイントの仕組みを作る
29
【STEP5-1】スタート時のカウントダウンを作る
30
フォートナイト クリエイティブとUEFNで使える仕掛け一覧 Vol.6「チーム・対戦系」Part2
VIEW MORE

イベントカレンダー

VIEW MORE

今日の用語

レンダリング(Rendering)
レンダリング コンピューターグラフィックスにおける、各種データ(3Dモデルなど)をプログラムを用いて計算し、画像として表示すること。レンダリングを行うプログラムをレンダラー(Renderer)と呼ぶ。
VIEW MORE

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