베르의 프로그래밍 노트

Tutorial (3)

씬(Scene) 뷰 조작법

이번 섹션에서는 유니티 에디터의 씬 뷰에 대한 기초적인 조작법을 알아본다.

 

씬 기즈모는 씬 뷰에 우측 상단에 표시되며, 씬 뷰 카메라가 현재 바라보는 방향을 나타낸다. 각 축을 클릭해서 씬 뷰의 카메라가 해당 축을 기준으로 씬을 바라보게 할 수 있다.

 

 

그리고 씬 기즈모 아래에 Persp이라는 글자가 적혀있는데 이것은 현재 씬 뷰의 카메라가 원근 모드(Perspective Mode)라는 뜻으로 이것을 클릭하면 씬 뷰의 카메라를 직교 모드(Orthographic Mode)로 전환해서 원근감으로 왜곡되어 보이지 않게 만들 수 있다.

 

 

화살표 이동

씬 뷰에서는 키보드 화살표를 이용해서 카메라 정면을 기준으로 전후좌우로 움직일 수 있다.

Shift 키를 누르면 더 빠르게 움직일 수 있다.

핸드 툴

단축키 Q를 누르거나 핸드툴을 선택하면 아래와 같은 마우스 컨트롤을 할 수 있다.

Move : 좌클릭 드래그 하면 카메라를 기준으로 화면을 상하좌우로 움직일 수 있다.

Orbit : Alt 키를 누르고 좌클릭 드래그를 하면 카메라가 바라보는 피벗을 기준으로 궤도를 따라서 회전한다.

Zoom : Alt 키를 누르고 우클릭 드래그를 하면 씬 뷰를 확대/축소할 수 있다. Mac은 Control 키를 누르고 좌클릭 드래그해서 확대/축소할 수 있다. 마우스 스크롤을 회전시켜도 줌 조절이 가능하다.

Shift 키를 누르고 조작하면 이동, 회전, 줌 속도가 빨라진다.

플라이스루(Flythrough) 모드

플라이스루 모드를 통해서 1인칭 게임과 같은 동작으로 씬을 날아다니면서 탐색할 수 있다.

씬 뷰에 마우스를 우클릭한 채로 FPS 게임처럼 WASD를 통해서 전후좌우로 움직일 수 있다. QE 키로는 상하로 움직일 수 있다.

플라이스루 모드는 Perspective Mode에서만 동작하며, Orthgraphic Mode에서는 우클릭 드래그를 하면 피벗을 중심으로 회전하는 동작만 보인다. 더불어 2D모드에서도 플라이스루 모드가 동작하지 않고, 우클릭 드래그하면 화면을 이동시키는 동작만 보인다.

[유니티 어필리에이트 프로그램]

아래의 링크를 통해 에셋을 구매하시거나 유니티를 구독하시면 수익의 일부가 베르에게 수수료로 지급되어 채널의 운영에 도움이 됩니다.

[투네이션]

[Patreon]

[디스코드 채널]

Tutorial (2)

유니티 에디터의 화면 구성

작성 기준 버전 :: 2018.3.1f1

유니티 에디터로 프로젝트를 처음으로 열면 화면이 아래의 이미지와 같이 구성되어 있다.

이 화면의 구성에 대해서 하나씩 알아보도록 하자.

씬(Scene) 뷰

에디터 레이아웃 구성의 한 가운데 있는 것은 Scene 뷰다. 유니티에서 씬(Scene)이라는 개념은 일종의 맵(Map)이나 레벨(Level)에 해당한다. 씬 뷰는 이러한 씬에 배경을 꾸미기위해 소품이나 배경 건물 등을 배치하는데 사용된다.

하이어라키(Hierarchy) 창

씬 뷰의 좌측에 있는 하이어라키 창은 씬에 배치되어 있는 오브젝트들을 보여준다. 가장 상단에 SampleScene이라는 이름으로 현재 열려있는 씬의 이름이 표시되고, 그 아래에 그 씬에 포함된 오브젝트들이 나타난다. 기본적으로 배치되어 있는 오브젝트는 Main Camera라는 이름의 카메라와, Directional Light라는 이름의 조명이다.

프로젝트(Project) 창

프로젝트 창은 현재 프로젝트에 포함된 텍스처나 모델링, 스크립트, 씬 등의 애셋(Asset)을 보여주는 창이다. 개발 경험이 많지 않은 경우에는 프로젝트 창에 애셋들이 추가되는 대로 중구난방으로 쌓아두는 일이 많은데, 애셋들을 적절하게 분류해서 정리해두는 버릇을 들여두는게 나중에 필요한 애셋을 찾거나 불필요한 애셋을 정리할 때 큰 도움이 되며, 개발 속도에도 긍정적인 영향을 미칠 것이다.

인스펙터(Inspector) 창

인스펙터 창은 지금은 아무 내용이 없지만, 하이어라키 창에서 씬에 배치된 오브젝트나 프로젝트 창에서 프로젝트에 포함된 애셋을 선택하면 그것에 대한 자세한 정보를 보여주는 역할을 한다.

하이어라키 창에서 메인 카메라 오브젝트를 선택하고 인스펙터 창을 보면 메인 카메라 오브젝트의 자세한 정보를 확인하고 수정할 수 있게 된다.

게임(Game) 창

