07. 유니티로 게임 화면 만들기

 

---

 

이미지 에셋을 프로젝트에 등록하기

사이드뷰 게임용 이미지를 유니티에 등록해보겠습니다. 다운로드한 파일의 압축을 풀면 파일명과 동일한 UniSideGame_Assets이라는 폴더가 있습니다. 그중 이미지가 포함된 Images 폴더를 드래그 앤 드롭해 프로젝트 뷰에 표시된 Assets 폴더로 옮깁니다. 유니티에서 사용할 수 있는 이미지 에셋으로 등록됩니다.

 

유니티는 PC와 마찬가지로 프로젝트 뷰에 여러 폴더를 만들어서 데이터를 관리할 수 있습니다. 게임을 만드는 과정에서 많은 데이터를 사용하게 됩니다. 모두 같은 폴더에 두면 필요한 파일을 찾기 힘들 수 있습니다. 서브 폴더를 만들어서 데이터를 관리하는 습관을 들입시다.

Assets 폴더 아래에 데이터를 관리하기 위한 폴더를 만들고 파일을 분류해봅시다. Assets 폴더를 선택한 상태에서 프로젝트 뷰 왼쪽 상단의 버튼을 클릭해 ‘Folder’를 선택하면 Assets 폴더 아래에 새 폴더가 만들어집니다. 폴더의 이름은 사용자가 임의로 변경할 수 있습니다. 만들어진 폴더에 데이터를 드래그 앤 드롭해 옮길 수 있습니다.

 

관리를 위한 폴더를 만들어보겠습니다. 반드시 이렇게 해야 한다는 것은 아닙니다. 자신이 알아보기 쉬운 방식으로 데이터를 정리하면 됩니다.

먼저 플레이어 캐릭터와 관련된 데이터를 담기 위한 Player 폴더를 만듭니다. 우선은 플레이어 이미지를 옮깁니다. 앞으로 플레이어와 관련된 데이터는 Player 폴더에 추가합니다.

 

Scenes 폴더는 처음부터 만들어져 있던 폴더입니다. 앞으로 추가할 씬 데이터를 담아둡니다. 씬은 이후 자세히 설명합니다.

 

Assets 폴더에 다음과 같은 서브 폴더가 생겼습니다. 각 이름과 역할을 정리해봅시다.

•Images: 게임에서 사용할 이미지(이미지 에셋)를 담아두는 폴더
•Player: 플레이어와 관련된 파일이나 데이터를 담아두는 폴더
•Scenes: 씬 파일을 담아두는 폴더

 

이미지 에셋으로 게임 화면 만들기

이제 게임 화면을 만들겠습니다. 먼저 프로젝트 뷰에 있는 배경 이미지인 back과 바닥 이미지 ground를 씬 뷰에 드래그 앤 드롭합니다. 게임 화면에 배경과 바닥이 배치됩니다.

 

플레이어 캐릭터를 배치합니다. Player 폴더의 player_stop을 씬 뷰의 적당한 위치에 드래그 앤 드롭합니다. 그림과 같이 이미지가 씬 뷰에 배치되며 계층 뷰에도 같은 이름의 항목이 추가된 것을 확인할 수 있습니다.

 

 

씬 뷰와 계층 뷰에는 항상 배치된 오브젝트가 동일하게 표시됩니다.


TIP
‘Scene’ 선택을 잊지 않도록
[Game] 뷰가 선택되어 있으면 배치할 수 없습니다. 드래그 앤 드롭을 할 때 선택된 씬 뷰의 탭이 [Scene]인지 확인합시다.

 

 

바닥이나 플레이어 캐릭터를 배치했을 때 배경에 가려져 보이지 않는다면 캐릭터나 바닥이 배경보다 뒤에 배치되었기 때문입니다. 인스펙터 뷰의 Sprite Renderer의 Order in Layer 값을 0보다 크게 설정합니다.


씬 뷰에 배치된 게임 오브젝트를 선택하면 인스펙터 뷰의 내용이 바뀝니다. 이곳에 표시되는 내용이 게임 오브젝트에 있는 컴포넌트입니다. 이미지를 드래그해 배치한 게임 오브젝트에는 ‘트랜스폼Transform’과 ‘스프라이트 렌더러Sprite Renderer’라는 두 가지 컴포넌트가 있습니다.

 

트랜스폼

Transform(트랜스폼)은 위치, 회전, 크기를 조절하는 컴포넌트입니다. 다음과 같은 값을 가지고 있습니다. 모두 자주 사용하는 값이니 잘 기억해둡시다.

