pixel art renderer 연구 (1)

 픽셀 아트는 정말 예쁘다. 나는 픽셀 아트 특유의 느낌을 굉장히 좋아한다. 그래서 게임도 픽셀 아트 풍으로 만들고 싶은데, 여기엔 문제가 하나 있다. 픽셀 아트는 정말로 정말로 정말로 손이 많이 가는 작업이라는 점이다.  캐릭터마다 전부 따로따로 애니메이션을 한 프레임씩 만들어줘야 하는 것도 문제고, 다 만든 다음에 수정하기가 힘들다는 것도 문제다. 작업 과정에서 캐릭터 디자인이라거나 컨셉같은게 바뀌는 일은 비일비재한데, 순수 픽셀 아트로만 작업한다면 이런 경우 기존에 작업한 애니메이션을 전부 다 수정해주어야 한다.

 

 작업자 수가 충분히 많다면 이런 문제를 인력을 때려박아 해결할 수 있겠지만 소규모 개발팀에서 그런 선택을 할 수는 없다. 소규모 개발팀은 인력도 부족한데 돈도 없기 때문에 모든걸 최대한 빨리빨리 만들고 빨리빨리 개선을 해야 그나마 분량도 좀 있고 괜찮은 게임을 만들 수 있다.

 

 2D에 비해 상대적으로 3D 파이프라인은 훨씬 더 재활용과 수정이 쉽다. 일단 모델링과 애니메이션이 별개라는 점에서 오는 이득은 상상을 초월한다. 디자인이 바뀌면 디자인 바뀐거 모델링만 바꿔주면 하면 되고, 서로 다른 두 캐릭터가 같은 애니메이션으로 동작한다면 모델만 따로 만들고 애니메이션은 똑같은 거 쓰면 되고.. 배경 등도 이전에 작업한 오브젝트를 활용해서 배치만 바꿔주는 게 가능한 것도 이점이다. 광원 효과 등을 좀 더 폭넓게 쓸 수 있게 되는 것 역시도 이점이고.

 

 그래서 우리의 방향성은 작업은 3D로 하되, 픽셀 아트 느낌이 나게 만들자로 정해졌다. 요즘은 이 비슷한 접근법을 취한 게임들이 상당히 많아서 참고할만한 자료도 많았다.

 

