お気に入りタイトル/ワード

タイトル/ワード名(記事数)

最近記事を読んだタイトル/ワード

タイトル/ワード名(記事数)

LINEで4Gamerアカウントを登録
【完全ガイド】制作経験ゼロの社会人向けゲーム制作入門。夏休みを使って,Unreal EngineのFPSミニゲームを完成させてみよう
特集記事一覧
注目のレビュー
注目のムービー

メディアパートナー

印刷2024/08/09 12:00

企画記事

【完全ガイド】制作経験ゼロの社会人向けゲーム制作入門。夏休みを使って,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」とする
画像集 No.220のサムネイル画像 / 【完全ガイド】制作経験ゼロの社会人向けゲーム制作入門。夏休みを使って,Unreal EngineのFPSミニゲームを完成させてみよう 画像集 No.221のサムネイル画像 / 【完全ガイド】制作経験ゼロの社会人向けゲーム制作入門。夏休みを使って,Unreal EngineのFPSミニゲームを完成させてみよう

12-2:「WBP_Clear」の「デザイナー」で「Canvas Panel」,「Text」の順に配置する
画像集 No.222のサムネイル画像 / 【完全ガイド】制作経験ゼロの社会人向けゲーム制作入門。夏休みを使って,Unreal EngineのFPSミニゲームを完成させてみよう 画像集 No.223のサムネイル画像 / 【完全ガイド】制作経験ゼロの社会人向けゲーム制作入門。夏休みを使って,Unreal EngineのFPSミニゲームを完成させてみよう

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

・アンカー「中央」
・位置X「0.0」
・位置Y「0.0」
・サイズX「何でもOK」
・サイズY「何でもOK」
・Alignment「0.5」「0.5」
・Size To Content「チェック有り」
画像集 No.224のサムネイル画像 / 【完全ガイド】制作経験ゼロの社会人向けゲーム制作入門。夏休みを使って,Unreal EngineのFPSミニゲームを完成させてみよう 画像集 No.225のサムネイル画像 / 【完全ガイド】制作経験ゼロの社会人向けゲーム制作入門。夏休みを使って,Unreal EngineのFPSミニゲームを完成させてみよう

 UIのサイズを自動的に調整する機能として,「Size To Content」というものがある。「Text」で表示する文字列を長くしてしまうと,「Text」の領域からはみ出してしまうが,「Size To Content」が有効だと,表示する文字列に合わせて「Text」の領域サイズを自動的に調整してくれるのだ。

 領域からはみ出ても表示はされるのだが,特定の位置に表示したい時に,ズレが問題になる。

 アンカーを中心にして「Alignment」を(0.5,0.5)にしても,「Textの中心」と「表示する文字列の中心」が異なると,文字列は中心から少しズレて表示される。
 興味のある人は,長めの文字列を設定した状態で「Size To Content」のチェックを切り替えれば,すぐに理解できるはずだ。

「Size To Content」無効(左),有効(右)。「アンカー」の位置が異なっているのが分かる
画像集 No.328のサムネイル画像 / 【完全ガイド】制作経験ゼロの社会人向けゲーム制作入門。夏休みを使って,Unreal EngineのFPSミニゲームを完成させてみよう 画像集 No.329のサムネイル画像 / 【完全ガイド】制作経験ゼロの社会人向けゲーム制作入門。夏休みを使って,Unreal EngineのFPSミニゲームを完成させてみよう

12-4:「Text」を「Game Clear!」にしよう
画像集 No.227のサムネイル画像 / 【完全ガイド】制作経験ゼロの社会人向けゲーム制作入門。夏休みを使って,Unreal EngineのFPSミニゲームを完成させてみよう 画像集 No.226のサムネイル画像 / 【完全ガイド】制作経験ゼロの社会人向けゲーム制作入門。夏休みを使って,Unreal EngineのFPSミニゲームを完成させてみよう

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

・Font:Typeface「Bold Italic」
・Font:Size「70」
・Shadow Offset「0.5」「0.5」
・Shadow Color:A「1.0」
画像集 No.228のサムネイル画像 / 【完全ガイド】制作経験ゼロの社会人向けゲーム制作入門。夏休みを使って,Unreal EngineのFPSミニゲームを完成させてみよう 画像集 No.229のサムネイル画像 / 【完全ガイド】制作経験ゼロの社会人向けゲーム制作入門。夏休みを使って,Unreal EngineのFPSミニゲームを完成させてみよう

 「Shadow Color」の「A」は,アルファ(α)値のことで,グラフィックスの分野では不透明度を表すものだ。UEでは0から1までの値を設定し,0に近いと透明,1に近いと不透明になる。

