Unityに関連する記事です


 UI に所持しているアイテムの情報をアイコン表示する機能を実装します。

 未所持の場合は、アイテムの情報を半透明のアイコン表示にするか、アイコン自体を表示しないようにします。

 アイテムを獲得して所持したときに、表示を更新して、アイコンを表示するようにします。


<実装動画>
動画ファイルへのリンク


ItemSet ゲームオブジェクトの作成する


 アイテムのアイコンの表示する場所を設定し、管理するためのゲームオブジェクトです。
今回は画面の左下に設定していますが、任意の位置で構いません。

 Canvas ゲームオブジェクトの上で右クリックをしてメニューを開き、Create Empty を選択します。
Canvas の子オブジェクトとして作成されていることを確認します。名前を ItemSet に変更します。
 
 なお、Create Empty ではなく、Image で作成し、アイコンの背景用の画像を設定してもいいでしょう。


ヒエラルキー画像




 アイコンの大きさと隣合うスペースを設定するために、GridLayoutGroup コンポーネントをアタッチして設定をしています。
この機能を利用すると、子オブジェクトに対して、一定のサイズや方向を決めて並べることが出来ます。
今回は横方向に均一の幅で、同じサイズで並べるように設定を行っています。


インスペクター画像



Sceneビュー画像



<参考サイト>
Unity スクリプト・リファレンス
GridLayoutGroup
https://docs.unity3d.com/ja/2018.4/ScriptReference...


ItemIconDetail ゲームオブジェクトを作成する


 ItemSet ゲームオブジェクトの子オブジェクトとして Image ゲームオブジェクトを作成します。
画像の設定は行いません。

 また、次の手順で ItemIconDetail スクリプトを作成したら、アタッチして、プレファブにします。

 このゲームオブジェクトがアイテムのアイコンを表示するゲームオブジェクトになります。
画像は設定されていませんので、プレファブからこのゲームオブジェクトを生成した際に、スクリプトを使って
動的に画像を差し替える処理を実装します。

 そのため、1つのゲームオブジェクトではありますが、このゲームオブジェクトを元にして
複数のアイテムのアイコンを作成することになります。


ヒエラルキー画像



インスペクター画像



Sceneビュー画像



ItemIconDetail スクリプトを作成する


 ItemIconDetail スクリプトを作成したらヒエラルキーにある ItemIconDetail ゲームオブジェクトにドラッグアンドドロップしたアタッチします。
その後、ItemIconDetail ゲームオブジェクトをプレファブにしてから、ヒエラルキーより削除します。

 このスクリプトの役割は、ItemIconDetail ゲームオブジェクトの制御を行うことです。
アイテムのアイコン画像を設定したり、画像の表示を切り替えたりするために必要な変数やメソッドを作成しています。

 ItemIconDetail ゲームオブジェクトには画像の設定がありません。
そのため、画像はゲーム内で動的に差し替えを行います。そのための処理として Resources.Load メソッドを利用しています。


ItemIconDetail.cs

<= クリックすると開きます



<Resources.Load メソッド>


 Resources フォルダにあるファイルを読み込むためのメソッドです。ファイルを <> の部分で指定している型として読み込みます。
指定には拡張子は含みません。


  imgItemIcon.sprite = Resources.Load<Sprite>("ItemIcon_" + itemNo);

 今回の実装では、Resources フォルダ内にある ItemIcon_ からはじまるファイルを Sprite 型として読み込んでいます。
  1. itemNo の部分はその都度異なる数字が入るので、実際に読み込むファイル名は ItemIcon_0 や ItemIcon_2 という名称になります。


<参考サイト>
Unity スクリプト・リファレンス
Resources.Load
https://docs.unity3d.com/jp/current/ScriptReferenc...
Qiita @k7a 様
今更誰も教えてくれない、Unityにおけるアセット読み込みについての基礎知識
https://qiita.com/k7a/items/df6dd8ea66cbc5a1e21d


 ほかにも調べると出てきますので、自分で調べて知識を深めてみましょう。


ItemManager スクリプトを修正する


 Start メソッド内に UI にアイテムのアイコンを生成するメソッドを実行する処理を追加します。

 UpdateHaveItems メソッド内の処理を修正し、アイテムのアイコンを表示し、アイコンの設定を実行する処理を追加します。
このメソッド内で各アイテムのアイコンに画像の設定やアイコンの色を半透明にする処理の書いてあるメソッドを実行する処理を行います。
 

ItemManager.cs

<= クリックすると開きます



ItemManager ゲームオブジェクトの設定を行う


 itemIconDetailPrefab 変数には、ItemIconDetail ゲームオブジェクトのプレファブをドラッグアンドドロップしてアサインします。

 itemIconDetailsList 変数はゲームの実行に合わせて内容が追加されるので、そのまま変更なしで構いません。

 itemIconDetailTran 変数は、Canvas ゲームオブジェクトの子オブジェクトである ItemSet ゲームオブジェクトをドラッグアンドドロップしてアサインします。


インスペクター画像



Resources フォルダを作成し、アイコン用の画像をインポートして画像ファイルの名前を設定する


 Unity に新しく Resources フォルダを作成します。このフォルダ名は特別な意味を持つので、一字一句、間違えずに作成してください。
なお、DOTween をインポートしてある場合にはすでに作成済なので、新しく作成する必要はありません。

 まず、Unity 内に Resources フォルダがあるかどうかを確認します。ない場合のみ、新しく作成します。

 Project 内で右クリックをしてメニューを開き、Create => Folder を選択します。
新しいフォルダが作成されますので、名前を Resources に変更します。



 続いて、このフォルダ内に、アイテムのアイコン用の画像をインポートします。

 インポートしたら、名前を ItemIcon_x という名称で統一して作成します。
x の部分は半角の数字で、0 から採番してください。この番号がアイテムの番号と連動するようになっています。


フォルダ画像



ゲームを実行して動作を確認する


 ゲームを実行し、ゲームに登場するアイテムの数分のアイコンが UI に生成されて画像がアイテムの番号に連動して差し変わっていれば制御成功です。
アイコンは半透明で表示されています。

 アイテムを取得すると、半透明のアイテムが半透明ではなくなります。そちらも合わせて確認しておいてください。

コメントをかく


「http://」を含む投稿は禁止されています。

利用規約をご確認のうえご記入下さい

Menu



プログラムの基礎学習

コード練習

技術/知識(実装例)

2Dおはじきゲーム(発展編)

2D強制横スクロールアクション(発展編)

3Dダイビングアクション(発展編)

2Dタップシューティング(拡張編)

レースゲーム(抜粋)

2D放置ゲーム(発展編)

3D脱出ゲーム(抜粋)

2Dリアルタイムストラテジー

2Dトップビューアドベンチャー(宴アセット使用)

3Dタップアクション(NavMeshAgent 使用)

2Dトップビューアクション(カエルの為に〜、ボコスカウォーズ風)

3Dトップビューアクション(白猫風)

VideoPlayer イベント連動の実装例

VideoPlayer リスト内からムービー再生の実装例(発展)

AR 画像付きオブジェクト生成の実装例

AR リスト内から生成の実装例(発展)

private



このサイト内の作品はユニティちゃんライセンス条項の元に提供されています。

管理人/副管理人のみ編集できます