Racing game
Author: Evaldas Petnjunas
Motivation
The main motivation behind the project was a growing interest in game development, particularly creating a small racing game. Repository link
Plan
- Research/read the three.js documentation
- Find and load the model of the car and the track
- Make logic for moving the car on the track
- Add user inputs(the ability to accelerate and decelerate the car)
- Add physics
- Add UI for the game
- Add weather effects snow/rain in pure WebGL
Milestone 1 (10.03)
- Setup environment and read the documentation(3h)
- Load 3D model of a car and the track(3h)
Finding the models or reading the documentation was not particularly hard, but making sure the loaded models look the way they need to look took quite a lot more time than anticipated(6h), but in the end I was left with 2 loaded models: the track and the car
Milestone 2 (24.03)
- Add movement logic(5h)
- Add user inputs(1h)
Adding user inputs had one minor setback, as the KeyboardEvent keyCode property got deprecated(link), but it did not pose a big problem, as it was still possible to use the KeyboardEvent key property(link). The most problematic part was the adding the movement logic. After writing the code, everything looked logical and correct, but as it always happens, the car was behaving not as expected, as when making a left or a right turn, the car would start orbiting the X axis either clockwise or counterclockwise. The fix was kind of straighforward, despite it taking almost 9 hours. The issue was in the car models rotation along the x axis.
Milestone 3 & 4 (24.03)
- Rewrite the code in react three fiber (5h)
- Add physics(7h)
After the second milestone presentation I was suggested to use the react three fiber(later referenced as r3f) library, so that I could use the functionality of Three.js, without worrying about setting the components up myself. Due to no prior knowledge of react, it took some time to get used to, but later it definitely paid off. The use of available components made the code look cleaner and a lot more readable. In total it took me about 12 hours to rewrite the code.
Adding the physics introduced not only a lot of new problems and bugs, but also a lot of headache. I decided to use rapier physics engine which already came with r3f, and adding it to the project was quite easy. However, the introduction of physics meant that the movement of the car model now relied on forces instead of position updates, which meant that the movement logic had to be rewritten. After adding the physics bodies both to the track and the car, the colliders I decided to use were generated incorrectly, and after some debugging I decided to use the other type. The main problem I faced was the camera(and it still persists), which now seems to be fixed to a position. In the end I managed to get the movement logic work to the point where I could make sure that the physics are working, but there are still problems to fix.(time spent: 20h)
Milestone 5 (5.05)
- Fix bugs(camera position, controls, physics colliders) (10h)