게임 화면 디자인

Scene 오브젝트를 선택하면 게임 화면 편집 창으로 Scene 오브젝트에 저장된 게임 화면 디자인을 보거나 편집할 수 있다. 게임 화면 편집 창에서 게임 화면을 디자인하는 방법을 설명한다.

UI 오브젝트 추가

게임 화면을 디자인하려면 게임 화면의 기본 구성 요소인 UI 오브젝트를 배치해야 한다. UI 오브젝트는 게임오븐 런타임 기반 게임에서 게임 화면을 구성하고 게임 리소스를 연결하는 요소이며, 일부 UI 오브젝트는 게임 사용자와 상호 작용(interaction)하여 이벤트를 발생시킨다.

게임 화면에 UI 오브젝트를 배치하려면 UI 오브젝트를 Scene 오브젝트에 추가해야 한다. UI 오브젝트를 추가하려면 다음 순서를 따른다.

1. 리본 메뉴의 [Design] 탭 > [UI Toolbox] 그룹 > UI 오브젝트 갤러리에서 추가할 UI 오브젝트를 클릭하여 선택한다. UI 오브젝트 갤러리에서 [자세히 ]를 클릭하면 UI 오브젝트 갤러리를 열어서 UI 오브젝트를 선택할 수 있다.
   
   
2. 게임 화면 편집 창에서 UI 오브젝트를 추가할 위치를 클릭하여 UI 오브젝트를 배치한다. 추가된 UI 오브젝트는 사각형 틀로 위치와 영역을 나타낸다. UI 오브젝트를 추가할 때 크기 조정이 가능한 UI 오브젝트는 클릭한 채로 끌어다 놓으면 임의로 크기를 조절하여 화면에 배치할 수 있다.

UI 오브젝트 단일 선택

Scene 오브젝트에 추가되어 게임 화면에 배치된 UI 오브젝트를 선택하려면 게임 화면 편집 창에서 선택할 UI 오브젝트의 사각형 틀 내부를 클릭한다.

참고 게임 화면 편집 창에 표시되지 않는 UI 오브젝트를 선택하려면 [UI Objects] 패널 창에서 Scene 오브젝트 하위에 있는 UI 오브젝트 목록 중 원하는 UI 오브젝트 항목을 클릭하여 선택한다.

UI 오브젝트 복수 선택

UI 오브젝트를 정렬하거나 그룹을 만들려면 게임 화면에 배치된 UI 오브젝트를 여러 개 선택해야 한다. 게임 화면 편집 창에서 마우스 왼쪽 버튼을 누른 상태로 끌면 선택 영역 표시 상자가 나타나고, 마우스를 계속 끌어서 선택 영역 크기를 조절할 수 있다.

이 때 <Space> 키를 누른 상태로 마우스를 끌면 선택 영역 표시 상자를 옮길 수 있다. 선택하고자 하는 UI 오브젝트를 선택 영역 표시 상자 안에 모두 넣고 마우스 왼쪽 버튼을 놓으면 상자 안에 포함된 UI 오브젝트가 모두 선택된다.

참고 마우스를 끌어다 놓는 방식으로 복수 선택이 어려운 경우에는 게임 화면 편집 창에서 UI 오브젝트 하나를 선택한 상태에서 <Ctrl> 키를 누른 채로 다음 UI 오브젝트를 차례대로 클릭하면 UI 오브젝트를 여러 개 선택할 수 있다.

UI 오브젝트 삭제

UI 오브젝트를 삭제하려면 게임 화면 편집 창이나 [UI Objects] 패널 창에서 삭제할 UI 오브젝트를 선택한 다음 <Delete> 키를 누르거나 마우스 오른쪽 버튼을 클릭하여 [Delete]를 선택한다.

UI 오브젝트 이동 및 크기 조절

게임 화면에 배치된 UI 오브젝트의 위치를 옮기려면 UI 오브젝트를 선택한 다음 원하는 위치로 끌어다 놓고, UI 오브젝트의 크기를 조절하려면 다음 순서를 따른다.

1. UI 오브젝트를 선택한 다음 사각형 틀의 가장자리에 있는 9개의 작은 사각형 핸들을 사용한다. 핸들 위로 마우스 커서를 올린다.
2. 마우스 커서가 화살표 모양으로 변하면 핸들을 끌어다 놓는다.

UI 오브젝트의 위치를 옮기거나 크기를 조절할 때 다음과 같이 키보드 키 조합을 이용할 수 있다.

• UI 오브젝트의 위치를 옮길 때 <Shift> 키를 누른 상태에서 마우스로 끌면 수평 또는 수직 방향으로만 움직인다.
• UI 오브젝트의 크기를 조절할 때 <Shift> 키를 누른 상태에서 마우스로 끌면 가로 세로 비율을 유지하면서 크기가 변경된다.
• UI 오브젝트를 선택한 다음 네 방향의 화살표 키를 누르면 각 방향으로 1픽셀씩 움직인다. <Shift> 키를 누른 상태에서 화살표 키를 누르면 10픽셀씩 움직인다.

