The cloud that looks touched but isn't stepped on
Oct 25, 2026 Β· Art and sound Β· νκ΅μ΄
Cloud Hop's clouds have a flat top and a bumpy underside. When the chick lands on one, it bounces. If the top edge of the art and the top edge of the hitbox disagree, trouble starts. The chick's feet appear to rest on the cloud but it isn't stepped on, or the chick is floating above the cloud and still lands.
The game's hit detection is computed by JavaScript as numbers, while the art is an image file (an atlas that packs many pictures into one) drawn onto the canvas. The tool below is a script written in Swift. Swift is Apple's programming language, and once the developer tools are installed on a Mac you can run a file with swift file.swift. Reading images uses what already comes with macOS.
The two know nothing about each other. When the art changes, the position of the top edge moves, but the hitbox numbers stay the same, so they drift apart. I had to match the top edge again when I replaced the cloud shapes drawn in code with generated art. The rule for these games is that the hitbox and the art must be the same.
Instead of deciding where the top of the art is by eye, I made a tool that measures it. For each pixel column it finds the height of the topmost opaque pixel (alpha above 128). Over the middle 60% and 80% of the width it reports the median, highest and lowest top edge.
swift tools/games/cloudhop/measure.swift cloud.pngBecause it only looks at the middle section, the position of the flat top comes out stable.
It had already gone wrong once, on the storm cloud
I had run into this mismatch in Cloud Hop before. The storm cloud's hitbox ignored its bobbing height and only used a small box around the body. It didn't match the art, so touching the lightning was harmless and so was touching the edge of the body. I fixed it by using the bobbing height in the hitbox as well, fitting the body to the art's edge and adding the lightning to the hitbox. Later, when I replaced the shapes with generated art, the storm cloud's size changed, so I matched the vertical ranges of the body and the lightning again (body from +13 to +19, lightning from +12~+36 to +16~+42).
The top of the cloud art turned out to sit 3.5 down from the top of the cell (7px in the art file, which is at 2x). The art is drawn at 1.1 times the cell size, and to line up the hitbox's top edge (the cloud's y) with the art's top edge, the art is drawn shifted up by that amount.
const CLOUD_TOP = 3.5 * CS; // distance from the cell top to the top edge of the artI matched the horizontal side too. So that the chick's feet stay above the cloud's edge even at the end of the landing range (Β±40px from the cloud's center), I set the art to 1.1 times the cell size (about 75px).
References
- Wikipedia, Hitbox: https://en.wikipedia.org/wiki/Hitbox
Games from this post
Cloud HopBounce from cloud to cloud and climb as high as you can. Gray clouds fall apart, and storm clouds must be stomped from above!
Play
More posts
- I deployed, and the old page kept showing for an hour Oct 25, 2026
- Why there is always a cloud within reach in Cloud Hop Oct 25, 2026
- Why the crumbling clouds never sit on the path Oct 25, 2026
- I removed the background and a pink edge was left Oct 25, 2026
- Three tries in one day to decide what not to deploy Oct 25, 2026