アルファ値 画像データなどの「不透明度」を設定する数値

一般的に最小値で「透明」,最大値で「不透明」を表現することが多い
数値の幅はアプリケーションごとに異なり,UEでは0から1の間で設定を行う

 文字にはもともと影が設定されているが,「A」が0.0,つまり透明なので「見えない」状態になっている。ここで「Shadow Color」の「A」を1.0にすることで,影が見えるようになった。

陰を付けた状態で「Game Clear!」の文字本体の,「A」をそれぞれ0.5(左),0.0(右)に設定した例。0.5にすると文字の裏にある影が透けて見え,0.0にすると文字本体が完全に透明になり,影だけが表示されている
画像集 No.360のサムネイル画像 / 【完全ガイド】制作経験ゼロの社会人向けゲーム制作入門。夏休みを使って,Unreal EngineのFPSミニゲームを完成させてみよう 画像集 No.359のサムネイル画像 / 【完全ガイド】制作経験ゼロの社会人向けゲーム制作入門。夏休みを使って,Unreal EngineのFPSミニゲームを完成させてみよう

 また,影の位置は「Shadow Offset」で上下左右のズレ幅を設定でき,好きな位置に影を設定できる。

12-6:ゲームクリア時に表示するUIが完成した。UIができたら,次は表示する処理の実装だ
画像集 No.230のサムネイル画像 / 【完全ガイド】制作経験ゼロの社会人向けゲーム制作入門。夏休みを使って,Unreal EngineのFPSミニゲームを完成させてみよう

12-7:「BP_FirstPersonCharacter」を開き,「AddScoreイベント」で実装した「Branchノード」の「True実行ピン」(クリア時に進む処理)から,「Create Widgetノード」を追加する。「Class」は「WBP_Clear」を指定しよう
画像集 No.231のサムネイル画像 / 【完全ガイド】制作経験ゼロの社会人向けゲーム制作入門。夏休みを使って,Unreal EngineのFPSミニゲームを完成させてみよう 画像集 No.232のサムネイル画像 / 【完全ガイド】制作経験ゼロの社会人向けゲーム制作入門。夏休みを使って,Unreal EngineのFPSミニゲームを完成させてみよう

12-8:「Create Widgetノード」の「Return Valueピン」からワイヤーを伸ばし,「Add to Viewportノード」を追加する。右図のようにしたら,「的」をすべて落とした際に「Game Clear!」と表示される
画像集 No.233のサムネイル画像 / 【完全ガイド】制作経験ゼロの社会人向けゲーム制作入門。夏休みを使って,Unreal EngineのFPSミニゲームを完成させてみよう 画像集 No.234のサムネイル画像 / 【完全ガイド】制作経験ゼロの社会人向けゲーム制作入門。夏休みを使って,Unreal EngineのFPSミニゲームを完成させてみよう

12-9:クリア画面を追加したが,このままでは「クロスヘア」や「スコア」が画面に表示されたままである。画面上から削除する処理を追加しよう。「WBP_Main」の「Return Valueピン」からワイヤーを伸ばし,「Remove from Parentノード」を追加する
画像集 No.252のサムネイル画像 / 【完全ガイド】制作経験ゼロの社会人向けゲーム制作入門。夏休みを使って,Unreal EngineのFPSミニゲームを完成させてみよう

Remove from Parentノード
画像集 No.330のサムネイル画像 / 【完全ガイド】制作経験ゼロの社会人向けゲーム制作入門。夏休みを使って,Unreal EngineのFPSミニゲームを完成させてみよう UIを画面上から削除するノード

12-10:画像のように「Add to Viewportノード」で,クリア画面を表示した後に続けて,「Remove from Parentノード」でクロスヘアなどを削除する処理を実装する。また,ワイヤーがノードと被って視認性が悪くなるので,整理しよう。ワイヤーをダブルクリックすれば「Rerouteノード」と呼ばれる点ができる。この点を移動すれば,ワイヤーも同時に動くので,整理が可能となる。
画像集 No.253のサムネイル画像 / 【完全ガイド】制作経験ゼロの社会人向けゲーム制作入門。夏休みを使って,Unreal EngineのFPSミニゲームを完成させてみよう

