원시인 넷, 색 셋: AvoidNow 캐릭터 색 변형을 마스크 한 장으로 바꾼 이야기
AvoidNow의 원시인 캐릭터 네 명과 알을 모아 여는 파랑·보라 색 변형을 정리했다. 색마다 그림 시트를 따로 두던 방식을 튜닉 마스크와 셰이더로 바꾼 과정과 해금 조건까지.
AvoidNow의 플레이어 캐릭터는 원시인 네 명이다. 능력은 모두 같고 생김새만 다르다. 여기에 알을 모으면 가죽옷 색을 바꿀 수 있는 색 변형이 두 가지 있다. 네 명 × 세 가지 색, 모두 열두 가지 모습이다. 이 글은 캐릭터 구성과, 색 변형을 그림 파일 대신 셰이더로 입히게 된 과정을 적은 것이다. 캐릭터 그림체를 고른 이야기는 여기서 다루지 않는다.
원시인 네 명
| 이름 | 생김새 | 서 있는 키 |
|---|---|---|
| 우가 (배불뚝이 곤봉맨) | 배불뚝이, 일자눈썹, 어깨에 멘 큰 곤봉 | 128px (곤봉 포함) |
| 꼬미 (앞니 빠진 꼬마) | 머리에 뼈, 앞니 빠짐, 흥분한 표정 | 100px |
| 할배 (수염 할아버지) | 발목까지 오는 흰 수염, 지팡이 | 120px |
| 불꽃 (갈기머리 언니) | 거대한 붉은 머리털, 돌 목걸이 | 125px |
키는 160×160px 칸 안에서 잰 값이다. 크기가 제각각이지만 판정은 모두 같다. 피격과 장판 판정은 그림 전체가 아니라 발밑의 반지름 16px 원으로 한다. 꼬미가 작다고 덜 맞지 않고, 우가의 곤봉이 발자국에 걸린다고 맞지도 않는다. 캐릭터는 순전히 취향으로 고르면 된다.
네 명 모두 같은 상태 목록을 쓴다. 서 있기, 걷기(방향별), 대시, 쓰러짐 등이 한 시트에 줄마다 들어 있고, 시트는 960×1440px이다. 지금은 쓰지 않는 이전 아트 세트(v1)에는 원시인이 한 명뿐이었고, 색 변형은 그 한 명을 파랑, 초록, 보라로 칠한 시트 세 장이었다. 9월 26일 결정 인터뷰에서 “서로 다른 캐릭터 4명”으로 정하면서 지금의 넷이 됐다.
확인용 장면에서 찍은 열두 가지 모습. 가죽옷만 색이 바뀌고 피부, 머리카락, 곤봉은 그대로다.
시트 여덟 장이 마스크 네 장으로
색 변형이 처음 게임에 들어갔을 때는 색마다 그림 시트를 통째로 한 장씩 뒀다. 네 명 × 두 색이라 시트가 여덟 장이었고, 합치면 5MB가 넘었다. 웹 게임에서는 첫 로딩에 받는 파일 크기가 곧 기다리는 시간이다.
9월 26일 밤 커밋 a419130에서 이 여덟 장을 빼고 “튜닉 마스크”로 바꿨다. 방법은 이렇다.
- 캐릭터 시트와 크기가 같은 흑백 그림을 한 장 만든다. 가죽옷(튜닉)이 있는 픽셀만 흰색이다.
- 캐릭터를 그릴 때 셰이더가 이 마스크를 같이 읽는다.
- 마스크가 칠해진 픽셀에서만 색을 HSV로 바꿔 색상(Hue)을 새 값으로 갈아 끼운다. 채도와 명도는 원래 값에 비율을 곱한다.
- 마스크 값만큼 원래 색과 섞는다. 가장자리의 반쯤 칠해진 픽셀은 반만 바뀐다.
명도를 원래 그림에서 가져오기 때문에 가죽옷의 표범 무늬, 외곽선, 한 단계 명암이 그대로 남는다. 주황 바탕에 갈색 점이던 옷이 파란 바탕에 남색 점이 된다.
꼬미 시트 일부와 같은 자리의 튜닉 마스크, 그리고 파랑 값으로 색을 바꾼 결과.
셰이더에 넣는 값은 예전 시트에서 재서 정했다. 새 방식이 예전 그림과 다르게 보이면 안 되기 때문이다.
| 색 | 색상(Hue) | 채도 배율 | 명도 배율 |
|---|---|---|---|
| 기본 (주황) | 바꾸지 않음 | 1.0 | 1.0 |
| 파랑 | 0.58 | 0.85 | 0.93 |
| 보라 | 0.813 | 0.70 | 0.93 |
셰이더 주석에는 이 방식으로 약 4.4MB를 줄였다고 적혀 있다. 확인은 눈으로 했다. 네 명 × 세 색을 나란히 그리는 확인용 장면이 코드에 남아 있고, 위의 줄 세운 이미지가 그 장면을 캡처한 것이다.
주의할 점이 하나 있다. 캐릭터 노드에는 캐릭터 시트 말고도 발밑 그림자나 말풍선 같은 도형이 함께 그려진다. 셰이더는 그 도형에도 걸린다. 그래서 지금 그리는 텍스처의 크기가 캐릭터 시트 크기와 같을 때만 색을 바꾸게 했다. 크기가 다른 그림은 그대로 통과한다.
알 30개, 알 100개
색 변형은 누적으로 모은 알 수로 연다. 알 30개면 파랑, 100개면 보라다. 황금알도 한 개로 센다. 알은 발자국 바로 옆에 자주 생기기 때문에, 알을 모으다 보면 자연스럽게 위험한 자리를 지나게 된다. 알과 점수 이야기는 아슬아슬 회피와 콤보에 따로 썼다.
타이틀 화면의 캐릭터 이름 아래에 색 버튼 세 개가 있다. 아직 못 연 색은 버튼이 잠겨 있고 “알 30”, “알 100”처럼 필요한 개수가 쓰여 있다. 판이 끝나고 새 색이 열리면 “새 색상이 해금됐어요! 타이틀에서 골라보세요”가 뜬다. 누적 알 수, 최고 점수, 업적 여덟 개는 모두 기기에 저장된다. 업적에도 “알 50개 모으기”와 “황금알 발견”이 있다.
고른 색은 멀티플레이에도 따라간다. 방에 들어갈 때 캐릭터 번호와 색 번호를 서버에 보내고, 서버는 0~2 범위를 벗어난 값은 기본색으로 바꾼다. 같은 방에서 캐릭터가 겹치면 남는 캐릭터로 바뀌지만, 색은 그대로 유지된다.
정리
그림 여덟 장을 마스크 네 장과 셰이더 하나로 바꾼 뒤로, 색을 하나 더 넣는 비용은 숫자 세 개가 됐다. 지금은 기본색을 포함해 세 가지뿐이다. 원시인 넷 중 누구로 할지는 AvoidNow 게임 페이지의 타이틀 화면에서 고르면 된다.
