(주의) 본 연재는 노잼입니다

[바로가기]

본편

 0, 1, 2

안녕 중붕이들아

이 연재는 '중붕이도 할 수 있는 게임 만들기' 연재의 심화편으로

본편에서 넘어간 설명이나 코드의 분석 등등을 진행 할 예정임

이번 편에서는 1편에서 예고했던 vscode의 설치 및 코드 분석, 2편에서 예고했던 스프라이트 랜더러와 스프라이트 파일의 옵션에 대해 다룰 것임

말이 심화지 그냥 외전 느낌이라 심화편을 안본다고 본편을 진행하는데 지장은 없을거임

그리고 심화편은 거의 설명만 할 예정이라 아마 엄청 재미 없을테니 보고 싶은 사람만 보도록 하자

1.vscode 설치

가장 먼저 vscode에 대해 알아보자

본편에서는 모노디벨롭을 사용하지만 사실 성능면에선 vscode가 훨씬 좋고 나도 vscode를 사용한다

큰 특징이라면 확장과 마켓플레이스의 존재인데, 새로운 기능이나 언어를 사용하고 싶다면 간단하게 마켓플레이스에서 필요한 확장을 설치하여 사용하면 된다

예를 들어 c/c++을 사용하고 싶다면 마켓플레이스를 통해 c/c++을 사용할 수 있게 만들어주는 확장을 찾아 설치하면 된다

코드 편집기로서의 기본적인 기능들만 제공하고, 추가 기능들을 확장이라는 형태로 분리해 필요한 경우에만 설치하도록 만들어 놨으니 프로그램도 굉장히 가볍다

옛날에는 조금 부족한 느낌이 들기도 했으나, 업데이트가 자주 이루어져 지금은 큰 불편함 없이 사용할 수 있다

이제 바로 설치해 보도록 하자

https://code.visualstudio.com/

위 사이트는 vscode의 공식 홈페이지다

한번 접속해 보자

Download for Window를 클릭하면 바로 설치 프로그램을 다운로드 받을 수 있다

다운로드 받은 뒤 실행 시켜 보자

실행 시키면 설치 프로그램이 표시된다

딱히 설정할만한 내용은 없으니 설치 폴더만 잘 확인하고 설치를 진행해 주자

설치를 끝낸 뒤 실행 시키면 위와 같은 프로그램이 실행될 것이다

오른쪽 아래 메시지는 무시하고 왼쪽 메뉴중 가장 아래쪽에 있는 Extensions를 클릭해 보자

이 메뉴가 바로 확장을 설치할 수 있는 메뉴이다

여러가지 편의를 돕는 확장이 있지만 일단 가장 필수적인 확장만 설치해 보도록 하겠다

검색창에 korean을 입력해 보자

그럼 가장 위쪽에 한국어 언어팩이 표시 되는것을 볼 수 있다

영어로 사용해도 상관 없다면 언어팩은 설치하지 않아도 된다

Install 버튼을 눌러주자

설치가 끝나면 왼쪽 아래에 언어팩을 적용시키기 위해 재실행 할 것인지를 묻는 팝업이 뜰 것이다

아직 설치할 확장이 남았으니 재시작은 나중으로 미뤄두자

이번에는 c#을 검색창에 입력한다

원래 유니티는 자바스크립트와 자체 언어인 유니티 스크립트, 그리고 c#을 지원했는데

최신 버전에서는 자바스크립트와 유니티 스크립트가 빠지고 c#만 지원하도록 바뀌었다고 한다

우리도 대세를 따라 c#을 설치하자

맨 위에 표시된 c# 확장을 설치한다

언어팩에 비해 시간이 더 걸릴수도 있다

설치가 완료 되었다면 이제 오른쪽 아래의 팝업창에 Yes를 선택해 주자

다시 실행하면 한국어로 패치된 모습을 볼 수 있을 것이다

다른 확장이 제대로 설치됐는지 확인하고 싶으면

다시 확장 메뉴로 들어가보자

설치한 확장의 목록이 표시된다

이제 유니티에 적용시키는 일만 남았다

vscode를 종료하고 유니티 엔진을 실행해 보자

