파트에 붙어 있는 GUI 구현

이번 포스팅에서는 실제 3D 게임내에 융합된 UI에 대한 내용이다. 표시판이나 광고판같이 게임과 분리되지 않은 파트에 직접 GUI를 붙이는 방법에 대해 알아보겠다.

이런 GUI를 위해서도 이미 사용될 객체가 미리 존재한다. SurfaceGui라는 객체를 사용하면 로블록스 게임에 존재하는 3D 모델의 표면에 GUI를 붙힐 수 있다.

Surface GUI 만들기

파트를 하나 생성하고 이름을 InfoBoard 로 바꾸자. 이 파트에 SurfaceGui를 붙힐 것이다.

사이즈를 15, 18, 1로 만들어서 표지판처럼 넓게 변경.

 

생성한 파트의 자식으로 SurfaceGui를 추가하여 InfoSurfaceGui 로 이름 붙힌다. 그 안에는 이전 ScreenGui처럼 프레임을 넣어 사용할 수 있다. InfoSurfaceGui에 Frame를 넣고 BackgroundFrame 로 이름짓는다.

SurfaceGui 사용하기

Face 속성

Face 속성은 SurfaceGui의 넣은 GUI요소들이 어디를 바라보게 할 것인가를 정해줄 수 있다. SurfaceGui 에 넣은 Frame이 왼쪽 상단에 조그만하게 표시될 것이다. 현재 SurfaceGui 의 Face 속성이 front로 되어 있으니깐 파트의 front에 있을 것이다. 추가한 프레임이 보이지 않는다면 Face를 잘 설정해야 할 것이다.

SurfaceGui 내의 프레임 사이즈 조절

조그만 부분이 아니라 Surface의 전체 면을 사용하고 싶을 경우, 프레임의 사이즈를 {1, 0},{1, 0} 으로 변경하면 전체를 덮어 씌우게 할 것이다.

스타일링

GUI에 사용되는 면이 파트의 전체면을 다 채우는 것은 답답해 보이니 약간의 여유를 주겠다. Frame의 사이즈 자체를 조절해도 되지만, 이떄는 UIPadding을 사용하는 것이 좋다. UIPadding를 SurfaceGui에 추가한다.

 

 PaddingBottom, PaddingLeft, PaddingRight, PaddingTop 속성을 모두 0.05, 0 으로 변경한다. 그러면 아래의 이미지와 같은 모습으로 변경될 것이다.

BackgroundTransparency 속성을 1로 변경하여 투명하게 만든다. 프레임 자체는 사라질 것이다.

GUI 요소 추가하기

이전 인터페이스 포스팅에서 했던 방법으로 TextLabel, ImageLabel등을 추가한다. 

1. 이미지 라벨을 배경으로 깔고 그 위에 텍스트 라벨을 추가하였다.
2. 이미지 라벨로 칼 아이템 이미지를 붙히고 UICorner 를 사용하여 이미지의 엣지를 둥글게 마무리하였다.
3. 여러 텍스트라벨을 UIListLayout으로 정렬하였다.

SurfaceGui 속성들

이 정도면 SurfaceGui를 사용하는데 별 무리가 없을 것이다. 사실 SurfaceGui 가 있고 생성하고 Face 속성만 알면 그다지 배울 것도 없다. 다만 SurfaceGui의 주요 속성에 대해서 알아보겠다.

LightInfluence 속성

SurfaceGui는 3D 세계의 한 부분이기 때문에 빛에 영향을 많이 받을 수 밖에 없다. 빛이 없으면 어두워서 안보일 것이고, 반대로 너무 밝아도 잘 보이지 않게 될 지 모른다. LightInfluence 속성은 그런 3D 세계의 빛에 대한 영향력에 대한 값을 정할 수 있게 해준다. 디폴트값이 1인 상태라면, 빛에 대해서 다른 파트와 마찬가지로 똑같은 영향을 받게된다. 반대로 0으로 설정하면, 3D 세계와는 별개로 개발자가 디자인한 그대로의 모습 그대로 보여준다. 어두워도 보이고 너무 밝아도 보인다는 말이다. 너무 튀지 않게 조절하면서 설정해야 할 것이다. 어떤 게임에서는 반대로 이런 튀는 모습을 그대로 활용하고 있다. 어두운 배경에 혼자 빛나는 네온사인 같은 것을 표현할 수 있을 것이다.

Adornee 속성

Adornee 속성은 꾸밈 받는 대상이라는 의미인데, 디폴트 값은 없다. SurfaceGui는 기본적으로 파트에 접착되서 사용되니깐 꾸밈을 받는 대상은 굳이 정하지 않아도 그 파트가 Adornee가 된다. Adornee 속성은 SurfaceGui 에 버튼을 동작시키기 위할 때 자주 사용된다. 위에서 알려줘다시피 SurfaceGui 는 3D세계의 파트에 붙어서 사용된다. 그말은 SurfaceGui가  Workspace 내에서 동작되는데, 버튼 등의 인터랙티브한 동작을 위한 로컬 스크립트는 Workspace 내에서는 작동하지 않는다. 따라서 Workspace내에 SurfaceGui에 버튼을 넣고 로컬스크립트로 동작을 시킬려고 해도 동작하지 않는 것이다. 해결 방법으로 워크스페이스에서 SurfaceGui의 디자인을 마치고 그것을 드래그해서 StarterGui의 자식으로 옮겨 붙힌다. 그러면 파트와 SurfaceGui가 분리되어 파트위에 GUI가 사라져버리게 되는데, 이때 SurfaceGui의 Adornee 속성에 원래 파트로 설정하면 다시 보이게 될 것이다. Adornee 속성의 설정 방법은, Adornee 속성을 마우스로 클릭하면 파트를 선택하라는 파트 모양의 아이콘이 마우스 옆에 표시되고 원하는 파트를 클릭하면 선택이 된다.