Frontend
Last updated
Was this helpful?
Last updated
Was this helpful?
The front end of Fury Racing has been built to make the interaction with the smart contracts as smooth as possible. Only one transaction is required to play a game, even as a new player. All racing modes are accessible directly from the front end.
This comes as a PWA (Progressive Web App) with a responsive design, allowing it to be played on any device, from desktop to mobile to be accessible to as many users as possible. And because it is a PWA, you can even install it on your device in one click!
Dark mode, sound, and Fullscreen are also available to enhance the user experience and make it feel like a real game.
And the best part... To make it even cooler, we have integrated some beautiful 3D animations with BabylonJS to make the game more immersive and fun!
The following features of the BabylonJS engine were used:
Loading all assets (meshes, textures) in batch, with a loading screen during processing, with AssetsManager.
Loading glTF meshes specifically with the built-in BabylonJS loader.
Using a FollowCamera to automatically follow the vehicle as it moves.
Using Animation and AnimationGroup classes to animate the vehicle's movement.
Generating shadows for the vehicle with ShadowGenerator and a DirectionalLight.
Generating a skybox with the Scene.createDefaultSkybox() helper function.
Generating rain particles with a ParticleSystem.
Generating fog via the Scene.fogMode property.
As such, an array of metadata constants was created to specify the offset and scale of each asset. The meshes are therefore correspondingly offset and re-scaled during initialization.
In order to quickly implement a simple, flexible race track builder system, we opted to allow the coding of tracks using plain ASCII. This allows us to embed the layout of race tracks directly in the code and makes it easy to visualize the end result in advance, without any third-party tools. Furthermore, this greatly facilitates the creation/addition of new tracks, if desired.
By going with a grid/tile-based approach, it also simplifies the automation of the vehicle animation. The engine simply gets the vehicle to move from the current tile to the next tile in the appropriate direction through a looping process.
We ended up choosing Monaco as the sole race track of the first release. You can see its ASCII equivalent below:
With the corresponding character legend:
0: Blank (grass) tile.
V: Tree (vegetation) tile.
─, │, ┌, ┐, └ and ┘: Road tiles.
├, ┤, ┴ and ┬: House tiles, each representing a particular orientation.
╠, ╣, ╩ and ╦: Building tiles, each representing a particular orientation.
˼, ˻, ˹ and ˺: Billboards, each representing a particular orientation.
Make sure you have the following ready:
Once your config is ready, create a new repo, open your favorite code editor, and clone the repo with the following cmd:
Depending on your favorite package manager, run one of the following commands in your terminal to install all the dependencies needed for the project:
And for the weather API key, you can get one for free on [www.weatherapi.com](sign up at https://www.weatherapi.com/.).
First, run the development server:
All 3D assets were found on (). However, not all assets were perfectly centered on the origin (0, 0, 0). Furthermore, many of the assets varied greatly in size.
installed (developed on LTS v18)
installed (developed on v5.3.3)
or or or installed
(or any web3 compatible wallet) installed in your browser
Remove the .example from the .env.example file name at the root of the project and add your API keys inside. The WalletConnect project ID is now required since the v2 update. You can create one easily on the .
Open with your browser to see the result.