심화 1편을 기준으로 본편 2편까지 진행된 상태이다

상단 메뉴에서 Edit -> Preferences 를 선택한다

다음으로 표시된 팝업창의 좌측 메뉴에 External Tools로 들어가 보자

최상단에 있는 External Script Editor에서 기본으로 사용할 스크립트 에디터를 선택할 수 있다

한번 선택해 보자

그런데 방금 설치한 vscode는 보이지 않는다

이럴땐 가장 밑에 있는 Browse를 선택해 주자

vscode가 설치된 폴더로 들어가 Code.exe를 선택해 주면 된다

혹시라도 설치 폴더를 확인하지 못한 중붕이가 있다면

아래의 경로를 확인해 보자

유저 -> AppData -> Local -> Programs

위 경로는 vscode의 디폴트 경로이므로 설치 폴더를 설정하지 않았다면 위의 경로에 설치되었을 것이다

잘 찾아 선택했다면 열기를 눌러주자

vscode가 기본 스크립트 에디터로 설정된 모습을 볼 수 있다

제대로 작동하는지 확인하기 위해 아무 스크립트 파일이나 열어보자

콘솔창에 여러가지 문구가 뜨고 Finished가 뜨면 끝이다

이제 vscode로 개꿀잼 코딩을 해보자

아 그리고 아마 중붕이들은 오른쪽 아래에 .net core를 설치하라는 팝업이 뜰텐데

단순 코드 편집기로만 사용할 것이기 떄문에 아마 닷넷 코어는 설치하지 않아도 될 것이다

신경쓰이는 중붕이는 그냥 설치해도 된다

닷넷 코어를 설치했다면 유니티 엔진과 vscode를 모두 종료한 뒤 재실행 해야 적용된 것을 확인할 수 있을 것이다

2.예제 코드 설명

가장 설명하기 애매한 부분이 코드 설명이 아닌가 싶다

기초부터 설명하기엔 너무 오래 걸리는데 기초를 모르면 이해하기가 힘들다

고민끝에 해당 코드가 어떤 역할을 하고 어떤 일을 하는지에 대해서만 설명하기로 했다

만약 유니티의 c#에 대해 배워보고 싶은 중붕이들은 우선 아래의 사이트에서 파트4.Script 편 부터 시청해 보자

https://programmers.co.kr/learn/courses/1

일단 연재에서 모두 알려주지 못하는 점은 미안하게 생각한다

기초부터 설명하기엔 분량이 너무 많아지고, 게임을 만든다는 취지에서 벗어나 그냥 코딩 강의가 되어버리기 때문에 어쩔수 없이 내린 선택이니 이해해 주길 바란다

그리고 위 사이트는 정확히는 유니티에서 사용하는 c#에 대해 알려주는 내용이기 때문에 제대로 배우고 싶다면 그냥 책 몇권 빌리거나 사거나 해서 보면 된다

책 고르는 꿀팁을 주자면

유명 대학의 모 교수가 번역한 책, 표지에 조류나 어류 등등의 동물이 그려진 책, 대문짝 만하게 사람 얼굴이 박힌 책, 표지가 촌스럽거나 오래되어 보이는 책 등등을 고르면 된다

사실 그냥 취향이니까 보고싶은걸로 고르자

해당 코드가 어떤 역할을 하는지에 대해 주석을 달아 봤다

크게 설명할만한 부분이 없는 짧은 코드라 중요한 부분만 알아보도록 하자

57번 줄을 보자

유니티는 회전을 쿼터니온, 즉 사원수로 표현하는데

이를 편하게 사용할 수 있도록 쿼터니온을 오일러 각으로 표현할 수 있게 만들어 놨다

즉 우리가 잘 아는 3차원 벡터(x,y,z)를 축으로 각도법을 사용해 회전을 표현할 수 있는 것이다

유니티 2d는 위와 같은 좌표계로 되어 있다

어딘가 쓸 일이 있긴 하겠지만 웬만하면 2d에서 x축과 y축을 기준으로 회전하는 일은 없고, z축을 기준으로 회전 시킨다

