Today I Learned - Day 65 [스크립트에서 UI 표시 순서 정리하기]

UI를 작업하다 보면 Layout Group를 뗴어놓을 수가 없다.

별다른 작업 없이 오브젝트를 균일한 간격으로 정리할 수 있는 매우 유용한 기능이다.

하지만, 이를 사용하다 보면 몇 가지 난점을 가질 수 있다.

바로, '정렬 순서가 하이어라키 상의 순서에 의존한다'는 것.

 

이외에도 겹쳐진 오브젝트들 사이에서의 표시 순서도 하이어라키 상의 순서에 의존한다.

 

이렇듯, UI 상에서는 하이어라키의 순서에 의존하는 요소가 상당수 존재하는데, 이 순서를 스크립트로 조절하려면 어떻게 해야할까.

그리고 '이 요소를 이용해서 제작할 수 있는 유용한 기능'은 무엇일까.

한번 살펴보도록 하자.

---

SetSiblingIndex()

오늘의 본문, 하이어라키 상에서 순서를 변경하는 함수다.

사용할 수 있는 방식에는 4가지가 있다.

• Transform.SetSiblingIndex(int order) : 같은 Transform 안에서 order번째 순서로 설정한다.
• Transform.GetSiblingIndex(): 현재 같은 Transform 안에서의 순서를 반환한다.
• Transform.SetAsLastSibling(): 같은 Transform 안에서 마지막 순서로 설정한다.
• Transform.SetAsFirstSibling(): 같은 Transform 안에서 처음 순서로 설정한다.

효과도 그렇고 함수명도 그렇고 매우 직관적이라서 추가로 설명할 필요는 없지 싶다.

그러면 이제 이걸로 만들 수 있는 기능에 어떤 게 있는 지 살펴보도록 하자.

---

재활용 스크롤 뷰

이전에 스크롤 뷰를 다룬 적이 있다.

플레이어 상호작용이 가능한 UI면 상당히 자주 사용되는 기능이라고 생각하면 되는 요소인데,

이 스크롤 뷰의 상당히 난처한 난점이 있다.

바로, '표시되는 것에 비해서 많은 오브젝트를 유지하게 된다'라는 것.

이 정도가 많지 않다면 큰 문제가 없겠지만, 1000개 이상으로 늘어나게 된다면 어떨까.

그 수가 늘어날 수록 그 부하가 점점 심해질 수 밖에 없는데, 이러한 부하를 계속해서 쌓아두고 있는 건 그다지 좋은 방법이 아니다.

 

그러면 어떻게 하면 될까.

간단하다. '안 보이는 건 표시 안하면 된다.'

여기서 더 나아가 보자.

'표시 안되는 걸 오브젝트 풀 처럼 이용할 수도 있다.'

이것이 바로 재활용 스크롤 뷰다.

 

당연하지만, 개념이 저런 만큼, 쓸 수 있는 수단도 많다.

정렬 알고리즘을 따로 정하지 않고 개발자가 위치를 정하는 방식으로 만들 수도 있고, 정렬 알고리즘을 이용해서 형성하는 것도 가능하다.

이번에 설명할 것은 후자에 해당한다.

 

사실, 설명이라고 할 것도 없다.

행을 기준으로 줄이 넘어가면 앞 줄을 뒤로, 줄이 되돌아가면 뒷 줄을 앞으로 돌리면 된다.

이후에 변경된 순서에 맞게 위치를 조정해 주면 끝.

사실, 정렬 알고리즘을 이용하는 만큼 부하가 없는 것은 아니지만, GridLayoutGroup 같은 자동 정렬 컴포넌트를 쓴다고 한다면 이런 방법 말고는 방법이 없다.

 

물론, 이렇게 하지 않고 오브젝트 크기를 늘려가면서 위치를 이동시키는 방법도 가능하다. 부하 자체는 이쪽이 더 적기도 할 것이다.

그래도 상술한 일반 스크롤 뷰의 가장 큰 부하는 '수없이 많은 오브젝트들이 낭비되는 것'과 '그것을 생성하는 작업'이기 때문에, 이렇게 작성하는 것도 유효한 방법이다.

---

최상단 UI 변경

간단하게, '상호작용 중인 UI에 SetAsLastSibling() 을 써 주면 된다.

같은 캠버스 안에서 표시 순서를 변경할 수 있다 보니, 이래거래 인터페이스가 많은 게임에서 쓰면 좋은 구성.

엄밀히 말하자면, 이쪽이 기본적인 사용법이다.

---

오늘 작성한 내용은 매우 간단한 내용이지만 사용할 구석은 은근히 많은 기능이다.

물론, 다른 방식으로 대처할 수도 있는 부분이기도 하지만, 이 기능을 쓰고 안쓰고의 차이는 꽤 클 것이다.

당장 최상단 UI 변경 만 해도 플레이어 상호작용 UI가 조금 만 많아도 필수로 들어가야 하는 기능이라고 봐야한다.

그렇다 보니, 기억해 두면 쓸 일은 많을 것 같다.