Rerouteノード
画像集 No.357のサムネイル画像 / 【完全ガイド】制作経験ゼロの社会人向けゲーム制作入門。夏休みを使って,Unreal EngineのFPSミニゲームを完成させてみよう ワイヤーに中間点を設け,整理できるノード

ワイヤーが対象としているデータによって,色や形が異なる
ワイヤーの任意の位置で,ダブルクリックすると作成できる

[左図にて,丸の赤枠で囲ったもの]
・ワイヤー未接続時の例

[左図にて,四角の赤枠で囲ったもの]
・オブジェクト型のデータを接続した例

12-11:「的」をすべて落とすと,スコア表示やクロスヘアが消え,「Game Clear!」が表示されるようになった
画像集 No.352のサムネイル画像 / 【完全ガイド】制作経験ゼロの社会人向けゲーム制作入門。夏休みを使って,Unreal EngineのFPSミニゲームを完成させてみよう


 せっかくのゲームクリアなので,音や演出を追加しよう。どちらもノード1つで実装可能だ。
 音はスターターコンテンツのものを再生し,演出は対戦FPSの試合終了時によくある,ゲームがスローモーションになる処理を実装してみよう。

画像のように「Play Sound 2Dノード」と「Set Global Time Dilationノード」を追加しよう
画像集 No.251のサムネイル画像 / 【完全ガイド】制作経験ゼロの社会人向けゲーム制作入門。夏休みを使って,Unreal EngineのFPSミニゲームを完成させてみよう

 1つ目は「Play Sound 2Dノード」だ。文字通り,音を2D空間で鳴らすものである。3D空間とは異なり,音の減衰などがない。スターターコンテンツから好きなものを鳴らしてみよう。筆者はガッシャーンという崩壊音の「Collapse_Cue」を設定した。

 2つ目は「Set Global Time Dilationノード」だ。これはゲーム全体をスローモーションにしたり,逆に早くしたりできる機能を持つ。デフォルトは「Time Dilation」が1.0であり,これを基準に値を小さくすると小さくした分だけ遅くなり,値を大きくするとその分だけ早くなる。
 今回は「Time Dilation」を0.1に設定して,ゲームの速度を10分の1のスローモーションにする演出を実装した。

Play Sound 2Dノード
画像集 No.331のサムネイル画像 / 【完全ガイド】制作経験ゼロの社会人向けゲーム制作入門。夏休みを使って,Unreal EngineのFPSミニゲームを完成させてみよう 減衰なしで音を再生するノード

BGMやUIの効果音などで利用する
Set Global Time Dilationノード
画像集 No.332のサムネイル画像 / 【完全ガイド】制作経験ゼロの社会人向けゲーム制作入門。夏休みを使って,Unreal EngineのFPSミニゲームを完成させてみよう ゲーム全体の「時間の遅れ」(time dilation)を設定するノード

「Time Dilationピン」は1.0を基準に,値を小さくすると,その分だけスローモーションにできる


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

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


BP_FirstPersonCharacter
画像集 No.388のサムネイル画像 / 【完全ガイド】制作経験ゼロの社会人向けゲーム制作入門。夏休みを使って,Unreal EngineのFPSミニゲームを完成させてみよう




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


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

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

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

13-1:[ファイル]から[新規レベル(Ctrl+N)]を押す
画像集 No.237のサムネイル画像 / 【完全ガイド】制作経験ゼロの社会人向けゲーム制作入門。夏休みを使って,Unreal EngineのFPSミニゲームを完成させてみよう

13-2:オープンワールドや基本的なマップなど,テンプレートを選択できる。ここでは「Basic」を選択して<作成>を押そう
画像集 No.238のサムネイル画像 / 【完全ガイド】制作経験ゼロの社会人向けゲーム制作入門。夏休みを使って,Unreal EngineのFPSミニゲームを完成させてみよう

13-3:新しくレベルが開いたら,画面左上の保存アイコンかCtrl+Sキーで,レベルを保存しよう
画像集 No.239のサムネイル画像 / 【完全ガイド】制作経験ゼロの社会人向けゲーム制作入門。夏休みを使って,Unreal EngineのFPSミニゲームを完成させてみよう

