UnityのTilemap入門｜2Dマップ作成の始め方

導入

UnityのTilemap入門｜2Dマップ作成の始め方では、ファストトラベル解放を小さな確認用シーンで作ります。ファストトラベル解放 は、駅の路線図で行ける駅が増える感覚です。大事なのは、内部処理を全部見せることではなく、プレイヤーが「今は 解放演出 で、次に 移動先を選ぶ へ進む」と分かる目印を置くことです。

これから作るもの

• Project ウィンドウで右クリックし、Create > C# Script を選びます。名前を FastTravelTutorial にして新規作成します。
• Hierarchy で右クリックし、Create Empty を選びます。名前を FastTravelUnlockDemo に変え、作った FastTravelTutorial スクリプトをこの GameObject へドラッグして付けます。
• Canvas がなければ Hierarchy で右クリックし、UI > Canvas を選びます。Canvas を右クリックして UI > Text - TextMeshPro を新規作成し、どこへ移動できるか を表示する文字にします。
• Canvas を右クリックして UI > Button を新規作成し、名前を Unlock Button に変えます。これは状態を1つ進めるために押す Button GameObject です。
• FastTravelUnlockDemo を選び、Inspector の FastTravelTutorial コンポーネントにある unlockedCount、travelCost、selectedPoint を確認します。ここで数字を変えると、ゲームを再生した時の最初の値を変えられます。

ステップ1: 値を作る

未発見地点、解放演出、移動先を選ぶ を別々の状態として扱い、今どの段階かを画面で確認できるようにします。

[SerializeField] private TextMeshProUGUI statusText;    // 状態や結果を画面に表示するTextへの参照
    [SerializeField] private float unlockedCount = 1f;    // unlockedCount は Inspector で調整するゲーム内の値
    [SerializeField] private float travelCost = 2f;    // travelCost は Inspector で調整するゲーム内の値
    [SerializeField] private float selectedPoint = 3f;    // selectedPoint は Inspector で調整するゲーム内の値

ステップ2: 状態を進める

ボタンを押した時だけ、次の状態へ進めます。待ち時間を作らず、Play中にすぐ確かめられるようにします。

private int step;
        step = (step + 1) % 3;
        var label = step == 0 ? "未発見地点" : step == 1 ? "解放演出" : "移動先を選ぶ";

ステップ3: 今の状態に名前を付ける

Console だけではプレイヤーには見えません。TextMeshPro や Slider に unlockedCount / travelCost / selectedPoint を出して、判断材料を画面へ移します。

var label = step == 0 ? "未発見地点" : step == 1 ? "解放演出" : "移動先を選ぶ";

ステップ4: 画面に出す

状態と値を画面へ出します。数値だけでなく、今何が起きているかを一緒に表示します。

if (statusText != null)
        {
            statusText.text = $"{label}\nunlockedCount={unlockedCount:0.##}\ntravelCost={travelCost:0.##}\nselectedPoint={selectedPoint:0.##}";
        }
        Debug.Log($"ファストトラベル解放: {label}");

ステップ5: Play中に確認する

Play を押し、作った Button をクリックして 未発見地点を表示 → Unlock Buttonで進める → 解放演出を確認 → 移動先を選ぶで結果を見る の順に変わるか見ます。画面の表示とConsoleのログが同じ内容なら、最小実装は完成です。

// Button コンポーネントの On Click() から NextStep() を選びます。
// Play中にButtonを押すたび、この関数が1回呼ばれます。
    public void NextStep()
    {
        step = (step + 1) % 3;
        var label = step == 0 ? "未発見地点" : step == 1 ? "解放演出" : "移動先を選ぶ";
        if (statusText != null)
        {
            statusText.text = $"{label}\nunlockedCount={unlockedCount:0.##}\ntravelCost={travelCost:0.##}\nselectedPoint={selectedPoint:0.##}";
        }
        Debug.Log($"ファストトラベル解放: {label}");
    }

完成版

ここまでをまとめた FastTravelUnlockDemo の完成版です。

using UnityEngine;
using TMPro;

public class FastTravelTutorial : MonoBehaviour
{
    [SerializeField] private TextMeshProUGUI statusText;
    [SerializeField] private float unlockedCount = 1f;
    [SerializeField] private float travelCost = 2f;
    [SerializeField] private float selectedPoint = 3f;

    private int step;

    public void NextStep()
    {
        step = (step + 1) % 3;
        var label = step == 0 ? "未発見地点" : step == 1 ? "解放演出" : "移動先を選ぶ";
        if (statusText != null)
        {
            statusText.text = $"{label}\nunlockedCount={unlockedCount:0.##}\ntravelCost={travelCost:0.##}\nselectedPoint={selectedPoint:0.##}";
        }
        Debug.Log($"ファストトラベル解放: {label}");
    }
}

Inspectorでつなぐ

1. Hierarchy で FastTravelUnlockDemo を選び、Inspector に FastTravelTutorial コンポーネントが付いていることを確認します。
2. Canvas の Text (TMP) を FastTravelUnlockDemo の Inspector にある Status Text 欄へドラッグします。これでスクリプトが文字を変更できます。
3. Unlock Buttonで進める用に作った Button GameObject を選びます。Inspector の Button コンポーネントにある On Click() で + を押し、FastTravelUnlockDemo を空欄へドラッグします。
4. On Click() のメニューから FastTravelTutorial > NextStep() を選びます。これで Button を押した時に NextStep が動きます。
5. FastTravelUnlockDemo の Inspector で値を少し変え、Play を押します。Button を押して、文字と数字が変われば設定完了です。

次に足すとよいもの

• ログだけで終わる: ファストトラベル解放はプレイヤーが見る機能なので、Debug.Log だけでは不足です。必ず画面表示も同時に確認します。
• 状態名が曖昧: 未発見地点、解放演出、移動先を選ぶ の名前が似すぎると、どこで失敗したか分かりません。短く別の言葉にします。
• 一度に本番化する: 最初から大きなシステムへつなぐと原因が追いにくくなります。FastTravelUnlockDemo で表示と値だけを固めてから広げます。

まとめ

完成形は FastTravelUnlockDemo です。Unlock Button を押すと状態が 未発見地点 → 解放演出 → 移動先を選ぶ と進み、unlockedCount、travelCost、selectedPoint が TextMeshPro の表示と Console ログに出ます。 まずは FastTravelUnlockDemo をPlay中に動かし、画面で変化が読めるところまで作ってください。