A Short Hike(https://store.steampowered.com/app/1055540/A_Short_Hike/) 같은 게임이 대표적. 이런 느낌의 아트 스타일도 굉장히 좋다는 생각이 들었다.

 

그래서 풀3D로 작업된 씬을 픽셀아트스러운 느낌이 들게 하는 방법을 이것저것 연구해보고 이 과정을 글로 남겨두려고 한다.

 

pixelize

위 씬을 기준으로 테스트하고 있다. 배경은 유니티 에셋 스토어에 공짜로 나와있는 것을 썼고, 캐릭터는 형이 작업한 것. 씬 자체가 로우폴리 느낌이 강하게 나고 오브젝트들이 너무 큼직큼직해서 원본이 그다지 픽셀아트스럽진 않긴 한데 일단은 테스트용으로 간단하게 씬을 구성해서 쓰고 있다.

맨 처음 시도해본 것은 화면을 강제로 어그러뜨려서 도트가 툭툭 튀게 만드는 것이었다. 정확히는 화면을 강제로 256*144 사이즈로 낮춰서 샘플링해 도트처럼 보이게 만든 것. 여기에 캐릭터 외곽선을 덧붙여서 좀 도트 느낌이 살게 하는 걸 시도해봤다.

적용해보면 이런 느낌이 된다.

애니메이션을 포함하면 이렇게 보인다. 이정도로도 일단 꽤 나쁘지 않다는 생각이 들었다. 지저분함 + 눈아픔 콤보가 좀 크긴 하지만 간단한 후처리만으로도 꽤 괜찮은 느낌이 나서.

 

하지만 이렇게 화면을 강제로 저해상도로 낮춰서 샘플링하는 방법은 근본적으로 문제가 있는 것 같다. 일단 어떻게 해도 지저분함을 피하긴 힘들어 보인다.

 

그래서 화면을 위와같이 강제로 저해상도로 낮춰 샘플링을 하지 않고 깔끔하게 + 픽셀아트스럽게 하는 방법을 좀 고민해보았다.

 

index palette

픽셀아트의 특징은 색을 많이 쓰지 않는다는 것이다. 그래서 이런 제한된 팔레트를 이용해 화면을 렌더링하는 방법을 제일 먼저 고려해보았다. 일단 테스트용으로 https://stuartspixelgames.com/2018/07/15/retro-game-colour-palettes-and-tools/ 이 사이트에 있는 팔레트를 가져다 썼다.

 

1. 화면을 렌더링한다

2. 렌더링된 각 픽셀에 대해, 팔레트에서 그 픽셀의 색과 가장 가까운 색을 골라 이 색으로 치환한다.

이게 내가 생각한 가장 기본 아이디어였다.

문제는 팔레트에서 특정 색과 가장 가까운 색을 고르는 과정은 각 픽셀마다 팔레트에 포함된 색 개수만큼의 순회를 요구하기 때문에 연산량이 너무 많다는 것이다. 이걸 줄이기 위해 미리 팔레트에 해당하는 색공간을 텍스쳐(r,g,b 값을 각 축에 대응하는 3D texture)로 만들고 그 텍스쳐를 가져다 쓰는 방법을 이용했다.

3차원 텍스쳐의 각 단면을 잘라서 나열하면 이런 느낌. 이 방식으로 텍스쳐를 만들어서 이런 저런 팔레트를 적용해본 결과는 아래와 같다. 일단 해상도가 너무 높으면 어쩔 수 없이 픽셀 아트 느낌이 덜 나게 되는 것 같아서, 화면 해상도를  적절히 640x480 정도로 정하고 결과를 뽑아봤다.

일단 나쁘지 않다. 팔레트를 뭘로 정하느냐에 따라 느낌 차이가 꽤 나서 전체적인 퀄리티를 높이려면 실제 개발할 때 폴리싱 과정에서 게임에 사용된 색깔에 맞춰 팔레트 손으로 조금씩 조정하면서 다듬어야 할 것 같다.

 

물론 여전히 딱 봐도 눈에 보이는 거슬리는 점들이 좀 있다. 아직 픽셀 아트 느낌이 좀 덜 한 부분도 문제고, 색이 배정되는 방법이나 모양도 별로 안 이쁜 부분이 많다. 이거는 모양은 심플하되 폴리곤이 두드러져 보이지는 않는 모델을 써야 좀 더 괜찮아 보이지 않을까 싶기도 하다.

좀 더 복잡한 씬에도 테스트해봤다. 위에 사진이 팔레트 적용 X, 아래 사진이 팔레트 적용한 것. 해상도 자체가 낮아서 원래 사진도 우둘투둘하다보니 뭔가 티가 많이 안나긴 하는데, 그래도 팔레트 쓰는 쪽이 좀 더 픽셀아트스러운 분위기가 나게 되는 것 같긴 하다. 미묘하긴 하지만.. 약간 화면이 복잡한게 더 괜찮지 않나 싶은 생각이 조금 들긴 함.

 

 

 

 

그리고 어떤 스타일의 모델이 괜찮을까 테스트해보기 위해 에셋 스토어에서 공짜 에셋 이것저것 다운받아서 적용해보았다. 여러 씬에 적용해보니 지금 만들어놓은거에서 어떤걸 고쳐야하는지도 좀 명확해졌고, 모델링을 어떤 방향으로 해야하는지도 살짝 감이 잡히는 것 같다.

 

이제 여기서 차근차근 개선해나가야지