13-4:「名前を付けてレベルを保存する」が表示される。ここでは「All/コンテンツ/FirstPerson/Maps」(パスは「/All/Game/FirstPerson/Maps」と表示される)に,「TitleMap」という名前で保存しよう。なお,すでにある「FirstPersonMap」は,これまで編集していたレベルである
画像集 No.240のサムネイル画像 / 【完全ガイド】制作経験ゼロの社会人向けゲーム制作入門。夏休みを使って,Unreal EngineのFPSミニゲームを完成させてみよう

13-5:赤枠で示したアイコンをクリックし,レベルの設定メニューを開く
画像集 No.241のサムネイル画像 / 【完全ガイド】制作経験ゼロの社会人向けゲーム制作入門。夏休みを使って,Unreal EngineのFPSミニゲームを完成させてみよう

13-6:「ゲームモード:オーバーライドされません!」から「GameModeBase クラスを選択」,「GameModeBase」を選択する。これで,FPテンプレートが用意していたレベルの設定を,デフォルトのシンプルなものに変更できた。プレイヤーのキャラクターを「BP_FirstPersonCharacter」と設定していたゲームモードから,別のゲームモードに変更したので,同じようにキャラクターも「別のもの」に設定される。この変更で,「BP_FirstPersonCharacter」に実装したクロスヘアの表示処理などの実行を回避できる
画像集 No.242のサムネイル画像 / 【完全ガイド】制作経験ゼロの社会人向けゲーム制作入門。夏休みを使って,Unreal EngineのFPSミニゲームを完成させてみよう

 いきなり「ゲームモード」や「オーバーライド」,プレイヤーのキャラクターを「別のもの」にする,と訳の分からないことを言い出したと感じさせてしまったら申し訳ない。勢いで乗り切らず,しっかり説明しよう。

 まず,UEではさまざまなオブジェクトを,ブループリントで管理している。作った「的」はもちろん,キャラクターや銃など,ほとんどがブループリントである。
 ここで思い出してほしいのだが,キャラクターはレベルに配置していないのに,プレイすると「PlayerStart」の地点から自動的にスポーンしていた。

 操作しているキャラクターは「BP_FirstPersonCharacter」だと説明したが,なぜこれがスポーンしているのか疑問に思った人はいないだろうか。
 または,もし「別のキャラクター」を作って,そっちをスポーンさせたい時はどうすれば良いのか。

 そこで「ゲームモード」が登場する。「ゲームモード」は,プレイヤーのキャラクターなどを「どのブループリントにするか」という設定ができる,特殊なブループリントである。

「ゲームモード」は,データのみを設定するブループリントなので,ビューポートが表示されないことがある。特に支障はないので,そのままで大丈夫だ
画像集 No.378のサムネイル画像 / 【完全ガイド】制作経験ゼロの社会人向けゲーム制作入門。夏休みを使って,Unreal EngineのFPSミニゲームを完成させてみよう

「BP_FirstPersonGameMode」を開いてみると,「Default Pawn Class」が「BP_FirstPersonCharacter」に設定されていることが確認できる。この「Default Pawn Class」が,プレイヤーのキャラクターとしてスポーンさせるものを「どれにするか」という設定である
画像集 No.377のサムネイル画像 / 【完全ガイド】制作経験ゼロの社会人向けゲーム制作入門。夏休みを使って,Unreal EngineのFPSミニゲームを完成させてみよう

 さて,今回は「BP_FirstPersonCharacter」に実装した「UI表示の処理」を避けるため,プレイヤーのキャラクターを「BP_FirstPersonCharacter」以外に設定したい。
 UI表示の処理を行わないことが目的なので,変更先のキャラクターは何でも良い。

 そこでゲームモードのベースとなるクラス,つまり,基礎的な内容のゲームモードである「GameModeBase」に設定を変更したのである。
 しっかりやるなら,タイトル専用のゲームモードを「GameModeBase」から作成して,それを割り当てるところだが,今回はデフォルトのままで十分なので,そこまでする必要はない。

「GameModeBase」の中身はこのように設定されている。「Default Pawn Class」は「DefaultPawn」が指定されており,操作するキャラクターを「BP_FirstPersonCharacter」から「別のもの」にできた
画像集 No.376のサムネイル画像 / 【完全ガイド】制作経験ゼロの社会人向けゲーム制作入門。夏休みを使って,Unreal EngineのFPSミニゲームを完成させてみよう

