Games / Roadster Sky Rush / How it was made
How Roadster Sky Rush was made
A flying car, four city highways, a police pack and a soundtrack that is made up as you play: how the game was built in Blender and three.js, why the launch is a skill and not a button, and what keeps it smooth on a phone.
A car that leaves the road
After two games with all four wheels on the ground, I wanted one where the car takes off. Roadster Sky Rush is a highway runner with a twist: the road is only where you refuel. You build speed on a run-up, launch off a ramp, and fly over the traffic in two bands, low over the cars or high over the trucks and buses. When the Fly Meter runs dry you glide back down, grab cyan fly coins on the road, and the car lifts off again by itself.
That loop decides everything else. Gantries, overpasses and bridge beams cross the high band, so you have to drop low at the right moment. The oncoming lanes pay double but a head-on crash costs half your health. Truck roofs are runways. Each of the four highways is faster than the one before, and the meter lasts a little less on each, so the last one, Storm Freeway, is mostly played on the road where the police can reach you.
Why the launch is a skill
The part I tuned longest is the first fifteen seconds. Every level starts 120 metres before the ramp with a 3-2-1 countdown. Holding the throttle builds THRUST, and it has to read 100 percent by the time you reach the crest. Full throttle from GO only just makes it, so a late start needs the one nitrous charge, and a crest reading of 115 percent or more is a perfect launch that sends the car higher and pays a bonus. Fall short and the car drops off the lip and you try again from the run-up. I wanted the launch to feel earned every time, not played by a cutscene.
Built in Blender by scripts
The hero car began as a free concept car model by other artists, released under a Creative Commons licence. I rebuilt its rear in Blender with two thrusters, an LED tail bar and a carbon diffuser, gave it a pearl white paint and removed every logo, so the car has no maker's name and copies no real brand. The guide's credits name the original authors.
Everything else is generated by Blender scripts rather than modelled by hand: the skyscrapers with their lit windows, the seven kinds of traffic (taxis, sedans, SUVs, police cars, buses, box trucks and semis), the road pieces, the sign gantries and overpasses, the suspension bridge of Harbor Bridge with its towers and cables, and the roadworks of Storm Freeway, where a traffic cone model under a Creative Commons licence sits between the barriers. A script rebuilds the whole set from scratch, which is how a change to one lamp post reaches every level.
The models are then compressed for the web: geometry with meshoptimizer and textures in the KTX2 format, which the graphics chip reads directly instead of unpacking a large image. The skies are high dynamic range panoramas from Poly Haven, one per level, and they also light the scene: the sunset of Downtown Dusk, the night of Neon Night, the sunrise of Harbor Bridge and the overcast of Storm Freeway all come from those photographs.
Drawing it in a browser tab
The game runs on three.js, a free 3D library, with no plugin and nothing to install. On top of the plain render sit a bloom for the lights, a tone map, a colour grade per level, a vignette and anti-aliasing, and on the High preset ambient occlusion, light shafts and wet road reflections. The game picks a preset for your device when it starts and lowers its resolution when a scene gets heavy, so a mid-range phone keeps a steady frame rate while a laptop gets the full picture.
One trick worth mentioning: before the first frame, the game compiles every shader against the same buffer it will later draw into. Compiling against the wrong target used to stall the first second of play by thirteen seconds on a slow laptop, which is the sort of thing you only find by profiling.
Sound that is made while you play
There are no recorded sound files in the game. The engine is a synthesiser: an electric motor with a sub bass and a whine, a jet of filtered noise for the thrusters, a turbine wobble and wind that rises with speed. Pickups, near misses, metal hits, the low-health beep, the BUSTED sting, the police sirens and the music loop of each level are all generated in your browser as you play. That keeps the download small and lets every sound follow the game's state: the thrusters answer the throttle, and the sirens rise as a police car closes in.
The cop chase
Storm Freeway got its police pack after players said one police car at a time did not feel like a chase. From about 600 metres, three police cars hunt you: two flank the car beside its rear bumper, where the chase camera pulls back so you can see their light bars, and one waits behind in your lane and charges. About two seconds before contact the COPS BEHIND warning flashes and the sirens rise; one second before, the charging car commits to its lane. A late lane change dodges it, a ram costs 20 health, and the high band and the rocket are out of their reach. Then the pack regroups and the next charge comes.
Testing by robot
A bot plays the game hundreds of times in a headless browser before every release, from the run-up to the finish gate. It checks that the launch fails at the right thrust, that each damage value is what the guide says, that revives and saving work, and on Storm Freeway that every ram is announced in time and never lands twice. The same bot captured the footage in the game's trailer. If a change breaks a rule, the build stops before it reaches this site.
Ready to fly? Start with How to play Roadster Sky Rush, or see what changed in the update notes.