How to make a DRAG & DROP UI in Unity!
Вставка
- Опубліковано 26 лип 2024
- 유니티의 인터페이스를 이용해 DRAG & DROP UI를 제작하는 동영상입니다.
In this video you will learn how to create DRAG & DROP UI use Interface with Unity Engine.
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
00:00 Intro
00:08 Drag & Drop 구현을 위해 필요한 인터페이스
02:17 Icon Asset Import
02:48 드래그 가능한 아이템 오브젝트
05:38 드롭 가능한 슬롯 오브젝트
✔ 스크립트
drive.google.com/file/d/1YC0t...
👍 양질의 교육 콘텐츠를 제작할 수 있도록 채널 맴버십에 가입하세요.
/ @unitynote
👍 양질의 교육 콘텐츠를 제작할 수 있도록 고박사에게 후원을 해보세요. (카카오 페이)
donaricano.com/mypage/1727391...
※링크로 이동하시면 카카오 QR코드가 보입니다.
✅ 인프런 - 따라하면서 배우는 고박사의 하이퍼캐주얼 게임 시리즈 01
www.inflearn.com/course/%EA%B...
🔔 앞으로 올라오는 더 많은 강좌 동영상을 쉽게 보려면?
/ @unitynote
여러분 안녕하세요. 고박사입니다.
항상 더 좋은 강의를 제작할 수 있도록 노력하겠습니다.
여러분의 관심과 응원은 저에게 큰 힘이 됩니다.
구독(Subscribe), 좋아요(Like)를 눌러주세요!!
감사합니다.
Unity Version 2021.2.1f1
#유니티엔진, #유니티강좌, #DRAGDROP, #DRAG, #DROP
IPointer, IDrag, IDrop 인터페이스를 2D/3D 오브젝트에서 사용할 때
EventSystem(GameObject - UI) 오브젝트를 Hierarchy View에 생성해야 하고,
2D 오브젝트는 Main Camera에 Physics2DRaycaster 컴포넌트를
3D 오브젝트는 Main Camera에 PhysicsRaycaster 컴포넌트를 추가해야 합니다.
너무나 깔끔한 강의네요. 항상 감사드려요.
이번 강의도 최고에요! 너무 감사합니다.
댓글 감사합니다^^
오! 드래그앤 드롭 좋은 튜토리얼이 나왔군요. 감사합니다!
댓글 감사합니다^^
여유가 될 때 이 영상을 바탕으로 Inventory 강의를 한번 만들어볼까 합니다.
항상 좋은 강의를 올려주셔서 감사합니다.
새해 복 많이 받으세요.^^!~
댓글 감사합니다. 새해 복 많이 받으세요^^
감사합니다.~ 잘보겠습니다.^^
새해복많이 받으세요~^^
댓글 감사합니다. 새해 복 많이 받으세요^^
좋은 강의 감사합니다~
새해 복 많이 받으세요 ^^
댓글 감사합니다. 새해 복 많이 받으세요^^
감사합니다 좋은 영상 항상 감사드립니다.
새해복 많이 받으세요 ^^
댓글 감사합니다. 새해 복 많이 받으세요^^
좋은 강의 정말 감사드립니다!!
댓글 감사합니다^^
고박사님도 새해 복 많이 받으세요! ^ㅅ^
댓글 감사합니다. 새해 복 많이 받으세요^^
새해 복 많이 받으세요~~~
댓글 감사합니다. 새해 복 많이 받으세요^^
고박사님..항상 좋은 영상/강의 감사드립니다...새해 복 마니 받으세요..~~~그리고, 유니티에서 챗팅(문자/음성)은 어떻게 구현/적용하는지요??? 혹시 강의 계획 있는지요???
댓글 감사합니다. 새해 복 많이 받으세요^^
문자 채팅은 텍스트를 입력하면 입력한 내용을 출력하는 것이기 때문에 그렇게 어렵지 않습니다. 다만 채팅은 혼자 하는 것이 아니기 때문에 멀티로 구현이 되어야 하겠죠.
음성 채팅의 경우 유니티 홈페이지에도 나와있는 "Vivox"라는 것이 있고, 포톤에서 제공하는 "포톤 보이스" 라는 것도 있습니다.
그냥 가져다 쓰는 정도가 아닌 강의를 위한 습득에는 좀 더 많은 시간이 요구되기 때문에 당장 강의 계획이 있다고는 말씀 못드리겠습니다 ㅠㅠ
@@unitynote 상세 답변 거듭 감사 드립니다 ^.^
안녕하세요 덕분에 재미 붙이고 잘 배우고 있습니다.
인벤토리 슬롯에 있는 아이템과 EquipmentSlot이 각각 a,b의 변수를 가지고 있다 가정하고 아이템이 EquipmentSlot에 넣었을때 아이템의 변수값을 EquipmentSlot의 변수 값에 전달할려면 어떻게 해야하나요? 그리고 EquipmentSlot에 아이템이 있어도 계속 드랍되는데 어떻게 하면 해결될까요?
DroppableUI.cs가 EquipmentSlot 오브젝트에 적용되는 컴포넌트 입니다.
그럼 우리가 아이템을 드래그해서 EquipmentSlot에 가져다대면
EquipmentSlot 오브젝트에 있는 DroppableUI의 OnPointerEnter, OnPointerExit가 호출되고,
아이템을 드롭하면 OnDrop() 메소드가 호출됩니다.
그럼 만약 EquipmentSlot에 다른 스크립트를 작성해서 b라는 변수를 작성해두었고, 아이템에 있는 a라는 변수를 옮기고 싶은 것이라면
DroppableUI의 OnDrop() 메소드에서 해야겠죠
아이템에 있는 Item 스크립트의 a 변수
EquipmentSlot에 있는 EquipmentItem 스크립트의 b 변수
public void OnDrop(..)
{
if ( ... )
{
.. 기존 코드
GetComponent().b = eventData.pointerDrag.GetComponent().a;
}
}
와 같이 작성할 수 있겠죠
드랍했을 때 기존 아이템과 방금 드롭한 아이템을 교체한다거나 하는 좀 더 섬세한 작업이 아닌
단순히 현재 이곳에 아이템이 있으니 드롭할 수 없습니다. 라는 처리를 하는 것이라면
bool 변수를 하나 만들어서 초기 값을 false로 설정합니다.
그리고 아이템을 드롭하려고 할 때 이 값이 false이면 배치가 가능하고, 아이템이 배치되면 true로 설정합니다.
다시 아이템을 다른 곳으로 드롭하게 되면 false가 되어 다시 아이템 배치가 가능해지도록 합니다.
@@unitynote 혹시 자세하게 알 수 있을까요ㅠ bool변수를 설정하거 아이템이 있다면 다른 아이템이 드랍되지 않고 원래 위치로 돌아가게 하려는데 잘 안되네여ㅜㅜ
안녕하세요 좋은 강의 감사합니다.
인벤토리 시스템에서 Slot에 대해 드래그/드랍을 수행하는데
인벤토리 Panel 전체가 움직이고 아이템 드래그/드롭이 수행이 안되는 경우에는 어떠한 부분을 수정해야 하는지
답변 해주시면 감사하겠습니다
인벤토리 Panel의 특정 부분 (보통 윗부분)만 드래그해서 움직일 수 있도록 Panel을 추가로 만들어 설정하거나 아이템이 인식된 경우에는 인벤토리 Panel을 움직이지 않도록 처리하시면 됩니다.
PointerEventData 매개변수로 현재 선택한 오브젝트 정보 같은걸 알 수 있으니 그걸 이용해도 되고,
BasicSkills의 UI 관련 영상을 보면 GraphicRaycaster를 이용해 광선으로 UI 오브젝트를 검출할 수도 있습니다.
@@unitynote 넵 감사합니다..!
감사합니다! 혹시 궁금한게 타입별로 넣는건데 타입을 중복으로 할수있나요 ? 만약에 반지라고한다면 반지두개 낄수있는 이런식?
드롭할 때 타입을 체크해서 슬롯의 타입과 아이템의 타입이 같으면 드롭이 가능하도록 설정하는 것이기 때문에 중복되는 타입이 여러 개여도 별도의 체크 없이 당연히 가능합니다.
canvas가 Screen Space - Camera 로 설정되있으면 item z값이 -17000 같이 이상한 값이 되서 실행이 안되네요. 이걸 해결할 순 없을까요?
Screen Space가 overlay가 아닐 때는 월드, UI 오브젝트 사이의 좌표 관계와 같다고 보면 됩니다.
DraggableUI.cs 스크립트의 OnDrag() 메소드 내용을
public void OnDrag(PointerEventData eventData)
{
Vector3 position = Camera.main.WorldToScreenPoint(rect.position);
position.x += eventData.delta.x;
position.y += eventData.delta.y;
// 현재 스크린상의 마우스 위치를 UI 위치로 설정 (UI가 마우스를 쫓아다니는 상태)
rect.position = Camera.main.ScreenToWorldPoint(position);
}
이렇게 바꿔야 합니다.
안녕하세요 영상 너무 잘보고 있습니다. 따라해보다가 궁금한점이 있어서 질문 드리려고 합니다. 다름이 아니라 EquipmentSlot이 PanelEquip밖에 Canvas 하위로 두었을 때 OnDrop 함수가 동작하지 않는데 혹시 이유가 있을까요? EquipmentSlot은 오브젝트 하위로 들어갔을 때만 동작을 하는것 같아서요. 감사합니다.
Panel이나 다른 Image 뒤에 배치되어 있는건 아닌지 확인해보세요
Drop할 수 있는 기능은 DroppableUI.cs 스크립트에 작성되어 있기 때문에 부모/자식 관계에 상관없이 작동합니다.
가끔 드래그 할 때 OnPointerExit가 정상적으로 작동하지 않아, 노란색 칸으로 남아있는 경우가 있는데
이러한 경우는 어떻게 처리해야 할까요...?
업데이트와 같은 주기적으로 호출하는 메소드에서
현재 색상이 노란색이고, 현재 마우스 위치가 아이콘의 내부가 아니면 색을 하얀색으로 바꾼다.
라는 코드를 작성해서 예외처리를 해줘도 됩니다.
@@unitynote 감사합니다 고박사님!
보여주신 스크립트에서 A아이템 아이콘을 B아이템 아이콘에 드래그 앤 드롭하면 서로 자리가 바뀌나요?
아니요 현재 예제에선 바뀌지 않고 동일한 자리에 배치됩니다.
자리가 바뀌게 하려면 현재 슬롯에 아이템이 있는지 검사하는 코드가 필요합니다.
스크립트를 추가하지 않고 현재 예제 기준으로는 DroppableUI.cs에
1. 현재 슬롯에 있는 아이템 정보를 저장하는 변수를 만들고,
2. 만약 슬롯에 아이템이 배치되면 해당 변수에 아이템 정보를 저장합니다.
3. 슬롯에 아이템을 배치하려고 하면 변수가 null인지 검사하고,
3-1. null이면 슬롯에 아이템을 배치하고,
3-2. null이 아니면 변수에 있는 아이템과 드래그한 아이템의 슬롯 정보를 바꿔야 합니다.
@@unitynote 힌트 감사합니다!
안녕하세요. 잘 되던 작업이 어느순간부터 Library\PackageCache\com.unity.2d.common@4.1.0\Runtime\InternalBridge\InternalEngineBridge.cs(21,35): error CS1061: 'SpriteRenderer' does not contain a definition for 'IsUsingDeformableBuffer' and no accessible extension method 'IsUsingDeformableBuffer' accepting a first argument of type 'SpriteRenderer' could be found (are you missing a using directive or an assembly reference?)
메시지가 뜨면서 실행이 안되네요
c# 스크립트에는 에러 메시지 출력이 안되는데 충돌부분 메시지에 이렇게 나오네요
혹시 직접 만든 클래스(또는 에셋을 추가했다면 해당 에셋) 중에 SpriteRenderer 라는 클래스가 있나요?
간혹 유니티에서 제공하는 스크립트와 동일한 이름으로 제작해 메소드/프로퍼티를 참조하게 되면 이런 오류가 발생합니다.