【完全ガイド】制作経験ゼロの社会人向けゲーム制作入門。夏休みを使って，Unreal EngineのFPSミニゲームを完成させてみよう

---

1

2

3

4

5

6

7

8

9

10

11

12

13

12	作りこみ	ゲームクリアを作ろう	P.7（12）へ
13	作りこみ	タイトル画面を作ろう	P.7（13）へ

---

12.ゲームクリアを作ろう
作りこみ 2/3

　クロスヘアやスコアも表示され，さらにゲームっぽくなってきたと感じてもらえていたら嬉しい。ここでは「的」をすべて落とした際のゲームクリアの演出を作っていこう。

12-1：「コンテンツ ドロワー」（Ctrl＋Spaceバー）を右クリックして，「ウィジェットブループリント」を新規作成する。名前を「WBP_Clear」とする

12-2：「WBP_Clear」の「デザイナー」で「Canvas Panel」，「Text」の順に配置する

12-3：「Text」の「詳細」から，以下のように設定しよう。サイズに関しては，自動的に合わせる仕組みを使うので特に変更しないで大丈夫だ

・アンカー「中央」
・位置X「0.0」
・位置Y「0.0」
・サイズX「何でもOK」
・サイズY「何でもOK」
・Alignment「0.5」「0.5」
・Size To Content「チェック有り」

12-4：「Text」を「Game Clear!」にしよう

12-5：このままでは味気ないので，影を付けたりサイズを変更してみたりしよう。筆者の設定例を下記（設定後の画面は12-6）に示すが，自由にパラメータを変更してデザインを考えてみてほしい

・Font：Typeface「Bold Italic」
・Font：Size「70」
・Shadow Offset「0.5」「0.5」
・Shadow Color：A「1.0」

12-6：ゲームクリア時に表示するUIが完成した。UIができたら，次は表示する処理の実装だ

12-7：「BP_FirstPersonCharacter」を開き，「AddScoreイベント」で実装した「Branchノード」の「True実行ピン」（クリア時に進む処理）から，「Create Widgetノード」を追加する。「Class」は「WBP_Clear」を指定しよう

12-8：「Create Widgetノード」の「Return Valueピン」からワイヤーを伸ばし，「Add to Viewportノード」を追加する。右図のようにしたら，「的」をすべて落とした際に「Game Clear!」と表示される

12-9：クリア画面を追加したが，このままでは「クロスヘア」や「スコア」が画面に表示されたままである。画面上から削除する処理を追加しよう。「WBP_Main」の「Return Valueピン」からワイヤーを伸ばし，「Remove from Parentノード」を追加する

Remove from Parentノード
		UIを画面上から削除するノード

12-10：画像のように「Add to Viewportノード」で，クリア画面を表示した後に続けて，「Remove from Parentノード」でクロスヘアなどを削除する処理を実装する。また，ワイヤーがノードと被って視認性が悪くなるので，整理しよう。ワイヤーをダブルクリックすれば「Rerouteノード」と呼ばれる点ができる。この点を移動すれば，ワイヤーも同時に動くので，整理が可能となる。

Rerouteノード
		ワイヤーに中間点を設け，整理できるノード ワイヤーが対象としているデータによって，色や形が異なる ワイヤーの任意の位置で，ダブルクリックすると作成できる ［左図にて，丸の赤枠で囲ったもの］ ・ワイヤー未接続時の例 ［左図にて，四角の赤枠で囲ったもの］ ・オブジェクト型のデータを接続した例

12-11：「的」をすべて落とすと，スコア表示やクロスヘアが消え，「Game Clear!」が表示されるようになった

　本章の内容をすべて行った例を以下に示す。

・BP_FirstPersonCharacter
　- WBP_Clearを作成し，画面に表示
　- クリア時，WBP_Mainを画面上から削除
　- サウンドの2D空間再生
　- スローモーション処理の追加

BP_FirstPersonCharacter

---

13.タイトル画面を作ろう
作りこみ 3/3

　最後に，タイトル画面を作成しよう。
　タイトル画面は，「スタートボタン」「タイトルロゴ」「背景」で構成されるシンプルなものにする。

