Unity で UI ドラッグ アンド ドロップを使用した簡単な在庫システムをコーディングする
多くのゲーム (例: RTS/MOBA/RPG ゲーム、アクション ロールプレイング ゲームなど) では、プレイヤーが多数のアイテムを収集して持ち歩くことができ、そこでインベントリが活躍します。
Inventory は、プレーヤー アイテムにすばやくアクセスし、それらを整理する簡単な方法を提供する要素のテーブルです。
この投稿では、Unity でアイテムのピックアップと UI のドラッグ アンド ドロップを備えた単純な インベントリ システム をプログラムする方法を学びます。
ステップ 1: スクリプトを作成する
このチュートリアルには 3 つのスクリプトが必要です。
SC_CharacterController.cs
//You are free to use this script in Free or Commercial projects
//sharpcoderblog.com @2019
using UnityEngine;
[RequireComponent(typeof(CharacterController))]
public class SC_CharacterController : MonoBehaviour
{
public float speed = 7.5f;
public float jumpSpeed = 8.0f;
public float gravity = 20.0f;
public Camera playerCamera;
public float lookSpeed = 2.0f;
public float lookXLimit = 60.0f;
CharacterController characterController;
Vector3 moveDirection = Vector3.zero;
Vector2 rotation = Vector2.zero;
[HideInInspector]
public bool canMove = true;
void Start()
{
characterController = GetComponent<CharacterController>();
rotation.y = transform.eulerAngles.y;
}
void Update()
{
if (characterController.isGrounded)
{
// We are grounded, so recalculate move direction based on axes
Vector3 forward = transform.TransformDirection(Vector3.forward);
Vector3 right = transform.TransformDirection(Vector3.right);
float curSpeedX = speed * Input.GetAxis("Vertical");
float curSpeedY = speed * Input.GetAxis("Horizontal");
moveDirection = (forward * curSpeedX) + (right * curSpeedY);
if (Input.GetButton("Jump"))
{
moveDirection.y = jumpSpeed;
}
}
// Apply gravity. Gravity is multiplied by deltaTime twice (once here, and once below
// when the moveDirection is multiplied by deltaTime). This is because gravity should be applied
// as an acceleration (ms^-2)
moveDirection.y -= gravity * Time.deltaTime;
// Move the controller
characterController.Move(moveDirection * Time.deltaTime);
// Player and Camera rotation
if (canMove)
{
rotation.y += Input.GetAxis("Mouse X") * lookSpeed;
rotation.x += -Input.GetAxis("Mouse Y") * lookSpeed;
rotation.x = Mathf.Clamp(rotation.x, -lookXLimit, lookXLimit);
playerCamera.transform.localRotation = Quaternion.Euler(rotation.x, 0, 0);
transform.eulerAngles = new Vector2(0, rotation.y);
}
}
}SC_PickItem.cs
//You are free to use this script in Free or Commercial projects
//sharpcoderblog.com @2019
using UnityEngine;
public class SC_PickItem : MonoBehaviour
{
public string itemName = "Some Item"; //Each item must have an unique name
public Texture itemPreview;
void Start()
{
//Change item tag to Respawn to detect when we look at it
gameObject.tag = "Respawn";
}
public void PickItem()
{
Destroy(gameObject);
}
}SC_InventorySystem.cs
//You are free to use this script in Free or Commercial projects
//sharpcoderblog.com @2019
using UnityEngine;
public class SC_InventorySystem : MonoBehaviour
{
public Texture crosshairTexture;
public SC_CharacterController playerController;
public SC_PickItem[] availableItems; //List with Prefabs of all the available items
//Available items slots
int[] itemSlots = new int[12];
bool showInventory = false;
float windowAnimation = 1;
float animationTimer = 0;
//UI Drag & Drop
int hoveringOverIndex = -1;
int itemIndexToDrag = -1;
Vector2 dragOffset = Vector2.zero;
//Item Pick up
SC_PickItem detectedItem;
int detectedItemIndex;
// Start is called before the first frame update
void Start()
{
Cursor.visible = false;
Cursor.lockState = CursorLockMode.Locked;
//Initialize Item Slots
for (int i = 0; i < itemSlots.Length; i++)
{
itemSlots[i] = -1;
}
}
// Update is called once per frame
void Update()
{
//Show/Hide inventory
if (Input.GetKeyDown(KeyCode.Tab))
{
showInventory = !showInventory;
animationTimer = 0;
if (showInventory)
{
Cursor.visible = true;
Cursor.lockState = CursorLockMode.None;
}
else
{
Cursor.visible = false;
Cursor.lockState = CursorLockMode.Locked;
}
}
if (animationTimer < 1)
{
animationTimer += Time.deltaTime;
}
if (showInventory)
{
windowAnimation = Mathf.Lerp(windowAnimation, 0, animationTimer);
playerController.canMove = false;
}
else
{
windowAnimation = Mathf.Lerp(windowAnimation, 1f, animationTimer);
playerController.canMove = true;
}
//Begin item drag
if (Input.GetMouseButtonDown(0) && hoveringOverIndex > -1 && itemSlots[hoveringOverIndex] > -1)
{
itemIndexToDrag = hoveringOverIndex;
}
//Release dragged item
if (Input.GetMouseButtonUp(0) && itemIndexToDrag > -1)
{
if (hoveringOverIndex < 0)
{
//Drop the item outside
Instantiate(availableItems[itemSlots[itemIndexToDrag]], playerController.playerCamera.transform.position + (playerController.playerCamera.transform.forward), Quaternion.identity);
itemSlots[itemIndexToDrag] = -1;
}
else
{
//Switch items between the selected slot and the one we are hovering on
int itemIndexTmp = itemSlots[itemIndexToDrag];
itemSlots[itemIndexToDrag] = itemSlots[hoveringOverIndex];
itemSlots[hoveringOverIndex] = itemIndexTmp;
}
itemIndexToDrag = -1;
}
//Item pick up
if (detectedItem && detectedItemIndex > -1)
{
if (Input.GetKeyDown(KeyCode.F))
{
//Add the item to inventory
int slotToAddTo = -1;
for (int i = 0; i < itemSlots.Length; i++)
{
if (itemSlots[i] == -1)
{
slotToAddTo = i;
break;
}
}
if (slotToAddTo > -1)
{
itemSlots[slotToAddTo] = detectedItemIndex;
detectedItem.PickItem();
}
}
}
}
void FixedUpdate()
{
//Detect if the Player is looking at any item
RaycastHit hit;
Ray ray = playerController.playerCamera.ViewportPointToRay(new Vector3(0.5F, 0.5F, 0));
if (Physics.Raycast(ray, out hit, 2.5f))
{
Transform objectHit = hit.transform;
if (objectHit.CompareTag("Respawn"))
{
if ((detectedItem == null || detectedItem.transform != objectHit) && objectHit.GetComponent<SC_PickItem>() != null)
{
SC_PickItem itemTmp = objectHit.GetComponent<SC_PickItem>();
//Check if item is in availableItemsList
for (int i = 0; i < availableItems.Length; i++)
{
if (availableItems[i].itemName == itemTmp.itemName)
{
detectedItem = itemTmp;
detectedItemIndex = i;
}
}
}
}
else
{
detectedItem = null;
}
}
else
{
detectedItem = null;
}
}
void OnGUI()
{
//Inventory UI
GUI.Label(new Rect(5, 5, 200, 25), "Press 'Tab' to open Inventory");
//Inventory window
if (windowAnimation < 1)
{
GUILayout.BeginArea(new Rect(10 - (430 * windowAnimation), Screen.height / 2 - 200, 302, 430), GUI.skin.GetStyle("box"));
GUILayout.Label("Inventory", GUILayout.Height(25));
GUILayout.BeginVertical();
for (int i = 0; i < itemSlots.Length; i += 3)
{
GUILayout.BeginHorizontal();
//Display 3 items in a row
for (int a = 0; a < 3; a++)
{
if (i + a < itemSlots.Length)
{
if (itemIndexToDrag == i + a || (itemIndexToDrag > -1 && hoveringOverIndex == i + a))
{
GUI.enabled = false;
}
if (itemSlots[i + a] > -1)
{
if (availableItems[itemSlots[i + a]].itemPreview)
{
GUILayout.Box(availableItems[itemSlots[i + a]].itemPreview, GUILayout.Width(95), GUILayout.Height(95));
}
else
{
GUILayout.Box(availableItems[itemSlots[i + a]].itemName, GUILayout.Width(95), GUILayout.Height(95));
}
}
else
{
//Empty slot
GUILayout.Box("", GUILayout.Width(95), GUILayout.Height(95));
}
//Detect if the mouse cursor is hovering over item
Rect lastRect = GUILayoutUtility.GetLastRect();
Vector2 eventMousePositon = Event.current.mousePosition;
if (Event.current.type == EventType.Repaint && lastRect.Contains(eventMousePositon))
{
hoveringOverIndex = i + a;
if (itemIndexToDrag < 0)
{
dragOffset = new Vector2(lastRect.x - eventMousePositon.x, lastRect.y - eventMousePositon.y);
}
}
GUI.enabled = true;
}
}
GUILayout.EndHorizontal();
}
GUILayout.EndVertical();
if (Event.current.type == EventType.Repaint && !GUILayoutUtility.GetLastRect().Contains(Event.current.mousePosition))
{
hoveringOverIndex = -1;
}
GUILayout.EndArea();
}
//Item dragging
if (itemIndexToDrag > -1)
{
if (availableItems[itemSlots[itemIndexToDrag]].itemPreview)
{
GUI.Box(new Rect(Input.mousePosition.x + dragOffset.x, Screen.height - Input.mousePosition.y + dragOffset.y, 95, 95), availableItems[itemSlots[itemIndexToDrag]].itemPreview);
}
else
{
GUI.Box(new Rect(Input.mousePosition.x + dragOffset.x, Screen.height - Input.mousePosition.y + dragOffset.y, 95, 95), availableItems[itemSlots[itemIndexToDrag]].itemName);
}
}
//Display item name when hovering over it
if (hoveringOverIndex > -1 && itemSlots[hoveringOverIndex] > -1 && itemIndexToDrag < 0)
{
GUI.Box(new Rect(Input.mousePosition.x, Screen.height - Input.mousePosition.y - 30, 100, 25), availableItems[itemSlots[hoveringOverIndex]].itemName);
}
if (!showInventory)
{
//Player crosshair
GUI.color = detectedItem ? Color.green : Color.white;
GUI.DrawTexture(new Rect(Screen.width / 2 - 4, Screen.height / 2 - 4, 8, 8), crosshairTexture);
GUI.color = Color.white;
//Pick up message
if (detectedItem)
{
GUI.color = new Color(0, 0, 0, 0.84f);
GUI.Label(new Rect(Screen.width / 2 - 75 + 1, Screen.height / 2 - 50 + 1, 150, 20), "Press 'F' to pick '" + detectedItem.itemName + "'");
GUI.color = Color.green;
GUI.Label(new Rect(Screen.width / 2 - 75, Screen.height / 2 - 50, 150, 20), "Press 'F' to pick '" + detectedItem.itemName + "'");
}
}
}
}
ステップ 2: プレーヤーとインベントリ システムをセットアップする
まずはプレーヤーを設定しましょう。
- 新しいゲームオブジェクトを作成して呼び出します "Player"
- 新しいカプセルを作成します (ゲームオブジェクト -> 3D オブジェクト -> カプセル)。カプセル コライダー コンポーネントを削除して、カプセルを "Player" オブジェクト内に移動し、最後にその位置を (0, 1, 0) に変更します。
- メイン カメラを "Player" オブジェクト内に移動し、その位置を (0, 1.64, 0) に変更します。
- SC_CharacterController スクリプトを "Player" オブジェクトにアタッチします (キャラクタ コントローラーと呼ばれる別のコンポーネントが自動的に追加され、その中心値が (0, 1, 0) に変更されます)
- メインカメラを SC_CharacterController の "Player Camera" 変数に割り当てます
次に、Pick Up アイテムをセットアップしましょう。これらは、ゲーム内で選択できるアイテムのプレハブになります。
このチュートリアルでは、単純な形状 (立方体、円柱、球) を使用しますが、さまざまなモデル、場合によってはパーティクルなどを追加することもできます。
- 新しいゲームオブジェクトを作成して呼び出します "SimpleItem"
- 新しいキューブを作成し (ゲームオブジェクト -> 3D オブジェクト -> キューブ)、(0.4, 0.4, 0.4) にスケールダウンして、"SimpleItem" ゲームオブジェクト内に移動します。
- "SimpleItem" を選択し、Rigidbody コンポーネントと SC_PickItem スクリプトを追加します。
SC_PickItem には 2 つの変数があることがわかります。
項目名 - this should be a unique name.アイテムのプレビュー - a Texture that will be displayed in the Inventory UI, preferably you should assign the image that represents the item.
私の場合、項目名は "Cube" で、項目プレビューは白い四角形です。
他の 2 つの項目についても同じ手順を繰り返します。
シリンダーアイテムの場合:
- "SimpleItem" オブジェクトを複製し、名前を付けます "SimpleItem 2"
- 子 Cube を削除し、新しいシリンダーを作成します (ゲームオブジェクト -> 3D オブジェクト -> シリンダー)。それを "SimpleItem 2" 内に移動し、(0.4, 0.4, 0.4) にスケールします。
- SC_PickItem の項目名を "Cylinder" に変更し、項目プレビューを円柱の画像に変更します。
球体アイテムの場合:
- "SimpleItem" オブジェクトを複製し、名前を付けます "SimpleItem 3"
- 子 Cube を削除し、新しい Sphere (GameObject -> 3D Object -> Sphere) を作成します。それを "SimpleItem 3" 内に移動し、(0.4, 0.4, 0.4) にスケールします。
- SC_PickItem の項目名を "Sphere" に変更し、項目プレビューを球の画像に変更します。
次に、各項目をプレハブに保存します。
これでアイテムの準備が完了しました。
最後のステップは、在庫システムをセットアップすることです。
- SC_InventorySystem を "Player" オブジェクトにアタッチします
- 十字線テクスチャ変数を割り当てます (下の画像を使用するか、こちら から高品質の十字線テクスチャを取得できます)。
- SC_CharacterController を SC_InventorySystem の "Player Controller" 変数に割り当てます
- "Available Items" の場合、以前に作成した項目プレハブを割り当てます (注: これはシーン オブジェクトではなく、プロジェクト ビューからのプレハブ インスタンスである必要があります)。
在庫システムの準備ができたので、テストしてみましょう。
すべてが期待どおりに機能します。