씬 창 뒤에 탭으로 되어 있는 게임 창 탭을 선택하면 씬 창이 뒤로 전환되고 게임 창이 앞으로 나온다.

게임 창은 씬 창과 같이 씬을 보여주는 역할을 하지만, 게임 창은 씬 창과는 다르게 카메라가 보여주는 것만을 볼 수 있는 창이다. 즉, 실제 게임에서 보게 될 장면을 보여주는 창이다.

콘솔(Console) 창

콘솔 창은 개발도중에 발생한 에러나 경고, 개발자가 기능을 테스트하거나 값을 체크하기 위해 출력시킨 로그 등이 출력되는 창이다. 출력된 로그를 더블클릭하면 비주얼 스튜디오가 열리고 해당 로그가 출력된 스크립트의 위치로 이동하게 된다.

로그의 종류

유니티 엔진에서 로그는 크게 일반 로그, 경고 로그, 에러 로그로 나누어지고, 일반 로그는 데이터의 값이나 진행 상황, 상태를 체크하기 위해 사용되는 로그이고, 경고 로그는 치명적이지는 않지만 수정할 것을 권장하는 로그이며, 에러 로그는 게임이 정지하거나 기능에 심각한 이상이 발생하는 상황에 대한 로그이다.

세부적인 버튼의 내용은 다음과 같다.

뒤의 세 개 버튼은 각각 일반 로그, 경고 로그, 에러 로그 보기 버튼이며, 해당 버튼을 눌러서 원하는 종류의 로그만 볼 수 있다.

일반 로그만 활성화한 상태이다.

경고 로그만 활성화한 상태이다.

에러 로그만 활성화한 상태이다.

Clear 버튼은 현재까지 출력된 로그들을 모두 지운다.

Collapse 버튼은 같은 내용의 로그가 여러 번 출력되면 여러 줄로 표시하지 않고 한 줄로 표시하며 같은 내용의 로그가 몇 번이나 출력되었는지를 보여주는 기능이다. 이것은 로그의 순서가 중요하지 않고, 출력되었느냐 혹은 몇 회나 출력되었는지가 중요한 경우에 사용하게 된다.

Clear on Play 버튼은 에디터에서 플레이 버튼을 눌렀을 때, 남아있는 로그를 모두 지우고 플레이를 시작하게 만든다. 남아있는 이전에 띄운 로그가 남아있다면 플레이 중에 뜨는 로그가 보기 힘들어지는 경우가 많기 때문에 사용한다.

Error Pause 버튼은 플레이 도중에 에러 로그가 발생하면 플레이를 일시정지 시키는 버튼이다. 에러가 나도 플레이가 계속되면 에러가 발생하는 순간을 놓칠 수도 있기 때문에 에러가 발생한 순간을 잡아내기 위해서 사용하는 기능이다.

Editor 버튼은 에디터의 로그를 출력한다는 뜻의 버튼이다. 나중에 모바일 게임을 개발하다보면 APK로 빌드한 앱을 모바일 기기에 설치해서 컴퓨터와 연결하고 실행해서 실시간으로 로그를 보기위해서 사용되는 버튼이다.

애셋 스토어(Asset Store) 창

애셋 스토어 창은 다른 개발자들이 만든 게임 개발용 애셋들을 구매할 수 있는 창이다. 대규모 개발팀이나 회사는 게임에 필요한 모든 리소스들을 개발할 여력이 있겠지만, 소규모 개발팀이나 1인 개발자는 모든 리소스를 만들어내기 매우 어렵기 때문에 다른 사람이 만든 애셋을 구매해서 사용하면 더 빠르게 게임을 개발할 수 있다는 장점이 있다.

그 외의 창들

유니티 엔진에는 방금 화면 구성에서 소개한 창들 외에도 많은 종류의 창들이 존재한다.

에디터 상단의 메뉴 바에서 Window 메뉴를 클릭해서 드롭다운 메뉴를 펼치면 숨겨진 창들의 목록을 보고 필요한 창을 열어서 사용할 수 있다.

그 외의 버튼들

이 버튼들은 씬에 배치된 오브젝트를 이동, 회전, 크기 조절을 하는데 사용되는 버튼들이다.

이 버튼들은 에디터에서 게임을 실행, 일시정지, 한 프레임씩 넘기기를 하는 버튼이다.

좌측 버튼부터 순서대로, 팀단위 작업을 위한 유니티 콜라보(Collaborate) 버튼, 유니티가 제공하는 서비스 버튼, 계정 관리 버튼, 씬 창에서 보이기 원하는 레이어를 선택하는 버튼, 유니티 에디터의 레이아웃 버튼이다.

유니티 에디터 레이아웃 수정하기

유니티 에디터의 화면 구성은 사용자가 편한 방식으로 레이아웃을 수정할 수 있다.

위치를 수정하려고하는 창의 탭을 드래그해서 에디터에서 완전히 떼어내거나 다른 곳에 배치할 수 있다.

완전히 떼어낸 하이어라키 창

다른 위치에 배치한 하이어라키 창

각자 사용하기 편한 방식으로 레이아웃을 배치해보자.

수정한 레이아웃 저장하기