Position
씬에서는 게임 오브젝트의 위치를 X(가로 방향), Y(세로 방향), Z(깊이) 좌표로 나타냅니다. Position(위치) 값을 바꾸면 게임 오브젝트의 위치를 바꿀 수 있습니다.

Rotation
게임 오브젝트의 각 축(X, Y, Z) 방향을 중심으로 한 회전을 나타냅니다. 2D 게임이라면 Z축(앞에서 안쪽으로 향하는 축) 방향을 중심으로 한 회전만 고려합니다. Rotation(회전)의 Z축 값을 변경하면 게임 오브젝트의 회전 각도를 변경할 수 있습니다.

Scale
게임 오브젝트의 X(가로 방향), Y(세로 방향), Z(깊이)의 표시 배율을 소수로 나타냅니다. Scale(스케일, 크기)을 다시 쓰면 게임 오브젝트의 크기를 변경할 수 있습니다.


스프라이트 렌더러

Sprite Renderer(스프라이트 렌더러)는 이미지를 표시하는 컴포넌트입니다, 다음과 같은 값을 가지고 있습니다. 자주 사용하는 값을 설명하겠습니다.

Sprite
유니티에서는 이미지를 Sprite(스프라이트)라고 합니다. 스프라이트 값은 게임 오브젝트에 표시할 이미지 에셋을 나타냅니다. 값을 변경하면 게임 오브젝트에 표시되는 이미지 에셋을 변경할 수 있습니다.

Color
Color(색상)는 화면에 사용되는 색입니다. 기본 색상은 흰색이지만 다른 색으로 변경해 이미지의 색감을 변경할 수 있습니다.

Flip
Flip(뒤집기)으로 상하좌우로 반전시킬 수 있습니다.

Sorting Layer
Sorting Layer(레이어 정렬)에서 게임 오브젝트를 레이어layer라는 그룹으로 묶고 표시의 우선순위를 그룹별로 지정할 수 있습니다.

Order in Layer
Order in Layer(레이어 순서)에서는 Sorting Layer로 나눈 레이어 중 게임 오브젝트가 씬에 표시되는 순서를 정합니다. 값이 클수록 앞에 표시됩니다.


게임 오브젝트의 이미지 변경하기

스프라이트 렌더러에는 이미지의 파일명이 표시된 ‘Sprite’라는 항목이 있습니다. Sprite를 클릭하면 프로젝트 뷰에서 해당 이미지 에셋이 강조돼 어느 에셋이 사용되는지 확인할 수 있습니다.

이미지를 선택한 후 Delete 키를 클릭해 제거해봅시다. ‘None(Sprite)’라고 표시돼 씬 뷰에서도 보이지 않게 됩니다. 하지만 계층 뷰에서는 해당 게임 오브젝트가 남아 있습니다. 즉 ‘표시되는 이미지만 제거된 상태’입니다.

 

다시 이미지를 설정해봅시다. 이미지가 제거되었으니 계층 뷰에서 게임 오브젝트를 선택합니다. 프로젝트 뷰의 이미지를 선택해 Sprite의 오른쪽 텍스트 박스에 드래그 앤 드롭합니다.

 

 

이때 인스펙터 뷰의 오른쪽 상단에 있는 자물쇠 아이콘(Lock)을 클릭해 인스펙터 뷰를 잠근 후 이미지를 끌어오면 Sprite에 할당되기 전 선택이 변경되지 않습니다.

이 방법 외에도 텍스트 박스 옆의 둥근 버튼을 클릭하면 이미지 에셋을 선택하는 리스트가 나타나 선택할 수도 있습니다.


표시 우선순위를 알아보기

지면이나 캐릭터 등은 항상 배경보다 앞에 표시돼야 해 표시 우선순위를 의도적으로 변경해야 합니다. 표시 우선순위를 높이려면 Sprite Renderer 컴포넌트의 Order in Layer의 값을 크게 합니다.

 

지면과 플레이어 캐릭터의 표시 우선순위를 배경보다 높이려면 Sprite Renderer 컴포넌트의 Order in Layer의 값을 0보다 큰 값으로 지정합니다(플레이어는 3, 지면은 2로 설정했습니다).

 

이제 표시 우선순위는 ‘캐릭터 ➞ 지면 ➞ 배경’ 순으로 변경됐습니다.

 

Order in Layer 의 값이 같을 때의 표시 우선순위는 Position Z 값(값이 작을수록 앞에 그려짐)으로 결정됩니다.