　まずは，タイトル用に「新しいレベル」を作ってから，UIを実装していこう。

　なお，これまで編集していたレべルは，FPテンプレートの「FirstPersonMap」である。そこで本記事は，実際にプレイするレベルを「FirstPersonMap」として，作業を進める。

13-1：［ファイル］から［新規レベル（Ctrl+N）］を押す

13-2：オープンワールドや基本的なマップなど，テンプレートを選択できる。ここでは「Basic」を選択して＜作成＞を押そう

13-3：新しくレベルが開いたら，画面左上の保存アイコンかCtrl+Sキーで，レベルを保存しよう

13-4：「名前を付けてレベルを保存する」が表示される。ここでは「All/コンテンツ/FirstPerson/Maps」（パスは「/All/Game/FirstPerson/Maps」と表示される）に，「TitleMap」という名前で保存しよう。なお，すでにある「FirstPersonMap」は，これまで編集していたレベルである

13-5：赤枠で示したアイコンをクリックし，レベルの設定メニューを開く

13-6：「ゲームモード：オーバーライドされません！」から「GameModeBase クラスを選択」，「GameModeBase」を選択する。これで，FPテンプレートが用意していたレベルの設定を，デフォルトのシンプルなものに変更できた。プレイヤーのキャラクターを「BP_FirstPersonCharacter」と設定していたゲームモードから，別のゲームモードに変更したので，同じようにキャラクターも「別のもの」に設定される。この変更で，「BP_FirstPersonCharacter」に実装したクロスヘアの表示処理などの実行を回避できる

　レベルを作成して，設定を変更したら，タイトル画面のUI（ロゴとスタートボタン）を作っていこう。

13-7：「コンテンツ ドロワー」（Ctrl＋Spaceバー）を右クリックして，「ウィジェットブループリント」を作成。名前を「WBP_Title」にしよう

13-8：「WBP_Title」を開き，クリア画面と同様に「Canvas Panel」「Text」の順に配置しよう

13-9：この「Text」をゲームタイトルのロゴとして使おう。「My First FPS」に文字を変更して，「Font」や「Shadow」を自由にカスタマイズしよう

13-10：タイトルロゴができたら，「スタートボタン」を作成しよう。「パレット」から「Button」を追加する

13-11：ボタンの「Size To Content」を有効にする

13-12：配置したボタンに文字を付けてスタートボタンにしよう。「パレット」から「Text」を，配置中のボタンへドラッグ＆ドロップする

13-13：ボタンに文字が追加された。「Size To Content」を有効にしたので，テキストのサイズに合わせて，ボタンの大きさも自動調整されている

13-14：ボタンに追加したテキストを「Start」にして，色を自由に変更しよう

　UIを作成したら，画面に表示しよう。これまではFPテンプレートのキャラクターに，UIを表示する処理を追加していたが，レベルの設定を変更したので，キャラクターは「別のもの」に変化している。
　つまり，「BP_FirstPersonCharacter」に実装しても，タイトル画面では何も起こらないのである。

　さて，実はレベル自体にもブループリントが用意されている。これを「レベルブループリント」と呼び，レベルごとに異なる処理を実装できる。
　今回は「TitleMap」のレベルブループリントに，タイトル画面の表示などを実装していこう。

レベルブループリント

各レベルが持つ，独自のブループリントのこと レベルに配置した「的」や「キャラクター」などのオブジェクトに，直接アクセスできるなど，特徴的な機能を持つ 今回は，タイトルの固有の処理である「タイトル画面のUI表示」の実装で利用する

13-15：赤枠で囲ったアイコンから，「レベルブループリントを開く」を押す

13-16：「レベルブループリント」が表示された。使い方は，他のブループリントと同じである

13-17：「BeginPlayノード」（ゲーム開始時に動くイベント）に，「WBP_Title」の作成と表示処理を実装しよう

13-18：プレイするとUIが表示された。しかし，マウスカーソルが表示されないので，ボタンが押せない

　UIを操作するためには，2つのステップが必要となる。
　1つは「マウスカーソルの表示」で，もう1つが「入力モードの切り替え」だ。

