기록
[게임 UGUI, UI] Unity UGUI 팝업창 만들기 본문
아트를 만들었는데 Unity에 ui에 얹는것을 어떻게 해야되나! 유니티 하나도 모르고 코딩도 모르는데! 비상!
라고 생각했었는데 벼락치기로 알게되어 조만간 까먹을까봐 적어둠ㅋ
개발자가 보면 순엉터리로 보일 순 있으나.. 노여워 마시길..
1. 기본적으로 hierarchy 창에서 정렬된 순서대로 팝업에서 내용이 배치 됨 ( 위 사진상 팝업Bg A가 가장 윗줄에 있음 )
2. 포토샵에서의 레이어와는 반대로 위에 있을수록 가장 밑에 깔림. 포토샵에서는 백그라운드 레이어가 맨 밑에 있어야되지만 유니티에서는 백그라운드 이미지가 맨 위에 존재해야함 ( 사진 상 팝업 Bg A가 맨 윗줄에 있는 이유 )
3. 부모-자식 관계를 활용하여 배치를 해야함. 포토샵으로 따지면 그룹화와 비슷함. 그룹화시켜서 정렬하는 방식.
여기까지 OK라면 이제 노가다를 하면 됨
위의 사진을 보면서 팝업창을 만든다고 했을 때, 어떤 애들끼리 같은 부모를 가진 자식들일까~ 를 이해하면 빠르게 만들 수 있음.
다른 사람들은 어떻게 하는진모르겠지만~
수평으로 그룹을 나누어서 정렬하였음
1번그룹 2번그룹... 이하 동일
완성된 팝업창의 이름은 [Piece Info] 이고 하늘색 상자로 표기된 것은 프리팹임을 의미함.
Piece Info로 전체 팝업창 크기 변경, 위치 이동이 가능하며 얘가 가장 상위에 있는 부모임.
1번째 줄은 Bg=BackGround 이므로 그냥 배경 레이어구나 하면 됨
그 밑에서부터가 주된 내용인데,
Piece Info 라는 부모 밑에 4개의 자식이 있고, 그 자식들 밑에도 자식이 있는 구조임 ( 말은 이상하다만 )
1번 영역에는 PopupIcon과 Popup Title Deco가 있다. PopupIcon은 저 할아버지 프로필사진을 의미하며, Title Deco는 프로필 사진 양옆에 있는 데코 이미지이다. Pivot ( 중심점) 을 서로 다르게 잡아야하기도하며, 다른 팝업에서는 프로필 사진이 없는 팝업이나 Title Deco가 없는 팝업이 존재하기때문에 서로를 분리하였다.
Popup Icon은 프로필사진 뒤에 깔리는 백그라운드 이미지와 그 위에 올라가는 사진으로 총 두 가지 레이어 ( =자식 )로 구성되어있다.
배치를 하면서 가장 많이 만져야 되는 부분이 Rect Transform 과 Pivot인데 그 중에서 Rect Transform은 포토샵이나 기타 어도비툴좀 만져봤다 싶으면 감이 잡힐것이다. ( Pivot은 중심점이라고 보면 됨 ) Pivot을 기준으로 좌측 상단으로 정렬할거니 우측 하단으로 정렬할거니 정중앙 정렬할거니 등등을 선택하는 부분이다.
근데 이제 Stretch가 무엇이냐면
부모 크기를 늘릴때 같이 늘어날거니? 어 늘어날거야 = Stretch 로 설정해야 됨( 전체가 다 커질거야 하면 저 사방으로 펼쳐진 애를 선택하면됨. 우측 맨 끝 )
( 정중앙 정렬을 하고싶으면 Pivot을 x0.5 y0.5로 지정하고 위치(Pos X,Y,Z ) 0으로 설정하면됨 )
어근데 저 프로필사진 아이콘은 Stretch가 돼있는데 왜 팝업창 옆으로 늘리는데 안변하지? 라는 의문이 들어야 제대로 이해한 것
왜냐면 Popup Icon(프로필 사진 ) 의 바로 상위 부모는 Stretch로 설정되지않고 중앙 위쪽 정렬로 돼있기 때문 ( 얘도 Stretch로 변경하면 전체 팝업창 크기 늘리면 프로필사진도 같이 늘어남 )
