UE5：簡単な掛け算問題を解いてクリアを目指すゲームを作る！

28 9月, 2025

UE5：簡単な掛け算問題を解いてクリアを目指すゲームを作る！

UE5：簡単な掛け算問題を解いてクリアを目指すゲームを作る手順について

※同じ操作かつ同じ画像になる場合は、画像の添付を省略しています

プロジェクトのダウンロード

DLPW：0106　ダウンロード期限: 2026年1月6日（火）

ゲームスタート画面の作成

まずは新規レベルを作成していこう

右クリックから作成することができるんだけど、今回は「ファイル」→「新規レベル」→「Basic（基本）」で作成するよ

選択したら作成を押下

作成して新規レベルが開いたら念のため保存しておこう

「ファイル」→「現行レベルを保存」で作成したらレベルが保存できるよ

ちなみに名称は「GameStartLevel」にしてる

次はゲームプレイ開始時に表示するウィジェットを作成していく

コンテンツドロワーを開いて右クリックから「ウィジェットブループリント」を選択して作成しよう

名称は「WBP_GameStartWindow」

ウィジェットの作成ができたら開いて設定をしていこうか

※階層の追加はパレットでウィジェットを検索して、対象を階層にドラッグ＆ドロップもしくは画面内にドラッグ＆ドロップで追加できるよ

最初に「CanvasPanel」を追加して、一つ下に「Overlay」を配置しておこう

また、Overlayはデフォルト値のままだとサイズが小さいというかあってないからサイズの調整をしてキャンバスパネルとサイズを合わせるよ
今回画面比率は「1920×1080」にしてるからXとYにも同じように設定する

さらに階層を作っていくよ

Overlayの中に「サイズボックス（Size Box）」を追加する。そしてさらにその中に「Overlay」を追加したらサイズボックスの大きさと位置を調整する

このサイズボックスは、タイトルとスタートボタンを中に配置するから気持ち大き目に作っておいた方がいいかもです

SizeBox
・Width Override：1500
・Height Override：500
値を入力するには有効化する必要があるから、チェックボックスにチェックをいれよう

ここまでで、箱ができたから見た目を作成していこう

まずは箱全体を薄暗くしていきたいからOverlayの中に「Border」を追加する

ボーダーを選択した状態で詳細タブに移動して、「Horizontal Alignment」と「Vertical Alignment」のどちらも「塗りつぶし」を選択してあげよう

箱が真っ白になったはず

この真っ白を透明感のある黒に設定変更するよ

またボーダーを選択した状態で詳細タブにいく。アビアランスタブ下のBrush内に「Tint」っていうのがあるから、展開して「RGB＝0」、「A＝0.4」に値を変更したら、真っ白だったボーダーの色が薄暗くなったはず

少し前にも話したけど、ボックス内には「ゲームタイトル」と「ゲームスタートボタン」を設置するからこの箱を上下で2等分する必要がある

ここで簡単に上下2等分できるのが「VerticalBox」だ！

Overlayの中（ボーダーと同じ階層）にVerticalBoxを配置するよ。配置ができたらVertcalBoxの中に新規でOverlayを2つ配置しておこう

ただこのままだと上手く設定ができていない。各種値を詳細タブから調整するよ

まずは「Paddingを0にしよう」。その後は「Horizontal Alignment」と「Vertical Alignment」を塗りつぶしに設定

んで、VerticalBox何に配置していた2つのOverlayの詳細タブに移動してスロットの中にある「Size」を「自動からフィル」に変更する

これで上下で均等サイズのOverlayが作成されたはず

画像を追加したりとかできるんだけど、今回はテキストとボタンのみ配置してみようとおもう

Overlayの中にそれぞれ「テキスト（Text）」と「ボタン（Button）」を配置した

名前を変更しておこう
Text：Title
Button：PlayButton

よし。まずはテキストの設定からしていこう

「Horizontal Alignment」と「Vertical Alignment」を中央で揃えるように設定して、Textを「Game Creation Tutorial」に変更する

