Return to site

UE4のBPのみで脱出ゲームをサクッと構築する方法

ノンプログラマ向け。

· Unreal Engine 4,チュートリアル

皆様、初めまして。maremonのチアゴこと伊藤忍(ペンネーム)です。普段は3DCGのお仕事をしています。

今回は私がBPの勉強のために作った、簡単な脱出ゲームの構築方法を紹介します。読んでいて足りない情報や誤りがあればコメントして頂ければ幸いです。

日本では特に根強いファンがいる脱出ゲーム。毎週アプリストアには新作脱出ゲームがリリースされているかと思います。今回制作するのはアプリのような脱出ゲームです。

完成品はこちらから無料でDLできます。

目次

  1. ゲームの全体の流れを制作
  2. BPを制作
  3. ゲームの構築
  4. まとめ

1. ゲームの全体の流れを制作

スタートからゴールまでの流れが分かっていれば、迷わずゲーム制作をできると思います。

チャート風のサービスは多数存在しますが、私はGoogle図形描画をお勧めします。

色々な理由がありますが、使いやすく共有しやすいです。もし複数人で開発する場合、リアルタイムでゲームのフローを共有できたり編集できます。

今回の脱出ゲームのフローはこんな感じです。

UE4 脱出ゲームフロー

場所や仕掛けの種類などを色や形で使い分ければ、見返した際に迷うことはないかと思います。

※まだ試行錯誤中なので、さらによい方法はあると思います。

ちなみに今回デザインはほとんど行っていません。モデル、テクスチャなどはこちらの素晴らしいローポリアセットセットを使用しました。たったの数十ドル前後で大幅な時間が削減できます。

キャラクター、カメラ設定をして、フローに沿ってアセットを置いていきます。ライティングも同時に設定していきましょう。もし仕掛けに足りないモデルがあればモデリングしていきます。

2. BPを制作

(タッチイベント,ヒントを表示する機能,セーブ機能など)

今回のメインの部分です。

BP制作の目次

  1. UIBP(スタートメニュー、ゲーム内メニュー)
  2. タッチイベントBP(プレーヤーがタッチまたはマウスクリックした際のBP。アイテムをゲットするときや仕掛けを解く時など)
  3. ヒントBP(ゲームの進行状況に応じてヒントを表示する機能)
  4. セーブとロード
  5. ゴール

大きく分けると上記のようになります。

 

目標

A.簡単に色々な仕掛けを作れるようになること。

B.変更や新たな仕掛けを追加したいときに楽に対応できること。

2-1. UIBP
(スタートメニュー、ゲーム内メニューなど)

スタートメニュー

UE4 スタートメニュー

今回はメニューを個別に分けずに一つのウェジットブループリント内に入れています。

メニューの塊をCanvasPanelで区切ってレイアウトしていき、PCとスマートフォンで順次レイアウト崩れがないか確認していきます。サイズを指定したい要素をScaleBoxやSizeBoxで囲んでいきます。

動きはアニメーション機能をつかって、ボタンを押した際にアニメーションを再生させます。配置の順位はZOrderで前面背面を指定していきます。

UE4 スタートアニメーション
UE4 UIアニメーション
UE4 レベル分け

次に、スタートボタンを押したら必要なレベルのみをロードするようレベル分けをします。

パーシスタントレベル内ではスタートメニューのみ表示させ起動時ロードを速くします。

スタートボタンを押した際には2つのレベルEpisode_01とEpisode_02をロードさせます。

(Episode_01はイベントなどを格納するレベル、Episode_02はスタティックメッシュとライトのみです。)

イベントなどを編集する時にはEpisode_02を非表示にして編集するイメージです。

UE4 ロードレベルストリーミング

メインUI

次にゲーム画面に常に表示されるメインのUIの設定です。

メニューボタン、アイテムを格納する欄、カメラを移動するボタンなどを設定していきます。

UE4 メインメニュー

ウィンドウ切り替えはExecute Console Command でr.SetRes を使用して指定します。

UE4 ウィンドウサイズ変更

言語の切り替えもExecute Console Commandを使用します。culture=○○で指定します。

それぞれの言語の翻訳内容はUE4のローカライゼーションダッシュボードを使用しました。パッケージの設定から使用する言語を指定できます。

UE4 言語切り替え

メインUI:アイテムボックス

アイテムボックスは、アイテムをゲットした時と、持っているアイテムをクリックする時に同じ動作をするので関数にします。

関数の中身はキャラクターがアイテムを持てるかどうかを判断(今回は2個まで同時に持てる)、持てる場合はキャラクターにアイテムを持たせます。

アイテム欄に表示させる画像は、後程紹介するタッチイベントBPのアイテム設定欄を使用します。

メインUI:移動ボタン

次にカメラの移動ボタンです。今回の脱出ゲームは4面(一応南北東西という別け方)しかないのでそれに対応していきます。

仕掛けやヒントがある場所や、アイテムが有る場所はアップしてよく見えるようにします。
アップの際は別カメラに切り替えます。

