닿은 것처럼 보이는데 안 밟히는 구름

2026년 10월 25일 · 그림·소리 · English

구름 점프의 구름은 윗면이 평평하고 아래가 몽글몽글한 모양이다. 병아리가 구름 위에 내려앉으면 튀어 오른다. 이때 그림의 윗면과 판정의 윗면이 어긋나 있으면 문제가 생긴다. 병아리의 발이 구름 위에 닿은 것처럼 보이는데 밟히지 않거나, 구름 위로 떠 있는데 밟혀 버린다.

게임 판정은 자바스크립트가 숫자로 계산하고, 그림은 이미지 파일(여러 그림을 한 장에 모은 아틀라스)을 캔버스에 그린다. 아래에 나오는 도구는 Swift 로 짠 스크립트다. Swift 는 애플의 프로그래밍 언어이고, 맥에 개발 도구를 설치하면 swift 파일.swift 로 바로 실행할 수 있다. 이미지를 읽는 기능은 맥에 들어 있는 것을 쓴다.

이 둘은 서로 모른다. 그림을 새로 바꾸면 윗면의 위치가 달라지는데, 판정 숫자는 그대로라서 어긋난다. 도형으로 그리던 구름을 생성한 그림으로 바꾸면서 윗면을 새로 맞춰야 했다. 이 게임들의 원칙은 판정과 그림이 같아야 한다는 것이다.

그림의 윗면이 어디인지 눈으로 보고 정하는 대신 재는 도구를 만들었다. 세로줄마다 맨 위의 불투명한 픽셀(투명도 128 초과)의 높이를 구한다. 그림의 가운데 폭 60%와 80% 구간에서 윗면의 중앙값, 가장 높은 곳, 가장 낮은 곳을 알려 준다.

swift tools/games/cloudhop/measure.swift cloud.png

가운데 구간만 보기 때문에 평평한 윗면의 위치가 안정적으로 나온다.

처음에는 천둥구름에서 어긋났다

이 어긋남은 구름 점프에서 한 번 실제로 겪었다. 천둥구름의 판정은 출렁이는 높이를 빼고 몸통 둘레의 작은 상자만 보고 있었다. 그림과 맞지 않아서 번개에 닿아도 무사하고, 몸통 가장자리 그림에 닿아도 무사했다. 출렁임을 판정에도 함께 쓰고 몸통은 그림의 경계에, 번개도 판정에 넣어서 고쳤다. 그 뒤 도형을 생성한 그림으로 바꾸면서 천둥구름 그림의 크기가 달라져, 몸통과 번개의 세로 범위도 다시 맞췄다(몸통 +13 에서 +19, 번개 +12~+36 에서 +16~+42).

구름 그림의 윗면은 칸의 위에서 3.5 만큼 내려온 곳이었다(그림 파일에서는 2배 크기라 7px). 그림은 칸 크기의 1.1배로 그리는데, 판정의 윗면(구름의 y)과 그림의 윗면을 맞추기 위해 그림을 그 값만큼 위로 올려서 그린다.

const CLOUD_TOP = 3.5 * CS; // distance from the cell top to the top edge of the art

가로도 맞췄다. 착지할 수 있는 가로 범위(구름 중심에서 ±40px)의 끝에서도 병아리의 발이 구름 가장자리 위에 있도록, 그림을 칸 크기의 1.1배(약 75px)로 정했다.

참고한 문서

• Wikipedia, Hitbox: https://en.wikipedia.org/wiki/Hitbox

이 글과 관련된 게임

구름 점프구름을 밟고 통통 튀어 하늘 높이 올라가세요. 회색 구름은 밟으면 흩어지고, 천둥구름은 위에서 밟아야 해요! 해 보기