二代目備忘録スマートフォン用の表示で見る二代目備忘録2019-07-19Unity備忘録43頁目「インベントリ内の表示」Unity江上宿六です。インベントリにアイテムを入れたり出したり出来るように(多分)なったので次はゲーム内でそのインベントリを表示して、指定したアイテムを取り出したり出来るようにします。インベントリの表示に使うのは過去にも使ったUIです。ヒエラルキーにUIのImageを追加しましょう。Create→UIからImageを選択。UI用のCanvasが追加され、その子としてImageが追加されます。Canvasが存在する場合は恐らくそのCanvasの子として追加されると思います。相変わらず凄いサイズのCanvasですが、今回はCanvasの下側にImageを配置して色や透明度なんかも変更してみました。このImageの上にインベントリ内にあるアイテムのアイコンを表示させていきたいわけです。続けてCreate→UI→Imageとして表示されるアイコンの雛形を作りPrefabにします。Prefabにしたらシーン上から削除しておきます。後々必要に応じてInstantiateし画像を設定する事でアイコンが表示出来るわけです。このアイコンの雛形は背景のImageの子オブジェクトとして運用します。インベントリの指定位置のアイコン情報を取得する関数です。関数が深くなってて分かりにくいですが、インベントリの指定位置にあるアイテムの名前を取得し、データベースと照らし合わせてそのアイテムのアイコンを返すものです。Instantiate部分です。先ほどのPrefabをInstantiateしたらImageのspriteを先ほどの関数を使ってインベントリ0番目のアイコンを取得して設定したら背景Imageと親子関係を設定します。あと画像サイズによって自動でscaleが変わってしまう事があるのでscaleを指定しました。因みにUIをスクリプトでいじる場合はこの一文が必要な事があるので注意です。このInstantiateを呼ぶタイミングなのですが、常にインベントリが表示されているタイプのものならアイテム取捨のタイミングで呼び出してやったり、インベントリを開け閉めするタイプなら開けるタイミングで呼び出してやるというのが考えられます。開ける時にInstantiateして閉じる時にDestroyしています。アイテムが沢山ある時Destroyするのが大変そうに思えますが、foreach文を使うと簡単に全ての子をDestroy出来ます。ここのinventoryBGというのは背景Imageです。同様にアイテムが沢山ある時にInstantiateする位置を指定するのが面倒だという事もあると思います。いう時はアイコンの親、今回でいう背景画像の所にGridLayoutGroupというコンポーネントを追加してみると良いと思います。Paddingはオフセット位置で、その他アイコンのサイズ(CellSize)、行間(Spacing)等を設定しておくと、その子オブジェクトはそのルールに従って配置されるので面倒な事を考えなくてもよくなったりします。適当に子オブジェクトを複製してみたらこんな感じです。