Two of the most-looked-at elements in Skyfall — the crosshair that follows your aim, and the row of hearts showing your remaining lives — don't use a single image file between them. Both are drawn on the fly, for the same reason almost everything in the game is: fewer assets to load, and pixel-perfect scaling at any screen size.

The crosshair is four line segments and a circle

Rather than a crosshair sprite, Skyfall draws a ring around your cursor position and four short broken line segments radiating outward — top, bottom, left, right — each one starting a small gap away from the ring rather than touching it. That gap is what keeps the crosshair from reading as a solid plus-sign; broken segments make it look more like a targeting reticle and less like a UI icon. The glow around it comes from setting a shadow color and blur before the stroke, a trick that's essentially free on canvas but would need a separate blurred image layer if this were sprite-based.

The whole thing is skipped entirely, not just hidden, whenever the tracked position moves off-canvas — which is also how touch input gets a "no crosshair" state for free between taps, since lifting a finger sets the same coordinates to an off-screen value.

Why the crosshair color matches the miss-shot red: both use the same red used elsewhere for danger and penalties (life lost, the avoid-dove). It's a small consistency choice — the color that means "this costs you" if you get it wrong is the same color guiding your aim, rather than introducing a second unrelated accent color.

Hearts are rebuilt from scratch every update

The life counter doesn't toggle CSS classes on a fixed set of heart elements — it clears the entire hearts container and rebuilds it from zero on every HUD update, drawing one heart character per life, with "lost" hearts getting a dimmed style class instead of being removed outright. Always showing the full life total, dimmed hearts included, matters more than it sounds: seeing two hearts lit and one dimmed communicates "you had three, you have two" far faster than a counter that would just show the number 2 with no context for what it's out of.

Rebuilding the whole row each time is a deliberately simple approach — no diffing which hearts changed, no animation state to track between updates. For a UI element with at most a handful of icons that updates a few times per round, the simplicity is worth far more than the performance cost, which is unmeasurable at that scale.

More from the blog: read Game feel on a budget: screen shake, feathers, and floating popups for more on how Skyfall communicates feedback without sprite assets, or head back to the Blog index for the rest of our dev notes.