5

【UE】ブループリント解説|ターン制システム実装方法

みなさんこんにちは、NakaRyoです。

今回は Unreal Engine(ブループリント)でターン制システムを導入する方法 について詳しく解説していきます。

なお、本記事は過去記事の続きになっています。

理解を深めるために、まずは以下の記事をご参照いただけるとスムーズかと思います。

Step1:WidgetBPの準備

過去記事で作成したWBP_BET側での準備をしていきます。

①新規TEXT BLOCKの導入

デザイナータブ画面で以下設定します。

TEXT名:Turn 1/ 5

Font Size:100

IsVariableにチェック

位置及びアンカーは左上に配置しました。

image

② Custom Eventの作成

ShowPlayerBet (Custom Event)

役割:プレイヤーのBET表示を更新

作成手順

  1. グラフ上で右クリック → 「Add Custom Event」を選択 → 名前を ShowPlayerBet に設定
  2. Inputに InBet(型:Integer)を追加

ノード接続

ShowPlayerBetのInBetピンとToText (Integer)のValueピンと接続

image

グラフ上の空きスペースを右クリックし、Format Textノードを設置

Format に “BET:{Bet}” と入力(入力後、Betピンが出現することを確認)

Format Text Bet ピン(Text型)とToTextのReturnValue を接続

image

Format TextのResultピンとSetText (Text) のInTextピンを接続

SetTextのTargetピンとText Block Player BET Select(BET SELECTのテキスト部分を表示)を接続

ShowPlayerBet実行ピンとSetTextの実行ピンを接続

image

※BET SELECTのテキスト部分の場所(デザインタブ)

image

ShowCPUBet (Custom Event)

役割:CPUのBET表示を更新

作成手順

新規Custom Eventを作成 → 名前 ShowCPUBet

Inputに InBet(型:Integer)を追加

ノード接続

ShowCPUBetのInBetピンとTo Text(Integer)を接続

Format Textをノード設置し、テキスト欄にCPU BET:{Bet}と入力

入力後、Format TextのBetピンとTo Text(Integer)のReturn Valueピンを接続

image

Format TextのResultピンとSet Text(Text)をノード接続

Set Text(Text)のTargetピンとGet TextBlock_CPU BET SELECETを接続

ShowCPUBetの実行ピンとSetText(Text)の実行ピンを接続

image

Get TextBlock_CPU BET SELECETは過去記事で作成しておりますので、

テキストブロック作成方法については以下参照頂けますと幸いです。

EnableBetButtons (Custom Event)

役割:BETボタンの有効・無効制御

作成手順

Custom Event EnableBetButtons を作成

Inputに bEnable(型:Boolean)を追加

ノード手順:

EnableBetButtonsの実行ピンとSet Is Enabled(ウィジェット⇒Set Is Enabled)を接続。

※変数⇒動作⇒Set Is Enabledではなくウィジェット⇒Set Is Enabledのノードを選択してください。

image

Set Is EnabledのTargetとGet Button_BET5を接続

EnableBetButtonsのEnableとSet Is EnabledのIn Is Enabledを接続

image

Set is Enabledの実行ピンとSet Is Enabled(Button_BET10用)の実行ピンを接続

TargetをGet Button_BET10と接続

EnableBetButtonsのEnableとSet Is EnabledのIn Is Enabledを接続

image

Button_15とButton_20と上記のノードを同じように接続します。

image

UpdateTurnText (Custom Event)

役割:ターン表示更新

Input

Current(Integer)

Max(Integer)

ノード手順:

UpdateTurnTextのCurrentピントとTo Text(Integer)を接続

MaxピンとTo Text(Integer)を接続

image

グラフの空きスペースにFormat Textを設置し、テキスト欄にTurn {Cur} / {Max}を入力

Format TextのCurピンとCurrentピンと接続しているTo Text(Integer) のReturn Valueと接続

Format TextのMaxピンとMaxピンと接続しているTo Text(Integer) のReturn Valueと接続

image

Format TextのResultピンから、Set Text(Text)と接続

