Traffic Game kinda

Showcase
1

Hi, i want to apologize if i mess up something with my english, while im writing this, so with that out of the way. I want to share to the community this project i have been working on for the last few months as part of my thesis, its my first game using 3D graphics and my first time using three.js so there is a lot of junk in the code, BUT its pretty much done(am at the last days of developing it actively , i will just be adding some extra signs and features which are easy tbh also i will try follow the standards for the code and translate to english the comments). I want to make this code open source so everyone take a look of how i did some of the stuff.
The game is a traffic serious game, not really that specific BUT if i follow the definition of serious game is just a game that you give some serious objective like learn or develop an already known skill.
So with that in mind i develop city, a dynamic city, this city is different everytime the game is loaded, the maps are kinda similar but they aren’t the same. Which make everything really random, so to build it i made a matrix where i store the positions of the objects i wanted to render. I made few mistakes here, but it work most of the times, the algorithm took me too long to develop and understand, so its fine, probably i will change some stuff in the future.

Once everything is created i start importing the models, which are really simple, i optimize them the most i could in blender, and bake the texture some AO so it doesnt look that bad, and i could turn off all the shadows to get a better performance. I also merge the most geometries i could, this part was kinda hard, there is no example i could find (probably i miss one, i don’t know, i tried to understand how i could do it by myself) where someone merge multiple GLTF geometries with the material of the imported model, were each geometry have different positions, but i made it so if someone want to check out how i did it, there is the code. I wanted to do some instancing with the geometries, but was really hard to understand at least for me, i will tho, but probably for another project.

The car animations were done with Tween.js because i fail trying to do those myself, xD.

I use some code from some examples i think, i don’t remember properly but not a lot tbh. Was a good experience tho, i will just finish adding some extras traffics signs in the next couple of weeks, and some other collision stuff,also sound i forget about sound…

If you find any bug or something tell me so i can try to fix it, i also accept suggestions. Sorry again if i mess up something.

Here is the live game:
https://daefher.github.io/

and the repository:

2

I drove the car until it ran out of fuel. But I have no idea what I was supposed to be doing.
Perhaps you could add some instructions?

3

Yes, the objective is find a yellow square in the map before the fuel run out, and try also to follow the signs, but they aren’t activated yet, cuz i’m still modeling some signs, and a fuel item to regenerate the fuel. Also i’m thinking on how i will store the information about the signs, so probably will just be a .json file or maybe a simple api on firebase to get the info.
I’m really glad it didn’t crash tho, and i hope the performance wasn’t bad…

2 Likes
4

The game looks okay. I notices some weird line artifacts, not sure what they are supposed to be. In terms of the gameplay - it has a lot of room to improve:

  • I can’t move the camera at all - that feels very limiting.
  • I tried moving the vehicle with WASD - nothing. I tried arrows - camera floated ever-so-slowly forward and back - so no luck either. I realized that I have to click things - okay. But then I realized that the vehicle only moves a tiny bit each time I press the button. That just sucks for user experience. It feels super slow and boring.

I also noticed that the fuel indicator is not feeling so well and keeps having seizures.

I like the aesthetic of the game, but it’s clear you have a lot of work ahead of you. Best of luck!

5

True, i kinda knew those were issues, but at some point giving the player freedom to move whenever they wanted make thinks harder at least for this particular project. So i decided to restrict some movements, no going backwards, if you get stock you lose, things like that.

You are also right on the movement tile by tile, so my next moment improvement will be try to make the car move while the evaluation only let you go forward, doesn’t matter which direction you are facing, so it can be only one click.
About the keyboard detection, there was one before, but i delete it(for now), cuz i wanted to test the game on mobile and it works “fine”( not really but at least is playable).

The fuel indicator(and all the UI) is a pain in my butt XD, i don’t really know how to do CSS, usually when i do webpages i used a framework, i will fix it tho.

Oh and the wire figures are the collision meshes(hitboxes), i just made them visible so i can check the position of each one, the car also have one, ill make them invisible once the moment and collisions are done.

Thanks you for the review, i will do my best.