▶ 게임 개발부터 출시까지, 팁 공유 1부 바로가기

안녕, 죽지 않고 돌아왔어

변명을 하자면 매일 1개씩 올리려는 포부가 있었지만...

짠~ 우리 게임의 데모가 공개되었어~!!

데모하러 텀블벅 페이지가기

데모 개발하느라 늦었으니 조금만 이해해줘ㅎㅎ

그리고 그 외에도, 그래픽 쪽은 입문난이도도 있는 전문적인 분야라서

어떤 글을 쓸 수 있을까 고민도 좀 해봤어.

지난번 기획을 썼을 때, 생각해보니 스킬적인 내용을 기대하고 들어왔을 수도 있겠더라고.

그래서 팁이라는 글의 정체성은 유지하되!

스킬적인 내용을 우리 팀원에게 물어보고,

내가 이해할 수 있을 정도의 간단한 내용만 적어볼게

그럼 오늘도 가즈아ㅏ

( 여담이지만, 드디어 HTML로 이미지 크기 변경법이 있음을 깨우침 )

그래픽

1. 그래픽이 어디까지야?

처음 시작하는 인디게임 개발자들이 가장 헷갈려하는 부분이야.

그래픽 리소스를 그리는건 당연히 그래픽의 일이겠지만,

애니메이션은? Unity 애니메이터 만드는 건? 파티클은??

이게 개발인지, 그래픽인지 헷갈리지.

사실 당연해. 엄밀히 따지면

애니메이션 관련은 애니메이터.

파티클, 쉐이더는 TA의 일이야.

즉, 그래픽의 일도, 플머의 일도 아닌거지.

그럼, 그래픽이랑 플머만 있는 우리는 어떡하냐고?

결국, 그래픽을 그릴 수 있는 플머가 하거나

그림을 그리던 그래픽이 언어를 배우거나

둘 중 하나이지.

둘중 한명은 업무량이 늘어나는 Magic

결과물은 그래픽이 언어를 배워서 TA로 진화하는게 더 예쁘게 나와.

그래서 우리 같은 경우에는 그림러에서 컴공을 졸업하신 분이 TA와 그래픽 팀장 업무를 잡아주고 있어

그림실력이 출중한 능력자가 컴공과를 졸업한 케이스지

물론, 만나기 힘들어. 나의 모든 인간복은 우리 팀원들 만나는 데에 썼다고 생각해

다시한번 강조하자면, 업무를 초반에 완벽히 구분해야지

내가 하고 있는 일을 그래픽도 하고 있는 불상사를 막을 수 있어.

이건 반드시 정하고 가는 것이 좋아.

초반에 이거 제대로 안해서 나도 파티클을 만들고

우리 그래픽도 파티클을 만들고 있었어

반대로 쉐이더는 그 누구도 만들고 있지 않았지....

2. 그래픽 툴 어떤거 써?

우리는 게임 그래픽 스타일에 따라서 툴을 굉장히 다양하게 써.

픽셀이 아닌 그래픽은 Procreate를 쓰고, 이번 픽셀그래픽은 Aseprite를 쓰고 있어

포토샵을 쓰지 않는 이유는

1. 툴이 너무 복잡

2. 이동하면서 그릴 수가 없어

3. 비싸

이 세가지가 핵심적인 이유야

먼저, 툴이 너무 복잡하면

툴 다루는 실력이 없는 신입 팀원이 들어왔을 때,

가르치기가 힘들고

같은 브러쉬라도 설정에 따라 천차만별로 나오기 때문에

협업도 힘들어져

그리고 이동하면서 그릴 수 없는건

일반적인 사람들에게는 해당되지 않는 고려사항이겠지만

우리 같은 경우에는 그래픽 팀장인 아리스가

집에서도, 차안에서도, 본가에 가서도, 카페에 가도

24시간 중 거의 16시간을 작업해주고 있어

그런 와중에 포토샵을 쓰면

아이패드에서는 작업이 힘들기도 하고