수정한 레이아웃은 저장해두고 언제든지 다시 불러올 수 있다. 에디터 우측 상단 구석에 Default 버튼을 클릭하면 드롭다운 메뉴 중에 Save Layout... 버튼을 클릭하면 수정한 레이아웃의 이름을 지어줄 수 있는 대화상자가 뜬다.

좌측부터 게임, 씬, 콘솔이 한 묶음으로 묶여있고, 그 다음엔 하이어라키와 프로젝트, 마지막으로 인스펙터로 나열되서 3-2-1로 배치되어 있으니 이 레이아웃의 이름을 Countdown이라고 저장하겠다.

레이아웃을 저장하고 나면 Default로 되어있던 버튼이 Countdown으로 되어있으며 추가한 Countdown 레이아웃이 드롭다운 목록에 추가되어 있는 것을 확인할 수 있다. 이렇게 레이아웃을 저장해두면, 레이아웃이 바뀌어도 언제든지 손쉽게 자주 사용하는 레이아웃으로 돌아올 수 있다.

[유니티 어필리에이트 프로그램]

아래의 링크를 통해 에셋을 구매하시거나 유니티를 구독하시면 수익의 일부가 베르에게 수수료로 지급되어 채널의 운영에 도움이 됩니다.

[투네이션]

[Patreon]

[디스코드 채널]

Tutorial (1)

프로젝트 생성하기와 열기

작성 기준 버전 :: 2018.3.1f1

프로젝트 생성하기

유니티 엔진으로 게임을 제작하는 첫 번째 관문은 프로젝트를 생성하는 것이다. 유니티 엔진을 처음 실행하면 아래의 이미지와 같이 현재 생성된 프로젝트가 없다고 표시된다. 이미지에 빨간 사각형으로 표시된 New를 클릭하면 새로운 프로젝트를 생성할 수 있게 된다.

New 버튼을 누르고 나면, 아래의 이미지와 같이 새로 생성할 프로젝트의 이름과 몇 가지를 설정할 수 있는 화면으로 전환된다.

프로젝트를 생성할 때, 각 항목들의 내용은 다음과 같다.

Project Name은 생성할 프로젝트의 이름이다.

Template은 어떤 프로젝트를 생성할 것인지 설정하는 항목이다. 기본적으로 2D와 3D가 있는데, 평면상으로 보이는 2D 게임을 만들고 싶다면 2D 옵션을, 입체적인 3D 게임을 만들고 싶다면 3D 옵션을 선택하면 된다. 이 외에도 유니티를 활용하는 방법에 대한 몇 가지의 템플릿을 추가로 제공한다.

Location 항목은 프로젝트가 저장될 경로이다. 이를 통해서 사용자는 프로젝트를 원하는 위치에 저장할 수 있다.

Add Asset Package는 애셋 스토어에서 구매한 애셋을 프로젝트를 생성하는 단계에서 추가할 수 있게 해주는 버튼이다.

Enable Unity Analytics는 프로젝트에 관련된 통계나 비슷한 게임의 벤치마크 성능을 보여주는 애널리틱스 기능으로 프로젝트를 관히라는데 도움을 주는 기능을 활성화시키는 옵션이다.

필요한 항목들을 모두 정한 다음 Create Project 버튼을 누르면 새로운 프로젝트가 생성되고 유니티 에디터가 실행된다.

프로젝트 열기

프로젝트의 생성을 끝마쳤다면 이번에는 생성한 프로젝트를 불러와보자. 유니티 에디터를 닫은 후에 다시 유니티 엔진을 실행한다.

그렇게 하면 방금 전에 생성한 프로젝트가 프로젝트 목록에 있는 것을 확인할 수 있다. 프로젝트 이름을 클릭하면 간단하게 프로젝트를 불러올 수 있다.

간혹 프로젝트 폴더를 메신저나 이메일을 통해서 건네받은 경우에는 곧바로 프로젝트 목록에 해당 프로젝트가 뜨지 않을 수 있다. 이럴 때는 우측 상단에 Open 버튼을 클릭하면 열고자 하는 프로젝트의 폴더를 선택할 수 있는 대화상자가 열린다.

대화상자가 열리면 열고자 하는 프로젝트의 폴더를 클릭한 뒤 폴더 선택 버튼을 누르면 된다.

프로젝트 목록에 없던 프로젝트는 한 번 열고 나면 다음에 유니티 엔진을 실행할 때, 목록에 표시된다.

[유니티 어필리에이트 프로그램]

아래의 링크를 통해 에셋을 구매하시거나 유니티를 구독하시면 수익의 일부가 베르에게 수수료로 지급되어 채널의 운영에 도움이 됩니다.

[투네이션]

[Patreon]

[디스코드 채널]

로그(Log) 출력시 스택 트레이스(Stack trace) 관리하기

로그(Log)는 개발자들에게 없어서는 안될 중요한 동반자다. 개발자는 로그를 통해서 코드가 제대로 동작하는지, 데이터 값들이 정상인지 등을 확인할 수 있다. 만약 로그가 없다면, 개발자는 버그를 찾아내는데 더 많은 고생을 하게 될 것이다.

유니티에서는 이러한 로그를 출력할 때, 위의 이미지처럼 개발자가 출력하고자하는 로그의 내용과 함께 로그가 출력된 코드의 위치를 알려주는 스택 트레이스 역시 함께 보여준다. 로그를 출력하도록 설정해놓았다면 빌드한 어플이케이션에서도 로그가 찍힐 때 스택 트레이스 역시 함께 출력되도록 되어있다.