メインUI:メニューボタン

ゲーム中の画面に表示されているメニューボタンを押すと、アニメーションで下画像のメニューが出現します。

上から順に簡単に説明いたします。

  • 言語切り替え  スタートメニュと同様にExecute Console Commandを使用し切り替え。
  • BGM  一度押したらBGMの音量を0にし、もう一度押すと音量を戻します。ついでに音符のアイコンをSet Brushでミュートの音符に変更します。
  • ウィンドウサイズ変更  こちらもスタートメニュと同様にExecute Console Commandを使用し切り替え。
  • 操作説明  ボタン押した際にUIアニメーションで前面に説明画像を表示させています。
  • リスタート  OpenLevelを使用し、スタートレベルをリロードさせます。
  • クレジット  ボタンを押した際にUIアニメーションで前面に説明画像を表示させています。
  • ゲーム終了  QuitGameを使用しゲームを終了します。

2-2. タッチイベントBP

(プレーヤーがタッチまたはマウスクリックした際のBP。アイテムをゲットするときや仕掛けを解く時など)

脱出ゲームの制作には様々な仕掛けが必要です。特定のアイテムを持っているとオブジェクトが動く、スイッチがONだと仕掛けが動く、など想像できます。さらにこれらのイベントが発動するタイミングは多種多様です。

ですので、今回はBPのみを使用して脱出ゲームテンプレートを制作し、第三者でもUE4のレベルエディタ内で脱出ゲームを制作できるようにしていきます。

ここで紹介する方法は、色々な場面で活用できますので覚えといて損はないと思います。

まずは列拳型を一つ作り、列拳型に実装したいイベントを設定していきます。

新しい仕掛けで必要な機能を追加したい場合は列拳型に増やしていきましょう。

仕掛けや機能の種類があまりにも増えるようならDataTableを制作してCSV形式などで管理したほうが良いと思います。

カメラがアップか非アップかのチェック、アイテムをゲット、エフェクトを表示、スイッチ機能のON/OFF、アイテムを動かすなどなど様々な機能を持たせます。これをタッチイベント用のBPでスイッチを使用して切り替えます。

イベントタッチBPをレベルに設定した後、どのような機能を持たせるかを設定していきます。

これにより一つのBPでいろいろなイベント、仕掛けを実装できます。基本的な流れは下図を参照ください。

レベルエディタ内でフロー(カメラをチェック→アイテムをゲット→イベント終了。等)を設定できるので、修正、変更が大変楽です。

2-3. ヒントBP

(ゲームの進行状況に応じてヒントを表示する機能)

ゲームに詰まったとき、ゲームの進行状況に応じて登録したヒントの文章を表示させます。

メニューのヒントボタンを押すたびに現段階のヒントナンバーを検索し、タッチイベントBPが終了しているかどうか判別します。終了していた場合は次のヒントナンバーを検索し、もし終了していなかった場合はその番号に適した文を表示する、という流れです。

2-4. セーブとロード

UE4にはプリセットでセーブ機能があります。BPを新規に作成し、SaveGameクラスを親に指定します。

メニューボタンを押した後、すでにセーブがあるかどうかを判別します。

セーブが無い場合は、新しくセーブを作成し変数に入れ初期設定をします。

今回セーブする内容は、ゲームの進行状況によって必要な変数を検索させ、変数に格納します。その後初期設定で行った変数群をレベルで検索させ、現状況を格納してSaveGametoSlotを使用しセーブします。

セーブが完了する、プロジェクト内にセーブ格納ファイルが自動で生成されます。

ロードはセーブの逆のことを行います。

先にLoadGameFromSlotを使用し、GameDateをロードし変数に格納、その後GameDateの内容をレベル内に格納していきます。

セーブとロードに関しては公式ドキュメントに詳しく記載されています。

http://api.unrealengine.com/JPN/Gameplay/SaveGame/Blueprints/index.html

2-5. ゴール

一つのカメラにゴール設定を追加します。

要はゴールカメラをクリックしたらゴール(ゴールUIを表示する)という単純な設定です。これは脱出ゲームの性質上ドアを開けた後がゴールになることが多いので、このようにしました。

3. ゲームの構築

最終的に使用した主なBPは三つです。カメラ破壊、そしてタッチイベントの3つのブループリントのみです。アイコンを設定してあげるとレベル編集が楽になります。

レベルに実際に配置した例です。

4. まとめ

最後は駆け足になりましたが、簡単な脱出ゲームテンプレートの作り方です。ここまで読んでくださり。これを機会に貴方もUE4を使用した脱出ゲームを制作してみてはいかがでしょうか?

また今回制作したゲームはGumroadまたはitch.ioからDLできます。English、日本語、Simplified Chineseに対応しています。よかったらDLし遊んでみてください。

All Posts
×

Almost done…

We just sent you an email. Please click the link in the email to confirm your subscription!

OKSubscriptions powered by Strikingly