UnrealEngineの開発元Epic社が提供するチュートリアル
[オンラインラーニング：ゲームデザイナーのためのブループリントとゲームプレイ]の受講記録をまとめました
むっ、難しい…
「猫でも分かる」よりも難解で、手順を追うので精いっぱいで仕組みを理解できていないところがポツポツ出てきました💦
あわせて読みたい
猫でも分かるUE4を使ったゲーム開発 超初級編#02～受講記録～
前回解説した「猫でも分かるUE4を使ったゲーム開発」シリーズの#02初めての[BluePrint]編です https://youtu.be/JrQh1lVrEjM 今回も序盤に「プロの質問お断り！」と大々…
ついていく事に一杯一杯になりますが、どうかこの山を越えて、今までと違う景色を眺めましょう！
ヨシコフどういう内容かチラ見したい人
視聴した後に、じっくり復習したい人
本記事活用してくださいね！
こちらのチュートリアルはヒストリア社提供の夏休みの宿題の7番手として紹介されています
ヒストリア社提供の夏休みの宿題
【鉄板】初めてのUnrealEngineの学習「この夏、Unreal Engine 5を覚えよう！」
UnrealEngine初心者の皆様！朗報です！ヒストリアさんが「この夏、Unreal Engine 5を覚えよう！」という初心者向けの学習法を提案してくださいました！ 「この夏、Unrea…
本チュートリアルの事前準備
目次
本チュートリアルで学ぶこと
- よく使われる変数～boolean・Integer・Float～
- BPで作成した変数をレベルエディタのパラメータに表示させる
- ジャンプの高さ・歩く速度をレベルエディタ上で変更できるようにする設定
- マウスのホイールで歩く速度を変更する設定
- デバック機能：[PrintString]ノード
- sprint（追いかける）の追加
- しゃがむ動作を追加する
- ヘルスとデバッグダメージを追加
※ヘルス：残りのHPのゲージみたいなもの - PostProcessVolumeの設定
- ドアに近づくと開く動作を作成
- ボタンに乗るとドアが開く動作の作成
- キーボード[E]を入力するとドアが開く流れを作成
- レベルにサウンドやエフェクトを入れる
ヨシコフボリューミー
「猫でも分かる」で説明済のところは省略して、為になった部分をピックアップして、出来るだけ簡潔にまとめます
受講メモ
よく使われる変数～boolean・Integer・Float～
そもそも変数とは？
数値（データ）を入力する箱のこと
UnrealEngineではブループリントエディタ⇒マイブループリントから設定します
ブループリントエディタ⇒マイブループリント
| 変数 | 効果 |
|---|---|
| boolean | TrueかFalseの値しか持てない |
| Integer | 整数しか持てない 小数点不可 |
| Float | 小数点とXYZの値を持つ |
BPで作成した変数をレベルエディタのパラメータに表示させる
マイブループリント⇒変数⇒👁をクリックしてON
※上記設定後、コンパイル＆保存忘れずに
※レベルエディタで当該のコンポーネントを選択⇒[詳細]⇒デフォルト⇒パラメータが表示されている
マイブループリント⇒変数⇒👁をクリックしてON
![レベルエディタに戻ると…
レベルエディタ内で当該のコンポーネントを選択
[詳細]⇒デフォルト⇒パラメータが表示されている](https://www.yoshikovengine.com/wp-content/uploads/2022/11/parameter_ON.png)
レベルエディタ内で当該のコンポーネントを選択
[詳細]⇒デフォルト⇒パラメータが表示されている
PCのジャンプの高さ・歩く速度をレベルエディタ上で変更できるようにする設定
STEP
[コンポーネント]CharactorMovement（継承）⇒イベントグラフにD&D
ポイント
- PCのブループリントエディタを開き、[コンポーネント]に[+コンポーネントを追加]よりCharactorMovement（継承）を追加
- CharactorMovement（継承）：可動系についての設定が出来るようになる
- CharactorMovement（継承）をイベントグラフ内にD&D（ドラック＆ドロップ）する
STEP
ブループリントでノード接続
ポイント
- [CharactorMovement]出力ピン⇒[Set Max Walk Speed] &[Set Jump Z Velocity]ターゲットピンへ接続
- [Set Max Walk Speed]出力ピン⇒[Set Jump Z Velocity]入力ピンへ接続
![[CharactorMovement]からのノード接続](https://www.yoshikovengine.com/wp-content/uploads/2022/11/charactorMovement_BP-1024x239.png)
STEP
変数を作成ver① マイブループリントから作成
ポイント
- [マイブループリント]⇒コンポーネント[+]クリック⇒新規作成された変数をリネーム＆選択⇒[詳細]変数の型Floatへ
- デフォルト値設定を行う（コンパイル＆保存すると入力可能）
- 作成された変数はリネームしておくとわかりやすい
STEP
変数を作成ver② ノードから作成
ポイント
- 緑の入力ピン（変数の型：Float）を右クリックして[変数へ昇格]
- 作成された変数はリネームしておくとわかりやすい
STEP
作成した新しい変数を接続
ポイント
- STEP2で作成した変数[FP_MaxWalkSpeeds]をイベントグラフにD&D GETを選択して配置
- このノードをゲームが始まったらすぐ実行できるように設定するには冒頭に[BeginPlay]ノードを設置
- [Ctrl]押しながらD&D⇒GETで配置 [Alt]だとSET配置
- 作成したノードを全てドラッグで選択して囲む+[C]⇒コメントで補足できる
- [詳細]CommentColor⇒色分けできる
マウスのホイールで歩く速度を変更する設定
ポイント
- イベントグラフの空きスペースを右クリック⇒[mouse wheel up]、[mouse wheel down]
- 上記それぞれのノードに先述で作成した変数[max walk speed]をSET配置
- マウスの上下スクロールの速度を設定できるようにする
[CharactorMovement]配置⇒先述で作成した変数[MaxWalkSpeed]get配置⇒それぞれ+（Float+Float）＆-（Float-Float）を設置
[+]&[-]に速度の数値を入力することが出来る
デバック機能：[PrintString]ノード
プレイインしたときに左上にコメント表示するデバッグ機能
PCにsprint（追いかける）の追加
STEP
プロジェクト設定でsprint動作のアクションキーを追加
プロジェクト設定⇒インプット⇒バインディング[+]
※今回の場合 名前：[sprint] キー：[左Shift]選択
STEP
PCのBPエディタを編集
ポイント
- [コンポーネント]タブ⇒[CharactorMovement]をグラフにD&D
- [マイブループリント]に変数[Float]Max Walk Speedを作成
- 空きスペースに[Max Walk Speed]ノードを設置
- 変数FP_MaxWalkSpeedsを複製⇒選択+Ctrl+W 複製した変数をリネーム[FP_MaxSprintSpeed]
- [詳細]デフォルト値⇒入力（今回800）
※コンパイルしないとデフォルト値のパラメータは不可 - 下記[マイブループリント]からグラフの空きスペースへCtrl+D&D
[sptrint]ノードにそれぞれ接続
FP_MaxSprintSpeed（Pressedの方へ） /FP_MaxWalkSpeeds（Releasedの方へ）
しゃがむ動作を追加する
STEP
プロジェクト設定でアクションキーを追加する
プロジェクト設定⇒エンジン⇒インプット⇒アクションマッピング
ここでの設定 名前：Crouch コマンド：C/左Ctrl
STEP
PCのBPエディタを編集
ポイント
- しゃがむノードは[Crouch]
- Float変数を追加
※ここではFP_MaxCrouchSpeed [詳細]デフォルト値200
※[詳細]デフォルト値は一旦コンパイル＆保存しないと数値入力不可 - ノードの接続は下記twitter投稿を参照
STEP
上下の動きにイージーズを作る
ポイント
- [タイムラインを追加する]ノードで行う
- TimeLineノードをWクリックするとTimeLineエディタが表示される
- TimeLineの設定は以下
長さ：0.5（しゃがむ動作） /[f+]クリック（0⇒2へ徐々に増加する動作に適している） /リネーム：CrouchAlpha - TimeLineのキーフレーム設定（右クリック[キーを追加]）
0秒：時間0 ・値0 0.5秒後：時間0.5・値1.0 - キーのカーブにベジェハンドルを追加できる（キー選択＆右クリック）
※今回はユーザー
STEP
イージーズを付けた後 引き続きPCのBPエディタを編集
ポイント
- [Lerp（Verctor）]ノードのトランスフォーム数値に、[FirstPersonCamera]のトランスフォーム数値を入力
- [Lerp（Verctor）]BのZ数値を30
※デフォルトの姿勢現在の数値から30に下がるという事
うつぶせまでしゃがみたい
- [CapsuleComponent（継承）]をイベントグラフにD&D⇒ピンを伸ばして[setCapsuleHalfHeight]選択
- HalfHeight⇒[Lerp]で線形補間
- [TimelineT_Crouching]CrouchAlpha⇒[Lerp]Alphaに接続
- [Lerp]A96/B56
- しゃがんでいるか確認テスト
[マイブループリント]⇒変数boolean[isSprinting]を複製（Ctrl+W）⇒リネーム：[isCrouching]- [isCrouching]イベントグラフにD&D・白ピンを接続
※[セット]と[TimelineT_Crouching]の間 - [isCrouching]に✔
- [isCrouching]イベントグラフにD&D・白ピンを接続
しゃがんでいるときは歩行を止める
- イベントグラフ空きスペース[カスタムイベントの作成]⇒リネーム：StopCrouching⇒赤[セット]の出力ピンに接続
- [isCrouching]✔外す
ヘルスとデバッグダメージを追加
ここでいうヘルスとはゲージのこと
STEP
PCのBPに変数追加
追加する変数
- 変数名：Float /デバッグ値：100/名前：Health
STEP
BPエディタでヘルス値が0になるとレベルが再起動する流れを作る
ポイント
- キーボード[P]を押すとヘルスが減っていくコマンドを作成
右クリック⇒[キーボード P]で検索 - マイブループリントで作成したFloat変数[Health]をGet配置⇒[-]（Float-Float）接続⇒[-]ノードの数値を10入力
STEP
ヘルスが0以下か確認する動作を追加
ポイント
- [Health]をSet配置（Alt+D&D）
- Set[Health]⇒[<=]接続
- [<=]を変数booleanで接続
- [ブランチ]ノード配置
- [ブランチ]⇒[ExecuteConsokeCommand]接続 Command⇒RestartLevel入力
STEP
Widgetブループリントの作成
コンテンツブラウザの空きスペース右クリック⇒ユーザインターフェース⇒ウィジェットブループリント
STEP
Widgetブループリントエディタよりテキスト入力
[パレット]から下記メニューを番号順に、グラフの内の枠左上にD&D
- HorizontalBox
- Text
- ProgressBar
ヒットしたメニューをグラフ緑枠内にD&D
STEP
見た目を調節する
- 文字の変更：Text選択⇒[詳細]
- コンテンツ[Text]：任意の文字を入力
- アピアランス：フォント・輪郭・色など
- 整列：ProgressBarWクリック⇒[詳細]
- VerticalAlignment：中央整列
- ProgressBarの見た目を設定
- グラフ上でProgressBar選択⇒[詳細]
STEP
ヘルス側のBPを作成する
ポイント
- [デザイナー]から[グラフ]に切り替える
- ノードの完成図は下記Twitterをご参照お願いします
STEP
PC側のBPを追記する（完了）
ポイント
- ノードの完成図は下記Twitterをご参照お願いします
- 手始めの設定は下記
[BeginPlay]⇒ウィジェットを作成
Class⇒さっきまで作成したヘルスバーを選択
出力ピン⇒add to viewport（ビューポートに表示させるノード） - ①ヘルスバーの表示②ダメージを受けるの2段階で追記している
ヘルスが減るときに白黒になる流れを作る
- ブランチの前に追加
- ノードの完成図は下記Twitterをご参照お願いします
- [MapRangeClamped] ノードは画面全体の影響範囲を決める
InRangeA：最大 /InRangeB：最小
OutRangeA：InRangeAに対するポストプロセスの影響範囲
OutRangeB：InRangeBに対するポストプロセスの影響範囲
※今回はInRangeAが100の時にポストプロセスを影響させたくないからOutRangeAは0
PostProcessVolumeの設定
見た目の色調補正の効果がある
前提の設定
- レベルエディタには既にPostProcessVolume設置済
- [アウトライナ]タブ⇒PostProcessVolume選択⇒[詳細] カラーグレーディング
※サイドやコントラストなどの色調補正 - ポストプロセスボリューム設定：InfiniteEztent(Unbound) 遠景で色調補正がオフ
ポイント
- [+コンポーネントを追加]PostProcess
- PostProcessのパラメータを調整
[PostProcess]選択⇒[詳細]- ColorGrading：色調・コントラスト補正
※今回ヘルスが減るときに白黒にしたいので彩度を0 - Priority：1.0
※マップ内の優先順位 - BlendWeight：0
※シーンにどれぐらい適用するか
- ColorGrading：色調・コントラスト補正
ドアに近づくと開く動作を作成
STEP
親となるドアのBPデータを作る（コンポーネントで作成）
ポイント
- 親クラスを選択：Actor選択
- [+コンポーネント追加]StaticMesh
※ドア本体 - 作成したStaticMeshを複製（Ctrl+W）
※ドアの枠 - コンパイル＆保存
STEP
StaticMeshにMesh（ドア素材）を割り当てる
それぞれのStaticMeshにMeshを選択⇒[詳細]メッシュ
ドアと枠素材を割り当てる
STEP
イベントグラフでノードを作成
ポイント
- ノードは下記ツイッタの画像参照
- [タイムラインを追加する]をWクリックするとタイムラインエディタが開き詳細設定が出来る
- 長さ0.75
- f+（フロートトラック）追加
- トラック名：Door_Alpha
- １個目キー：0,0
- 2個目キー：0.75,1.0
- キー補間：ユーザー
- コンパイル＆保存
STEP
子のドアBPを作成
ポイント
- STEP1-4で作成したBPデータをコンテンツブラウザで右クリック⇒[子ブループリントクラスを作成します]選択
- 子ドアBPエディタを開き、[+コンポーネントを追加]BoxCollision
※ドアが開閉の反応をする範囲を決める - [BoxCollision]選択⇒[詳細]コリジョン⇒GenerateOverlapEventsに✔
オーバーラップ=コリジョンの範囲に入ると動作する
STEP
イベントグラフでノード作成
- 最終的なノードは下記Twitterの画像を参照
ボタンに乗るとドアが開く動作の作成
STEP
BPでボタンを作成
ポイント
- 新規でBPを作成⇒親クラス[Actor]
- [+コンポーネントを追加]StaticMesh
※今回の設定選択⇒[詳細] トランスフォーム：スケールZ0.1 スタティックメッシュ：1M_Cube - [+コンポーネントを追加]Boxコリジョンを作成。ボタンとなるボックスの上に来て覆う様に配置
※[詳細]BoxExtentで調整 - [Box]選択⇒[詳細]⇒コリジョン GenerateOverlapEventsに✔
- コンパイル＆保存
STEP
BPでボタンのイベントグラフでノードを作成
ポイント
- マイブループリントより変数[DoorReference]を作成する
変数の型：BP DoorParent（[ドアに近づくと開く動作を作成]にて作成したBP）
インスタンス編集可能：✓（レベルエディタで編集可能にする）
カテゴリ：デフォルト（レベルエディタで編集可能にする） - [DoorReference]はGet配置
- [GetOverlappingActors]のClassFilter⇒Actor
- [Get]ノードは[Get a copy]で検索ヒットする
- ボタンに乗ってから離れるとドアが閉まる流れにするには[Get]ノードに1を入力
STEP
レベルエディタの設定
前提
- 今回立方体を撃ったらボタンが押されるという設定になるように、ビューポートにボタンを配置
- ボタンを押す立方体にPhysicsを追加しておく
立方体選択⇒[詳細]
GenerateOverlapEventsに✔
コリジョンプリセット⇒PhysicsActorになっている事を確認
ボタンBP選択⇒[詳細]デフォルト⇒BPドアをスポイト（デフォルト/DoorReference）選択
※横のスポイトマークで選択して関連付ける
※デフォルト/DoorReferenceのプロパティ設定はStep2で作成したもの
キーボード[E]を入力するとドアが開く流れを作成
前提
ドアのBPデータは[ドアに近づくと開く動作を作成]で作成したBPデータを複製＆リネームする
STEP
キーボード[E]を有効にする
プロジェクト設定⇒インプット⇒アクションマッピング
設定：[Interact]E
![プロジェクト設定⇒インプット⇒アクションマッピング
設定：[Interact]E](http://www.yoshikovengine.com/wp-content/uploads/2022/11/projectSet_E.png)
STEP
ドアのBPのノードを改変する
STEP
ドアBPデータにインプットアクション（キーボードE入力）ノードを追加
準備：ビューポートでEを表示
- [+コンポーネント追加]TextRender
- TextRender[詳細]⇒[Text]E
- 今回の場合文字の位置はドアの上
- Eを複製して反対側にも配置（反転してるので読めるように調整）
- コンポーネント上でEを[Door]の子にする
- デフォルトの状態でEはレベル内で非表示にする（ドアに近づくとEが出現）
Eを選択⇒[詳細]Hidden in Game - コリジョンサイズを調整（ドアが開閉する範囲を設定）
ノードの組み方は下記Twitterの2枚のノードの画像を参照してください
レベルにサウンドやエフェクトを入れる
サウンドデータの知識
- サウンドデータの種類は2種
紫バー：サウンドウェーブ /青バー：Cues
※通常Cuesをレベルに配置する - CuesをWクリックすると、ループ再生・ランダム再生等、詳細な設定が出来る
- Cuesをレベルに設置すると、InnnerCircleという音が聞こえる範囲のガイドが表示される
InnnerCircleの中では音量最大 - InnnerCircleの外にOuterCircleというガイドがある
InnnerCircle近づくほど音が大きくなる
作例：銃弾にエフェクトと音を入れる
前提条件
- 使用するのは弾のBPデータ
サンプルプロジェクトデータでは[BP_FirstPersonProjectile]
- 最終的なノードは下記twitter投稿参照
- 追加したノードは[Play Sound at Location][Spawn Emitter at Location]
※サウンド⇒エフェクトの順に発生 - 位置を取得[GetAcotrLocation]
- 爆発音とエフェクトを割り当てる 場所
[Play Sound at Location]：Sound [Spawn Emitter at Location]：EmitterTemplate - キューブを吹き飛ばしたい時は変数vector[×]ノードに記入するの数値を大きくする
その他～お役立ちメモ～
ビューポート内のアクタをコンテンツブラウザ内の場所へ探し出す方法
ビューポートorアウトライナで任意のアクタを選択⇒Ctrl+B
ブループリントのグラフ整理術 コメントで整理
- 作成したノードを全てドラッグで選択して囲む+[C]⇒コメントで補足できる
- [詳細]CommentColor⇒色分けできる
長くなったノードの整理術～Rerouteノード～
Rerouteノード：ノードの途中にポイントを追加して線を切断したり、合流したりすることが出来る機能
接続線上をWクリック
BPエディタ上の変数の整理
変数が溜まり煩雑になってきた変数は、カテゴリー分けして整理することが出来ます
整理したい変数のどれか一つを選択⇒[詳細]カテゴリでグループ名を入力
下記3つの中でカテゴライズできる
デフォルト/MyCharactor/コンポーネント/動き
プレイイン中にマウス操作を行うショートカット Shift+F1
プレイイン中のマウス操作が可能になります
コメント