Frontend
Description:
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!
Built With:
BabylonJS implementation
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
glTFmeshes specifically with the built-in BabylonJS loader.Using a
FollowCamerato automatically follow the vehicle as it moves.Using
AnimationandAnimationGroupclasses to animate the vehicle's movement.Generating shadows for the vehicle with
ShadowGeneratorand aDirectionalLight.Generating a skybox with the
Scene.createDefaultSkybox()helper function.Generating rain particles with a
ParticleSystem.Generating fog via the
Scene.fogModeproperty.
Third-party assets
All 3D assets were found on SketchFab (all credits are listed there). However, not all assets were perfectly centered on the origin (0, 0, 0). Furthermore, many of the assets varied greatly in size.
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.
Programming the race track layout
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.
Installation
Prerequisites
Make sure you have the following ready:
node.js installed (developed on LTS v18)
typescript installed (developed on v5.3.3)
MetaMask (or any web3 compatible wallet) installed in your browser
Clone the repo:
Once your config is ready, create a new repo, open your favorite code editor, and clone the repo with the following cmd:
Install all package dependencies:
Depending on your favorite package manager, run one of the following commands in your terminal to install all the dependencies needed for the project:
Add your API keys in the .env file:
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 WalletConnect dashboard.
And for the weather API key, you can get one for free on [www.weatherapi.com](sign up at https://www.weatherapi.com/.).
To start Fury Racing:
First, run the development server:
Open http://localhost:3000 with your browser to see the result.
Last updated
Was this helpful?