장소가 바뀔 때마다 파일 다운받고, 작업하고, NAS에 올리고,

이걸 반복해야하는 거지

이미지 파일 업데이트를 위한 무의미한 반복 루틴..

마지막으로 알다싶이 포토샵은 월정액이야.

Procreate는 영구 라이센스이지.

우리가 이걸로 아낀 금액만 해도 100만원은 될거야.

우리는 게임을 적어도 3달은 잡고 있을 거야.

그러면 이런 라이센스 비용도 절대 무시할 수 없지.

Procreate는 아이패드가 필요하다는 큰 단점이 있지만,

이걸 써본 그래픽 팀원들은 전부 Procreate의 편의성에 감탄하는거 보면

비싼 타블렛 구매비 + 포토샵 라이센스 + 작업효율을 따지면 Procreate가 낫다고 생각해

3. 그림의 깔(톤)을 맞춰보자

그림의 전체적인 깔을 맞추는 작업은 정말 중요해

깔이 맞지 않으면, 하나하나는 정말 잘 만든걸로 보이지만,

모아놓고 보면 묘하게 UI가 배경과 따로노는 느낌을 줄 수 있어

혹은 배경 위에 캐릭터만 둥둥 떠있는 느낌이 들수도 있지

반대로 어떤 오브젝트를 강조하고 싶을 때는, 일부러 깔을 다르게 쓰기도 해

우리가 흔히 무언가를 강조할 때 Outline을 쓰는데,

대부분의 Outline이 원색계열인 이유도

게임내 오브젝트와 깔이 확연히 다르기 때문이야

테라리아에서 아웃라인을 먹인 마우스 커서는 눈에 잘보이지

반대로 어떤 게임에서는 원색 Outline을 써도 별로 강조가 되지 않아

이유는 배경 이미지의 채도와 명도가 원색에 가깝기 때문이야.

우리가 어떤 색을 같은 톤으로 인식하는 이유는 1. 채도, 2. 명도야

흔히들 색상 값이 다르면 다른 톤으로 보일거라고 착각하고는 해

색상 값은 이게 파랑이냐, 초록이냐 등을 결정할 뿐이야

먼저 채도(색의 짙기)가 다르면 사람들은 다른 "톤"으로 인식해

아래는 같은 명도의 다른 채도야

여기서 채도가 더더 빠질수록 무채색에 가까워지고

게임의 분위기가 전반적으로 어떤지 영향을 줘

그리고 명도(색의 어둡기)가 달라도 다른 "톤"으로 인식해

그 가장 좋은 예시가 바로 파스텔 톤이야.

파스텔톤의 채도는 사실 원색과 크게 다르지 않아

파스텔톤은 원색에서 명도를 낮추면 만들 수 있어

원색에서 명도가 옅어지면 채도도 함께 빠지게 되고,

사람들은 그 색을 파스텔 톤으로 인식하고

포근한 색, 부드러운 색으로 생각하지

< 내가 이해가 부족해서 잘못쓴 부분이 있어서 수정해 >

그림자를 표현할 때는, 명도와 색상을 통해 표현해

1차적으로 명도를 낮추고, 근처의 유사한 색으로 색상값을 약간 바꿔줘

그리고 채도를 약간 낮춰주면 조금 더 예쁜 그림자를 표현할 수 있어

물론 절대적인 건 아니고, 상황에 따라서 예외는 있기 때문에

정 모르겠을 때 참고하는 걸 추천해

즉 색상 값 보다는

전반적인 채도와 명도로 게임의 분위기는

귀여워 질수도, 어두워 질수 있어

그래서 여러명의 그래픽 작업자가 있다면,

주로 사용할 톤(채도, 명도)의 범위를 정하고 가는 것이 좋아

이건 우리 색상규칙 중 일부야

이런식으로 예시와 함께 초장에 정하고 가지

4. Spine2D를 써야할 때와 Sprite Animation을 써야할 때

