개발 이야기

구르고 쌓이면서도 과일답게 만드는 일

충돌 모양, 자동 합성, 세로 화면. 판의 움직임과 조작을 결정하는 세 가지 구현을 소개합니다. 모든 기기나 상황에서 오류가 없다는 뜻은 아닙니다.

Mainu Studio ·

원 하나로는 부족했던 이유

원형 충돌체는 계산이 가볍고 굴러가는 움직임을 예측하기 쉬워 쌓기 게임에 잘 맞습니다. 대신 모든 과일이 비슷하게 느껴집니다. 바나나 전체를 원으로 감싸면 안쪽 빈 공간까지 막혀 다른 과일이 떠 있는 것처럼 보입니다. 원을 작게 하면 끝부분을 통과합니다. 어느 쪽도 플레이어가 보는 그림과 맞지 않았습니다.

그래서 바나나는 휘어진 몸체를 따라 안쪽에 실제로 빈 공간이 남는 충돌 모양을 사용합니다. 포도처럼 불규칙한 실루엣도 같은 원칙을 따릅니다. 눈에 보이는 접촉을 설명할 수 있어야 하지만 모든 픽셀을 따라갈 필요는 없습니다. 지나치게 자세한 윤곽은 작은 모서리를 늘려 다른 물체를 붙잡거나 떨리게 합니다.

플레이 중에는 블루베리가 바나나 안쪽에 자리 잡고, 큰 과일이 바깥 곡면을 타고 넘어가는 차이로 드러납니다. 이를 보이지 않는 원으로 바꾸면 기술 문제는 줄어들어도 게임에서 중요한 선택 하나가 사라집니다.

양 끝 사이 안쪽이 비어 있는 게임의 실제 픽셀 바나나
실제 바나나 이미지입니다. 충돌체도 안쪽 공간을 열어 두어야 합니다.

한 번 닿았을 때 중복으로 합쳐지지 않도록

합성할 과일을 정하면 결과물을 추가하기 전에 원래 과일을 사용 완료로 표시합니다. 같은 과일이 다른 접촉에서도 다시 계산되지 않게 하기 위해서입니다. 점수와 흔들기 보상도 이 합성에 연결해, 애니메이션 때문에 두 번 지급되지 않도록 했습니다.

한 판을 시작할 때의 Banana Game 세로 화면
같은 세로 판을 웹, Android, Windows의 기준으로 삼습니다.

하나의 세로 판, 여러 실행 환경

게임의 기준 화면은 가로 720, 세로 1280입니다. 브라우저, Android 휴대전화, Windows 화면은 사용할 수 있는 영역, 안전 영역, 확대 필터와 입력 방식이 다릅니다. 플랫폼마다 배치를 따로 정하게 두면 웹에서는 맞던 버튼이 휴대전화에서 움직이거나 늘어나는 문제가 생겼습니다.

현재는 기준 배치를 하나로 유지하고 같은 비율로 확대·축소합니다. 남는 공간은 플레이 영역 바깥에 두고 판 자체를 늘리지 않습니다. 터치 영역은 보이는 버튼보다 클 수 있지만 중심은 같은 기준 좌표에 묶습니다. 글자와 미리보기 과일도 같은 배율 기준을 사용해 창이 바뀔 때 따로 어긋나지 않게 합니다.

픽셀 아트에는 추가 제약이 있습니다. 최근접 필터는 정수 배율에서 선명하지만 대부분의 휴대전화는 720×1280의 정확한 배수가 아닙니다. 그래서 먼저 상대적인 크기와 위치를 일치시키고, 논리적인 배치를 바꾸는 대신 에셋 종류에 맞춰 필터를 선택합니다.

맨 위로