위의 이미지는 간단한 테스트 코드이기 때문에 스택 트레이스가 3줄 밖에 안되지만 본격적으로 개발에 들어간 이후에는 스택 트레이스가 기본적으로 4-5줄에서 많은 10여줄을 넘는 경우가 자주 발생한다.

에디터에서라면 스택 트레이스와 로그가 분리되어서 출력되기 때문에 로그를 읽는데는 큰 문제가 없지만 윈도우 빌드에서 나오는 로그 파일이나, 안드로이드로 빌드된 어플리케이션으로 로그캣에서 로그를 볼때는 로그 바로 아랫줄에 스택 트레이스가 바로 출력되기 때문에 로그를 제대로 읽기가 매우 어려워진다.

물론 코드의 어느 지점에서 에러 로그가 발생했는지 확인해야하는 로그라면 스택 트레이스가 출력되는게 좋지만, 로그가 출력된 위치보다는 출력되는 내용이 더 중요한 로그라면 스택 트레이스는 출력되지 않는 편이 로그의 가독성을 더 높혀줄 것이다.

Application.SetStackTraceLogType(LogType logType, StackTraceLogType stackTraceLogType);

Application 클래스의 SetStackTraceLogType() 함수를 통해서 스택 트레이스의 출력 수준을 결정할 수 있다.

LogType 열거형은 스택 트레이스 수준을 설정할 로그의 종류를 의미한다. 로그의 종류는 다음과 같다.

LogType.Error
LogType.Assert
LogType.Warning
LogType.Log
LogType.Exception

StackTraceLogType은 스택 트레이스의 출력 수준을 의미한다. 스택 트레이스 출력 수준의 종류는 다음과 같다.

StackTraceLogType.None;
StackTraceLogType.ScriptOnly;
StackTraceLogType.Full;

스택 트레이스 타입을 수정하지 않았을 때, 유니티의 기본 수준은 ScriptOnly이다. None으로 설정하면 스택 트레이스가 전혀 출력되지 않고 Full로 설정하면 기존의 스택 트레이스보다 더 자세한 정보를 제공하는 스택 트레이스가 출력된다.

응용

스택 트레이스 타입을 변경하는 순간부터 모든 로그에 스택 트레이스 타입이 변경되기 때문에, 제대로 다루지 않으면 스택 트레이스가 필요한 로그에서 스택 트레이스가 출력되지 않거나 혹은 그 반대의 경우가 발생할 수 있다.

필요한 상황에서만 스택 트레이스를 켜고 끄기 위한 방법으로는 Debug 클래스를 래핑해서 사용하는 방법이 있다.

using UnityEngine;

public static class Debug
{
    public static void Log(object message, StackTraceLogType stackTraceLogType = StackTraceLogType.ScriptOnly)
    {
        Application.SetStackTraceLogType(LogType.Log, stackTraceLogType);
        UnityEngine.Debug.Log(message);
    }
}

[유니티 어필리에이트 프로그램]

아래의 링크를 통해 에셋을 구매하시거나 유니티를 구독하시면 수익의 일부가 베르에게 수수료로 지급되어 채널의 운영에 도움이 됩니다.

[투네이션]

[Patreon]

[디스코드 채널]

네트워크 애니메이터(Network Animator)

네트워크 게임에서는 게임이나 유닛, 캐릭터 등의 상태를 동기화하는 것도 중요하지만 눈에 보이는 캐릭터들의 움직임, 즉 애니메이션 역시 동기화가 필요하다. 아무리 다른 동기화가 잘 되고 있다고 하더라도, 애니메이션 동기화가 진행되지 않아서 가만히 서있는 자세로 이동하거나 공격한다면 문제가 많을 것이다.

유니티 네트워크 시스템에서는 이러한 애니메이션 동기화를 위한 기본적인 기능을 제공하는데 그것이 바로 네트워크 애니메이터(Network Animator)다.

이번 섹션을 진행하기 위해서는 기본적인 유니티의 애니메이션 시스템과 애니메이터 컨트롤러에 대한 지식이 필요하다. 기반 지식이 부족하다면 유니티의 애니메이션 문서를 참조하여 공부를 해두는 것이 좋다.

그럼 이제부터 네트워크 애니메이터를 사용하는 방법을 알아보도록 하자.

네트워크 애니메이터 컴포넌트의 기본적인 요구사항

네트워크 애니메이터를 사용하기 위해서는 네트워크 애니메이터 컴포넌트가 있는 오브젝트와 같은 오브젝트에 에니메이터 컨트롤러와 네트워크 아이덴티티 컴포넌트가 있어야 한다.

네트워크 애니메이터의 작동 방식

네트워크 애니메이터의 작동 방식은 기본 애니메이터 컨트롤러의 파라메터가 변경되면 그 변경된 파라메터의 값을 네트워크 애니메이터를 통해서 클라이언트의 해당 네트워크 애니메이터로 전송하고 받은 측의 네트워크 애니메이터가 자신이 소유한 애니메이터 컨트롤러에 변경된 파라메터와 값을 알려서 애니메이션을 동작하게 한다.

네트워크 애니메이터를 사용하기 위한 준비