z축만 더하지 않고 굳이 새로운 3차원 벡터를 만들어 더하는 이유는 c#과 관련이 있기 때문에 굳이 알 필요까지는 없다

그냥 통째로 수정해야만 수정 된다는 것만 알아 두자

주석을 제외한 마지막 코드 3줄을 보면 항상 맨 뒤에 Time.deltaTime 을 곱하는것이 보일텐데

델타 타임은 이전 프레임이 실행된 시간을 뜻한다

만약 초당 60프레임으로 진행되는 게임이 있다고 치자

그렇다면 델타 타임은 대충 1 / 60 = 0.01666... 이 되는 것이다

정확하진 않지만 이정도로만 알고있어도 지장은 없다

델타 타임을 곱하는 이유는

프레임에 상관 없이 항상 같은 정도로 값을 변경하기 위해서이다

예를들어 두가지 게임이 있다고 해보자

첫번째 게임은 캐릭터의 이동속도가 1이다

60프레임으로 게임이 진행된다면 캐릭터는 초당 (1 * 60 = 60) 의 거리를 움직인다

두번째 게임은 캐릭터의 이동속도가 10 * 델타 타임이다

60프레임으로 진행 된다면 캐릭터는 10 * (1/60) * 60 = 10

즉 초당 10의 거리를 이동한다

근데 만약 사용자의 컴퓨터가 좋지 못해 게임이 30프레임으로 진행된다고 해보자

첫번째 게임은 1프레임당 1을 움직임으로

초당 30의 거리를 이동한다

두번째 게임은 1프레임당 10 * 델타 타임만큼 움직인다

초당 30프레임일 때 델타 타임은 1 / 30 = 0.0333...

캐릭터는 초당 (10 * 0.333... * 30 = 10) 만큼 움직이게 된다

첫번째 게임의 경우 fps가 떨어짐에 따라 게임이 느려졌지만

두번째 게임은 델타 타임을 곱해주어 fps가 높던 낮던 항상 똑같은 속도로 움직이게 되는 것이다

3.스프라이트 랜더러 옵션 설명

옵션에 대해 설명만 진행할 것이기 때문에 실제 확인은 직접 해보자

위에서 부터 차례로 알아보자

Sprite : 표시할 스프라이트 파일을 정하는 옵션. 드래그 앤 드롭 하거나 오른쪽 동그라미를 클릭하여 선택할 수 있음

Color : 스프라이트의 색상을 결정하는 옵션

Flip : x축, y축으로 반전 시킬 수 있는 옵션

Material : 스프라이트를 표시할 때 사용할 마테리얼 정보

DrawMode : 그리기 모드 옵션. 특정 부분을 잘라 표시하거나 타일처럼 n * m 형태로 표시 할 수 있음

SortingLayer : 스프라이트의 소팅 레이어 설정 옵션. 그려지는 순서를 결정한다

OrderInLayer : 같은 소팅 레이어 내에서 그려질 순서를 정하는 옵션. 높을수록 앞에, 낮을수록 뒤에 그려진다. 만약 소팅 레이어와 오더 인 레이어가 같을 경우 z 좌표에 따라 순서가 결정되며 모두 같을 경우 가장 최근에 만들어진 오브젝트가 가장 앞에 표시된다

MaskInteraction : 마스크를 사용할지 결정하는 옵션

마테리얼과 마스크는 본편에서도 아마 쓸 일이 없지 않을까 싶다

만약 생긴다면 그 때 본편에서 다시 설명하도록 하겠음

4. 스프라이트 파일 옵션 설명

파일 옵션은 주로 사용하는 옵션을 제외하면 어지간해선 건드릴 일이 없을것이다

하지만 알아두면 좋으므로 하나씩 살펴보자

TextureType : 해당 파일의 타입을 결정하는 옵션. 여러가지 있지만 본 연재에선 Sprite 이외엔 사용하지 않을 것이다

TextureShape : 텍스쳐의 모양을 결정하는 옵션. 텍스쳐 타입을 디폴트나 노말맵으로 바꾼 뒤 확인해 보자. cube 타입을 볼수 있을 것이다. 이 옵션 역시 사용할 일은 없다