ちなみに「DefaultPawn」はこんな姿。シンプルだが,移動機能などを備えている
画像集 No.379のサムネイル画像 / 【完全ガイド】制作経験ゼロの社会人向けゲーム制作入門。夏休みを使って,Unreal EngineのFPSミニゲームを完成させてみよう

 ゲームモードはプロジェクトごとに「デフォルトのゲームモード」を設定でき,FPテンプレートでは「BP_FirstPersonGameMode」が指定されている。
 そのため,基本的にどのレベルでも「BP_FirstPersonGameMode」がゲームモードとして設定されており,先ほど作った「TitleMap」も同じ設定がされている。

 そこで,今回は「TitleMap」のゲームモードだけを「GameModeBase」で上書きした。
 この設定などを「上書きする」ことを「オーバーライド」と呼ぶ。

オーバーライド 設定などを上書きすること
ゲームモード レベルの設定を行うブループリントクラス

「Default Pawn Class」(プレイヤーのキャラクター)などを設定する
Default Pawn Class ゲームプレイ時に「PlayerStart」からスポーンする初期キャラクター
BP_FirstPersonGameMode FPテンプレートで設定されているゲームモードクラス

[Default Pawn Class]
・BP_FirstPersonCharacter
GameModeBase 各ゲームモードのベースとなる,基礎的なゲームモードクラス

[Default Pawn Class]
・DefaultPawn

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

13-7:「コンテンツ ドロワー」(Ctrl+Spaceバー)を右クリックして,「ウィジェットブループリント」を作成。名前を「WBP_Title」にしよう
画像集 No.243のサムネイル画像 / 【完全ガイド】制作経験ゼロの社会人向けゲーム制作入門。夏休みを使って,Unreal EngineのFPSミニゲームを完成させてみよう 画像集 No.244のサムネイル画像 / 【完全ガイド】制作経験ゼロの社会人向けゲーム制作入門。夏休みを使って,Unreal EngineのFPSミニゲームを完成させてみよう

13-8:「WBP_Title」を開き,クリア画面と同様に「Canvas Panel」「Text」の順に配置しよう
画像集 No.245のサムネイル画像 / 【完全ガイド】制作経験ゼロの社会人向けゲーム制作入門。夏休みを使って,Unreal EngineのFPSミニゲームを完成させてみよう 画像集 No.246のサムネイル画像 / 【完全ガイド】制作経験ゼロの社会人向けゲーム制作入門。夏休みを使って,Unreal EngineのFPSミニゲームを完成させてみよう

13-9:この「Text」をゲームタイトルのロゴとして使おう。「My First FPS」に文字を変更して,「Font」や「Shadow」を自由にカスタマイズしよう
画像集 No.247のサムネイル画像 / 【完全ガイド】制作経験ゼロの社会人向けゲーム制作入門。夏休みを使って,Unreal EngineのFPSミニゲームを完成させてみよう

13-10:タイトルロゴができたら,「スタートボタン」を作成しよう。「パレット」から「Button」を追加する
画像集 No.248のサムネイル画像 / 【完全ガイド】制作経験ゼロの社会人向けゲーム制作入門。夏休みを使って,Unreal EngineのFPSミニゲームを完成させてみよう

13-11:ボタンの「Size To Content」を有効にする
画像集 No.249のサムネイル画像 / 【完全ガイド】制作経験ゼロの社会人向けゲーム制作入門。夏休みを使って,Unreal EngineのFPSミニゲームを完成させてみよう

13-12:配置したボタンに文字を付けてスタートボタンにしよう。「パレット」から「Text」を,配置中のボタンへドラッグ&ドロップする
画像集 No.250のサムネイル画像 / 【完全ガイド】制作経験ゼロの社会人向けゲーム制作入門。夏休みを使って,Unreal EngineのFPSミニゲームを完成させてみよう

13-13:ボタンに文字が追加された。「Size To Content」を有効にしたので,テキストのサイズに合わせて,ボタンの大きさも自動調整されている
画像集 No.256のサムネイル画像 / 【完全ガイド】制作経験ゼロの社会人向けゲーム制作入門。夏休みを使って,Unreal EngineのFPSミニゲームを完成させてみよう

