Unity에서 UI 드래그 앤 드롭을 사용하여 간단한 인벤토리 시스템 코딩
많은 게임에서는 플레이어가 많은 수의 아이템(예: RTS/MOBA/RPG 게임, 액션 롤플레잉 게임 등)을 수집하고 휴대할 수 있도록 하며, 여기서 인벤토리가 작동합니다.
인벤토리는 플레이어 아이템에 대한 빠른 액세스와 이를 구성하는 간단한 방법을 제공하는 요소 테이블입니다.
이번 포스팅에서는 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단계: 플레이어 및 인벤토리 시스템 설정
플레이어 설정부터 시작해 보겠습니다.
- 새로운 GameObject를 생성하고 호출합니다. "Player"
- 새 캡슐을 만듭니다(GameObject -> 3D Object -> Capsule). Capsule Collider 구성 요소를 제거한 다음 "Player" 개체 내부로 캡슐을 이동하고 마지막으로 위치를 (0, 1, 0)으로 변경합니다.
- Main Camera를 "Player" Object 내부로 이동하고 위치를 (0, 1.64, 0)으로 변경합니다.
- SC_CharacterController 스크립트를 "Player" 개체에 연결합니다(Character Controller라는 다른 구성 요소가 자동으로 추가되고 중심 값이 (0, 1, 0)으로 변경됩니다)
- SC_CharacterController의 "Player Camera" 변수에 기본 카메라를 할당합니다.
이제 픽업 항목을 설정해 보겠습니다. 이는 게임에서 선택할 수 있는 항목의 조립식 건물입니다.
이 튜토리얼에서는 단순한 모양(큐브, 원통 및 구)을 사용하지만 다른 모델, 일부 입자 등을 추가할 수도 있습니다.
- 새로운 GameObject를 생성하고 호출합니다. "SimpleItem"
- 새 큐브(GameObject -> 3D Object -> Cube)를 만들고 (0.4, 0.4, 0.4)로 크기를 줄인 다음 "SimpleItem" GameObject 내부로 옮깁니다.
- "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"
- 하위 큐브를 제거하고 새 원통을 만듭니다(GameObject -> 3D 개체 -> 원통). "SimpleItem 2" 안으로 이동하고 (0.4, 0.4, 0.4)로 크기를 조정합니다.
- SC_PickItem의 항목 이름을 "Cylinder"로 변경하고 항목 미리보기를 원통 이미지로 변경합니다.
구체 품목의 경우:
- "SimpleItem" 개체를 복제하고 이름을 지정합니다. "SimpleItem 3"
- 하위 큐브를 제거하고 새 Sphere를 만듭니다(GameObject -> 3D Object -> Sphere). "SimpleItem 3" 내부로 이동하고 (0.4, 0.4, 0.4)로 크기를 조정합니다.
- SC_PickItem의 항목 이름을 "Sphere"로 변경하고 항목 미리보기를 구 이미지로 변경합니다.
이제 각 항목을 Prefab에 저장합니다.
이제 항목이 준비되었습니다.
마지막 단계는 인벤토리 시스템을 설정하는 것입니다.
- "Player" 개체에 SC_InventorySystem 연결
- 십자선 텍스처 변수를 할당합니다(아래 이미지를 사용하거나 여기에서 고품질 십자선 텍스처를 얻을 수 있습니다):
- SC_InventorySystem의 "Player Controller" 변수에 SC_CharacterController를 할당합니다.
- "Available Items"의 경우 이전에 생성된 항목 Prefab을 할당합니다(참고: 이는 장면 개체가 아니라 프로젝트 뷰의 Prefab 인스턴스여야 합니다).
이제 인벤토리 시스템이 준비되었습니다. 테스트해 보겠습니다.
모든 것이 예상대로 작동합니다!