フォントのサイズは、少し大きかもしれないですが「100」にしておく

※ちなみにこのあたりの設定は好きに調整してOK！

続いて「ボタン（Button）」の設定だね

「Horizontal Alignment」と「Vertical Alignment」を塗りつぶしに設定

テキストをボタン内に配置する

配置したテキストには「PlayStart」を入力

色は真っ黒くろすけに調整するよ
RGBを0にしただけ

フォントサイズは同じく「100」にしてる

ここまで完成したら、いったんウィジェットから離れるよ！

レベルを開いたときに、作成したウィジェットが表示される設定をするために、レベルブループリントを開く

EventBeginPlayノードにCreateWidgetノードを接続し、Classに作成したウィジェットを設定

Add to Viewportノードを配置してピンを接続
これで画面に表示されるようになる

ボタンをクリックで押せるようにしたいから、マウスカーソルを使えるようにしていくよ

・Get Player Controller
・Set Show Mouse Cursor
・Set Input Mode Game And UI

※キャラクターを動かなくしたい場合は「Set Input Mode Game And UI」をUI Onlyノードに変更したら大丈夫だよ

これでゲームプレイすると表示できるようになったから次はPlayStartボタンをクリックしたら、ゲームのステージが開くようにしていくよ

ウィジェットに配置したボタンの詳細タブにいって、イベント内にある「On Clicked」のプラスを押してウィジェットのイベントグラフ内のイベントノードを配置

Open Levelノードを配置後にOn Clickedノードと接続
Level Nameに開きたいレベルの名前を入力

ゲームをプレイし、ボタンをクリックすると指定したレベルが開くはず

レベルを開いたらマウスカーソルを非表示かつ使用できないようにしたいので、Open Levelノードの後ろにノードを追加していきます

・Get Player Controller
・Set Show Mouse Cursor（False）
・Set Input Mode Game Only

ゲームプレイ開始時に開くレベルを設定するよ。（パッケージ化されたゲームはここに設定したレベルを最初に開く）

編集→プロジェクト設定を開く

Mapで検索するとゲームのデフォルトマップという項目があるからここにレベルを設定するよ

これで別のレベルを開いた状態でも、特定のレベルをゲーム開始時に開くことができるようになった！

プレイ開始後のレベルを開く

ここでゲームプレイ画面の作成セクションは終わり！

設問（ブループリントクラス）の作成

対象物に重なったら、問題を提起してくれるアクタを作成していきたいと思うよ

見た目はMeshではなくNiagaraで生成していこうかな

右クリックからNiagara Systemを選択する

選択後は別のポップアップが表示されるけど、「空のNiagaraシステムを作成」を押す

名称：NS_Question

開いて、グラフ内で右クリックし「最小エミッタを追加」を選択

各種モジュールを追加していく

エミッタの更新
・Spawn Rate

パーティクルのスポーン
・Shape Location
・Add Velocity

パーティクルの更新
・Solve Forces and Velocity

レンダリング
・リボンレンダラ

Solve Forces and Velocity

の追加は、検索して追加もできるけど、Add Velocityの詳細タブに「問題を修正」ボタンがあるからそこをクリックする方が楽かも

SpawnRateモジュールの詳細タブで、SpawnRateの値を1000にする

Initialize Particleモジュール
・Lifetimeを10に変更
・Sprite Size ModeをUniformに変更し、値を10に設定

ShapeLocationモジュールは

ShapePrimitiveをRing/Discに変更する

Add Velocityモジュールの上昇するスピードが想定よりも早いから、Velocityの値を25に変更

くるくる回りながら上昇する何かができたと思われる

空のエミッタをもう1個配置して、各種モジュールを追加するよ

エミッタの更新
・Spawn Rate

パーティクルのスポーン
・Add Velcity
・Curl Noise Force
・Apply Initial Forces
・Shape Location

パーティクルの更新
・Solve Forces and Velocity

Spawn RateモジュールのSpawnRateを「200」に設定

Initialize ParticleモジュールのSprite Size Modeを「Random Uniform」に変更して、「Minを1.0」、「Maxを2.0」に設定