애니메이션에는 크게 Spine을 이용한 애니메이션과 Sprite 애니메이션이 있어.

Spine은 Vector와 연산을 통한 부드러운 애니메이션을,

Sprite는 우리가 흔히 하는 컷 방식 애니메이션이지.

대부분 사람들이 부드러운 애니메이션은 무조건 Spine이 좋은 거라고 생각하고는 해.

그러나, 이건 서로 다른 거지 뭐가 더 좋은건 없어.

필요에 따라서 둘을 섞어 쓰기도 하지.

먼저 Spine은

하나의 애니메이션을 만들기까지 공수가 많이 들어가.

1. 원본 이미지를 만들고

2. 이미지의 Mesh를 나누고

3. 본을 심고

4. Weight를 설정하고

5. 다듬기

이건 가장 기본 절차야. 이걸 다 마쳐야지만 이제 만들 "준비"가 된거야.

이 시간에 Sprite 애니메이션을 만들었으면 아마 다 만들었을 수도 있지.

생각보다 사람들은 게임에서 애니메이션이 "얼마나 부드러운가"를 중요하게 생각하지 않아.

따라서 짧은 애니메이션은 Sprite 방식이 작업속도가 빠르기 때문에,

Spine으로 만들 이유가 없다면 그냥 Sprite로 만드는게 훨씬 낫다는 거지

그렇다면 Spine으로 만들 이유라는 건 뭘까?

다른 전문가들은 의견이 어떨지 모르겠지만, 나는 이렇게 생각해

1. 애니메이션을 변형한 반복 사용이 있다.

2. 애니메이션의 각도(측면, 정측면 등)가 많이 변하지 않는다.

3. 어떤 값에 따라 능동적 변화가 필요하다(ex. IK 등)

먼저, 주인공의 스킨이 디폴트, 개구리, 오리가 있다고 가정하자.

이걸 Sprite 애니메이션으로 만든다면 각각 애니메이션을 그려줘야할거야.

주인공의 애니메이션이 Idle, Walk가 있고 각 4장이라면

디폴트 주인공(8장), 개구리 모습의 주인공(8장), 오리 모습의 주인공(8장),

Sprite 애니메이션에서 그려야할 그림은 총 24장이지.

오픈소스도, 대충빨리도 불가능한 그래픽.. 이런 그래픽 특성상

그림 1장이 더 추가된다는 의미는 크지

Spine이라면 주인공으로 애니메이션을 하나 만들었으면

각 스킨은 그냥 정적 이미지 1장만 그려주면 돼.

Spine 애니메이션에서 그려야할 그림은 총 3장인거지

몬스터가 지역별 모습이 있는 경우에

Spine이 유리한 경우가 많아

But! Spine은

각도가 자주 변하는 애니메이션이 들어가면 맹점이 드러나

작업 시간이 더 늘어나지.

각 키프레임마다 직접 파츠를 하나하나 바꿔줘야해

지루하기 짝이 없는 단순 노가다 현장이 되지

키프레임 찍고... 파츠 바꾸고... 키프레임 찍고... xx...

However! IK 같은 능동적 변화가 필요할 때는 무조건 Spine이야

주인공이 울퉁불퉁한 길에서 딱 길에 발을 붙히고 걷는 동작같은 것 말이야.

이런 경우에 일반적인 Sprite 애니메이션은 그냥 불가능해

그저, 그럴듯하게 그릴 뿐이지

이렇게 사용해야하는 경우가 다르니,

잘 생각해보고 결정하면 좋을 거야.

5. Atlas는 그냥 모아둔다고 끝이 아니다.

Atlas에 대한 이해도가 부족한 그래픽이 많이하는 실수야

그냥 마구잡이로 모아만 둔거지

약간의 개발 이야기를 하자면,

Atlas의 핵심 목표는 Batch를 줄여서 최적화를 하는거야

그런데 많이들 전혀 무관한 오브젝트들을 함께 Altas해두고는 해