UI 오브젝트 보기 모드 설정

리본 메뉴의 [Design] 탭 > [View Mode] 그룹에 있는 [Draft], [Design], [Preview]를 이용하여 게임 화면 편집 창의 보기 모드를 변경할 수 있다. [Draft], [Design], [Preview] 중 하나만 선택할 수 있는 라디오 버튼이다.

게임 화면 편집 창의 각 보기 모드에 대한 설명은 다음과 같다.

• Draft 모드 : UI 오브젝트에 설정된 리소스를 사용하지 않고 UI 오브젝트를 사각형 틀로만 표시한다. 이 모드에서는 사각형 틀을 사용하여 UI 오브젝트를 편집할 수 있다. 초안 형식으로 기본 레이아웃을 지정할 때 사용한다.
  
• Design 모드 : UI 오브젝트에 설정된 리소스를 사용하여 UI 오브젝트를 렌더링하고 사각형 틀도 같이 표시한다. 이 모드에서는 사각형 틀을 사용하여 UI 오브젝트를 편집할 수 있다. 실제 이미지를 사용하여 게임 화면을 디자인할 때 사용한다.
  
• Preview 모드 : UI 오브젝트에 설정된 리소스를 사용하여 UI 오브젝트를 렌더링하고 사각형 틀은 표시하지 않는다. 이 모드에서는 UI 오브젝트를 편집할 수 없다. 게임 화면 미리 보기용으로 사용한다.
  

UI 오브젝트 배치용 눈금선 표시

UI 오브젝트를 편리하게 배치할 수 있도록 눈금선을 표시할 수 있다. 눈금선은 게임 화면 편집 창의 보기 모드를 Draft 모드로 선택한 경우에만 볼 수 있다. 게임 화면 편집 창에서 눈금선을 표시하거나 표시하지 않으려면 리본 메뉴에서 [Design] 탭 > [View Mode] 그룹 > [Grid]를 선택하거나 선택 해제한다.

참고 Scene 오브젝트를 생성하면 ‘__BACKGROUND’라는 이름을 가지는 StaticImage 오브젝트가 기본으로 Scene 오브젝트에 배경 이미지로 포함되는데, 눈금선은 배경 이미지 뒤에 있기 때문에 배경 이미지를 숨겨야 볼 수 있다. 눈금선을 이용하여 UI 오브젝트를 배치하려면 배경 이미지를 숨긴 다음 사용해야 한다.

UI 오브젝트 숨김 및 표시

다음과 같은 방법으로 UI 오브젝트를 게임 화면 편집 창에서 숨기거나 표시할 수 있다.

• UI 오브젝트 숨김 : UI 오브젝트를 게임 화면에 표시하지 않고 숨기려면 게임 화면 편집 창이나 [UI Objects] 패널 창에서 UI 오브젝트를 선택한 다음 마우스 오른쪽 버튼을 클릭하고 [Hide]를 선택한다. UI 오브젝트 숨김 상태에서는 위치를 옮기거나 크기를 조절할 수 없다.
• UI 오브젝트 표시 : 숨긴 UI 오브젝트를 다시 표시하려면 [UI Objects] 패널 창에서 UI 오브젝트를 선택한 다음 마우스 오른쪽 버튼을 클릭하고 [Show]를 선택한다.
• 모든 UI 오브젝트 숨김 및 표시 : 리본 메뉴에서 [Design] 탭 > [View Mode] 그룹 > [Hide All]을 클릭하면 버튼이 [View All]로 바뀌고 게임 화면의 UI 오브젝트를 모두 숨길 수 있다. 반대로 [View All]을 클릭하면 [Hide All]로 바뀌고 게임 화면의 UI 오브젝트를 모두 표시할 수 있다.

[UI Objects] 패널 창에서 눈 모양 아이콘을 클릭하면 리본 메뉴나 바로 가기 메뉴를 이용하는 것보다 쉽게 UI 오브젝트를 숨기거나 표시할 수 있다. 아이콘을 클릭하여 눈 뜬 모양()으로 바꾸면 UI 오브젝트를 표시하고 눈 감은 모양()으로 바꾸면 UI 오브젝트를 숨긴다.

게임 화면에 있는 모든 UI 오브젝트의 숨김/표시 상태를 프로젝트를 처음 열었을 때로 복구하려면 [UI Objects] 패널 창에서 Scene 오브젝트를 선택한 다음 마우스 오른쪽 버튼을 클릭하여 [Return to default visible setting]를 선택한다.

