【Unity】キャラクター選択画面の作り方【C#のPlayerPrefsやListも同時に学ぶ】

ゲームを作っていると 
プレイするキャラクター（以下、プレイヤブルキャラクター）を
変更したり、選択してからゲームを始められる
ことを実装したくなるものです。

本記事では、
そんなプレイヤブルキャラクターを選択する画面（シーン）の作り方を
すぐにマネできる形で、シンプルに解説します。

内容にそって作業すれば、このようなシーンが完成します↓

また、これを実装するのに、
C#の「PlayerPrefs」と「List」を使うので、
それらの使い方も同時に学べると思います^^

【おすすめ】キャラクター選択画面の実践編↓

１. シーン準備

まずは、シーンの準備から。

Scenesフォルダに、
キャラクター選択シーンとして「SelectScene」
そのあと移行するシーンとして「GameScene」
と名付けた２つのシーンを作成します。

それでは、それぞれ詰めていきしょう。

２. SelectSceneの作成

２ー１. キャラクターボタンとスタートボタンの作成

キャラクター選択シーンでのUIの設計です。

キャラクターごとに、UIからButtonを配置していきます。

Buttonの配下にImageを作成し、
その「Source Image」はキャラクターのテクスチャファイルを紐付けます。

Buttonの「SelectedColor」を目立つ黄色に設定します。

「OnClick()」の「＋」を押して
スクリプトのメソッドを紐付けます。
（これはスクリプト作成後なので後回しでOK）

さらに、スタートボタンを真ん中あたりに作り、
選択したキャラクターで
ゲームを開始させられるようにします。

２−２. スクリプト作成

Assetsフォルダ内で「CharacterSelect.cs」と名付けたC#スクリプトを作成します。

シーンに、空のゲームオブジェクトを作成し、そこにこのスクリプトをアタッチします。

スクリプトの内容は以下の通り。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
using UnityEngine.SceneManagement;

public class CharacterSelect : MonoBehaviour
{
   int selectCharaNumber;

   void Start()
   {
        selectCharaNumber = 0;
   }

   public void OnClickA()
   {
        selectCharaNumber = 0;
   }
   public void OnClickB()
   {
        selectCharaNumber = 1;
   }


   public void OnClickStart()
   {
        PlayerPrefs.SetInt("CHARA_NUMBER",selectCharaNumber);
        SceneManager.LoadScene("GameScene");
   }
}

 

たったこれだけのスクリプトです^^;

解説すると、
selectCharaNumberにキャラクターに対応した番号を代入する仕組みで、
その番号をPlayerPrefsでローカルデバイスに保存し、次のシーンに移行します。

前の図のOnClickの部分のように、各キャラクターボタンを押したときに
OnClickA()やOnClickB()というメソッドが呼び出されるように、紐付けます。
(CubeのButtonはOnClickA()、SphereのButtonはOnClickB())

また、スタートボタンを押したときには、
OnClickStart()が呼ばれるように紐付けます。

PlayerPrefs.SetInt("CHARA_NUMBER", selectCharaNumber);

このコードによって、"CHARA_NUMBER"というKeyで、キャラクターの番号をValueとして、保存させます。

そのあと、SceneManager.LoadSceneで"GameScene"に移行できるようにします。

 

３. GameSceneの作成

３−１. プレイヤブルキャラクターの準備

ひとまずプレイヤブルキャラクターを準備する必要があります。