[Unity] アイテム一覧ページっぽいものを作ってみる

アイキャッチ画像


記事内に商品のプロモーションを含む場合があります。

Nプログラマ(@Nprog128)です。

今回の内容は、以下のように道具袋のイメージしたアイテム一覧とページ送り機能をつけたものを作ってみます。

概要

目標

  • アイテム一覧とページ送り機能を作ってみる

環境情報

  • Unity: 2018 3.6f1
  • テンプレート: 2D

今回使う画像

今回使うアイテムの画像です。

ソースコード

Menu.cs コードを開く
Menu.cs
 1using UnityEngine;
 2
 3public class Menu : MonoBehaviour
 4{
 5    // アイテムのデータ
 6    // 0番目: アイテムの名前
 7    // 1番目: アイテムの説明
 8    // 2番目: アイテムの画像名
 9    private string[][] itemData =
10    {
11        // 1ページ目
12        new string[] {"赤いポーション(小)", "HPを少しだけ回復する。意外と少ない。味は甘い。", "Potion_Red" },
13        new string[] {"赤いポーション(中)", "HPを中くらい回復する。まぁまぁの量。ゴクゴク飲める。", "Potion_Red" },
14        new string[] {"赤いポーション(大)", "HPを大きく回復する。量的に連続で飲むのはツラい。", "Potion_Red" },
15        // 2ページ目
16        new string[] {"青いポーション(小)", "SPを少しだけ回復する。味がにがい。量が少ないので助かる。", "Potion_Blue" },
17        new string[] {"青いポーション(中)", "SPを中くらい回復する。量が増えて味もにがいのでキツい。", "Potion_Blue" },
18        new string[] {"青いポーション(大)", "SPを大きく回復する。なぜかこれだけものすっごくにがい。", "Potion_Blue" },
19        // 3ページ目
20        new string[] {"紫色のポーション(小)", "HPとSPを少しだけ回復する。赤と青ポーションを混ぜたもの。ものすごい複雑な味。", "Potion_Purple" },
21        new string[] {"紫色のポーション(中)", "HPとSPを中くらい回復する。量も増えて味も増えた。具体的には、甘い、苦い、辛い、酸っぱい、塩辛いの五味。", "Potion_Purple" },
22        new string[] {"紫色のポーション(大)", "HPとSPを大きく回復する。五味の極地なる味。これが飲みたくなくて冒険をやめる冒険者もいるほど。", "Potion_Purple" },
23    };
24
25    private int currentPage = 0;  // 現在のページ
26    private int maxPage = 2;      // 3ページまで
27    private int perPage = 3;      // 1ページに表示するアイテムの数
28    
29    public Item[] items = new Item[3];    // インスペクタでsizeを3に設定する
30    
31    void Start()
32    {
33        Init();
34    }
35
36    private void Init()
37    {
38        for (int i = 0; i < items.Length; i++)
39        {
40            var itemDataIndex = i + (currentPage * perPage);
41            items[i].Init(itemData[itemDataIndex]);
42        }
43    }
44
45    public void OnNextClick()
46    {
47        currentPage++;
48        if (currentPage > maxPage)
49        {
50            currentPage = 0;
51        }
52
53        Init();
54    }
55
56    public void OnPrevClick()
57    {
58        currentPage--;
59        if (currentPage < 0)
60        {
61            currentPage = maxPage;
62        }
63
64        Init();
65    }
66}

説明

アイテムデータの表示

itemData変数に表示するためのアイテムデータが入っています。 データ構造はこんな感じ。

  • 0番目: アイテム名
  • 1番目: アイテムの説明文
  • 2番目: アイテムの画像名

このデータを使って初期化するのがInitメソッドです。 一番最初はStartで呼び出されて、その後は「Next」 or「 Prev」のボタンを押すたびに呼び出されて表示するデータを切り替えています。

ページ

アイテムデータの配列のインデックスを管理しています。

Initメソッドでページに対応する配列のインデックスを計算して、表示するアイテムデータを決めています。

1var itemDataIndex = i + (currentPage * perPage);
表示されるページと配列の対応表
ページアイテム1列目アイテム2列目アイテム3列目
1ページ配列[0]配列[1]配列[2]
2ページ配列[3]配列[4]配列[5]
3ページ配列[6]配列[7]配列[8]