UI 오브젝트 잠금 및 잠금 해제

게임 화면에 배치한 UI 오브젝트의 위치와 크기를 고정할 수 있도록 게임오븐은 UI 오브젝트에 대한 잠금과 잠금 해제를 지원한다.

• UI 오브젝트 잠금 : UI 오브젝트를 잠그려면 게임 화면 편집 창이나 [UI Objects] 패널 창에서 UI 오브젝트를 선택한 다음 마우스 오른쪽 버튼을 클릭하고 [Lock]를 선택한다. UI 오브젝트 잠금 상태에서는 위치를 옮기거나 크기를 조절할 수 없다.
• UI 오브젝트 잠금 해제 : UI 오브젝트의 잠금을 해제하려면 게임 화면 편집 창이나 [UI Objects] 패널 창에서 UI 오브젝트를 선택한 다음 마우스 오른쪽 버튼을 클릭하고 [Unlock]를 선택한다.
• 모든 UI 오브젝트 잠금 및 잠금 해제 : 리본 메뉴에서 [Design] 탭 > [View Mode] 그룹 > [Lock All]을 클릭하면 [Unlock All]로 바뀌고 게임 화면의 모든 UI 오브젝트에 잠금을 설정할 수 있다. 반대로 [Unlock All]을 클릭하면 모든 UI 오브젝트의 잠금을 해제할 수 있다.

[UI Objects] 패널 창에서 자물쇠 모양 아이콘을 클릭하면 리본 메뉴나 바로 가기 메뉴를 이용하는 것보다 쉽게 UI 오브젝트를 잠그거나 풀 수 있다. 아이콘을 클릭하여 잠긴 자물쇠()로 바꾸면 UI 오브젝트의 잠금이 설정되고 풀린 자물쇠()로 바꾸면 UI 오브젝트의 잠금이 해제된다.

UI 오브젝트 정렬

UI 오브젝트를 정렬하려면 UI 오브젝트를 여러 개 선택한 다음 리본 메뉴에서 [Design] 탭 > [UI Toolbox] 그룹 > [Align] 버튼의 하위 메뉴를 이용한다. 다음은 [Align] 버튼 하위 메뉴 선택에 따라 정렬한 예이다.

UI 오브젝트를 정렬하기 전 초기 상태는 다음과 같다.

초기 상태에서 [Align] > [Align Left Edge]를 선택하면 왼쪽 가장자리로 정렬한다.

초기 상태에서 [Align] > [Align Horizontal Center]를 선택하면 수평 방향으로 중간에 정렬한다.

초기 상태에서 [Align] > [Align Right Edge]를 선택하면 오른쪽 가장자리로 정렬한다.

초기 상태에서 [Align] > [Align Top Edge]를 선택하면 위쪽 가장자리로 정렬한다.

초기 상태에서 [Align] > [Align Vertical Center]를 선택하면 수직 방향으로 중간에 정렬한다.

초기 상태에서 [Align] > [Align Bottom Edge]를 선택하면 아래쪽 가장자리로 정렬한다.

UI 오브젝트 그룹 생성 및 해제

다음은 UI 오브젝트 그룹을 생성하거나 해제하는 방법이다.

• UI 오브젝트 그룹으로 묶기 : 여러 UI 오브젝트를 그룹으로 묶으려면 UI 오브젝트를 여러 개 선택한 다음 리본 메뉴에서 [Design] 탭 > [UI Toolbox] 그룹 > [Group] 버튼 > [Group]을 선택한다. UI 오브젝트를 그룹으로 묶으면 Group 오브젝트가 생성되고 선택된 UI 오브젝트가 Group 오브젝트에 자식으로 포함된다. 게임 화면 편집 창에는 Group 오브젝트가 추가되고 [UI Objects] 패널 창에서는 계층 구조로 그룹이 생성된다.
  

참고 기본 UI 오브젝트는 Scene 오브젝트 또는 Group 오브젝트와 부모-자식 관계를 갖는다. Group 오브젝트는 다른 Group 오브젝트와 부모-자식 관계를 가질 수 있다. 일반적으로 기본 UI 오브젝트끼리는 부모-자식 관계를 가질 수 없지만, 예외적으로 TextList 오브젝트는 ScrollBar 오브젝트와 부모-자식 관계를 가질 수 있다. TextList 오브젝트에 수평/수직 스크롤 막대를 부착할 수 있기 때문이다.

