Unityで立体迷路を作る⑨|インプットフィールドを使ったトゥルーエンド演出【最終回】

Unity立体迷路 ゴール後にCODE入力パネルとトゥルーエンドの演出を表示した画像 ゲームの作り方
CODE入力画面とトゥルーエンドの演出

🔍本記事では、RigidbodyやCharacterControllerを使わずにC#スクリプトだけで立体迷路を作る方法を解説しています。
 
今回は「インプットフィールド」を使ったトゥルーエンド演出を実装していきます。

✅前回の記事はこちら👇

スポンサーリンク

トゥルーエンドについて

このゲームでは、迷路の壁に「アルファベットテキスト」を配置し、ゴール後に表示される「コード入力欄」に正しい文字を入力するとトゥルーエンド演出が発動します。

今回は アルファベット5文字「HONEY を仕込み、各フロアに分散させます。
また、壁の色がヒントになるようにしてプレイヤーを導きます。

壁にテキストを追加する

  • 該当の壁を選択し、3Dオブジェクト→テキストを追加
  • 迷路の行き止まりなどに配置する
  • 位置を調整し、壁面に貼り付けるようにする
Unity立体迷路 壁にテキストを追加した画像

ゴール後のUIパネルに追加する

  • CODE?」というテキストを入れ、コード入力が必要とわかるようにする
  • UI → Input Field を追加
  • UI → Button で「OK」ボタンを作成し、入力を送信できるようにする
Unity立体迷路 UIパネルにインプットフィールド、テキスト、ボタンを追加した画像

入力フィールドの設定

  • 入力フィールド内に UI → 画像 を複数追加し、壁の色に合わせてヒント化
  • 親オブジェクトを作成し、HorizontalLayoutGroup で等間隔に並べる
  • WebGL Input コンポーネントを追加 → 📱Webプレイでも入力可能にする
Unity立体迷路 インプットフィールドにヒント用の画像を複数追加して等間隔に並べた画像

GoalTrigger.cs に追加

public GameObject codePanel; // CODE入力UI

IEnumerator WaitAndGoalEvent(float waitTime)
{
 StartCoroutine(WaitAndCode(3f));
}

IEnumerator WaitAndCode(float waitTime)
{
yield return new WaitForSeconds(waitTime); // 指定秒待機
codePanel.SetActive(true);
}

トゥルーエンド演出を作成する

  • 正しいコード入力時に「Congratulations」テキストを表示
  • Particle System を使って花火演出を追加
Unity立体迷路 ゴール画面にトゥルーエンド用のテキストとParticle Systemを表示させた画像

FireworksManager.cs

using UnityEngine;

public class FireworksManager : MonoBehaviour
{
public ParticleSystem[] fireworksSystems;

public void LaunchFireworks()
{
foreach (ParticleSystem ps in fireworksSystems)
{
ps.Stop(true, ParticleSystemStopBehavior.StopEmittingAndClear);
ps.Play();
}

}

入力コードをチェックするスクリプト

using UnityEngine;
using TMPro;
using System.Collections;
using System.Text;

public class CodeChecker : MonoBehaviour
{
public TMP_InputField inputField;
public TMP_Text textArea;
public string correctCode = “HONEY”;
public GameObject trueEndPanel;
public FireworksManager fireworks; //エフェクト用

public void CheckCode(string input)
{
// 入力文字列を半角英字に統一
string normalizedInput = ConvertToHalfWidth(input).ToUpper();

if (normalizedInput == correctCode)
{
trueEndPanel.SetActive(true);
fireworks.LaunchFireworks(); // 花火エフェクト
}

else
{
StartCoroutine(ShowError());
}
 }

 public void CheckCodeFromInput()
 {
CheckCode(inputField.text);
 }

 // 全角英数字を半角に変換
 string ConvertToHalfWidth(string input)
 {
  return input.Normalize(NormalizationForm.FormKC);
 }

 IEnumerator ShowError()
 {
inputField.text = “Try again!”;
inputField.interactable = false;
yield return new WaitForSeconds(1f);
inputField.text = “”;
inputField.interactable = true;
inputField.ActivateInputField();
 }

マスと入力テキストを合わせる

デフォルトフォントでは文字幅が不均一でズレるため、
Google Fonts から等幅(Monospace)フォント をダウンロードして利用すると整います。

Unity立体迷路 インプットフィールドにテキストを5文字入れてサイズを合わせた画像

動作確認ポイント

  • ゴールパネル表示3秒後に「コード入力」画面が出るか
  • 5文字入力時に文字幅がマスと合っている
  • CODE失敗時 →「Try again!」表示
  • CODE成功時 → トゥルーエンド演出(花火&テキスト表示)が出るか

まとめ

今回は インプットフィールドを導入してトゥルーエンド演出を作成する方法 を解説しました。
これで Unity立体迷路シリーズは完結 です🎉

さらに発展させたい場合は、SEやBGM、画面のフェードなどを取り入れると、より本格的なゲーム演出に近づきます。

ぜひ自分だけの迷路ゲームを完成させてみてください!✨

📖 Unity立体迷路シリーズ一覧

  1. オブジェクト・レイヤー・UIの作成
  2. プレイヤー移動・壁判定・UI操作
  3. Rayの可視化とプレイヤーの動きのアニメーション化
  4. 階段の判定とプレイヤーの上下移動
  5. 複数フロア・フロア表示・プレイ時間のUI実装
  6. ポーズメニューとリスタート機能の実装
  7. フロア別ミニマップの作り方
  8. ゴール判定とクリア演出の実装
  9. インプットフィールドを使ったトゥルーエンド演出【最終回】

✅完成したゲームはこちら👇

コメント

タイトルとURLをコピーしました