　普段PCゲームをプレイしていて，あまり意識したことはないと思うが，メニュー画面を開いた際，マウスカーソルは動くが，キャラクターの視点は止まっていることが多いだろう。
　そもそも，バトルロイヤルゲームやサバイバルゲームで，戦利品をマウスで整理している際に，視点も動いたら気になって仕方がないかもしれない。そんなこんなで「メニューを開いている最中は，視点は動かない」のである。

　さてUEでは，マウスカーソルを表示してボタンを押そうとしても，キャラクターの視点移動に入力が引っ張られて，上手く押せないことがある。
　この問題を回避するには，キャラクターへの入力を制限して，UIだけを操作できるようにしてしまえば良い。UEは，「Input Mode」（入力モード）というものを切り替えて，入力を制限することができる。

　「マウスカーソルの表示」や「入力モードの切り替え」など，操作関連の処理は「PlayerController」というもので管理されている。
　まずは「PlayerController」を取得し，そこから処理を呼び出していこう。

PlayerController

プレイヤーとキャラクターの橋渡しを行うもの プレイヤーの入力の制限や，マウスカーソルの表示などの管理もできる 「コントローラ」という名前からして，操作をすべて管理しているように思えるが，「BP_FirstPersonCharacter」のイベントグラフで「視点移動」や「ジャンプ」などのアクションが実装されていたように，そういうわけでもない 倒されたりエリア外に出たりして，キャラクターがレベル上から排除された場合，キャラクターに実装した処理は実行できなくなるが，「PlayerController」は残り続ける そのため，キャラクターのリスポーン待ちの間に，Escキーで「メニュー」を開くなどの処理に使いやすい

13-19：「Get Player Controllerノード」から「Set Input Mode UI Onlyノード」と「Set Show Mouse Cursorノード」を，それぞれ追加しよう。「Set Show Mouse Cursorノード」の「Show Mouse Cursor」にチェックを入れることで，マウスカーソルを表示できる

Get Player Controllerノード
		「Player Controller」を取得するノード 「Player Controller」は，「プレイヤー」と「操作対象のキャラクター」の橋渡しをする役割をしており，入力操作系の処理が実装されている
Set Input Mode UI Onlyノード
		UIだけが，プレイヤーの入力を受け取れるように制限するノード
Set Show Mouse Cursorノード
		「ShowMouseCursor変数」の値を変更するノード 「PlayerController」には「ShowMouseCursor変数」が設定されており，この変数が「True」だとマウスカーソルが表示される

　「入力モード」を切り替え，マウスカーソルも表示したことで，ボタンが押せるようになった。
　しかし，押しても何も起こらない……。

　それもそのはずで，「ボタンを押した時の処理」が何も実装されていないからである。「Start」ボタンを押したら，「FirstPersonMap」に切り替わるようにしよう。

13-20：「WBP_Title」に配置したボタンを選択して，「詳細」から「On Clicked」の「＋」ボタンを押す

13-21：「On Clicked」は，「ボタンを押した時」にトリガーされるイベントだ。実行ピンからワイヤーを伸ばし，「Open Level(By Object Reference)ノード」を追加しよう。これは，指定したレベルを開くノードで，レベルの切り替えで利用できる

13-22：「Level」を「FirstPersonMap」に設定する

Open Level(By Object Reference)ノー
		「Level」に指定したレベルを開く（遷移する）ノード 操作中のキャラクターが別のレベルへ移動するのではなく，開いたレベルの設定で新しくキャラクターが読み込まれる

13-23：タイトル画面の「Start」ボタンを押せば，レベルが切り替わるようになった

　「FirstPersonMap」へ移動できるようになったが，今度はWASDキーなどを押してもキャラクターが反応しない。
　これはタイトル画面で「Set Input Mode UI Onlyノード」を利用して，入力モードを「UI操作専用」にしているためである。

　「Start」ボタンを押した際，キャラクターがプレイヤーの入力を受け付けるように，モードを変更しよう。

13-24：「Get Player Controllerノード」を配置し，そこから「Set Input Mode Game Onlyノード」を追加しよう。これを「Open Levelノード」の前に実行することで，プレイヤーの移動入力などを受け付ける状態で「FirstPersonMap」に進める

