Unity2D 궁수의 전설 UI 따라만들기 (2)

---

세로 스크롤되는 패널 만들기

가로와 세로 스크롤 동시에 되게 만들기

자식 스크롤뷰의 Scroll Rect 재구성

옆으로 갔다가 돌아오면 세로 스크롤뷰의 위치 초기화

---

다음의 영상을 참고하여 궁수의 전설 UI를 제작하고 있다.

궁수의 전설 UI 수직 수평 스크롤 뷰 완벽하게 만들기

예전부터 궁수의 전설 UI가 정말 궁금했는데, 만들었습니다! UI가 굉장히 세련되고 움직이는 게 신기해서 열심히 연구해 봤는데요 수직 수평 스크롤 뷰를 이용하면 많은 분야에서 멋진 UI를 만드실 수 있습니다 탭 버튼 움직이는 것도 만족스러워요~ 보너스로 초간단 탭 메뉴도 이 영상에 포함했습니다 아래 탭 클릭시 수직으로 올라가는 것은 블로그와 스크립트 수정되었습니다. # 스크립트 보기 https://goraniunity2d.blogspot.com/2020/02/ui.html # 프로젝트, 리소스 다운받기 https://drive.google.com/file/d/1QL3u_CEF9qQA8Yhf50fa2UIroacjlM7x/view?usp=sharing

https://youtu.be/K_ujyelRZUA?si=LyXqeZmW-dHWdYGU

지난 번 글까지는 좌우로 이동가능한 패널이 있는 가로 스크롤 뷰까지 완성했다.

Unity 2D 궁수의 전설 UI 따라만들기 (1)

다음 영상을 참고하여 제작하면서 나오는 방법들을 정리해보았다. 궁수의 전설 UI 수직 수평 스크롤 뷰 완벽하게 만들기예전부터 궁수의 전설 UI가 정말 궁금했는데, 만들었습니다! UI가 굉장히 세련되고 움직이는 게 신기해서 열심히 연구해 봤는데요 수직 수평 스크롤 뷰를 이용하면 많은 분야에서 멋진 UI를 만드실 수 있습니다 탭 버튼 움직이는 것도 만족스러워요~ 보너스로 초간단 탭 메뉴도 이 영상에 포함했습니다 아래 탭 클릭시 수직으로 올라가는 것은 블로그와 스크립트 수정되었습니다. # 스크립트 보기 https://goraniunity2d.blogspot.com/2020/02/ui.html # 프로젝트, 리소스 다운받기 https://drive.google.com/file/d/1QL3u_CEF9qQA8Yhf..

https://seoksii.tistory.com/47

이어서 각 패널 안에 들어가는 세로 스크롤 패널을 만들어보자.

---

세로 스크롤되는 패널 만들기

Content 우클릭 → UI → Scroll View 추가 후 Rect Transform의 크기를 1080x1750.8로 지정하자.

새로 추가한 Scroll View의 이름을 ShopScrollView로 해주자.

원래의 ShopPanel 이미지는 지워주자.

또한 나머지는 가로 Scroll View와 전부 반대 설정이다.

ShopScrollView의 Scroll Rect에서 Horizontal을 체크해제 → 하위 자식 중 Scrollbar Horizontal을 삭제

ShopScrollView의 Scroll Rect에서 Spacing을 0으로 변경 → Scrollbar Vertical과 그 자식들의 Rect Transform의 Position값을 전부 0으로 변경

이제 스크롤뷰는 완성이다.

아래에 Image를 추가해놓고 위아래로 움직여보면 잘 움직이는 것을 확인할 수 있다.

---

가로와 세로 스크롤 동시에 되게 만들기

지금 현재 상태로는 문제가 하나 있다.

새로 만든 세로 스크롤 뷰는 문제없이 동작하지만, 기존의 가로 스크롤뷰가 작동을 안하게 된다.

자식 오브젝트인 세로 스크롤 뷰가 더 앞에 있어서 그런데, 이를 해결하기 위해 자식 오브젝트에서 가로 드래그가 발생할 경우, 이 이벤트를 부모 오브젝트로 옮겨주는 방식을 사용할 것이다.

자식 스크롤뷰의 Scroll Rect 재구성

먼저 ShopScrollView의 Scroll Rect 컴포넌트를 제거하자.

그리고 ScrollScript라는 이름의 스크립트를 새로 생성해서 ShopScrollView에 붙여주자.

ScrollScript를 열어서 Monobehaviour 대신 ScrollRect를 상속받도록 고쳐주자.

 
public class ScrollScript : ScrollRect
{
    
}
 

이제 이것을 저장하고 Inspector에서 확인해보면, Scroll Rect와 완전히 똑같은 Inspector 구성을 보이는 것을 알 수 있다.

이제 이 Inspector를 구성하자.