이건 Atlas에 대한 이해도가 없다는 뜻이야.

왜 하는지 모르고 그냥 한다는 거지

Atlas를 하게 되면 거기에 있는 오브젝트 중 하나만 가져오더라도

Atlas 이미지를 통으로 불러오게 돼

즉, 무관한 것들끼리 묶어두면, 필요없는 이미지까지 포함되서

불필요하게 큰 이미지를 불러오는 거지

반대로 상관있는 것들끼리 묶어두면

10 Batch였던 걸 1 Batch로 Batch 를 10%로 줄일 수 있어!

그러니 Atlas를 할 때는 서로 상관있는, 대부분 함께 불러와지는 것들 끼리 묶어두는게 좋아

그래서 Sprite Animation을 만들더라도 빈 공간이 있다고 해도 Idle이랑 Walk랑 마구잡이로 묶지 않는거야

이건 참고하라고 공유하는 우리 게임의 주인공 Idle Atlas야

나중에 몸집이 다른 캐릭터 + 의도대로 크기설정을 하기 위해서 여백을 두었지

그외 팁들.

1. Preview로 공유하지 않으면, 차이를 알지 못한다

사람은 그림이 모아져 있지 않으면, 기존 그림체와 어울리는지 아닌지를 알지 못해

그래서 그림 한장씩 보지 말고 다른 모든 것들과 모아서 보는게 좋아.

단순히 같은 오브젝트의 시안 1, 2를 비교하는 것 뿐만 아니라,

새로운 캐릭터를 만들 때, 캐릭터가 게임의 느낌과 어울리는지 볼때

캐릭터만 놓고 보지 말고, 다른 캐릭터들과 배경까지 싹 다 깔아두고

그 위에 새로운 캐릭터를 놓고 봐야해

2. Atlas 손으로 할 필요 없다

포토샵에서는 스크립트라는 기능을 지원해

그걸 사용하면 Altas는 몇번의 클릭만으로 가능하니까

손으로 하지말고 스크립트를 활용해봐!

구글에 "포토샵 아틀라스 스크립트" 이런식으로 검색하면 자료가 꽤 나올거야

3. 이미지는 4배수로 만들자

Unity는 이미지 크기가 4배수로 만들어져 있을 때, 성능이 가장 좋아

여백을 두더라도 4배수(16, 32, 64, 128 ...) 로 이미지를 만드는게 좋아

4배수가 아니면 Unity 내에서 후처리가 들어가기 때문에

우리가 생각한 배율로 안나오고 지 멋대로 크기가 정해져버려.

이 외에 Pixel Perfect, GUI 하이어라키 설정 방법, Unity 내 Color를 활용하기 위한 이미지 설정 등등

알려주고 싶은게 너무 많은데, 디시 글 에디터가 너무 불편해서 쉽지 않네

이후 글들은 하루에 하나가 아니라 이렇게 며칠 텀을 둘거 같아.

그러는 편이 글의 퀄리티가 올라가서

개발을 시작한 사람들에게 더 도움이 될 것 같아.

내가 게임을 홍보하고 싶어서 글을 올리는 이유도 물론 크지만,

정말 초보 개발자들에게 유용한 팁이 되었으면 해!

다음 4부는 개발로 돌아올게~! 내가 개발자 출신이라 할 말이 많아서 글을 정리하는데 시간이 더 걸릴 수도 있어ㅋㅋ

글이 도움이 되었거나, 재미가 있었다면..

이건 우리 팀원들이 열심히 만든 게임이야

지금 텀블벅에 공개되었으니, 관심과 입소문 부탁해~!!

참고로 데모도 공개되어 있어ㅎㅎ

https://link.tumblbug.com/qFAx4QrrADb

눈떠보니 내가 마물?! 슈팅 로그라이크 [픽셀건마스터]

나만의 총기를 조합하여, 몰아치는 적들을 물리치고 던전의 비밀을 파헤치자! [픽셀건마스터]

link.tumblbug.com