Set Input Mode Game Onlyノード
		プレイヤーの入力で，キャラクターを操作できるようにするノード

　本章の内容をすべて行った例を以下に示す。

・TitleMap
　- 入力モードをUI用に変更
　- マウスカーソルを表示する
　- WBP_Titleを作成し，画面に表示

TitleMap

・WBP_Title
　- 入力モードを「FirstPersonMap」用に変更
　- タイトルから「FirstPersonMap」へ移動

WBP_Title

・BP_FirstPersonCharacter
　- ゲームクリア時，一定時間後タイトルに戻る処理を追加

BP_FirstPersonCharacter

　さて，これで一通りの作業が完了した。
　処理は完成しているので，あとは思いつくままにオブジェクトと「的」を配置して，自分だけのゲームにしていこう。

テンプレートに配置されているオブジェクトを，複製して使いまわしていこう

「TitleMap」にもオブジェクトを配置してみよう。このレベルは，プレイヤーが移動できないようにしたので，はりぼてでも中身を見られることはない。なお，画像にあるスモークは「All/コンテンツ/StarterContent/ParticlesのP_Steam_Lit」をドラッグ＆ドロップで配置可能だ

　本作は「的」を撃ち落としていくシンプルなゲームなので，いろいろ遊びを入れてみよう。

物理演算を箱以外にも適用して，壁で「的」を隠しても楽しいだろう

見えるけど直接当てれず，跳弾を利用する「的」があっても良いかもしれない。透けているオブジェクトは，スターターコンテンツのガラスマテリアル「M_Glass」を使えば簡単に実装できる

　レベルデザインだけでなく，弾の速度や重力の設定を変えて，「弾の軌道」を変化させても面白い。軌道が変わったなら，「的」や障害物もそれに合わせて，別のアクセントを加えられるかもしれない。

　作って，プレイして，改造してを繰り返しながら，いろいろ試してほしい。ここからの試行と修正の繰り返しこそが，ゲーム制作の本番だと言っても過言ではない。
　アイデアが浮かんだら，すぐに試してみよう。すぐに試すのが難しいという場合は，どこかに書き留めておけば，いつか役に立つかもしれない。

　アイデアもそうだが，作ったものは可能な限り大事に保存しておこう。バックアップも忘れずに。
　行き詰った時に見返せば，自分の成長が分かったり，逆に「昔できてたんだから今もできるかも」と後押しされたり，黒歴史に顔面覆いたくなったりと，創作への刺激になる……こともあるので，ぜひ残してほしい。

　もしかしたら，その成長の記録が，何より面白い創作物になるかしれない。まあカッコつけたこの一文が，筆者の黒歴史になるかもしれないけれども。

---

　本記事では基礎的な内容に焦点を当てて解説を行ったが，これらはゲーム制作のほんの一部である。できることは山ほどあるし，学びは尽きない。
　今回はUnreal Engineを使用したが，ゲームエンジンや制作ツールは，ほかにも，さまざまなものがある。自分の興味や目的に合わせて好きなものを使ってほしい。どれを使うか迷おうと思えば，無限に迷えるので，「無料のものなら，とりあえずインストールしてみるか」というスタイルでいると，気楽かもしれない。

　ゲーム制作に限らず，創作は孤独な作業が多い。個人制作ならなおさらである。自分で手を動かさないと進捗はゼロだし，手を動かしたところで手探りだらけでゼロどころかマイナスになったりもする。
　しかし，進捗的にはマイナスでも，経験値が見えないだけで，どんどん溜まっていっているはずだ。正直，作りたいものと，作れそうなものと，実際に作れるもののギャップがいろいろあって辛いが，ゲームができあがっていくと，それを忘れるほどに，ものすごく嬉しい。

　はじめは「理屈はわからないけど，とにかく動いた」で十二分だ（マネして動かすだけでも難しい時もあるが……）。「自分にもできる」という体験を積み重ね，作ることの楽しさを味わってほしい。

　ゲーム制作仲間として，共に創作を楽しんでいきましょう！