메뉴 건너뛰기

Fastbird Dev Studio

FBUIEditor

한 줄 설명

Fastbird Engine용 UI Editor입니다.

 

자세한 설명

준비사항

1. fastbird engine을 컴파일합니다.


2. FBUIEditor.zip (42.1 KB)을 다운로드합니다. 다운로드한 파일의 압축을 풀면 'FBUIEditor_Release.dll'과 스크립트 파일들이 들어있는 'FBUIEditorScript 폴더'가 생깁니다. 이 파일과 폴더를 게임 실행파일이 있는 경로(FBUI.dll과 같은 위치;FBUI.dll은 fastbird engine을 컴파일하여 얻을 수 있습니다.)에 넣어줍니다.


시작과 종료

'`'키를 눌러 콘솔을 열고, 'StartUIEditor'를 입력합니다. 그럼 화면 우측에 아래 스크린샷처럼 FBUIEditor가 실행됩니다.

 

FBUIEditor.gif

FBUIEditor

 

 

종료를 할 때는 에디터 우측 상단의 x 버튼을 누르거나 콘솔에 'KillUIEditor'를 입력합니다.

 

컴포넌트 배치하기

1. Components ListBox에서 원하는 컴포넌트를 선택합니다. 새로운 UI를 만들때는 Window 컴포넌트가 필요하기 때문에 처음에는 Window를 선택합니다.


2. 게임화면 원하는 위치에서 클릭&드래그하여 위치와 사이즈를 지정합니다.


3. 쉬프트를 누르고 있으면 추가로 동일한 컴포넌트를 계속 배치할 수 있습니다.


컴포넌트 선택하기

1. 클릭하면 커서 아래의 컴포넌트를 선택할 수 있습니다.


2. 선택된 컴포넌트의 부모(Parent) 컴포넌트를 선택하기 위해서는 P키를 누르세요.


3. Shift + 좌클릭으로 다중 선택을 할 수 있습니다.


위치 & 사이즈 조정하기

입력란 이용하기

 

1. 위치와 사이즈를 조정하기를 원하는 컴포넌트를 마우스 좌클릭하여 선택합니다.


2. FBUIEditor에서 Pos와 Size란에 원하는 값을 입력하여 엔터를 누르거나 Tab키를 누릅니다.


3. 'nposX', 'nposY', 'nsizeX', 'nsizeY' 체크박스를 체크하여 절대좌표(0~ 화면 사이즈 in Pixel)가 아닌 상대좌표(0.0~1.0)를 사용하도록 설정할 수 있습니다. 이렇게 설정된 컴포넌트는 게임 화면 크기 변경시에 그에 맞게 조절되는 장점이 있습니다.

FBUIEditor_pos.gif

 

키보드 이용하기

 

1. 조정하기를 원하는 컴포넌트를 마우스 좌클릭하여 선택하고 추가로 여러개의 컴포넌트에 수정을 가하고 싶다면 Shift+좌클릭으로 추가 선택합니다.


2. 키보드 방향키를 이용하여 1 Pixel씩 이동시킬 수 있습니다.


3. Shift + 방향키로 4 pixel씩 이동시킬 수 있습니다.


4. 여러개의 컴포넌트를 선택하여 Ctrl + 방향키로 좌측, 우측, 상단, 하단을 정렬시킬 수 있습니다. 기준이 되는 컴포넌트는 가장 마지막에 선택된 컴포넌트입니다.

FBUIEditor_topalign.jpg

 

5. 여러개의 컴포넌트를 선택하여 CTRL+ALT + 방향키로 원하는 방향으로 일정간격을 유지하면서 거리를 띄우면서 정렬할 수 있습니다. 이때 추가로 Shift키를 누르면 간격이 좁아집니다.


6. 여러 개의 컴포넌트를 선택하여 CTRL+NUMPAD5를 누르면 사이즈가 통일됩니다.


7. 여러 개의 컴포넌트를 선택하여 CTRL+NUMPAD6을 누르면 x 사이즈가 통일됩니다.


8. 여러 개의 컴포넌트를 선택하여 CTRL+NUMPAD8을 누르면 y 사이즈가 통일됩니다.


마우스 이용하기


1. 마우스를 컴포넌트 가장자리에 가져가면 드래그로 크기를 조절 할 수 있습니다.


2. 마우스를 컴포넌트 내부로 가져가면 드래그로 위치를 조절 할 수 있습니다.


프로퍼티 세팅하기

1. UI Editor의 탭 윈도우에서 'Property'를 클릭합니다.


2. 프로퍼티설정을 원하는 컴포넌트를 좌클릭으로 선택합니다. Shift+좌클릭으로 여러개의 프로퍼티를 선택할 수 있습니다. 이 경우 UI Editor의 프로퍼티 박스는 가장 마지막에 선택된 컴포넌트의 프로퍼티를 보여주고 값을 변경할 경우 선택된 모든 컴포넌트에 반영을 시도합니다. 특정 컴포넌트가 해당 프로퍼티를 가지고 있지 않을 경우에는 무시됩니다.


3. Tab키로 프로퍼티 항목들을 빠르게 순회할 수 있습니다.


4. 포커스가 텍스트필드가 아니라 항목의 제목에 있을 때는 키보드로 원하는 프로퍼티의 이름을 입력하여 빠르게 항목을 왔다갔다 할 수 있습니다. 항목을 찾을 때 프로퍼티 이름에 있는 '_' 문자는 무시됩니다.


이벤트 설정하기

1.UI Editor의 탭 윈도우에서 'Events'를 클릭합니다.


2. 원하는 이벤트에 Lua 함수 이름을 적습니다. 예를 들어서 OnMouseLClick항목에 'MyUI:OnClicked' 라고 적으면 이 유아이를 클릭했을 때 루아 함수 'function MyUI:OnClicked(comp)' 가 호출됩니다.

FBUIEditor_inputevent.gif

 

3. 아래 보이는 입력란에 루아 스크립트 경로를 입력하고 Edit 버튼을 눌러 해당 스크립트를 편집합니다.

FBUIEditor_scriptpath.gif

 

4. 테스트를 위해 컴포넌트를 클릭하면 실제로 클릭이벤트가 발생하는 것이 아니라, 컴포넌트 선택 커맨드가 실행됩니다. 실제로 클릭해보기 위해서는 UIEditor를 종료하거나 Alt키를 누른채로 클릭하면 됩니다.


시연 영상

FBUIEditor로 계산기 만들기 

 


게임 실행타임에 UI 편집하기

 

 

 

다운로드

FBUIEditor.zip (42.1 kb)