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