※Set Text(Text)をノード検索する際に、状況に合わせた表示のチェックを外すとヒットしやすいです。

Set Text(Text)のTargetピンとGet TextBlock_Turnを接続

UpdateTurnTextの実行ピンとSet Text(Text)の実行ピンを接続

image

ShowResultText (Custom Event)

Input

InText(Text型)

ノード手順:

ShowResultTextの実行ピンとSet Text(Text)の実行ピンを接続

ShowResultTextのInTextピンとSet Text(Text)のInTextピンを接続

Set TextのTargetピンとGet TextBlock_WINを接続

image

コンパイルして保存します。

Step2:GameModeBP実装

ターン制システム導入用に新しいGameModeブループリントを作成します。

① BP_GameModeの作成

コンテンツフォルダ → 新規フォルダ「BluePrint」を作成

フォルダ内右クリック → 「ブループリントクラス」 → 「GameModeBase」選択

image

ファイル名を BP_GameMode に変更 → 開く

② 変数設定

マイブループリント⇒変数+を選択し、新規変数を作成していきます。

※デフォルト値は、変数作成し、コンパイル後に編集可能

変数名:CurrentTurn 変数型:Integer(デフォルト値= 0)

変数名: MaxTurns 変数型:Integer(デフォルト値= 5)

変数名: PlayerBet 変数型:Integer(デフォルト値 = 0)

変数名: CPUBet   変数型:Integer(デフォルト値 = 0)

変数名: WBP_Ref   変数型:WBP_BET (Object Reference)

※変数選択時⇒検索wbp_betしオブジェクト参照を選択

image

③新規関数作成

マイブループリント⇒関数+を選択し、以下新規関数を作成していきます。

・StartTurn():役割⇒ターン開始処理(CurrentTurn増加、UIの初期化、ボタン有効化等)

・SubmitPlayerBet インプット名:InBet インプット型:Integer

image

・RandomCPUBet()⇒役割:CPUBetを決定(ランダム)して CPUBet にセット

・ResolveRound() ⇒役割:PlayerBet vs CPUBet を比較、クリーチャー数増減、Widgetへ結果通知

・CheckEndTurn()⇒役割:勝敗及びターン数到達(>=MaxTurns) の判定 → 次Turn or EndGameへ移行

・EndGame() ⇒役割:勝者表示やゲーム終了処理(UI遷移など)

image

④関数ノード実装

BP_GameMode Event BeginPlay

ノード手順

イベントグラフを開いて、Event Begin Playの実行ピンとCreate Widgetを接続します。

Create WidgetのclassをWBP_BETに指定します。

image

Set WBP_Refを配置し、Create WBP_BET Widgetの実行ピンとReturn Valueピンを接続します。

image

Set WBP_Refの実行ピンとターゲットピンをAdd to Viewportと接続します。

Get Player Controllerを空いているスペースに配置し、Return ValueとShow Mouse Cursorのターゲットと接続します。

Add to Viewportの実行ピンとSet Show Mouse Cursorの実行ピンを接続します。

image

Set Show Mouse Cursorの実行ピンからStart Turn(関数呼び出し)の実行ピンと接続します。

image

コンパイル保存します。

BP_GameMode Start Turn

マイブループリントの関数:Start TurnのダブルクリックでStart Turn関数グラフを開きます。

image

ノード手順:

Get CurrentTurnのノード配置し、Addと接続

AddのBピンに1を入力

AddのintegerピンとSet Current Turnのintegerピンを接続

Start Turnの実行ピンとSet CurrentTurnの実行ピンを接続

image

Get WBP_Refをノード設置し、ワイヤー展開をおこないUpdate Turn Text(関数の呼び出し)と接続

Update Turn Text(関数の呼び出し)のCurrentピンとGet Current Turnを接続

Update Turn Text(関数の呼び出し)のMaxピンとGet MaxTurnを接続

SetCurrent Turnの実行ピンとUpdate Turn Textの実行ピンを接続

image

