[Unity] アイテム一覧ページっぽいものを作ってみる
![アイキャッチ画像](/img/article/2019/03/15/00-eye-catch.png)
Nプログラマ(@Nprog128)です。
今回の内容は、以下のように道具袋のイメージしたアイテム一覧とページ送り機能をつけたものを作ってみます。
概要
目標
- アイテム一覧とページ送り機能を作ってみる
環境情報
- Unity: 2018 3.6f1
- テンプレート: 2D
今回使う画像
今回使うアイテムの画像です。
ソースコード
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 コードを開く
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](/img/article/2019/03/15/04.png)
Menu.cs インスペクタ
先ほどのItem0, Item1, Item2のItemコンポーネントの参照を設定します。 sizeが0になっているので、3に設定して0番目にItem0、1番目にItem1、2番目にItem2の参照を設定します。
![/img/article/2019/03/15/05.png](/img/article/2019/03/15/05.png)
これで準備は完了です。実行してみましょう。
実行結果
1ページ目
赤いポーション一覧、味は甘い。
![/img/article/2019/03/15/06.png](/img/article/2019/03/15/06.png)
2ページ目
青いポーション一覧、味は苦い。
![/img/article/2019/03/15/07.png](/img/article/2019/03/15/07.png)
3ページ目
紫色のポーション一覧、味はもうよく分からない。。。
![/img/article/2019/03/15/08.png](/img/article/2019/03/15/08.png)
課題
現在のページ処理をクラスへ切り出せそうだ。。。!
今回はアイテムページ一覧の想定ですが、作るゲームによっては様々な一覧ページを表示することもあります。
ショップのアイテム一覧、クエスト一覧、合成一覧などなど。。。
そのたびにページのインデックス管理の部分をコピペすると、同じコードが増えてきてメンテが大変になってきそうです。
(もちろん、これでもう変更する予定がない場合はそのままでオッケーです)
なのでこの部分はクラスに切り出してみようと思います。
ボタンの共通化
今は「Next」と「Prev」ボタンだけですが、他にも増えてくる可能性がありそうです。
アイテム画像をクリックして使うとか、アイテムの詳細を表示するボタンとかを作ると、OnXXXClickというメソッドが増えてきそうなので、OnClickに共通化したいところ。
これは以前の記事で対応できるので、OnClickメソッドに統一します。
おわりに
今回の内容は、道具袋のイメージしたアイテム一覧とページ送り機能をつけたものを作ってみました。
小さな機能ですが、ちょっとずつ作り慣れてくると楽しいですね。
想像力を膨らませて、楽しいモノを作りましょう。
それでは、このへんで。
バイナリー!