Add Velocityモジュールは値を同様に25に変更

Curl Noise Forceモジュールは「Pan Noise Field」を有効化して、Zに100を設定

ApplyInitialForcesモジュールはCurlNoiseForceモジュールの問題を修正で追加できるよ

これで、くるくると一緒に、パーティクルが上昇していると思われる

色は今回パラメータで管理していこうと思う

パラメータで管理できると問題の難しさとか順番を色で指定とか後から色分けできるようになるから便利だよ

というかNiagaraに限らず色んな項目をパラメータで管理しておくのは非常に便利
まぁ多くなりすぎるとどれがどれ！とか分かりづらくなるから名前とかはしっかり設定しておこうね

ユーザーパラメータタブに移動してパラメータを作成していくよ

＋を押してVectorで検索すると「Vector」が表示されるから選択して作成

名称：QuestionVectorColorParameter

エミッターに「Scale Color」モジュールを追加する

どっちにも

作成したパラメータを、Scale ColorモジュールのScale RGBにドラッグ＆ドロップして設定できる

デフォルトの値が全て0になってるから好きな値に変更してあげてね

今回はいったん1で見た目は同じように戻した

どっちも設定するよ

このままだと、パーティクルが突然消えてしまうので、時間に応じてグラデーションがかかってるように消える設定を入れておく

ScaleColorの詳細
Scale Alphaの右側にプルダウンがあるから押す
一覧の中に「Float from Curve」を選択して設定

Curveが表示されるから点を2個選択して、なだらかに下るようにしてあげる

これでだんだんと消えるようになるから、2つとも設定

よし！これで見た目はOKだから次にいこう！

コンテンツドロワーを立ち上げる

右クリックからブループリントクラスを作成

名称：BP_Question

開いたらコンポーネントタブにコリジョンを追加する

追加を押して、検索に「Collision」と入力すると「Box Collision」と表示されるから選択するとコンポーネントタブ内に追加されるよ

同じ要領で「Niagara Particle System Component」を追加する

Collisionのトランスフォームを設定する

サイズ：2.5
位置：Z・80

NiagaraSystem Assetに作成したNiagaraSystemを設定
（NS_Question）

このブループリントクラスにキャラクターが重なった場合に、表示されるインタラクト画面をいったん作成するね

ウィジェットブループリントを作成
名称：WBP_E_Interact

画面サイズは1920×1080

キャンバスパネルとテキストを配置して「【E】問題を解く」にテキストを変更

テキストのアンカーを真ん中にして位置XとYをリセットで場所を調整

コンパイルしてセーブができたらブループリントクラスに戻ろう！（BP_Question）

イベントグラフで重なったときはウィジェットが表示され、重なりが無くなったらウィジェットが消えるように処理を組んでいく

・Event ActorBeginOverlap
・Create Widget
・Add to Viewport
・Set Visibility（Visible）
・Event ActorOverlap
・Remove from Parent

これでアクタに重なったときに、Interact画面を表示することができるようになったから、Eを押したときに入力を受け取れるように処理を組んでいこうかな

まずはInput Actionを作成

右クリック→入力→入力アクション

名称：IA_E_Interact

続いてマッピングコンテキストの作成

右クリック→入力→入力マッピングコンテキスト

名称：IMC_E_Interact

作成ができたらIMC_E_Interactを開くよ

＋を押してマッピングをまずは追加

追加できたらプルダウンから作成したインプットアクションを選択

キーボードマークを左クリックしてEキーを押す

これで設定完了

このままだとキーを押しても通知は流れないからブループリントのイベントグラフで処理を流せるように処理を組んでいこう

BP_Questionに戻る

Set VisibilityとRemove from Parentの後から接続していくよ

・Get Player Controller
・Enable Input
・Enhanced Input Local Player Subsystem
・Add MappingContext
・Disable Input
・Remove MappingContext

しっかり組めていればEキーが反応するので、ここはいったんPrint Stringでデバック確認しておいたほうがいいよ～