13-14:ボタンに追加したテキストを「Start」にして,色を自由に変更しよう
画像集 No.254のサムネイル画像 / 【完全ガイド】制作経験ゼロの社会人向けゲーム制作入門。夏休みを使って,Unreal EngineのFPSミニゲームを完成させてみよう 画像集 No.255のサムネイル画像 / 【完全ガイド】制作経験ゼロの社会人向けゲーム制作入門。夏休みを使って,Unreal EngineのFPSミニゲームを完成させてみよう

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

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

レベルブループリント 各レベルが持つ,独自のブループリントのこと

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

13-15:赤枠で囲ったアイコンから,「レベルブループリントを開く」を押す
画像集 No.257のサムネイル画像 / 【完全ガイド】制作経験ゼロの社会人向けゲーム制作入門。夏休みを使って,Unreal EngineのFPSミニゲームを完成させてみよう

13-16:「レベルブループリント」が表示された。使い方は,他のブループリントと同じである
画像集 No.258のサムネイル画像 / 【完全ガイド】制作経験ゼロの社会人向けゲーム制作入門。夏休みを使って,Unreal EngineのFPSミニゲームを完成させてみよう

13-17:「BeginPlayノード」(ゲーム開始時に動くイベント)に,「WBP_Title」の作成と表示処理を実装しよう
画像集 No.259のサムネイル画像 / 【完全ガイド】制作経験ゼロの社会人向けゲーム制作入門。夏休みを使って,Unreal EngineのFPSミニゲームを完成させてみよう

13-18:プレイするとUIが表示された。しかし,マウスカーソルが表示されないので,ボタンが押せない
画像集 No.260のサムネイル画像 / 【完全ガイド】制作経験ゼロの社会人向けゲーム制作入門。夏休みを使って,Unreal EngineのFPSミニゲームを完成させてみよう

 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」にチェックを入れることで,マウスカーソルを表示できる
画像集 No.261のサムネイル画像 / 【完全ガイド】制作経験ゼロの社会人向けゲーム制作入門。夏休みを使って,Unreal EngineのFPSミニゲームを完成させてみよう

Get Player Controllerノード
画像集 No.333のサムネイル画像 / 【完全ガイド】制作経験ゼロの社会人向けゲーム制作入門。夏休みを使って,Unreal EngineのFPSミニゲームを完成させてみよう 「Player Controller」を取得するノード

「Player Controller」は,「プレイヤー」と「操作対象のキャラクター」の橋渡しをする役割をしており,入力操作系の処理が実装されている
Set Input Mode UI Onlyノード
画像集 No.334のサムネイル画像 / 【完全ガイド】制作経験ゼロの社会人向けゲーム制作入門。夏休みを使って,Unreal EngineのFPSミニゲームを完成させてみよう UIだけが,プレイヤーの入力を受け取れるように制限するノード
Set Show Mouse Cursorノード
画像集 No.335のサムネイル画像 / 【完全ガイド】制作経験ゼロの社会人向けゲーム制作入門。夏休みを使って,Unreal EngineのFPSミニゲームを完成させてみよう 「ShowMouseCursor変数」の値を変更するノード

「PlayerController」には「ShowMouseCursor変数」が設定されており,この変数が「True」だとマウスカーソルが表示される

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

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

13-20:「WBP_Title」に配置したボタンを選択して,「詳細」から「On Clicked」の「+」ボタンを押す
画像集 No.262のサムネイル画像 / 【完全ガイド】制作経験ゼロの社会人向けゲーム制作入門。夏休みを使って,Unreal EngineのFPSミニゲームを完成させてみよう

13-21:「On Clicked」は,「ボタンを押した時」にトリガーされるイベントだ。実行ピンからワイヤーを伸ばし,「Open Level(By Object Reference)ノード」を追加しよう。これは,指定したレベルを開くノードで,レベルの切り替えで利用できる
画像集 No.263のサムネイル画像 / 【完全ガイド】制作経験ゼロの社会人向けゲーム制作入門。夏休みを使って,Unreal EngineのFPSミニゲームを完成させてみよう

13-22:「Level」を「FirstPersonMap」に設定する
画像集 No.264のサムネイル画像 / 【完全ガイド】制作経験ゼロの社会人向けゲーム制作入門。夏休みを使って,Unreal EngineのFPSミニゲームを完成させてみよう

Open Level(By Object Reference)ノー
画像集 No.336のサムネイル画像 / 【完全ガイド】制作経験ゼロの社会人向けゲーム制作入門。夏休みを使って,Unreal EngineのFPSミニゲームを完成させてみよう 「Level」に指定したレベルを開く(遷移する)ノード

