March 18, 2022
During the 2022 Labweek the Lightning team created a 2d retro infinite scroller race game!
The objective was simple, spend 1 week on an idea and try to create a demo of your project. We decided to spend our week to create a 2d top-down retro style race game!
Top down retro infinite scroller race game! Beat our AI or your friends in multiplayer, the goal is to stay on the road. Don't fall behind or it's game over. You can use power-ups such as boosts to get ahead of the competition. Be sure to pick up batteries along the way as your battery powered car will slowly discharge. Once you're out of battery you will start slowing down and eventually drop off the screen. Cant find a boost? The bar below the battery indicator is your boost meter, if its full press OK / Enter for a temporary boost.
Dodge the Vanagon's with canoes on top, as they will slow you down. You also want to avoid the sewers and roadblocks. Can't avoid them? Be sure to pick up a shield so you can temporarily be invincible and cross the objects safely.
Enjoy the beach themed race, wave to our friends in the boats and best of luck in Fracer Steerling!
Video games are high speed variants of our typical UIs. A high speed chase is the best way to stress test the performance of a framework. So what did we run into?
WebAudio is not available in every device.
Sounds complete the gaming experience, unfortunately some of the devices do not support WebAudio and we have to fall back to audioTag. Essentially limiting the sound output to just 1 audio channel. This removes the ability to provide extra sound effects as the player is interacting with the screen/car. The Fracer Steerling game tests for WebAudio availability and falls back to audioTag if WebAudio not available. For the added experience we mixed in the car sound in the main music race track, this still provided a very limited sound experience for those devices with no WebAudio support.
To really complete the experience having WebAudio is key to any video game.
Component creation is not for free
In Fracer Steerling there is a constant spawning of new components, such as road objects (vans, sewers, roadblocks, etc) and creating these takes a hit on the performance. We noticed spawning lots of patterns at once caused the FPS to drop drastically and this is super visible when playing a video game (the whole road slows down). To avoid this we used two approaches: A component pool, basically a reusable and configurable component pool to reuse components and using smaller spawning patterns. Instead of generating 20 vans at once ahead of time we spawn 4x 5 as randomized patterns. This offloaded the "spawning at once" and as a bonus added a random effect that added to the overal game experience.
Multiplayer is a different game
We knew adding multiplayer was going to be a challenge. Whereas if you are playing the game in single player the entire state lives in 1 place, all the patterns, AI locations and player locations are neatly organised in your own logic. When switching towards multiplayer the actual game state has to live in the server, this means part of the game logic no longer sits on the client but actually lives on a service somewhere in the cloud. To achieve this we created a nodejs socket.io server that hosts the rooms and game state. The road patterns are created server side and the clients will tell the server when the switch lanes, all communicated through a websocket with timestamps to sync the local game state. The hit detection, pattern generation and lane state lives on the server where as the client simply renders what he is being told by the server and provides the user with the ability to interact with the video game, which is in turn sent to the server over a websocket connect.
With multiplayer the timing is key and all actions/game info is timestamped to synchronise the game betweeen the different players.
Parallax is fun!
To create an experience of speed or fake the impression of depth in the game we make use of parallax displacement. By having the road move at a certain speed, the car centered in the screen and having the palm trees on the beach appear standing still (though they are infact moving across the screen pretty fast!) creates an impression of the road moving at a certain speed. Higher speeds is faster movement of the road and "static" objects along the road. Similarly at the starting line the stoplight that indicate the start of the race move at a slower speed then the actual road below creating a false illusion of depth, it appears the stoplights are above the road. Because of the difference in speed it appears to have an angle above the road, illusion of depth while infact the screen is entirely 2D. The possibilities are endless and it opens up an extra experience factor!
Please find a link to the Fracer Steerling game running on a Xi6 here:
Want to try it yourself? Get your Fracer game on over here