Get WBP_Ref をグラフ空きスペースに設置し、EnableBetButtons(関数の呼び出し)のTargetと接続

EnableBetButtons(関数の呼び出し)のEnable の部分にチェックを入れる

Update Turn Textの実行ピンとEnableBetButtonsの実行ピンを接続。

image

WBP_Refをグラフの空きスペースに設置⇒Show Player Bet(関数の呼び出し)のTargetピンと接続

Show Player BetのInBetピンとGet Player Betピンを接続

Enable Bet Buttonsの実行ピンとShow Player Betの実行ピンを接続

image

Show CPU Bet(関数の呼び出し)も同様に接続します。

Targetピン⇒Get WBP_Refと接続

InBetピン⇒Get CPUBETと接続

image

コンパイルして保存します。

BP_GameMode SubmitPlayerBet設定

マイブループリントのSubmitPlayerBetをダブルクリックし、関数グラフを開きます。

image

ノード手順:

Set Player Betをグラフ上に設置し、SubmitPlayerBetの実行ピンとSet Player Betの実行ピンを接続

同じくSubmitPlayerBetのIn BetピンとSet Player BetのPlayer Betピンを接続

image

Get WBP_Refをグラフの空きスペースに設置し、Show Player BETのTargetと接続

Show Player BETのIn BetピンとGet Playerピンを接続

image

Show Player Betの実行ピンとEnable Bet Buttonsの実行ピンを接続

Enable Bet ButtonsのTargetピンとGet WBP_Refを接続

Enable Bet ButtonsのEnableのチェックは外したままにします(False状態)

image

Enable Bet Buttonsの実行ピンとRandom CPU BET(関数の呼び出し)の実行ピンを接続

Random CPU BETのTargetピンとGet WBP_Refを接続

image

Random CPU BETの実行ピンとShow CPU BETの実行ピンを接続します。

Show CPU BETのTargetピンとGet WBP_Refを接続します。

Show CPU BETのIn BetピンとGet CPUBETを接続します。

image

Show CPU BETの実行ピンとResolveRound()の実行ピンを接続します。

image

コンパイルして保存します。

BP_GameMode Random CPUBET

マイブループリントのRandom CPU BETをダブルクリックして、関数グラフを開きます。

image

ノード手順:

グラフの空きスペースにRandom integer in Rangeを配置し、

Min値=1

Max値=4

に設定します。

image

Random integer inRangeのReturn ValueピンとSwitch on Intを接続

Random CPUBETの実行ピンとSwitch on Intの実行ピンを接続

image

Switch on Intのピン追加をクリックし、追加したピンとSET CPU BETの実行ピンを以下の通りに接続します。

1ピン⇒Set CPU BET(入力値=5)

2ピン⇒Set CPU BET(入力値=10)

3ピン⇒Set CPU BET(入力値=15)

4ピン⇒Set CPU BET(入力値=20)

image

グラフの空きスペースにShowCPUBET(関数の呼び出し)を配置します。

ShowCPUBETのTargetピンとGet WBP Refを接続

Set CPU BET(5/10/15/20)の実行ピンとShowCPUBETの実行ピンを接続

Set CPU BET(5/10/15/20)のIndexピンとInbetピンを接続

image

コンパイルして保存します。

BP_GameMode ResolveRound

マイブループリントのResolveRoundをダブルクリックし、関数グラフを開きます。

ノード手順:

グラフの空いているスペースにGet Player BetとGet CPU BETを配置します。

ResolveRoundの実行ピンとBranch実行ピンを接続します。

BranchのconditionピンからGrater(>)ピンと接続します。

GreaterのAピンとGet Player BET を接続します。

GreaterのBピンとGet CPU BETを接続します。

image

Get WBP_Refをグラフの空いているスペースに配置し、Show Result Textの実行ピンと接続

Show Result TextのInText欄をPLAYER WIN!と入力

Branch TrueピンとShow Result Textの実行ピンを接続

image

Branch①のFalseピンとBranch②の実行ピンを接続

Branch②のConditionピンとGreater(>)ピンを接続