IA_E_Interactをドラッグ＆ドロップするとイベントノードを配置できる

よし！

次は、Eキーを押したときにInteract画面を非表示（もしくは削除）して問題を画面に表示できるようにしていこう！

ということで、まずは問題が表示され解答ができる画面を作っていく

名称：WBP_QuestionAnswer

画面調整：1920×1080

・CanvasPanel
・SizeBox
・Overlay

サイズボックスはアンカーを中央にして値を調整する

ちょっと長くなりすぎるかつ応用で対応できるのでやってみて
（気が向いたらここも細かくするかも・・・）

・Border
・Overlay
・Image
・Editable Text
・HorizontalBox
・Size Box

※HorizontalBoxの中に入れるテキストなどの位置調整は自動とフィルをいい感じで調整
※各種詳細タブにPaddingという項目があるんだけど、これも位置調整に使える。余白設定みたいなもの

イベントグラフへ移動しよう

右上にデザイナーとグラフってあるからグラフを選択すると移動できる

そしたら、ウィジェットの処理を組んでいく前に変数を作成しておくよ

変数タブの右側にある＋を押すことで追加可能
型はプルダウンで指定できる（今回はInteger型）

移動してきたばかりですが、デザイナーにいったん戻る

999と入力したテキストが2個あると思うんだけど、どっちにも設定する

詳細タブからText右側にあるリンクマークのようなものをクリックしたらバインディングを作成できるから作成

FrontValueとBackValueをゲットで配置してReturn NodeのReturn Valueピンに接続してあげる
To Text （型名）は自動で配置されるよ

またデザイナータブに戻って、EditableTextを選択した状態で詳細タブの一番下までいくと「On TextCommitted（Editable Text）というのがあるから、＋を押してイベントグラフに配置

ここではデバックもできる形でノードを組んでるよ

・On TextCommitted
・AnswerValue（変数ゲット）
・To Text（Integer）
・＝＝＝
・Branch
・Print String

あと、エンターを押したときだけの通知にしたいので、ノードを追加
・Switch on ETextCommit

ランダムで数値が入るように調整

・Event PreConstruct
・Random Integer in Range（MinとMaxに数値の設定が必要）
・各種変数をゲットとセットで配置
・Multiply（×）

最後に問いた問題数を管理したいから変数とバインドを再度作成して設定するよ

問題と書かれたテキストの横に99としたテキストを選択してバインディングを作成

変数を作成してゲットで配置後Return Valueに接続しておく

名称：QuestionCount（Integer型）
※Question Countへの入力はあとから設定する

表示するウィジェットが作成できたらブループリントに一時戻る

E_Interactの変数を作成する

Overlapと繋いでるCreateWidgetのReturnValueピンを右クリックし変数へ昇格で作成

実行ピンをつなぎなおしておこう

名称：WBP_E_Interact

Eキーのイベントノードの後か接続

作成した変数をGetで配置
変数は左下の変数タブからドラッグ＆ドロップもしくは右クリックから検索して配置できるよ

・WBP_Interact
・Set Visibility（Collapsed）
・CreateWidget
・Add to Viewport

開いたときにマウスカーソルが使えるかつ移動入力を無視するように設定

・Get Player Controller
・Set Show Mouse Cursor（True）
・Enhanced Input Local Player Subsystem
・Remove MappingContext（IMC_Defaultを設定）

そしたら押すたびに通知を切り分けられるようにしていくのと、Interactを再表示できるようにしておく

・Flip Flop
・Set Visibility
・WBP_E_Interact（変数をゲットで配置）

移動入力の有効化とマウスの無効化

・Set Show Mouse Cursor（False）
・Add MappingContext

見た目の色を設定できるようにしておこう！

イベントグラフではなく、「Construction Script」のグラフでノードを組も

・Set Niagara Variable（Vector3）
・NS_Question（Niagaraコンポーネントから配置）
・Niagara Vector Parameter（In Valueピンから変数へ昇格）
※In Variable NameとNiagaraで作ったユーザーパラメーターの名前が一致するように入力する必要あり

