Skip to content

Latest commit

 

History

History
243 lines (186 loc) · 22.9 KB

README.md

File metadata and controls

243 lines (186 loc) · 22.9 KB
Raw

Fury Racing | Frontend


Fury Racing logo

Table of Contents

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!

car animation

Built With:

  • nextjs
  • typescript
  • babylonjs
  • chakraui
  • viem
  • wagmi
  • Rainbowkit
  • prettier
  • ESLint

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 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.

Successfully importing third-party assets

All 3D assets were found on SketchFab (credits listed further down this document). 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.

raceAnim

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:

0000000000V000000˻V00V
000V00000000VV┌───┐0V0
0V0000V0000V00│┴┴┴│┌┐V
0000V00000000V│VV0└┘│0
0V0V╦╦0╦0╦╦0˻V│0V000│0
00┌───────────┘0000V│˹
V┌┘00VV00V00˹V0000VV│V
˼│V┌───┐0┌──────────┘V
0│╣│V┴V└─┘0˺0┴V┴┴╩┴0V0
├│╣│V00V╩V0000V0V00000
├│V└┐000000V000000V0V0
V│V╠│┤0000000V00VV0000
├│V╠│˹00V000000V000000
├│˻┌┘0V0000V0000000000
├│0│V00V0V000000000000
V│0│┤V0V00000V0000000V
V└┐└─┐00000000000000V0
0V└──┘ 0V00000V0000000
00VVVV00000000000V0000

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

Make sure you have the following ready:

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:

git clone https://github.com/Pedrojok01/fury-racing.git .

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:

bun install
# or
pnpm install
# or
yarn install
# or
npm install

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/.).

NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID = "Project ID needed for WalletConnect v2 here";

WEATHER_API_KEY = "Your OpenWeatherMap API key here";

To start Fury Racing:

First, run the development server:

bun dev
# or
pnpm dev
# or
yarn dev
# or
npm run dev

Open http://localhost:3000 with your browser to see the result.

Credits

Asset attributions:

This work is based on:

Music attributions:

The music in the game is free for use under the Pixabay Content License.



🎉 Thank you Chainlink for this amazing hackathon! 🎉

⭐️ ... and don't forget to leave a star if you like it! ⭐️


(back to top)