操作中のキャラクターが別のレベルへ移動するのではなく,開いたレベルの設定で新しくキャラクターが読み込まれる

13-23:タイトル画面の「Start」ボタンを押せば,レベルが切り替わるようになった
画像集 No.353のサムネイル画像 / 【完全ガイド】制作経験ゼロの社会人向けゲーム制作入門。夏休みを使って,Unreal EngineのFPSミニゲームを完成させてみよう

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

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

13-24:「Get Player Controllerノード」を配置し,そこから「Set Input Mode Game Onlyノード」を追加しよう。これを「Open Levelノード」の前に実行することで,プレイヤーの移動入力などを受け付ける状態で「FirstPersonMap」に進める
画像集 No.289のサムネイル画像 / 【完全ガイド】制作経験ゼロの社会人向けゲーム制作入門。夏休みを使って,Unreal EngineのFPSミニゲームを完成させてみよう

Set Input Mode Game Onlyノード
画像集 No.337のサムネイル画像 / 【完全ガイド】制作経験ゼロの社会人向けゲーム制作入門。夏休みを使って,Unreal EngineのFPSミニゲームを完成させてみよう プレイヤーの入力で,キャラクターを操作できるようにするノード

 レベルの切り替え方法を学んだので,タイトルから「FirstPersonMap」に進むだけでなく,ゲームクリア時にタイトルに戻る処理を追加してみよう。
 ゲームクリア時に,すぐにタイトルに戻ると味気ないので,数秒待ってからタイトルに戻る処理を実装する。

 「BP_FirstPersonCharacter」を開き,ゲームクリア時の処理に続けて,「Delayノード」「Open Level(By Object Reference)ノード」の順に接続する。
 「Delayノード」は「Duration」(持続時間)に指定した時間待つという処理で,一定時間経過後に右に接続された処理を実行する。

ゲームクリア時,一定時間経過後にタイトルに戻る処理を追加した例
画像集 No.267のサムネイル画像 / 【完全ガイド】制作経験ゼロの社会人向けゲーム制作入門。夏休みを使って,Unreal EngineのFPSミニゲームを完成させてみよう

 注意してほしい点が1つある。
 「Set Global Time Dilationノード」で,ゲームをスローモーションにしている場合,この「Delayノード」もスローモーションの影響を受ける。
 例えばゲームの速度を10分の1にした際,「Delayノード」の「Duration」を10.0とすると,プレイヤー視点で10秒ではなく100秒待つ処理になる。
 画像では「Time Dilation」が0.1の環境で,5秒待つ処理を実装するために,「Duration」に0.5を指定している。

Delayノード
画像集 No.338のサムネイル画像 / 【完全ガイド】制作経験ゼロの社会人向けゲーム制作入門。夏休みを使って,Unreal EngineのFPSミニゲームを完成させてみよう 「Duration」に指定した秒数「待つ」ノード

一定時間待った後,「Completed実行ピン」へ進む


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

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


TitleMap
画像集 No.390のサムネイル画像 / 【完全ガイド】制作経験ゼロの社会人向けゲーム制作入門。夏休みを使って,Unreal EngineのFPSミニゲームを完成させてみよう


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


WBP_Title
画像集 No.391のサムネイル画像 / 【完全ガイド】制作経験ゼロの社会人向けゲーム制作入門。夏休みを使って,Unreal EngineのFPSミニゲームを完成させてみよう


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

BP_FirstPersonCharacter
画像集 No.389のサムネイル画像 / 【完全ガイド】制作経験ゼロの社会人向けゲーム制作入門。夏休みを使って,Unreal EngineのFPSミニゲームを完成させてみよう


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

テンプレートに配置されているオブジェクトを,複製して使いまわしていこう
画像集 No.291のサムネイル画像 / 【完全ガイド】制作経験ゼロの社会人向けゲーム制作入門。夏休みを使って,Unreal EngineのFPSミニゲームを完成させてみよう 画像集 No.293のサムネイル画像 / 【完全ガイド】制作経験ゼロの社会人向けゲーム制作入門。夏休みを使って,Unreal EngineのFPSミニゲームを完成させてみよう
画像集 No.292のサムネイル画像 / 【完全ガイド】制作経験ゼロの社会人向けゲーム制作入門。夏休みを使って,Unreal EngineのFPSミニゲームを完成させてみよう 画像集 No.294のサムネイル画像 / 【完全ガイド】制作経験ゼロの社会人向けゲーム制作入門。夏休みを使って,Unreal EngineのFPSミニゲームを完成させてみよう

