【Unity】２Dシューティングを作る～画像の切り替え～

プレイするゲームがないなら、自分で作ればいいじゃない！

ということで初心者が Unity を使って「ゲームを作る」ゲームをやっていきます！

今回は「画像の切り替え」の記事です

内容
タイトルメニューの作成
タイトルのスクリプト
サンプル動画
さいごに

内容

「画像の切り替え」を使用して、タイトル画面を修正していきます

タイトルメニューの作成

メニューの画像を用意します

入れ替え用

同様に「Option」、おまけでカーソルも用意しました

カーソル

タイトルシーンに配置する

各画像を適当に置きます

画像を切り替えるには

Sprite Renderer の sprite を変更する必要があります

Sprite RendererとSprite — ここに直接ドラッグアンドドロップしたら画像が変わる

※レイヤーの順序の数値を変えると描画の優先度を変更できます

スクリプトから変更できるようにする

メニューのオブジェクトにC#スクリプトをアタッチして、差し替え処理を追加します

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class TitleMenu : MonoBehaviour
{
    public Sprite OffSprite;
    public Sprite OnSprite;

    // 画像描画用のコンポーネント
    SpriteRenderer spriteRenderer;

    // Start is called before the first frame update
    void Start()
    {
        spriteRenderer = gameObject.GetComponent<SpriteRenderer>();
    }

    // カーソルが合っているとき
    public void On()
    {
        // 画像を切り替える
        spriteRenderer.sprite = OnSprite;
    }
    // カーソルが合っていないとき
    public void Off()
    {
        // 画像を切り替える
        spriteRenderer.sprite = OffSprite;
    }
}

エディターで変更できる Sprite を２つ用意します

SpriteRenderer は Start で取得しておきましょう

あとは On か Off を呼び出せば、設定した画像に切り替わるはずです　

Sprite の設定

タイトルのスクリプト

メニューがある程度できたので、それを操作するスクリプトを用意します

public class Title : MonoBehaviour
{
    int Cursor = 0;
    public TitleMenu[] MenuTable;
    public SpriteRenderer CursorRenderer;

    // Start is called before the first frame update
    void Start()
    {
        UpdateMenu();
    }

    // Update is called once per frame
    void Update()
    {
        int oldCursor = Cursor;
        int cursorMax = MenuTable.Length;

        if (Input.GetButtonDown("CursorUp"))
        {
            Cursor--;
        }
        else if (Input.GetButtonDown("CursorDown"))
        {
            Cursor++;
        }

        // カーソルの制御
        if(Cursor < 0)
        {
            Cursor = MenuTable.Length - 1;
        }
        if(Cursor >= cursorMax)
        {
            Cursor = 0;
        }

        // カーソルに変更があったら
        if(Cursor != oldCursor)
        {
            UpdateMenu();
        }
    }

    // メニューの更新
    void UpdateMenu()
    {
        int cursor = 0;
        foreach (TitleMenu menu in MenuTable)
        {
            if (Cursor == cursor)
            {
                menu.On();

                // カーソルの位置を設定
                CursorRenderer.transform.position = menu.transform.position;
            }
            else
            {
                menu.Off();
            }

            ++cursor;
        }
    }
}