게임 틀 구성 화면 만들기
게임은 몇 개의 화면(scene 이하 씬)을 구성하고, 씬 간의 이동 전환을 합니다. 씬은 시작 화면, 메인 씬 또는 레벨 선택 씬, 플레이 씬 등으로 구성하면서 플레이 또는 캐릭터 업그레이드 및 장비 준비 등을 하게 됩니다.
1. 카메라 세팅
씬 전환에 앞서 카메라를 세팅해야 합니다. 씬을 구성하는 UI 배치를 어떤 방식으로 할지를 정해야 합니다. 게임이 16:9 비율로 진행하는 생각했기 때문에 Game뷰에 있는 해상도를 클릭해서 화면 비율을 먼저 세팅해 줍니다.
2. 유니티 씬 전환
레벨씬(levelSelect)과 플레이씬(Stage) UI 배치 만들기
레벨씬 UI구성
- 캐릭터 모습(image)과 제목(text)
- 레벨 선택 버튼(예시 5개 button)
- 레벨씬 배경(image)
카메라 비율 세팅이 끝나면 씬을 바꾸기 위한 세팅이 필요합니다. 당연히 씬이 최소 2개가 필요하겠죠?? 유니티 켜고 처음 보이는 첫 씬 레벨 선택하는 씬으로 생각하고 레벨씬을 먼저 세팅해 봅니다. 하이라키뷰(Hierarchy)에 커서 올려 놓고 마우스 우클릭을 여러 개의 메뉴가 뜨는데 이 중 UI - image 선택을 하면 게임 뷰에 흰색 사각형(스퀘어)이 보이고 하이라키뷰에는 Canvas-image가 생성됩니다. image로 그대로 두면 나중에 헷갈릴 수 있으니 이름을 변경해 줍니다. image를 클릭하고, 마우스 우클릭을 하고 나오는 메뉴 중 rename을 클릭하거나 F2키를 누르면 이름을 바꿀 수 있습니다. 예시로 image를 robot으로 바꿔봅니다. 참고로 F2와 같이 핫키를 사용하는 것이 작업할 때 좀 더 수월할 수 있으니 자주 쓰는 기능들은 관련 서적을 통해 익혀 놓는 것이 좋습니다. 흰색 사각형은 UI라고 보기 어렵기 때문에 여기에 유니티 에셋스토어에서 무료 UI 또는 유료 UI를 구매하거나 직접 그린 것을 사용합니다. 이때 아틀라스로 슬라이스 된 UI를 활용합니다. robot을 클릭하면 우측 inspector에서 Rect Transform 컴포넌트의 x, y 값을 조정하여 UI를 화면에 배치합니다. inspector의 Image 컴포넌트에는 source image가 있는데 여기에 스프라이트를 적용시키면 됩니다. 적용법은 두가지인데 source image 칸 우측의 동그라미를 눌러서 나오는 스프라이트 리스트에서 선택하는 방법이 있고, Project뷰에서 UI가 있는 카테고리를 타고 들어가서 원하는 스프라이트를 클릭 드래그해서 source image에 드롭해서 적용하는 법이 있습니다. UI에서 Text는 UI-Text TextMeshPro를 클릭하고 원하는 타이틀 또는 글 내용을 적습니다. inspector에서 글자 크기, 폰트 스타일, 글자색, 아웃라인도 설정할 수 있습니다. 버튼은 UI-Button TextMeshPro 또는 UI-Legacy-Button이 있는데 저는 후자인 구버전으로 생성해서 아무곳에 배치해 보겠습니다. 하이라키뷰에 생성된 버튼을 클릭해 하면 image와 유사하지만 button 컴포넌트가 있습니다. 해당 컴포넌트에는 여러가지 기능들이 있지만 중요한 것 세가지만 알고 갑니다.
- interactable은 체크박스에 체크가 되어 있으면 버튼이 작동되는 것이고 체크해제하면 작동이 안 되는 기능입니다.
- target graphic은 버튼에 스프라이트를 적용해서 버튼 이미지를 변경합니다.
- on click()은 처음에 비워져 있는데 버튼 클릭시 이벤트를 만드는 함수를 호출하는 기능입니다.
레벨씬 UI를 배치하면 이제 카메라 세팅을 다시 합니다. Main Camera-Canvas 클릭 후 Add Component 클릭합니다. 검색에 Canvas Scaler를 선택해서 추가해 줍니다.
Canvas Scaler를 보면 UI Scale Mode가 있는데 이것을 Scale with screen size로 변경해 줍니다. 이 기능은 PC 작업 시 보이는 씬을 드래그에서 화면 크기를 바꿔도 설정된 screen size에 맞춰서 UI 크기를 자동으로 변경해 줍니다. reference resolution은 게임 플레이 화면비율이 16:9인 점을 생각해서 800 대 600 으로 합니다.
레벨씬 UI 세팅이 끝나면 저장하고 Project뷰에서 우클릭 Creat-Scene 클릭해서 씬이름을 만듭니다. 예시로 플레이씬을 5개 만들어서 각각 stage1, stage2, stage3, stage4, stage5로 생성했습니다. 참고로 project뷰에서 마우스 우클릭을 하면 creat-foler가 있는데 폴더를 만들어서 프로젝트를 정리하는 것이 좋습니다.
이제 플레이씬을 만듭니다. stage1씬을 더블 클릭해서 플레이씬의 UI를 만들어 줍니다.
레벨씬과 같은 방법이지만 플레이 화면의 UI는 게임 플레이 시 바로 보여지는 UI가 있는 반면에 숨겨져 있다가 이벤트 호출에 의해 나타나는 UI도 있습니다. 이번에는 씬간 이동이기 때문에 이벤트 호출에 의한 UI는 생략합니다.
플레이씬 UI구성
- 목표 개수(text), 점수(text)
- 방향키(button)
- 나가기, 다시하기, 일시정지(button)
UI 배치가 끝나면 해당 씬도 Main Camera-Canvas에 있는 Canvas Scaler를 설정해 줍니다. stage2, stage3, stage4, stage5는 stage1을 복사해서 레벨을 만들어 가면 됩니다. stage1 클릭하고 ctlr+D를 눌러주면 복사되고 이름만 변경하면 됩니다.
씬을 만든 후 유니티 화면 좌측 상단에 file-build setting 클릭해서 levelSelect, stage1, stage2, stage3, stage4, stage5 씬을 드래그 드롭해 줍니다.
다시 레벨씬을 클릭해서 레벨씬으로 돌아옵니다. 이제 화면을 이동시키는 간단한 스크립트를 만듭니다. Project뷰에서 마우스 우클릭 creat- c# script를 클릭하면 c# 스크립트가 생성이 되는데 이 때 스크립트명을 아무거나 써도 되지만 그래도 기능에 맞게 쓰는 것이 좋습니다. SceneHandler로 쓰고 생성합니다. 참고로 띄어 쓰지말고 대소문자로 구분하면 보기에 좋습니다. 생성된 스크립트를 더블클릭하면 스크립트 창이 뜨는데 유니티 c# 화면은 클래스에 아까 스크립트명이 있고 기본적으로 Monobehaiour에 상속되어 있습니다. 여기에 Start()와 Update()가 기본적으로 생성됩니다.
씬 전환 스크립트
| using UnityEngine.SceneManagement; public class SceneHandler : MonoBehaviour { public void StartScene () { SceneManager.LoadScene(1); //스테이지 1로 이동합니다. build setting의 1번 화면으로 이동 } } |
처음 스크립트 생성시에는 using UnityEngine.SceneManagement가 없으므로 직접 입력해야 SceneManager를 사용할 수 있습니다.
LoadScene()은 string 텍스트 또는 int 정수로 씬을 불러 올 수 있습니다. 즉 숫자로 씬을 불러오는데 이 숫자 지정은 build setting 화면 우측의 숫자입니다.
레벨씬에서 stage 버튼에 SceneHandler 스크립트를 드롭하면 inspector뷰에서 스크립트가 컴포넌트로 추가됩니다.
SceneHandler 스크립트 컴포넌트를 클릭해서 버튼 컴포넌트 On Click() Runtime Only 박스에 드래그 드롭하면 이벤트를 선택할 수 있는 선택창이 생성됩니다. 선택창에는 스크립트 내에 있는 public 함수들이 리스트업 되어 있습니다. StartScene ()를 클릭하면 적용된 것입니다. 이제 확인해 볼 시간입니다.
레벨씬에서 플레이 버튼을 누르고 게임을 시작시키고 스테이지 1버튼을 누르면 스테이지 1로 이동할 수 있습니다.
다음에는 게임 플레이에서 캐릭터 이동을 다뤄보겠습니다.