개발블로그
[유니티 UGUI] 퍼즐 게임에서 많이 사용하는 스테이지 UI, 그리고 Image 컴포넌트의 Maskable 본문
🤷♀️ 스크롤 뷰의 컨텐츠 밖으로 이미지가 안보이는데 어떻게 UI를 배치하지?
퍼즐 게임에서 많이 찾아볼 수 있는 스테이지 구조인데, 스테이지가 스크롤 형식으로 길을 따라 나열되어있고
플레이어가 스크롤 해서 스테이지 정보들을 확인할 수 있는 UI 구조를 많이 본 적이 있다.
이전에 퍼즐 게임 모작을 만들 때 그런 형식의 스테이지 맵을 따라 만들어보려고 했었는데,
스크롤 뷰 > 컨텐츠 에 배치한 이미지(배경)의 사이즈가 크면 밖으로 튀어 나간 부분의 이미지가 어떻게 되어있는지 알 수가 없으니
스테이지 버튼들을 배치하는데 어려움이 있었다.
예를 들면 이런 구조다. 그림 1
길을 따라가며 스테이지가 배치되어 있고, 스크롤 하면 길을 따라서 스테이지들을 보여주는 구조다.
✔ 구조를 베껴 UI를 만들어보자
작성기준 버전 :: 2020.3.14f1
배경으로 사용할 적당한 이미지가 없어서 그림판으로 직접 그려보았다. 그림 2 (...^^)
이제 이 배경에 스테이지를 적당히 배치해야 한다.
캔버스에 스크롤 뷰를 추가하고 Content에 Background 게임오브젝트를 추가해주었다. 그림 3
Image 컴포넌트에 아까 그린 이미지를 Source Image로 링크 했다.
실행 후 게임뷰에서 스크롤하며 확인해보면
씬 뷰에서 스크롤뷰의 Content 사이즈 이상으로는 Background 가 보이지 않아서 스테이지 프리팹을 배치하는데 어려움이 있다.
이렇게 Stage_Slot 프리팹을 길을 따라서 배치해야 하는데
Content 밖으로 맵(이미지)이 보이지 않으면 그림4 길이 어떻게 진행되는지 모르니 상당히 난감하다.
-
실무에서는 기획 쪽에서 스테이지의 좌표값을 주는지,
UI 레퍼런스를 보고 프로그래머가 스테이지를 배치해야하는지는 잘 모르겠지만,
우선 내 경우에서는 정해진 좌표값이 없으니 길을 따라 스테이지를 배치해야 한다.
-
✅ Background 게임 오브젝트의 Image 컴포넌트 > Maskable 체크 해제
해결 방법은 간단하다.
Background의 Image컴포넌트에서 Maskable의 체크를 해제해주면 캔버스 밖으로도 전체 이미지가 보이게된다.
이제 길도 보이니 스테이지를 배치해봐야겠다.
그리고 스테이지를 배치하려고하니 이럴수가. 길은 이제 보이는데 스테이지를 끌고 올라가니 스테이지는 보이지 않는다.
그럴 때는 스테이지도 Maskable을 체크 해제하면 Content 밖의 스테이지 프리팹도 위치를 보며 배치할 수 있다.
그리고 스테이지는 프리팹으로 제작했기 때문에 Maskable을 일일이 꺼주기보다 프리팹에서 한번에 꺼주면 모두 적용되니,
프리팹에서 Maskable을 해제 후 스테이지를 배치해주면 된다.
🤷♀️ 그렇다면 Mask 효과는 무엇인가?
Image컴포넌트의 Maskable을 이해하기 전에 Mask 기능에 대해 먼저 알아보자.
Mask는 특정 영역을 설정하여, 나머지 부분을 가리는데 사용된다.
게임에서의 사용 중 적당한 예시로 컵헤드의 플레이 장면이 떠올랐다.
모든 부분이 가려진 상태에서 게임화면의 중앙부터 동그랗게 점점 전체 영역을 보여준다.
이런식으로 나타내는 효과를 Mask 라고 한다.
위에서 스크롤 뷰의 Background 이미지를 다시 보자. 그림 3
Background 게임오브젝트의 Image 컴포넌트에 Maskable 이 체크 되어있으면
"스크롤뷰의 Content 사이즈의 밖으로는 Mask하세요" 라고 명령을 내린 것이다.
그러므로 Content 사이즈 밖으로 튀어나간 Background Image를 Mask한 것이다.
😉
이런것들이 알고보면 참 간단한 문제들인데 모를 때는 이런 것들로 시간을 많이 쓰게 되버린다.
이런건 프로그래밍이 아니라 엔진 부분이라 유니티 도큐먼트를 적극 활용해서 엔진 쪽 기능도 잘 활용해야겠다는 생각이 든다.
역시... 아는게 힘이다!!! 더 공부하자 열공 열공 !!
* 공부하는 단계입니다. 잘못된 내용이 있다면 피드백 부탁드립니다😊
* e-mail : heehee970@naver.com
'Unity > UI' 카테고리의 다른 글
| [유니티 UGUI] Image와 Sprite의 차이점. 그리고 Panel (0) | 2021.07.22 |
|---|---|
| [유니티 UGUI] UI의 부모 Canvas와 depth 관리를 위한 Canvas의 분할과 드로우 콜 최적화 방법 (0) | 2021.07.21 |
| [유니티 UGUI] RectTransform (0) | 2021.07.15 |
| 게임에서의 UI(User Interface)와 UX(User Experience)의 차이점 (0) | 2021.07.15 |