次のページめくりは一番最後まで来たら、一番最初に戻るようにしています。
前のページめくりも次へと同じで一番最初まで来たら、一番最後にもどります。

Item.cs コードを開く
Item.cs
 1using UnityEngine;
 2using UnityEngine.UI;
 3
 4public class Item : MonoBehaviour
 5{
 6    public Image itemImage;
 7    public Text itemName;
 8    public Text itemDesc;
 9
10    // 配列要素の0番目: アイテムの名前
11    // 配列要素の1番目: アイテムの説明
12    public void Init(string[] itemData)
13    {
14        itemName.text = itemData[0];
15        itemDesc.text = itemData[1];
16        itemImage.sprite = Resources.Load<Sprite>("Textures/" + itemData[2]);
17    }
18}

説明

アイテムデータの表示を担当するクラスです。以下のコンポーネントの参照を持っており、Initメソッドで内容が初期化されます。

  • itemName: アイテム名前
  • itemDesc: アイテムの説明
  • itemImage: アイテムの画像

アイテムを表示するコンポーネントは常に3つ固定で、データ毎に表示する内容を切り替えています。
事前にインスペクタでそれぞれのコンポーネントの参照を設定しておきましょう。

準備

画像

Assetsの直下にTexturesディレクトリを作成して、その中にポーションの画像を入れましょう。

  • 赤いポーション: Textures/Potion_Red.png
  • 青いポーション: Textures/Potion_Blue.png
  • 紫色のポーション: Textures/Potion_Purple.png

シーン

スクリプトのアタッチや、参照を設定しておきます。

ヒエラルキー

Menu.csとItem.csを以下のゲームオブジェクトにアタッチします。

  • MenuゲームオブジェクトにMenu.csをアタッチ
  • Item0, Item1, Item2ゲームオブジェクトにItem.csをアタッチ

Item.cs インスペクタ

Item0, Item1, Item2のそれぞれの子コンポーネントのImage, Name, Descの参照を設定します。

/img/article/2019/03/15/04.png
Itemゲームオブジェクトのインスペクタ

先ほどのItem0, Item1, Item2のItemコンポーネントの参照を設定します。 sizeが0になっているので、3に設定して0番目にItem0、1番目にItem1、2番目にItem2の参照を設定します。

/img/article/2019/03/15/05.png
Menuゲームオブジェクトのインスペクタ

これで準備は完了です。実行してみましょう。

実行結果

1ページ目

赤いポーション一覧、味は甘い。

/img/article/2019/03/15/06.png
赤いポーション一覧

2ページ目

青いポーション一覧、味は苦い。

/img/article/2019/03/15/07.png
青いポーション一覧

3ページ目

紫色のポーション一覧、味はもうよく分からない。。。

/img/article/2019/03/15/08.png
紫色ポーション一覧

課題

現在のページ処理をクラスへ切り出せそうだ。。。!

今回はアイテムページ一覧の想定ですが、作るゲームによっては様々な一覧ページを表示することもあります。
ショップのアイテム一覧、クエスト一覧、合成一覧などなど。。。

そのたびにページのインデックス管理の部分をコピペすると、同じコードが増えてきてメンテが大変になってきそうです。
(もちろん、これでもう変更する予定がない場合はそのままでオッケーです)

なのでこの部分はクラスに切り出してみようと思います。

ボタンの共通化

今は「Next」と「Prev」ボタンだけですが、他にも増えてくる可能性がありそうです。

アイテム画像をクリックして使うとか、アイテムの詳細を表示するボタンとかを作ると、OnXXXClickというメソッドが増えてきそうなので、OnClickに共通化したいところ。

これは以前の記事で対応できるので、OnClickメソッドに統一します。

おわりに

今回の内容は、道具袋のイメージしたアイテム一覧とページ送り機能をつけたものを作ってみました。

小さな機能ですが、ちょっとずつ作り慣れてくると楽しいですね。

想像力を膨らませて、楽しいモノを作りましょう。

それでは、このへんで。
バイナリー!

\ ちょっとお買い物 /


関連した記事