Index
-
UI?
-
UITransform Component
-
UIGroup Component
-
UI 활용 예시
-
버튼 클릭시 Console 출력(Toast 띄우기)
-
버튼 클릭시 텍스트 바꾸기
-
HP바 만들기
- ScrollLayoutGroup Component
- 인벤토리 만들기
UI?
- User Interface의 약자로 유저와 클라이언트가 소통할 수 있는 공간을 의미한다.(GUI와 같은 의미)
ex) 버튼, 이미지, 인벤토리, 상점
- Scene Maker -> World -> ui 하위계층에서 확인할 수 있다.
UITransform Component
- PosX, Pos Y : 추가한 ui의 원점으로부터 좌표값
ex) 왼쪽 : 0,0 -> 원점 / 오른쪽 : 100,100 -> 원점으로부터 x(100), y(100)
-
Width, Height : 추가한 ui의 가로, 세로 길이
-
Anchor Presets : ui의 상대적인 상,화,좌,우 위치값과 크기를 설정할 수 있다.
cf) 기기별로 스크린 사이즈가 다르므로 ui가 화면 밖으로 벗어나거나 ui가 위치해야하는 공간이 기기별로 다른 경우를 방지할 수 있다.
- Example1
--> 큰박스-작은박스가 부모-자식 관계를 이루었을 때, Anchor Presets을 좌하단으로 설정하게 되면
--> 부모인 큰박스의 크기와 상관없이 큰박스의 좌하단으로부터 일정한 위치에 고정된다.
- Example2
--> Anchor Presets을 하단 stretch으로 설정하게 되면
--> 부모인 큰박스의 크기와 상관없이 작은박스의 너비가 가변적으로 변해서 큰박스를 벗어나는 경우가 없다.
UIGroup Component
-
사용하고자하는 UI를 빠르게 찾고 Group단위로 체계적으로 관리하기위해 사용하는 Component
-
DefaultShow : True값을 가지고 플레이를 하게되면 ui가 화면에 보여지게된다.
-
그룹편집창에서 UI생성, 삭제 및 Order를 설정할 수 있다.
UI 활용 예시
- 버튼 클릭시 Console 출력(Toast 띄우기)
- UI 에디터창을 열어주고 버튼을 추가 -> 글을 쓰기위해 Text Component를 추가하고 property를 알맞게 수정해준다.
- 버튼클릭시에 콘솔출력 이벤트를 가질 Component를 생성한다.
-
맨 윗줄 entity MOD화이팅! ~ : MyUIComponent는 MOD화이팅! 이름을 가진 UI Entity를 감지한다.
-
log(Entity.TextComponent.Text) : MOD화이팅! 버튼 -> TextComponent -> Text출력
- MOD화이팅! UI에 작성한 Component를 추가 -> 버튼클릭시에 콘솔출력결과
cf) 스크립트내용만 아래와 같이 작성하게되면 toast를 화면상에 띄울 수 있다.
- _UIToast:ShowMessage(내용) : MOD에서 제공하는 토스트 메세지를 띄우는 함수
- 버튼 클릭시 텍스트 바꾸기
- 위 예시 '버튼클릭시 Console출력'과 같이 설정한 후 -> 스크립트내용 아래와 같이 작성
- myText : MOD화이팅! UI Entity로부터 TextComponent를 가져왔다.
cf) Property가 Sync가 아닌 None을 가지는 이유?
--> map에있는 Entity는 Server와 Client 두 곳에 모두 존재하지만 ui에있는 Entity는 Client에만 존재하기 때문이다.
--> 따라서, ui하위에 존재하는 Entity는 서버에 없으므로 클라이언트<->서버 동기화모드인 Sync를 사용할 수 없다.
- 결과화면 : MOD 화이팅! -> 버튼클릭 -> MOD 1등!
- HP바 만들기
- UI 에디터창을 열어주고 이미지 추가 -> SpriteGUIRenderer Component -> Type : Filled
- FillAmount값을 조정해서 HP가 감소하는 효과를 연출할 것이다.
ex) FillAmount : 0.5일 때 HP바의 모습
- KeyDown했을 때 HP를 감소시킬 이벤트를 가질 Component를 생성한다.
-
OnUpdate함수 : 이벤트가 발생해서 업데이트가 일어날때마다 FillAmount의 값을 변경해서 HP가 감소하는것과같은 시각적효과를 준다.
-
Default Player의 hp를 MaxHp로 나눔으로써 FillAmount 의 비율을 변경할 수 있다.
ex) MaxHp = 1000, hp = 1000 --> FillAmount = 1
MaxHp = 1000, hp = 950 --> FillAmount = 0.95(HP가 감소한것처럼 보임)
- HandleKeyDownEvent : 특정키가 눌릴때마다 Default Player의 hp를 50씩 감소시킨다.
- 특정키를 계속해서 눌렀을때 HP바의 모습
cf) 감소하는 시각적 효과를 주기위해 빨간바 뒤에 하얀색바를 깔아주었다.
- Background : 하얀색 바
HP : 빨간색 바
ScrollLayoutGroup Component
-
동일한 Entity를 연속적, 반복적으로 만들어주는 기능을 제공하는 Component
-
Scroll의 형태도 세가지(Horizontal, Vertical, Grid) 형태로 제공된다.
- 인벤토리 만들기
- UI 에디터창을 열어주고 이미지,버튼 추가(부모-자식) -> 부모인 큰박스에 ScrollLayoutGroup Component추가
- 'A'를 눌렀을 때 버튼추가 이벤트를 가질 Component를 생성한다.
-
copy : 함수가 불릴때마다 버튼1 Entity를 복제한다.
-
HandleKeyDownEvent : 'A'가 눌릴때마다 copy함수를 호출해서 버튼1을 복제한다.
- 'A'키를 계속해서 눌렀을때 인벤토리의 모습
map에 있는 Entity를 ui에서도 Entity로 동일하게 구현할 수 있음
- map에서 복제하고자하는 Entity의 SpriteRUID값을 복사한다.
- ui에서 이미지를 만들어주고 복사한 SpriteRUID값을 넣어준다.
- map에서의 Entity와 동일하게 ui에서도 Entity를 만들어진것을 확인할 수 있다.
--> map과 동일한 Entity를 ui에서 만들경우 Client뿐만아니라 Server에서도 접근이 가능하다는 장점이 있다.
cf) PreserveSprite
-> AspectOnly : SpriteRUID값을 그대로 가져왔을때 이미지가 찌그러지는 현상을 막아주는 기능
-> NativeSize : map에서의 Entity 사이즈를 그대로 가져와서 표현해줄 수 있는 기능