SpriteMode : 스프라이트의 유형을 결정하는 옵션. 싱글은 말 그대로 그냥 통짜로 한장만 사용하는 경우이고, 멀티는 한 스프라이트를 여러장으로 쪼개 사용하는 옵션이다. 폴리곤 옵션은 역시 사용할 일이 없다

   PackingTag : 스프라이트 패킹 이라는 기능을 사용할 때 쓰는 옵션으로 같은 태그를 가진 스프라이트들을 모아 한장의 스프라이트 시트로 만들 수 있다

   PixelPerUnit : 통칭 ppu. 좌표계에서 거리 1당 몇 픽셀을 넣을 수 있는지에 대한 옵션이다. 예를들어 위 사진의 ppu는 100이다. 즉 좌표계 0 ~ 1 사이에 100픽셀이 표시되는 크기로 스프라이트가 그려지는 것이다

   MeshType : 스프라이트가 표시될 메쉬의 유형을 결정하는 옵션. 주로 최적화 할 때 사용하므로 아직은 거드릴 일이 없을 것이다

   ExtrudeEdges : 솔직히 나도 이거 뭔지 모르겠음. 아는사람은 댓글로 알려주길 바람

   Pivot : 스프라이트의 중심점을 설정하는 옵션. 스프라이트 모드가 멀티일 경우엔 스프라이트 에디터에서 설정해 줄 수 있다

SpriteEditor : 스프라이트가 표시될 영역, 중심점 등등을 설정할 수 있는 에디터. 스프라이트 모드가 멀티일 경우 이곳에서 스프라이트를 잘라 사용하게 된다

Advanced : 최적화와 품질에 관련된 옵션들이 모여있다. 지금은 쓸 일이 없으니 넘어가도록 하겠음

WrapMode : 스프라이트의 반복 여부등을 결정하는 옵션. 이것도 아마 쓸 일이 없을 것이다

FilterMode : 스프라이트의 필터링 모드를 결정하는 옵션. 현재 설정되어 있는 Point 모드는 아무런 필터링 없이 그대로 표시하는 옵션이고, 그 외에 Bilinear나 Trilinear는 각각 이중, 삼중 선형 필터링으로 대충 스프라이트에 안티엘리어싱을 먹이는 옵션이라고 생각하면 된다

AnsioLevel : 비등방성 필터링의 레벨을 결정하는 옵션. 높을수록 선명하지만 그만큼 부하를 주게 된다. 쓸 일 없을거임

밑의 박스는 압축 세팅으로 pc, 안드로이드, ios 를 각각 따로 설정해 줄 수 있다.

본 연재에서는 디폴트 옵션만 살펴보도록 하겠다

MaxSize : 스프라이트의 최대 크기를 설정하는 옵션. 설정된 옵션보다 스프라이트의 크기가 크다면 설정된 최대 크기로 압축된다

ResizeAlgorithm : 크기를 줄일 때 사용할 알고리즘을 정하는 옵션

Compression : 압축 여부를 결정하는 옵션. 스프라이트를 압축할 경우 용량이 줄어들지만 퀄리티가 떨어지게 된다

Format : 압축 포맷을 결정하는 옵션. 디폴트에선 설정할 수 없게 되어 있지만 플랫폼을 결정할 경우 다양한 압축 옵션을 사용할 수 있게 해준다. 압축하게 되면 사용하는 메모리나 용량이 크게 줄어드므로 최적화에 큰 도움이 된다

이번 심화편에선 vscode의 설치법과 예제 코드의 설명, 스프라이트 랜더러, 파일의 옵션에 대해 알아 보았다

심화편은 이런식으로 분량이 일정량 이상 모였을 때 작성 하는것으로 하겠다.

그리고 웬만해선 심화편은 설명만으로 이루어질 것이기 때문에 안그래도 본편도 재미없는데 본편보다 10배는 재미없을 것이다

그렇기 때문에 괜히 봤다가 흥미만 잃는것이 아닌가 하는 생각이 들기도 해 조금 불안하지만 어찌 됐든 설명은 필요한 것이므로 앞으로도 작성하도록 하겠다

본편 예고 : 내일 나옴