変数を作成したら、インスタンス編集ができるように目を開けておこう

クリックするだけで目が開くよ

ゲーム内に配置後、選択状態で詳細タブを開く

変数値を指定できる

問題に正解した場合に、ゲーム内に配置しているアクタが消えるようにノードを組んでいくよ

処理の始まりはウィジェットブループリント側で設定しているイベントノードになるからブループリント側は、通知が流れたらこっちにも流れてくるようにしていく

・CuntomEvent（名称：DestoryState）
・DestroyActor
・お馴染みのマウスを無効化するノードたち

正解したらウィジェットも消えるようにする

SizeBoxは変数で利用できるよう有効化しておく
名前も少し変えてるよ

ウィジェットのイベントグラフでBranchの後から以下のノードを組む

・Remove from Parent
・Get Actor Of Class（ブループリントを設定）
・DestroyState（さっき作成したCustomEvent）

※DestoryStateは、ブループリント（BP_Question）の持ち物なので、通知を渡す場合にはブループリントを参照する必要があることを覚えておこう

プレイヤーキャラクターを開こう

正解したら問題数を管理するためにプレイヤー側に値を持たせるよ

・OpenCount（Custom Event）
・GateOpenCount（変数）
・PrintString（なくても大丈夫）
・Add

これで通知が流れてきたら値をカウントできるなった

プレイヤーに通知を渡してあげよう

まずは
・Event BeginPlay
・Get Player Character
・Cast to BP ThirdpersonCharacter
・As BP_ThirdPerson Character（Castノードのアウトプットを変数へ昇格）

できたらAdd MappingContextのお尻にノードを追加してあげる

さっき作成した変数をゲットで配置して、プレイヤーキャラクター側で作成したCustomEventを配置する。これで問題が成功したときにキャラクター側への通知が流れるようになった

正解した問題数が何問かを反映してあげたいので、今度はウィジェットブループリントへキャラクターが保持している問題数を渡せるようにしよう

・Event Construct
・Cast to BP_ThirdPersonCharacter
・Gate Open Count（変数ゲット）
・Question Count（変数セット）

正解したときにブループリントを削除する処理を修正する

BP_QuestionのDestoryStateに接続している「DestroyActor」を削除する

プレイヤーのイベントグラフに移動して、重なったブループリントを判別して削除できるようにノードを組む

・Event ActorBeginOverlap
・Other Actor（変数へ昇格）
・Destory Actor
・Other Actor（変数をゲットで配置）

脱出ゲートの作成

4つの問題をすべて回答できたら脱出ゲートが出現して、脱出できるようにするよ

まずは脱出ゲートの作成から！

コンテンツドロワーを立ち上げて、コンテンツフォルダまで移動したら、検索欄に「door」と入力すると「SM_Door」と「SM_DoorFrame」のスタティックメッシュが表示されるから今回はこれを使っていく

ブループリントクラスを作成
名称：BP_EscapeDoor

開いてコンポーネントタブから「Static Mesh Component」を2つ追加する

名前を「Door」と「Door Frame」に変更しておこう

コンポーネントの追加ができたら、メッシュを設定してあげる

また、ドアとドアフレームの位置があっていないので、そこも調整してあげる。今回はドアの方を動かして調整してるよ

あとから、ドアが開くように設定してもいいんだけど、今回はそもそもドアが開いている仕様いこうと思うから、フレームに対してドアを-90°回転させるよ

Zの値を-90に変更

ドアそのものはいったん完成したから次はドアを特定の位置にスポーンできるようにしていこう

ドアのブループリントは離れて、プレイヤーキャラクターのブループリントに移動

Destory Actorの後ろから接続していくよ
・Branch
・GreaterEqual
・Gate Open Count（変数をゲット）
・SpawnActorformClass
※Classに作成したドアブループリントを設定する（BP_EscapeDoor）
※右クリックからトランスフォームピンを分割して、Locationピンに値を設定
※位置は実際にゲーム内に配置して確認する