앞에서 네트워크 애니메이터의 기본적인 요구 사항과 작동 방식을 알아보았으니 이제 네트워크 애니메이터를 추가하고 사용하는 방법에 대해서 알아보도록 하자.

애니메이션 섹션의 단골인 박스맨이 이번 네트워크 애니메이터 섹션에서도 도움을 줄 것이다.

위의 이미지에 맞춰서 애니메이션 스테이트를 구성해보자. 박스맨 캐릭터는 대기(Idle) - 이동(Walk) - 공격(Attack), 세 가지 상태를 가지며, IsMove 파라메터의 상태에 따라서 대기와 이동 상태를 오가며, Attack 트리거를 받으면 공격 애니메이션을 재생하고 대기 상태로 돌아가는 아주 간단한 형태다.

위와 같이 게임 오브젝트와 컴포넌트를 세팅해주면 준비는 끝이다.

네트워크 애니메이터 추가하기

네트워크 애니메이터를 추가하는 방법은 간단하다. 애니메이션을 동기화하고자 하는 오브젝트에(애니메이터 컨트롤러 컴포넌트를 가지고 있어야 한다) 네트워크 애니메이터를 Add Component 해주면 된다. 그러면 네트워크 애니메이터와 함께 네트워크 통신에 필요한 Network Identity 컴포넌트가 자동으로 함께 추가된다.

네트워크 애니메이터를 추가한 후에는 네트워크 애니메이터 컴포넌트의 애니메이터 프로퍼티에 동기화되어야할 애니메이터를 추가해주면 된다.

그렇게하면 네트워크 애니메이터 컴포넌트에 동기화될 애니메이터의 파라메터들이 표시된다. 이 다음에는 네트워크 애니메이터를 컨트롤할 스크립트를 작성해야 한다.

using UnityEngine;
using UnityEngine.Networking;

public class PlayerCharacter : MonoBehaviour
{
    private NetworkAnimator netAnimator;

    void Start ()
    {
        netAnimator = GetComponent<NetworkAnimator>();
    }
   
    void Update ()
    {
        if (Input.GetKeyDown(KeyCode.W))
        {
            netAnimator.animator.SetBool("IsMove", true);
        }
        else if (Input.GetKeyUp(KeyCode.W))
        {
            netAnimator.animator.SetBool("IsMove", false);
        }

        if (Input.GetMouseButtonDown(0))
        {

            netAnimator.animator.SetTrigger("Attack");
            netAnimator.SetTrigger("Attack");
        }
    }
}

위와 같이 스크립트를 작성한 이후에 빌드하고 실행해서 한 쪽에서 서버를 열고 다른 쪽에서 클라이언트로 접속한 뒤 서버 측에서 W를 누르거나 마우스를 클릭했을때 애니메이션이 동기화됨을 확인할 수 있다.

위의 예시 코드에서 몇 가지 의문점이 있을 수 있는데, SetBool을 호출할 때는 networkAnimator.animator를 통해서 호출하고 SetTrigger를 호출할 때는 networkAnimator.SetTrigger()로 바로 호출하는가와 트리거를 사용하는 부분에서 왜 networkAnimator.animator.SetTrigger()와 networkAnimator.SetTrigger()를 중복해서 사용했는지가 그것이다.

첫 번째 의문점의 경우에는 Trigger는 NetworkAnimtor 클래스에서 호출할 수 있는 SetTrigger() 함수가 있지만, 다른 애니메이터의 파라메터(Int, Float, Bool)는 NetworkAnimator 클래스에서 바로 호출해서 사용하는 메서드가 따로 없고, NetworkAnimator의 멤버 변수인 animator를 통해서 SetBool(), SetInt(), SetFloat() 함수를 호출하도록 만들어져 있기 때문이다.

두 번째 문제는 트리거를 사용하는 부분에서 왜 networkAnimator.animator.SetTrigger()와 networkAnimator.SetTrigger()를 중복해서 사용했는지 인데, 이것은 networkAnimator.animator.SetTrigger() 함수를 통해서 동작하는 애니메이션은 서버에서만 재생되고, networkAnimator.SetTrigger() 함수를 통해서 동작하는 애니메이션은 클라이언트에서만 재생되기 때문이다. 즉, 서버에서도 애니메이션을 재생하고 클라이언트에서도 애니메이션을 재생하기를 원한다면 위의 예시 코드와 같이 작성되어야 한다. 특히 서버 측에서 애니메이션 이벤트를 통해서 애니메이션이 진행되는 도중에 특정한 동작이 발생되도록 로직이 짜여있다면 서버에서도 애니메이션이 동작되어야 하기 때문에 반드시 위의 코드처럼 작성되어야만 한다. 하지만 이후에도 설명하겠지만, 애니메이션을 재생하는 처리는 상당히 무거운 작업에 속하기 때문에, 클라이언트가 서버의 역할을 함께하는 P2P 방식이 아닌 순수한 서버라면 애니메이션 재생 도중 호출되는 애니메이션 이벤트는 반드시 배제해야 한다. 그리고 서버에서는 애니메이션이 완전히 동작하지 않도록 하는 것이 좋다.

추가로 : 네트워크 애니메이터에 대한 중요한 사실