• Group 오브젝트에 포함시키기 : Group 오브젝트를 먼저 생성하고 자식 UI 오브젝트를 포함시켜 그룹을 만들 수도 있다. [UI Objects] 패널 창에서 Scene 오브젝트 또는 Group 오브젝트를 선택하고 마우스 오른쪽 버튼을 클릭하여 [Create Group]을 선택한 다음 게임 화면 편집 창에 원하는 위치를 클릭하면 Group 오브젝트가 추가된다. [UI Objects] 패널 창에서 그룹으로 포함할 UI 오브젝트를 마우스로 선택하여 Group 오브젝트 아래로 끌어다 놓으면 부모-자식 관계로 그룹이 만들어진다.
• UI 오브젝트 그룹 해제하기 : 생성된 UI 오브젝트 그룹을 해제하려면 Group 오브젝트를 선택한 다음 리본 메뉴에서 [Design] 탭 > [UI Toolbox] 그룹 > [Group] 버튼 > [Ungroup]을 선택한다. UI 오브젝트 그룹을 해제하면 Group 오브젝트가 삭제되고 하위의 자식 UI 오브젝트는 부모를 Scene 오브젝트로 바꾼다.

UI 오브젝트 그룹 편집

여러 UI 오브젝트를 그룹으로 묶으면 하나의 UI 오브젝트처럼 다룰 수 있지만, 그룹에 포함된 개별 UI 오브젝트의 위치나 크기는 조정할 수 없다. 그룹에 포함된 개별 UI 오브젝트를 편집하려면 그룹 편집 모드로 들어가야 한다. 다음은 UI 오브젝트 그룹을 편집하는 방법이다.

• 그룹 편집 모드 들어가기 : Group 오브젝트를 선택하고 마우스 오른쪽 버튼을 클릭하여 [Edit Group]을 선택한다. 그룹 편집 모드로 들어가면 그룹 안의 개별 UI 오브젝트를 조작할 수 있다.
• 자식 그룹 생성하기 : Group 오브젝트는 다른 Group 오브젝트를 자식으로 가질 수 있으므로 그룹 안에 다른 그룹이 포함될 수 있다. 그룹 안에 자식 그룹을 생성하려면 그룹 편집 모드로 들어간 후 게임 화면 편집 창이나 [UI Objects] 패널 창에서 해당 Group 오브젝트를 선택하고 마우스 오른쪽 버튼을 클릭하여 [Create Group]을 선택한 다음 게임 화면 편집 창에 원하는 위치를 클릭한다.
• 자식 그룹 편집하기 : 자식 그룹을 편집하려면 그룹 편집 모드로 들어온 상태에서 해당 자식 그룹의 편집 모드로 한번 더 들어가야 한다. 자식 Group 오브젝트를 선택하고 마우스 오른쪽 버튼을 클릭하여 [Edit Group]을 선택한다. Group 오브젝트 간의 부모-자식 관계가 연속으로 이어지면 그룹 편집 모드는 여러 단계로 들어가거나 나가게 된다.
• 그룹 편집 모드 나가기 : 그룹 편집 모드에서 나가려면 그룹을 선택한 다음 마우스 오른쪽 버튼을 클릭하여 [Exit Group Edit (One Step)]이나 [Exit Group Edit (All Step)]을 선택한다. 그룹 편집 모드는 여러 단계로 들어갈 수 있기 때문에 한 단계 위로만 나가려면 [Exit Group Edit (One Step)]을 선택하고, 완전히 나가려면 [Exit Group Edit (All Step)]을 선택한다.

UI 오브젝트 깊이 순서 변경

각 UI 오브젝트는 게임 화면상에서 깊이 순서(z-order)를 갖는다. 깊이 순서는 게임 화면에서 앞쪽으로 올수록 깊이 순서가 낮아지고, 뒤쪽으로 갈수록 깊이 순서가 높아진다. UI 오브젝트가 겹쳐져 있을 때 깊이 순서가 낮은 UI 오브젝트는 깊이 순서가 높은 UI 오브젝트를 가리게 된다.

UI 오브젝트의 깊이 순서를 바꾸려면 게임 화면 편집 창이나 [UI Objects] 패널 창에서 UI 오브젝트를 선택한 다음 마우스 오른쪽 버튼을 클릭하여 [Order] 항목의 하위 메뉴를 사용하거나 리본 메뉴에서 [Design] 탭 > [UI Toolbox] 그룹 > [Order] 버튼의 하위 메뉴를 이용한다.

하위 메뉴에서 [Move Forward]를 선택하면 한 단계 앞으로 가져오고 [Move Backward]를 선택하면 한 단계 뒤로 보낸다. [Move to Front]를 선택하면 맨 앞으로 가져오고 [Move to Back]을 선택하면 맨 뒤로 보낸다.

참고 [UI Objects] 패널 창에서 Scene 오브젝트 하위의 UI 오브젝트는 깊이 순서가 높은 순에서 낮은 순으로 정렬되어 있다. [UI Objects] 패널 창에서 UI 오브젝트를 선택한 다음 마우스로 끌어다 놓는 식으로 위아래 위치를 바꾸면 깊이 순서를 변경할 수 있다.