Content에는 ShopScrollView/Viewport 하위에 있는 Content를, Horizental은 체크 해제, Viewport에는 ShopScrollView의 Viewport를, Vertical Scrollbar에는 Scrollbar Vertical 오브젝트를 넣어주자.

이제 스크립트를 작성하자.

우리는 기존에 인터페이스를 받아 OnBeginDrag를 작성해줬던 것처럼 OnBeginDrag와 OnEndDrag를 override 해줄 것이다!

override할 함수도 자동완성 해준다.

이제 다음과 같이 코드를 작성해주자.

using UnityEngine;
using UnityEngine.UI;
using UnityEngine.EventSystems;

public class ScrollScript : ScrollRect
{
    bool forParent;
    GameObject parentScrollView;
    NestedScrollManager NM;
    ScrollRect parentScrollRect;

    protected override void Start()
    {
        parentScrollView = transform.parent.parent.parent.gameObject;
        NM = parentScrollView.GetComponent<NestedScrollManager>();
        parentScrollRect = parentScrollView.GetComponent<ScrollRect>();
    }

    public override void OnBeginDrag(PointerEventData eventData)
    {
        // 드래그 시작하는 순간 수평이동이 크면 부모가 드래그 시작한 것, 수직이동이 크면 자식이 드래그 시작한 것
        forParent = Mathf.Abs(eventData.delta.x) > Mathf.Abs(eventData.delta.y);

        if (forParent)
        {
            parentScrollRect.OnBeginDrag(eventData);
            NM.OnBeginDrag(eventData);
        }
        else base.OnBeginDrag(eventData);
    }

    public override void OnDrag(PointerEventData eventData)
    {
        if (forParent)
        {
            parentScrollRect.OnDrag(eventData);
        }
        else base.OnDrag(eventData);
    }

    public override void OnEndDrag(PointerEventData eventData)
    {
        if (forParent)
        {
            parentScrollRect.OnEndDrag(eventData);
            NM.OnEndDrag(eventData);
        }
        else base.OnEndDrag(eventData);
    }
}

위 코드는 드래그를 했을 때 수직이동이 크면 그대로 자기자신의 ScrollRect의 OnBeginDrag를, 수평이동이 크다면 부모 스크롤뷰의 OnBeginDrag들을 호출해준다.

가로이동 세로이동 모두 잘된다.

---

옆으로 갔다가 돌아오면 세로 스크롤뷰의 위치 초기화

이제 옆 패널로 갔다가 돌아오면 그 패널이 가장 위로 다시 올라가 있도록 만들어 줄 것이다.

NestedScrollManager.cs에 다음 내용을 추가해주자.

 
[SerializeField] Transform contentTr;

public void OnEndDrag(PointerEventData eventData)
{
    isDrag = false;

    targetPos = SetPos();
    // 스크롤뷰 드래그를 멈추면 한 패널만 보이도록 targetPos를 설정
    if (curPos == targetPos)
    {
        if (eventData.delta.x > thresholdSpeed && curPos - distance >= 0)
            targetPos = curPos - distance;
        else if (eventData.delta.x < -thresholdSpeed && curPos + distance < 1f)
            targetPos = curPos + distance;
    }

    // 목표가 수직스크롤이고, 옆에서 옮겨왔다면 수직스크롤을 맨 위로 올림
    for (int i = 0; i < SIZE; ++i)
        if (curPos != pos[i] && targetPos == pos[i])
        {
            Transform child = contentTr.GetChild(i);
            if (child.GetComponent<ScrollScript>() != null)
                child.GetChild(1).GetComponent<Scrollbar>().value = 1;
            break;
        }
}
 

Inspector에선 자식 오브젝트 Content를 넣어주면 된다.

옆으로 갔다 오면 위치가 초기화 된다.

이제 하단의 탭버튼을 만들 차례이다.

해당 부분은 3편에서 다루도록 하겠다.

Unity 2D 궁수의 전설 UI 따라만들기 (3)

다음의 영상을 참고하여 궁수의 전설 UI를 제작하고 있다. 궁수의 전설 UI 수직 수평 스크롤 뷰 완벽하게 만들기예전부터 궁수의 전설 UI가 정말 궁금했는데, 만들었습니다! UI가 굉장히 세련되고 움직이는 게 신기해서 열심히 연구해 봤는데요 수직 수평 스크롤 뷰를 이용하면 많은 분야에서 멋진 UI를 만드실 수 있습니다 탭 버튼 움직이는 것도 만족스러워요~ 보너스로 초간단 탭 메뉴도 이 영상에 포함했습니다 아래 탭 클릭시 수직으로 올라가는 것은 블로그와 스크립트 수정되었습니다. # 스크립트 보기 https://goraniunity2d.blogspot.com/2020/02/ui.html # 프로젝트, 리소스 다운받기 https://drive.google.com/file/d/1QL3u_CEF9qQA8Yhf50..

https://seoksii.tistory.com/49

Uploaded by N2T