유니티에서 기본적으로 제공하는 네트워크 애니메이터가 있기 때문에 우선은 소개하고 사용법에 대해서 알려주지만, 사실 기본 네트워크 애니메이터를 사용하는 것은 추천하지 않는다. 오히려 직접 커스텀 네트워크 애니메이터를 따로 구현해서 사용하도록 권장하고 싶다. 지금은 주요 작업을 2017.3.03f 버전의 유니티로 하고 있기 때문에 이후의 버전에서는 더 좋게 바뀌었는지 모르겠지만, 이 버전과 이전 버전에서는 기본 네트워크 애니메이터에 상당한 문제가 있기 때문이다.

첫 번째 문제는, 기본 네트워크 애니메이터가 소모하는 데이터량이 너무 많다. 커스텀 애니메이터를 잘 구현한다면 기본 네트워크 애니메이터를 사용할 때보다 훨씬 데이터 소모량을 많이 줄일 수 있다.

두 번째 문제는, 꽤나 심각한 문제인데, 기본 네트워크 애니메이터가 굉장히 많은 가비지(Garbage)를 발생시켜서 GC로 인한 프레임드랍이 심각하다고 여겨질 만큼 발생한다는 것이다. 이것에 대한 이슈는 구글링해보면 해외 개발자들도 상당히 심각하게 느끼도 있다는 것을 알 수 있다. 실제 개발에서 네트워크 애니메이터로 애니메이션을 동기화 했다가 이 문제 때문에 네트워크 애니메이터를 모두 제거하고 커스텀 네트워크 애니메이터를 구현해서 사용해야 했었다.

[유니티 어필리에이트 프로그램]

아래의 링크를 통해 에셋을 구매하시거나 유니티를 구독하시면 수익의 일부가 베르에게 수수료로 지급되어 채널의 운영에 도움이 됩니다.

[투네이션]

[Patreon]

[디스코드 채널]

마우스 입력 처리 총정리

[본 포스트의 내용은 유튜브 영상으로도 시청하실 수 있습니다]

마우스는 PC의 중요한 입력장치 중 하나로 PC를 타깃으로 하는 게임이라면 십중팔구는 마우스에 대한 입력처리가 필수적이다. 이번 섹션에서는 마우스 입력 처리하는 방법에 대해서 알아보자.

마우스를 통해서 들어오는 입력은 세 가지 정도로 나눌 수 있다. 버튼 입력, 위치 센서 입력, 스크롤휠 입력이 그것이다.

마우스 버튼 입력 처리

첫 번째로 알아볼 입력 처리는 버튼에 대한 입력 처리다.

마우스 버튼에 대한 입력은 일반적으로 Down, Hold, Up 이 세 가지 과정으로 나누어져서 처리된다. Down은 버튼을 누르는 순간을 의미하고 Hold는 누른 상태로 유지하는 것, Up은 눌려진 버튼을 떼는 것을 의미한다.

bool Input.GetMouseButtonDown(int button);
bool Input.GetMouseButton(int button);
bool Input.GetMouseButtonUp(int button);

유니티에서는 Input 클래스의 GetMouseButtonDown(), GetMouseButton(), GetMouseButtonUp() 함수를 통해서 버튼의 입력을 확인할 수 있는데, 이 함수들의 사용 예시는 다음과 같다.

void Update ()
{
    if (Input.GetMouseButtonDown(0))
    {
        // 마우스 왼쪽 버튼을 눌렀을 때의 처리
    }

    if (Input.GetMouseButton(0))
    {
        // 마우스 왼쪽 버튼을 누르고 있는 도중의 처리
    }

    if (Input.GetMouseButtonUp(0))
    {
        // 마우스 왼쪽 버튼을 뗄 때의 처리
    }
}

이 함수들의 매개변수에는 버튼의 번호가 들어가는데, 각 번호가 의미하는 마우스 버튼은 다음과 같다.

0 : 마우스 왼쪽 버튼

1 : 마우스 오른쪽 버튼

2 : 마우스 휠 버튼

3~6 : 마우스에 달린 추가 버튼

마우스 커서 위치 처리

게임에서는 마우스 커서 위치를 확인하는 것도 굉장히 많이 사용되는 편이다. 마우스 커서 위치는 다음과 같이 가져올 수 있다.

void Update()
{
    Vector3 mousePos = Input.mousePosition;
}

참고로 프로그램 화면의 왼쪽 아래가 (0, 0)이다.

마우스 휠 입력 처리

최근에 사용되는 마우스의 경우에는 기본으로 휠이 장착되어 있다. 휠 동작의 경우에는 휠을 돌리면 화면이 위/아래로 스크롤된다거나, 화면이 확대/축소 되는 방식으로 지원된다.

마우스 휠 입력을 처리하는 방법은 두 가지가 있는데 그 예시는 다음과 같다.

void Update()
{
    float wheelInput = Input.GetAxis("Mouse ScrollWheel");
    if (wheelInput > 0)
    {
        // 휠을 밀어 돌렸을 때의 처리 ↑
    }
    else if (wheelInput < 0)
    {
        // 휠을 당겨 올렸을 때의 처리 ↓
    }

    Vector2 wheelInput2 = Input.mouseScrollDelta;
    if (wheelInput2.y > 0)
    {
        // 휠을 밀어 돌렸을 때의 처리 ↑
    }
    else if (wheelInput2.y < 0)
    {
        // 휠을 당겨 올렸을 때의 처리 ↓
    }
}