Greater(>)のAピンとGet CPUBetを接続

Greater(>)のBピンとGet PLAYER Betを接続

image

Branch②のTrueピンとShow Result Textの実行ピンを接続し、Intext欄にCPU WIN!と記載

Branch②のFalseピンとShow Result Textの実行ピンを接続し、Intext欄にDRAW!と記載

両方のShow Result Text TargetピンとGet WBP_Refを接続

image

グラフの空いているスペースにCheck End Turn(関数呼び出し)を配置

3つのShow Result Textノードの実行ピンとCheck End Turn(関数呼び出し)を接続

image

コンパイルして保存します。

BP_GameMode CheckEndTurn

マイブループリントのCheckEndTurnの関数ボタンをダブルクリックし、関数編集画面を開きます。

ノード手順:

CheckEndTurnの実行ピンとBranch①と接続します。

Branch①のconditionとGreater Equal(>=)をノード接続します。

image

Greater Equal AピンとGet CurrentTurnを接続

Greater EqualBピンとGet MaxTurnsを接続

image

BranchのTrueピンとEndGame(関数の呼び出し)を接続

BranchのFalseピンとStartTurn(関数の呼び出し)を接続

image

コンパイルして保存します。

BP_GameMode EndGame

マイブループリントのEndGameをダブルクリックし、編集画面を開きます。

Get WBP_Refを空いているグラフスペースに配置し、ShowResultTextと接続

EndGameの実行ピンとShowResultTextの実行ピンを接続

Intext欄にGAME OVER!と記載

image

コンパイルして保存します。

Step3:WidgetBPの修正

過去記事で作成したOn clicked(Button Select)のイベントを変更していきます。

WBP_BETを開きます。

ノード手順:

On clicked(Button Select)に設定してあるノードをCustom Event以外全て削除します。

image

グラフの空いているスペースにGet GameModeを配置し、Cast to BP_GameModeの実行ピンと接続

image

On clicked(Button_Select)の実行ピンとSet IsBetConfirmedを接続

IsBetConfirmedをチェック(true)にする

image

Cast To BP_GameModeの実行ピンとSubmitPlayerBetの実行ピンを接続します。

Cast To BP_GameModeのAs BP_GamemodeとSubmitPlayerBetのTargetを接続します。

Get SelectedBetとSubmitPlayerBetのInBetピンを接続します。

image

Set Is Bet Confirmedの実行ピンとCast To BP_GameModeの実行ピンを接続

image

コンパイルして保存します。

Step4:BP_GameModeの実装

実際のゲームモードに今回実装したシステムを導入していきます。

導入の前に、過去記事を参照されている方は、レベルブループリントのEvent Begin playノードを削除してから今回の導入作業に移ってください。

レベルBP ノード削除

指定レベルのブループリントボタン⇒レベルブループリントボタンをクリック

image

レベルブループリント内のノードを削除

過去記事では、レベルブループリント内にWBP_BETのゲーム内に表示されるノードを組んでいたためそのノードを削除します。

image

コンパイルして保存します。

ゲームモード実装手順

今回は、指定したレベルのみ今回のゲームシステムを導入するので、以下の手順で実装します。

実装手順:

レベルを開いた状態で World Settings を開く(メニューの Window → World Settings)

image

GameMode Override を BP_GameMode に変更

image

Step5:実装確認

シミレーションボタンを押して、実装確認します。

BET SELECT画面⇒Turn数が2/5に切り替わっていることを確認

image

最後の画面

image

まとめ

今回の記事では、Unreal Engineでターン制システムを実装する方法 を解説しました。

  • Widgetブループリントの準備
  • GameModeブループリントの導入
  • 各関数の実装(ターン管理、勝敗判定、終了処理)
  • レベルへの適用

を順番に行うことで、シンプルなターン制ゲームを構築することができます。

Unreal Engineのブループリントを使ったゲーム開発に挑戦される方の参考になれば幸いです。

コメントする

メールアドレスが公開されることはありません。 が付いている欄は必須項目です