GUIの作成１

　ゲーム上でアイテムを使用するための用意が整ったところで、
これをゲーム画面に反映させるためにGUIを作成しましょう。

GUISkinを作成

　GUISkinではUIのスタイルをカスタマイズすることができます。
Projectビュー上で右クリック→「Create」→「GUI Skin」で追加し、
「Player_Skin」と名づけましょう。
　また新しいJavaScriptを作成して「GUI_CostomControls」と名づけます。

					//アイテム表示用の関数群------------------------------------
					//画像を使用して持っているアイテムと数をGUIに表示
					function InvoHudButton(screenPos: Rect, numAvailable: int,
						itemImage: Texture, itemtooltip: String) : boolean
					{				
					}

　InvoHudButton関数ではプレイヤーがボタンを押したかどうかを判別するために
必ず真理値（boolean型）で返すようにしています。

ページTOP

GUIを表示するスクリプト

　InvoHudButton関数の内側に以下のコードを追加しましょう。

				if(GUI.Button(screenPos, GUIContent(itemImage, itemtooltip), "HUD Buttun"))
					return true;
		
				//このアイテムをいくつ持っているかラベルを追加
				GUI.Label(Rect(screenPos.xMax - 20, screenPos.yMax -25, 20, 20),
					numAvailable.ToString());
		
				//表示エリアを設定（
				GUI.Label(Rect(20, Screen.height -130, 500, 100), GUI.tooltip);

参考としてJavaScriptファイルをダウンロードできます。
DlImage
次に新しいボタンのスタイルを定義しましょう。

ページTOP

スタイルの定義

　「Player_Skin」を選択し、Inspectorビュー上で次のように設定します。
　 　また予めアイテムアイコンの背景画像をUniyに取り込んでおきましょう。

  1. 「Custom　Styles」の「Size」を１に設定
  2. 「Element0」の名前を「HUD_Buttun」に変更
  3. 「Normal」→「Background」にボタンを押していない時の画像を設定
  4. 「Hover」と「Active」の「Background」にボタンを押した時の画像を設定
  5. 文字を引き伸ばして表示しないために、「Stretch Width」のチェックをはずす
    6. ItemButtonBackUpImageItemButtonBackDownImage
    DlImage

　次はゲームに組み込むためのスクリプトを作成します。

ページTOP

GUIを組み込むスクリプト

　新しいJavaScriptを作成し、「GUI_HUD」と名づけましょう。
次のようにコードを追加していきます。

					//テクスチャの設定
					var customSkin : GUISkin;

					var bookImage : Texture2D;
					var repairImage : Texture2D;

　変数customSkinを定義することによってUnityのデフォルトのスキンではなく、
新しく作ったスキンを使うことができます。

					private var customControls : GUI_CustomControls;
					private var playerInvo : Player_Inventory;
					function Awake()
					{
						customControls = FindObjectOfType(GUI_CustomControls);
						playerInvo = FindObjectOfType(Player_Inventory);
					}

　Awake関数によってプレイヤーのデータをいくつか前もってキャッシュしています。

					function OnGUI()
					{
						if(customSkin)
							GUI.skin = customSkin;
					//インベントリのボタン---------------------------------------
						if(customControls.InvoHudButton(Rect(110, Screen.height - 100, 93, 95),
							playerInvo.GetItemCount(InventoryItem.REPAIR),
								repairImage, " Click to use a Repair.")) {
					//ボタンが押されたらアイテムを消費
						playerInvo.UseItem(InventoryItem.REPAIR, 1);
					}

					//使用不能なアイテム
					customControls.InvoHudButton(Rect(
						Screen.width - 210, Screen.height - 100, 93, 95),
							playerInvo.GetItemCount(InventoryItem.BOOK), bookImage,
							"Number of books you've collected.");
					}

　「Player_Inventory」スクリプトで作成したGetItemCount関数を利用してアイテムの
所持数を渡しています。アイテムを使用した時はUseItem関数が呼び出されて処理します。
　参考としてJavaScriptファイルをダウンロードできます。

DlImage

書き終わったら「GUH_HUD」と「GUI_CustomControls」の２つのスクリプトを
メインカメラにドロップします。次のように各項目に適するファイルをドロップしましょう。

  • Custom Skin : Player_Skin
  • Book Image : 本のアイコン画像
  • Repair Image : 回復アイテムのアイコン画像

    • （以下の画像を右クリック保存して使用して下さい。）

    bookrepair

    以下のように画面に反映されていればOKです。
    回復アイテムはマウスでクリックすることで使用できるので確認してみてください。

    gui1完成
    ページTOP