추가로, 휠을 한 틱 돌렸을 때, 변경되는 값은 0.1이다.

[유니티 어필리에이트 프로그램]

아래의 링크를 통해 에셋을 구매하시거나 유니티를 구독하시면 수익의 일부가 베르에게 수수료로 지급되어 채널의 운영에 도움이 됩니다.

[투네이션]

[Patreon]

[디스코드 채널]

모바일 앱에서 디바이스의 배터리 잔량 표시하기

PC나 콘솔 같은 디바이스에서 동작하는 앱이라면 상관없는 문제이지만 모바일 같은 휴대기기에서 동작하는 앱이라면 현재 앱이 동작하고 있는 디바이스의 배터리 잔량에 대해서 알아야 하거나 확인해야 할 수도 있다. 사용자가 일일이 화면 상단을 드래그나 터치해서 상태바(Status bar)를 꺼내지 않고도 배터리 잔량을 할 수 있게 하는 방식으로 말이다.

유니티는 모바일을 타깃으로 하는 게임이나 앱들을 굉장히 폭넓게 지원하기 때문에 이와 관련된 기능 역시 제공하고 있다.

SystemInfo.batteryLevel;

SystemInfo.batteryStatus;

유니티에서 배터리의 상태와 관련된 정보는 SystemInfo 클래스의 정적 프로퍼티를 통해서 가져올 수 있다.

첫 번째로 batteryLevel은 현재 디바이스의 배터리 충전량으로 float 변수이며, 0-1사이의 값을 가지며, 이 프로퍼티를 호출한 디바이스가 배터리를 사용하지 않거나 batteryLevel을 지원하지 않는 디바이스라면 -1을 반환한다.

두 번째 프로퍼티는 batteryStatus로 현재 배터리의 상태를 가져올 수 있다. 이 프로퍼티는 BatteryStatus 타입의 열거형이며 열거형의 종류와 내용은 다음과 같다.

BatteryStatus.Unknown;       // 충전 상태를 알 수 없음. 배터리 상태를 지원하지 않는 플랫폼일 때 반환되는 값.
BatteryStatus.Discharging;   // 충전 케이블이 연결되지 않았고, 충전도 되지 않는 상태.
BatteryStatus.NotCharging;   // 충전 케이블은 연결되어 있지만, 충전은 되지 않는 상태.
BatteryStatus.Charging;      // 충전 케이블이 연결되어 있고, 충전되고 있는 상태.
BatteryStatus.Full;          // 충전 케이블이 연결되어 있고, 배터리가 가득 찬 상태.

간단한 사용 예시

using UnityEngine;
using UnityEngine.UI;

public class BatteryUI : MonoBehaviour
{
    Sprite chargeStateSprite;   // 배터리 충전중 표시 스프라이트
    Sprite fewStateSprite;      // 배터리가 부족하다는 표시 스프라이트

    Image batteryStateImg;      // 배터리 상태 표시 이미지
    Image batteryFrameImg;      // 배터리 모양 프레임 이미지
    Image batteryLevelImg;      // 배터리 잔량 표시 이미지

    public void UpdateBatteryUI()
    {
        float batteryLevel = SystemInfo.batteryLevel;
        switch (SystemInfo.batteryStatus)
        {
            case BatteryStatus.Full:
            case BatteryStatus.Charging:

                batteryLevelImg.color = batteryFrameImg.color = Color.white;
                batteryStateImg.sprite = chargeStateSprite;
                batteryStateImg.gameObject.SetActive(true);
                batteryLevelImg.fillAmount = 1f;
                break;

            case BatteryStatus.Discharging:
                if(batteryLevel < 0.1f) // 배터리가 부족하면 이미지를 빨갛게
                {
                    batteryLevelImg.color = batteryFrameImg.color = Color.red;
                    batteryStateImg.sprite = fewStateSprite;
                    batteryStateImg.gameObject.SetActive(true);
                }
                else
                {
                    batteryLevelImg.color = batteryFrameImg.color = Color.white;
                    batteryStateImg.gameObject.SetActive(false);
                }

                batteryLevelImg.fillAmount = batteryLevel;
                break;
        }
    }
}

[유니티 어필리에이트 프로그램]

아래의 링크를 통해 에셋을 구매하시거나 유니티를 구독하시면 수익의 일부가 베르에게 수수료로 지급되어 채널의 운영에 도움이 됩니다.

[투네이션]

[Patreon]

[디스코드 채널]

UI 리소스 최적화로 메모리와 용량 최적화 잡기

유니티의 텍스처 압축 지원 받기

 

그것은 바로 텍스처의 너비와 높이 둘 다 4의 배수가 되어야 한다는 것이다. 만약 너비나 높이 둘 중 하나라도 4의 배수가 되지 못하면, 해당 텍스처는 무압축 상태로 빌드된다.

 

 

위의 이미지를 보면 텍스처 압축을 지원받지 못한 900x359 크기의 텍스처는 1.2MB지만 900x360 크기의 텍스처는 RGBA Compressed DXT5 포맷으로 압축되어 316.4KB로 엄청나게 크기가 줄어든 것을 확인할 수 있다.

 

단, DXT5 포맷의 압축 방식은 iOS에서는 지원되지 않기 때문에, 다른 압축 포맷을 직접 지정하는것이 좋다.

 

 

 

 

