0430_ 스크롤뷰에서 3D 캐릭터 데이터로 불러오고 팝업 띄우기

 

캔버스 생성 ->  스크롤뷰에서 스크롤 영역 지정해주고, 색 넣어서 영역 잡아주기

 

-> 그 안에 빈 오브젝트 콘텐츠로 바꾸고, 영역 똑같이 전부 잡아준다. -> 안에 UIList(아이템이 될 것)를 넣어준다. 

 

★★ 콘텐츠 안에  (호라이즌 또는 버티컬)LayerGruop 과 ContentSizeFilte 를 달아준다!

 

 

 

 

★★ 스크롤 뷰에 Scroll Rect 를 달아준다

 

 

--- 스크롤 뷰 만드는 기본 법 ＃

 

1. 캐릭터를 UIItemList에 넣어준다.

 

넣어주고, 캐릭터의 위치와 크기를 조정해준다.

 

 

문제는 양 옆이 세어나온다는 것이다. 이것을 캔버스에 이미지를 만들어 줘서 가이드 처럼 막아준다.

 

 

 

상 하 좌 우에 가이드를 만들어준다.

 

 

 

2. 캐릭터 누를시 버튼 입력 

 

 

누르면 들어간다.

 

3. 리소스에 프리팹을 넣어서 인스턴스 하는 걸 테스트 해본다.

 

버튼을 누르면 로그가 나오게 된다.

 

 

 

 

 

 

4. 버튼을 누르면 몇 각도씩 돌아가는 걸 테스트 해본다.

 

 

 

각도를 더해주는 것 (Offset)

 

 

절대적으로 특정 값으로 바꿔주는 것 

 

-----

참고 블로그

[Unity] Transform (위치, 회전, 크기) (tistory.com)

[Unity] Transform (위치, 회전, 크기)

 

 

 

 

 

 

 

5. 드래그를 하면 delta 값이 증가되면서 알려주는 인터페이스를 활용한다. 먼저 델타 값부터 출ㄹ력

 

 

 

 

Unity - Scripting API: IDragHandler (unity3d.com)

Unity - Scripting API: IDragHandler

 

 

드래그하면 값이 증가되는 걸 확인 할 수 있음

 

 

6. 드래그를 하면 캐릭터의 로테이션이 돌아가게 해야함

 

 

이제 드래그를 하면 값이 들어오는 걸 확인 할 수 있다. 

 

 

public class UIDragArea : MonoBehaviour, IDragHandler
{

    public Button btnR;
    public Button btnL;
    public Transform chGo;
    public System.Action<float> onDrag;
    public void OnDrag(PointerEventData eventData)
    {
        this.onDrag(eventData.delta.x);
    }

 

 

public System.Action<float> onDrag;

이벤트를 설정을 해준다. <float> 값을 받는 이벤트로도 만들수 도 있다.

 

 

★★★★★ 이벤트가 실행 시 특정 값을 전달 해 줄 수도 있다. (전에는 그냥 알려만 주는 걸 위주로 썻지만...)

 public void OnDrag(PointerEventData eventData)
    {
        this.onDrag(eventData.delta.x);
    }

 

 

 

public void OnDrag(PointerEventData eventData)

언제 OnDrag가 실행 시

 

    public void OnDrag(PointerEventData eventData)
    {
        this.onDrag(eventData.delta.x);
    }

 

onDrag의 이벤트에 delta.x 값을 이벤트로 전달 할 수 있다. 

 

 

 

★★★★★이벤트가 실행이 되면 onDrag 이벤트에서 전달해주는 값을 바로 사용할 수 있다.

 

 UIScrollTest 스크립터 (다른 스크립터)

 

 

 this.uIDragArea.onDrag = (deltaX) =>

onDrag 이벤트가 실행이 되면 거기서 나오는 값을

 = (deltaX) => {

 

}  

 

이렇게 deltaX 값으로 지역 변수로 사용 할 수 있다. (이벤트의 활용도가 눈에 띔)

 

 

if (deltaX > 0)
            {
                this.rotateY -= 5;
                this.uiHero.transform.Rotate(new Vector3(0, rotateY, 0));
                this.rotateY = this.uiHero.transform.rotation.y;
            }

 

deltaX 가 양의 값일 경우 (오른쪽으로 돌릴 경우)

 

위에 rotateY 라는 변수에 -5를 해주고,

현재 프리팹의 Rotate (오프셋 (기존 값에 더해주는 것)) (new Vecto3(0, 돌려질 값, 0)); // Y 축으로만 돌릴 것

★그리고 현재 rotateY 값을 현재 캐릭터의 로테이션 값으로 바꿔줍니다. (바뀌어진 로테이션이 유지가 되야하기 때문에)

 

 

 

 

 

----