superengine.games

Superengine Games is a studio building games with an old school soul: modern tools, 16-bit sensibilities. The site is its front door, and the first place the studio’s visual language got worked out properly.

The centrepiece is the logo, rendered in real time and spinning on a CRT.

Highlights

• A two-stage render pipeline. The scene is drawn into a low-resolution buffer, dithered down to an RGB565 palette, then upscaled through a full-resolution CRT shader. That split is the whole trick: a chunky 16-bit signal displayed through a smooth analogue tube, which is the relationship a Mega Drive had with a television.
• A CRT that behaves like one. Barrel distortion, scanlines, an aperture grille, chromatic aberration that grows towards the edges, phosphor bloom, a rolling refresh bar and mains flicker. Curvature is scaled by aspect ratio, because the same bow stretched across a phone reads three and a half times more curved than on a desktop.
• PRESS START. Browsers refuse to autoplay audio without a user gesture, so the boot sequence asks for one. It is the honest solution and it happens to be exactly right for the era.
• A timeline that maintains itself. Development progress is published automatically as work ships, with a build-time stamp showing how long it has been since anything moved. Nothing to update by hand, so it can only fall behind by nothing shipping.
• Nothing third party. The environment map is generated on a canvas at runtime rather than downloading a 1.4MB HDR file, and the fonts are self-hosted. No external requests at all, and 96 on mobile PageSpeed for a page running WebGL with a full post-processing chain.

The bit worth remembering

Almost every real bug in it was invisible by eye and obvious once measured. The logo looked off-centre, but the geometry turned out to be perfectly symmetrical: the silhouette was swinging 93 pixels as it rotated, because a wide lens magnifies the near end of a wide flat object. A longer lens fixed it. A build-time check silently returned the wrong answer for the right reason. Body text would not scroll because two elements were both declared scroll containers.

None of those were visible in a screenshot. All of them were obvious in a number.

Built with

Astro with static output, three.js for the scene and custom GLSL for the quantisation and CRT passes. Deployed to GitHub Pages on a custom domain via GitHub Actions. The games themselves are Godot 4 and GDScript.