インベントリ / UI

はじめに

このページでは見た目を作って行きます。前ページでインベントリシステムの設計について説明しましたが、このページ内では全て忘れて頂いて構いません。ここで用いる画像は下のボタンからダウンロードできますが、クオリティが低いです。申し訳ありません。
内容物は1枚の画像で、その中に

• インベントリの背景
• インベントリのスロット
• アイテムアイコン複数

の素材が入っています。後に画像だけ差し替えることは簡単ですので安心してください。

itemTexture.png

準備

本格的な作業の前にいくつかの準備を行います。Unityのプロジェクトの中の好きな場所にInventoryフォルダを作成してください。ここではAssetsフォルダ直下に作成した例で説明します。今後の作業に必要なファイルは全て、このフォルダ内に保存します。

ということで早速Inventoryフォルダに移動してください。ここにTexturesフォルダを作成し、用意した画像を中に配置します。

次に「Inventory」フォルダ直下に「Demo」フォルダを作成します。ここに動作確認を行うためのシーンを作成し、InventoryDemoと名付けます。

作成したら、InventoryDemoシーンをダブルクリックして開いてください。

次に、先ほどダウンロードした画像の種類を確認します。追加した画像ファイルを選択し、Inspectorを表示させて下さい。通常、Texture Typeの欄がDefaultとなっていると思います。

Defaultの場合は通常のテクスチャ、つまりシーン上に登場させるオブジェクトに色や模様などの装飾を行う目的で使用します。しかし今回は、別のオブジェクトの装飾のためではなく、この画像そのものをゲームに登場さたいと考えています。このように、画像そのものが主役となる場合はTexture TypeをSpriteとします。試しにDefaultの状態で、画像ファイルをヒエラルキー上(シーン上)にD&Dしてみてください。カーソルが禁止マークとなり、追加できないはずです。次にSpriteに変更して同様の操作を試してください。この場合追加に成功し、図のようにScene上に表示されたと思います。ただこの画像オブジェクトは今後使用しないため、シーンから削除してください。



ここからはヒエラルキー上での作業に移ります。2dオブジェクトの操作となるため、シーン画面右上の「2D」ボタンを押しておくと操作がしやすくなります。インベントリ画面はUIの一つであるためまずはCanvasを配置します ( ヒエラルキー上で右クリック/UI/Canvas )。ここではフルHD画面での表示を想定して、キャンバスサイズを1920x1080に調節しましょう。CanvasオブジェクトをクリックしてInspector画面を開きます。CanvasScalerコンポーネントのUIScaleModeをScaleWithScreenSizeに変更します。Reference ResolutionをX=1920,Y=1080に変更し、Screen Match ModeをExpandに設定してください。これによりフルHDに適した表示をしつつ、他の解像度の端末でもUIが画面からはみ出ることを防ぎます。ついでにGame画面の表示もこれに合わせるため、アスペクト比を16:9に設定してください。

ここまでで準備が終了です。早速UIの作成に移りましょう。

UIの作成

次にCanvasの子オブジェクトとしてImageオブジェクトを生成します。名前はItemBagと変更してください。下図のような状態になったでしょうか?



では画像の貼り付け作業に移ります。私が用意したテクスチャには、1つの画像ファイルに複数の画像が入っているためそれらを切り分ける必要があります。画像ファイルをクリックしてインスペクターを表示させて下さい。Sprite ModeをMultipleに変更し、一番下にあるApplyボタンをクリックします。次にSprite Editorボタンをクリックして下さい。Unityのバージョンによっては次のようなエラーが出る場合があります。

この際はエディターをインストールする必要があります。Unityの上部メニューから「Window/Package Manager」を選択してください。出てきた画面の左上(プラスボタンの右)には検索範囲が表示されているのですが(「Package: In Project」などと表示されています)、このボタンをクリックして「Unity Registory」に変更してください。次に右上の検索窓から「2D Sprite」を探してください。見つかったパッケージを選択し、右下の「Install」ボタンからインストールしてください。

ここまで終了したら、パッケージマネージャーは閉じてOKです。

再度Sprite Editorボタンを押してみてください。今度は新しくウインドウが出たと思います。左上の「slice」ボタンを押し、続けて出てきたメニューの「slice」ボタンを押します(特に設定は必要ありません)。これで1枚の画像からそれぞれのパーツに分割することができました。この状態で右上の「Apply」ボタンをクリックし、変更を保存します。