스프라이트 패킹(Sprite Packing)

 

UI 텍스처 압축을 통해 용량을 아꼈다면 이번에는 메모리를 아껴볼 차례다.

 

 

유니티에서 이미지는 메모리에 올라갈 때, 정사각형의 형태나 각 변의 길이가 POT(2의 승수, 128 256 512 같은..)인 형태로 올라가게 되는데, 만약 이미지가 정사각형이 아니거나 각 변의 길이가 POT인 형태라면 이미지의 가로변과 세로변의 길이 중 긴 변의 길이에 맞춰서 정사각형의 크기의 메모리를 할당받기 때문에 낭비되는 메모리 공간이 많아진다. 이 문제는 한 쪽변이 다른 한 쪽변의 길이에 비해서 매우 길어질 수록 심해진다.

 

 

 

이러한 문제를 해결하기 위한 것이 바로 스프라이트 패킹이다. 스프라이트 패킹이란 여러개의 이미지를 같은 패키지로 패킹해서 메모리에 함께 올리는 것으로 모든 UI 텍스처를 따로 메모리에 올렸을 때보다 메모리의 낭비를 많이 줄일 수 있게 된다.

 

유니티에서 스프라이트 패킹 방법으로 레거시 스프라이트 패커(Legary Sprite Packer)와 스프라이트 아틀라스(Sprite Atlas) 두 가지를 제공한다.

 

 

 

 

슬라이스드 이미지 사용하기(Sliced Image)

사실 UI 리소스의 경우에는 특별한 이미지가 많이 사용된다기 보다는 사용되는 이미지가 반복되어서 사용되는 경우가 많다. UI를 묶어주는 패널(Pannel), 입력을 받는 인풋 필드(Input Field), 버튼(Button) 등이 여기에 속한다.

이런 것에 사용되는 리소스는 재사용성을 높여야 되지만, 초보 개발자나 초보 UI 디자이너는 예쁘거나 멋지게 만들어야 되는다는 집착에 빠지거나, 최적화에 대한 신경을 못쓰고 만들어서, 패널이나 버튼에 들어갈 이미지를 크기에 맞춰서 필요한 모든 사이즈 별로 만드는 경우가 종종 있다.

예를 들어 760x960 크기의 UI가 필요해서 거기에 해당하는 리소스를 만들어 냈다고 해보자. 이걸 게임에 그대로 적용해버리면 패널을 꾸미기에 따라서는 UI가 예뻐보일 수는 있을 것이다. 하지만 압축된 리소스임에도 불구하고 0.7MB라는 엄청난 용량을 자랑하는 것을 볼 수 있다. 이게 겨우 하나여서 0.7MB지, 여러 종류의 많은 UI를 띄워야 하는 게임이어서 해당 UI의 크기 별로 패널 리소스를 새로 만들어서 적용한다면 그리고 그 와중에 몇몇 리소스가 압축되지 않는 불상사가 발생한다면 게임의 용량이나 메모리 소모는 엄청난 수준이 될 것이다.

버튼이나 패널 같은 UI의 리소스의 경우에는 일반적으로 리소스의 모서리 부분을 제외한 중심 부분은 반복되는 경우가 많다. 슬라이스드 이미지란 바로 이 점에서 착안한 아이디어로 모서리 부분과 반복될 중심 부분 조금만 있으면 유니티 엔진이 중심 부분을 자동으로 채워주는 기능이다. 그렇기 때문에 패널 리소스 중에서도 모서리 부분과 반복될 중심 부분 약간 만으로 리소스를 만들면 위 이미지와 같은 커다란 패널 UI 리소스는 아래 이미지와 같이 아주 작게 줄일 수 있다.

불필요한 중심 부분을 제거하는 것만으로도 이미지의 크기와 용량이 700분의 1로 줄어들었다.

리소스의 중심 부분을 제거한 뒤에는 유니티의 스프라이트 에디터(Sprite Editor)에서 원형을 유지할 부분과 크기가 늘어났을 때 자동으로 채워질 부분을 설정해주면된다. 위의 그림처럼 설정하면 UI의 크기가 늘어났을 때 모서리 부분은 원형을 유지하고 가운데 십자 부분만 자동으로 채워지는데 씬에서 UI Image를 추가할 때, Image Type를 Sliced로 변경해주면 작은 이미지가 전혀 확대되거나 이상한 모양으로 늘어지지 않음을 확인할 수 있다.

오른쪽의 패널이 슬라이스드 이미지를 사용한 UI이고 오른쪽은 그냥 패널 이미지를 통째로 사용한 것이다. 둘이 차이가 없음을 확인할 수 있다. 하지만 패널 리소스에 그라데이션이나 디자인이 들어갔다면 그 퀄리티는 다를 수도 있다. 하지만 그 부분은 저사양에서는 단순한 패널만 보여주고 유저가 고사양을 선택한다면 패널 UI 위에 디자인 이미지를 올려서 보여줄 수도 있다.

[유니티 어필리에이트 프로그램]

아래의 링크를 통해 에셋을 구매하시거나 유니티를 구독하시면 수익의 일부가 베르에게 수수료로 지급되어 채널의 운영에 도움이 됩니다.

[투네이션]

[Patreon]

[디스코드 채널]