TIP
게임 화면의 위치를 나타내는 좌표

게임 화면의 위치는 X와 Y로 나타냅니다. 화면 중앙의 좌표는 X =0, Y=0입니다. 중앙을 기준으로 오른쪽으로 가면 X 값이 플러스로, 왼쪽으로 가면 마이너스가 됩니다. Y는 위쪽이 플러스, 아래쪽이 마이너스 값을 가집니다.

화면에 그려지는 순서는 게임 화면의 위치와 방향을 나타내는 좌표 및 벡터와 연관이 있습니다. 자세한 내용은 다음을 참고해주세요.

게임을 실행해봅시다. 툴 바의 버튼을 클릭하면 씬 뷰가 게임 뷰로 전환돼 게임이 실행됩니다.

 

 

한 번 더 버튼을 클릭하면 게임이 종료되고 씬 뷰로 돌아옵니다. 아직 이 단계에서는 이미지를 그리고 있을 뿐이기에 움직임이 없습니다. 단지 이미지를 표시하고 있는 게임입니다.


유니티 화면의 조작 방법

지금부터 씬 뷰와 게임 오브젝트를 다루는 방법을 살펴보겠습니다.

게임 오브젝트 선택하기

 

씬에 배치한 오브젝트를 선택하는 방법에는 두 가지가 있습니다.

씬 뷰에 보이는 게임 오브젝트를 직접 마우스로 클릭해 선택하는 방법과 계층 뷰에서 선택하는 방법입니다. 씬 뷰가 복잡해지면서 배치된 오브젝트가 많아지면 씬 뷰에서 직접 선택하는 방법으로 원하는 오브젝트를 선택하는 것이 어려울 수 있습니다. 계층 뷰에서 선택하는 방법은 제한 없이 선택할 수 있습니다. 상황에 따라 적절한 방법을 선택합니다.

 

게임 오브젝트의 이름 변경하기

 

씬에 배치한 게임 오브젝트에는 이름이 부여됩니다. 이미지를 드래그 앤 드롭해 게임 오브젝트로 만들면 오브젝트의 이름은 파일명으로 생성됩니다. 씬에서 게임 오브젝트는 이름으로 구별되는 만큼 이름은 매우 중요합니다.
이름을 변경하는 두 가지 방법을 알아보겠습니다.

계층 뷰 목록에서 해당 오브젝트를 선택합니다. 키보드의 Return(윈도우는 Enter) 키를 누릅니다. 텍스트가 편집 상태가 되고 원하는 이름으로 변경한 후 다시 Return 키를 누릅니다.

 

또 다른 방법을 보겠습니다. 인스펙터 뷰의 상단에 이름이 표시되어 있습니다. 여기서 이름을 변경할 수도 있습니다. 플레이어 캐릭터의 이름을 Player로 변경하겠습니다.

 

TIP
알파벳의 대문자와 소문자
알파벳의 대문자와 소문자는 다른 것으로 구별됩니다. Player의 첫 글자를 대문자로 작성한 것을 확인하세요.


화면을 자유롭게 이동하기

게임 화면을 만들다 보면 화면을 확대하거나 표시할 위치를 변경해야 합니다. 조작 방법을 알아보겠습니다. 화면을 확대하거나 축소하려면 마우스 휠(또는 터치패드)을 활용합니다. 마우스 휠이나 터치패드를 위로 조작하면 화면이 축소되고 아래로 조작하면 확대됩니다(맥의 트랙패드나 마우스 설정에 따라서 반대로 조작하기도 합니다).

 

툴 바 아이콘 동작

손 도구

 

씬 화면을 이동하려면 툴 바의 손 도구를 선택합니다. 화면을 드래그하면 화면이 이동합니다. 다른 도구를 선택하던 중에도 Option(윈도우는 Alt) 키를 누르면 누르고 있는 동안에는 손 도구가 선택됩니다.


평행이동 도구

 

선택된 게임 오브젝트에 초록색과 빨간색 화살표가 표시됩니다. 초록색 화살표를 잡으면 세로 방향(Y축 방향)으로, 빨간 화살표를 잡으면 가로 방향(X축 방향)으로 평행이동할 수 있습니다. 중앙에 마우스를 가져가면 노란색 사각형이 나타나고 이를 잡으면 가로세로로 이동할 수 있습니다.


회전 도구

 