「TitleMap」にもオブジェクトを配置してみよう。このレベルは,プレイヤーが移動できないようにしたので,はりぼてでも中身を見られることはない。なお,画像にあるスモークは「All/コンテンツ/StarterContent/ParticlesのP_Steam_Lit」をドラッグ&ドロップで配置可能だ
画像集 No.295のサムネイル画像 / 【完全ガイド】制作経験ゼロの社会人向けゲーム制作入門。夏休みを使って,Unreal EngineのFPSミニゲームを完成させてみよう 画像集 No.142のサムネイル画像 / 【完全ガイド】制作経験ゼロの社会人向けゲーム制作入門。夏休みを使って,Unreal EngineのFPSミニゲームを完成させてみよう

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

物理演算を箱以外にも適用して,壁で「的」を隠しても楽しいだろう
画像集 No.276のサムネイル画像 / 【完全ガイド】制作経験ゼロの社会人向けゲーム制作入門。夏休みを使って,Unreal EngineのFPSミニゲームを完成させてみよう 画像集 No.277のサムネイル画像 / 【完全ガイド】制作経験ゼロの社会人向けゲーム制作入門。夏休みを使って,Unreal EngineのFPSミニゲームを完成させてみよう

見えるけど直接当てれず,跳弾を利用する「的」があっても良いかもしれない。透けているオブジェクトは,スターターコンテンツのガラスマテリアル「M_Glass」を使えば簡単に実装できる
画像集 No.356のサムネイル画像 / 【完全ガイド】制作経験ゼロの社会人向けゲーム制作入門。夏休みを使って,Unreal EngineのFPSミニゲームを完成させてみよう

 「ガラス」といえば,壊れやすいイメージを持っている人も多いだろう。マテリアルは,あくまで「見た目を変えるもの」なので,マテリアルを変えたから壊れやすくなる性質にはならない。

 もし「粉々に砕きたい」という人がいれば,「Chaos Destruction」という機能がおすすめだ。細かい内容の理解を置いておけば初心者でも試しやすい部類かつ,かなり楽しい機能なので興味のある人は挑戦してみてほしい。

弾を当てると砕けるようにした例。砕ける様子が画像でも分かりやすいように,マテリアルをガラスからレンガに変更している
画像集 No.354のサムネイル画像 / 【完全ガイド】制作経験ゼロの社会人向けゲーム制作入門。夏休みを使って,Unreal EngineのFPSミニゲームを完成させてみよう

Epic Developer Community
「Destruction クイック スタート」


 上記サイトを参考にするか,「UE5 Chaos Destruction」などのワードで検索して自分に合った解説を探すのも良い。
 なお,上記サイトを参考にする場合,説明通りに「BP_FirstPersonProjectile」の内容を削除すると,「物理演算が有効のオブジェクト」を吹き飛ばさなくなる。
 下図を参考にして,既存のノードを残しながら実装してほしい。

BP_FirstPersonProjectileの改造例
画像集 No.355のサムネイル画像 / 【完全ガイド】制作経験ゼロの社会人向けゲーム制作入門。夏休みを使って,Unreal EngineのFPSミニゲームを完成させてみよう

 実はこれまで発射していた弾は,青い箱のように「物理演算が有効のオブジェクト」を,直接「物理的」に吹き飛ばしていたのではない。
 弾がヒットしたオブジェクトの,物理演算が有効なら「瞬発的な力を加える」という処理を,ノードで実装している。
 そのため,「BP_FirstPersonProjectile」で既存の処理を削除すると,「物理演算が有効のオブジェクト」を吹き飛ばせなくなるので注意だ。

 また,Unreal Engineのバージョンが異なると,実装方法も変わることがあるので注意してほしい。
 バージョンが同じでも,英語表記と日本語表記による違いもある。公式サイトでは「Uniform(均一)」と解説されている部分が,エディタ上では「一様化」と表現されていたりする。


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

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

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

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



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

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

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

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

  • 関連タイトル:

    Unreal Engine

  • この記事のURL:
4Gamer.net最新情報
プラットフォーム別新着記事
総合新着記事
企画記事
スペシャルコンテンツ
注目記事ランキング
集計:08月08日〜08月09日