Sprite Editor上での作業は以上なので、画面を閉じてください。正しく分割したことを確認するため、テクスチャファイルのファイル名左にある三角ボタンを押してください。すると図のように7つのパーツが出てくると思います。それぞれを選択して、うまく分割出来ていることを確認してください。


分割したパーツのうち、背景画像(おそらくitemTexture_0)を、ヒエラルキー上のItemBagに登録します。まずItemBagのImageコンポーネントを開いてください。その中のSourceImageに、背景パーツをドラッグアンドドロップします。


するとシーン上に画像が表示されるので、適当な大きさに調整してください。シーン上に表示される白い線が実際にゲームで描画される領域ですので、目安になると思います。私は幅550、高さ840程度に設定しました。


次はアイテムアイコンを表示するスロットのオブジェクトを作ります。ItemBagの子オブジェクトとして、Imageオブジェクトを作成してください。縦横の幅は100とします(恐らくデフォルトです)。名前はItemSlotとします。用いる画像は下図の見た目のものです(恐らくファイル名はitemTexture_6です)。

これをImageコンポーネントのSourceImageにD&Dしてください。
では、今作成したItemSlotオブジェクトを10個程度複製します。ItemSlotを選択し「Ctrl+D」で複製出来ます。これらのスロットたちを格子状に並べるため、ItemBagにGridLayoutGroupコンポーネントを加えます。ItemBagのインスペクターを開き、一番下の「AddComponent」ボタンをクリックします。表示される検索窓に「GridLayoutGroup」と入力し、選択します。このタイミングでスロットがきれいに並んだはずです。ただ左上に詰まっていることや下に空白ができている問題があります。

まずは空白を取り除きます。ItemBagオブジェクトに「ContentSizeFitter」コンポーネントを加えてください。このコンポーネントには「Horizontal Fit」「Vertical Fit」という二つの要素があるのですが、両方をMin Sizeに変更します。すると画像のような酷い並びになります。

これを修正するため、ItemBag/GridLayoutGroupコンポーネントのConstraintをFixedColumnCountに変更します。これと同時に出現するConstraint Countは、横に何個並べるかを指定するものです。好きな数字を入れてください。5と指定すると図のようになります。

この状態でスロットを増やしても、全てのスロットを包むように背景は伸縮してくれます。これで大体は良いのですが、余白が全くなく窮屈に感じます。そこでItemBag/GridLayoutGroupコンポーネントのPaddingを設定します。Left,Right,Top,Bottomの四つを指定できるのですが、全てに10を入れてみてください。四辺にゆとりが出来たと思います。同様に、スロット間にもゆとりを持たせるため、同コンポーネントのSpacingパラメーターに x=5 , y=5 を入力します。


最後に、スロット上に配置するアイテムのアイコンを作りましょう。10個のスロットを作って頂きましたが、"1つを残して"他を削除します。残したスロットの子オブジェクトとしてImageオブジェクトを生成してください。名前はIconとします。IconオブジェクトのImageコンポーネントのSourceImageに好きな画像(私が用意した画像を使用している場合、item_Texture_1 ~ 5 がアイコンです)を登録してください。スロットにアイコンがうまくはまるよう、Iconオブジェクトの位置や大きさを調節します。ここでは、アンカーを縦横ともにStretchにし、左上右下を 12, 12, 16, 16 に設定しました。


位置が決まったら、Icon/ImageコンポーネントのSourceImageは再度Noneにします (Source Imageの欄の右端にある「◎」ボタンからNoneに設定します)。オブジェクトの見た目が真っ白になったらOKです。

以上で"モノ"ができました。今後ゲームを作っていくことを考えると、スロットの数が異なるインベントリが必要になったり、複数のバッグを表示させる仕組みが必要になったり、様々な要求が飛んでくるかもしれません。これらに柔軟に対応できるよう、Slotはプレハブ化をしておきます (Bagの抽象化は後に行う予定です)。ProjectのInventoryフォルダ直下に「Prefabs」フォルダを作成し、中に入ってください。ヒエラルキー上のItemSlotオブジェクトをPrefabsフォルダにD&Dし、ヒエラルキー上のItemSlotオブジェクトが水色になったことを確認してください。その後に"ヒエラルキー上の"ItemSlotを削除します。


今回は以上です。
現時点でのプロジェクトは  Github から確認できます。エラーが解決しない場合などは参考になるかと思います。

また  Twiter でもご意見、質問、指摘などを受け付けています。どんな些細なことでも全く構いませんので、気軽に連絡していただければと思います。