선택된 게임 오브젝트에 초록(Y축), 빨강(X축), 파랑(Z축)의 구가 세 겹으로 표시됩니다. 이 구를 잡으면 각 축으로 회전할 수 있습니다. 이 책은 씬을 2D로 표시하고 있어 가운데 선이 그어진 원처럼 보이지만 씬 뷰의 위에 있는 2D를 비활성으로 변경해봅시다. 씬이 3D로 표시되면서 3D 축과 구체를 확인할 수 있습니다.

 

 

회전과 축은 아직 이해가 어려울 수 있습니다. 우선 2D 게임에서는 Z축으로 회전하는 경우만 생각하면 된다는 사실만 기억합시다.


스케일 도구

 

선택된 게임 오브젝트 끝에 사각형이 붙은 녹색과 빨간색 선이 나타납니다. 녹색 선을 잡고 세로 방향으로 움직이면 세로 방향(Y축)으로, 빨간색 선을 잡고 가로 방향(X축)으로 움직이면 각 방향으로 확대 및 축소됩니다.

 

 

또한 중앙의 노란색 사각형을 움직이면 가로세로 비율을 고정한 상태로 확대 및 축소할 수 있습니다.


렉트(사각형) 도구

 

 

선택된 게임 오브젝트에 흰색 테두리가 생기고 모서리에 둥근 핸들이 표시됩니다. 테두리의 안쪽을 드래그하면 게임 오브젝트를 종횡으로 자유롭게 이동할 수 있습니다(평행이동의 노란 사각형과 같습니다).

 

네 개의 모서리 핸들을 드래그하면 게임 오브젝트의 직사각형 크기를 자유롭게 바꿀 수 있습니다.


트랜스폼 도구

 

 

이동 및 회전, 스케일 변경을 한 번에 할 수 있습니다. 세 가지 도구의 UI가 표시되며 게임 오브젝트를 조작할 수 있습니다.


게임 오브젝트 무효화와 표시하지 않기

인스펙터 뷰 이름 앞에 있는 체크 박스를 해제하면 게임 오브젝트가 비활성화되고 게임 중에도 해당 오브젝트는 존재하지 않게 됩니다.

 

계층 뷰의 왼쪽 끝에 마우스 커서를 올리면 눈 모양의 아이콘이 나타납니다. 눈 아이콘을 클릭하면 해당 게임 오브젝트가 씬에서 사라지고 다시 클릭하면 나타납니다. 사라진 게임 오브젝트는 게임 실행 중에는 표시되지만 편집 중 일시적으로 숨기기 위한 기능입니다.

 

계층 뷰의 눈 아이콘 오른쪽에 있는 손가락 아이콘을 클릭하면 해당 게임 오브젝트를 씬에서 선택할 수 없게 됩니다. 표시는 되지만 선택할 수 없는 상태가 돼 겹쳐진 게임 오브젝트를 다룰 때 유용합니다.

 

게임 화면(씬) 저장하기

씬을 편집한 후에는 저장합니다. 주기적으로 저장하지 않으면 도중에 유니티가 버그 등으로 멈췄을 때 지금까지 작업한 내용이 사라집니다. 맥은 키보드의 ‘커맨드+S’, 윈도우는 ‘Ctrl+S’로 저장합니다.

 

Assets 폴더의 Scenes 폴더에는 Sample Scene이라는 이름으로 기본 생성되는 씬이 있습니다. File 메뉴에서 [Save]를 선택하면 현재 편집 중인 씬에 덮어씁니다. 이번 예제에서는 게임의 첫 번째 스테이지를 만들 것입니다. ‘Save AS...’를 선택하고 Stage1으로 Scenes 폴더에 저장합시다.

 

씬을 저장하면 그림과 같이 저장됩니다.

 

Scenes In Build에 씬 등록하기

저장된 씬은 파일로 추가되었을 뿐 아직 사용할 수 없습니다. 유니티에서 씬을 사용하려면 빌드에 등록해야 합니다. File 메뉴에서 ‘Build Settings...’를 선택합니다.

 

Build Settings 창이 열리고 저장한 씬 파일을 Scenes In Build라는 영역 안에 드래그 앤 드롭해 추가합니다. 이제 새로운 씬을 사용할 수 있게 됩니다.

 

 

Build Settings 창은 유니티로 만든 게임을 다양한 환경으로 내보내기 위한 창입니다.

TIP
씬을 Build Settings에 추가하는 것을 잊지 말자
씬을 만들면 Build Settings에 추가합니다. 이 과정을 잊으면 게임에서 씬을 읽을 수 없습니다.