Programming New Road Features for my City-Builder

hello everyone and welcome back to my journey of creating a city builder game from scratch using my own engine and in this video i'm going to take you through how i implemented the new road features that i recently added to the game so after working on the activity system for months now i was finally ready to move on to something new and what i'm doing at the moment is i'm alternating between implementing brands new features and iterating improving on the current features in the game so the feature i decided needed working on this week is the road system which narrowly details improving the shading in the game and adding shadows that will be coming very soon but i wanted to work on the roads first because i thought that the one single change that would impact the game the most at the moment is being able to place multiple roads at a time instead of having to place every single road tile individually which gets very annoying after a while so i made some plans to implement a tool that would allow the player to click and drag the mouse to place large sections of roads at a time and i got working on that before i could start work on the new placement tool i first had to make a few tweaks to the current road code to get it ready to do what i had planned so firstly i wanted to make it possible to add a tint to any section of the road and override its color because that was going to be quite important for the new placement tool now something that's going to come up quite a bit in this video is the fact that the road tiles aren't rendered individually all the roads in the world are merged together into a single mesh and when new road tiles are added the mesh gets updated and the new vertices get added to the mesh this allows the entire road mesh to be rendered in a single draw call which is more efficient than the hundreds of draw calls it would take to render each of the road tiles separately that does however mean that to implement something like this tint which only applies to a single tile that requires the actual mesh data to be updated so that the color of the relevant vertices can be changed so i did that and then i used the tints to implement some previews of the road tiles so that you can see what the road's going to look like before you've actually placed it one issue that i initially came across here was that the cars in the game would still treat these as actual roads that are part of the road network and would drive across the previews so i made some changes in the code to clearly separate being part of the road mesh and being part of the actual drivable roads network and after that i was able to have preview roads without the cars or the people wanting to go on them with these preparations all done i then began implementing a first draft of this new road placement tool and you can see it in action here so you can hold down the left mouse button and drag to start creating the roads it can have one bend in it and the way that it bends depends on which direction you go from the start square so it can bend both ways and when you're happy with the placement you just let go of the left mouse button to place or if you're unhappy with the placement then you can just right click to cancel the preview so on its own that was all working very nicely but as soon as it came into contact with other objects or roads or obstacles that was a different matter so i worked on that next and sorted out how the preview should interact with objects that are already in the world so when it meets a road that's already been placed it simply skips that tile as there's no need to place another road there and when it comes across an obstacle that blocks a road from being placed the preview road stops at that obstacle and that was the basic behavior for the new placing tool completed next up i worked on something that to be honest i probably shouldn't have been working on at this stage but i had an interesting idea i really wanted to try it out and maybe some of you will find it interesting as well so i'll quickly show you how i implemented it now what i wanted to do was to add some sort of animation to the new roads just after they get placed but as i mentioned earlier the roads are all one mesh so animating just a part of that mesh would require constant mesh updates every frame while the animation is running which i wanted to try and avoid if possible so i had a plan to implement the animations in the vertex shader without needing to update any mesh data now if you're not familiar with the concept of shaders then this might be a little bit hard to understand but basically the vertex shader contains code that gets executed for every vertex in a mesh when it's being rendered so this code here gets carried out for every vertex in the road mesh and it's possible for me to manipulate the positions of the vertices in here and that's what i did first i added some code to animate the height of the vertex so i have a time variable here which is just the time in seconds since the game launched and that just keeps increasing every frame and then based on that time variable i have some animation code here which applies to the height of the vertex and because this code gets run for every vertex in the road mesh you can see the entire mesh now carries out that simple animation which obviously is not what i want in the end but it's a good start then in the animation code this here is the line of code that causes that animation to loop so by removing that the animation will now only happen once but it will happen once as soon as the game launches and we probably won't even see it because we'll still be in the main menu so i can add a slight delay to the start of the animation by setting the time back a bit this will make the animation start four seconds later and if i run that then four seconds after starting the game the roads carry out that bounce animation once so this number in the code now represents the start time of the animation taking this concept a bit further i made the animation start time a variable and then in the java code i set the variable when the enter key is pressed and i set that animation start time to the current time so basically when i press the enter key it tells the shader to carry out the animation right now and if i demonstrate that in the game the animation can now happen on demand whenever i press the enter key next step was to get the animation to only apply to the desired vertices and to do that i changed that start time variable from a uniform variable to a per vertex variable which means that each vertex in the mesh can now have its own start time for the animation and after that it was all pretty simple whenever new vertices are now added to the road mesh they get added with the animation start time set to the current time so as soon as they're added they do the animation and as you can see it's only those new vertices that now do the animation with that basic concept working i then started improving the animation a bit so firstly when adding new vertices i added a slight delay to the animation start time and that delay was bigger depending on how far from the start tile the vertices were and that results in the new road tiles doing the animation slightly one after another creating this nice wave effect then to finish off i improved the animation code a bit i started animating the alpha the transparency of the road tiles as well as part of the animation and my father who's very good at maths came up with a nicer easing function for the animation so that the roads do a little bounce and after all of that the animation now looks like this i think it feels really satisfying now to place the roads and i think in the future with sound effects and maybe some particle effects it will be even nicer and again all of this is happening without any extra mesh updates the mesh still only gets updated once when the new vertices are added and that's it something else i wanted to implement for the roads was road markings and this ended up being a little bit of a failed experiment um but it was still interesting so i'll quickly tell you about what i was attempting to do so i think the normal way of doing this is to render extra textured quads on top of the roads but i had a little idea which i wanted to try out first because i thought that there might be a way to do it without having to render extra geometry by just texturing the road mesh itself and i also wanted to try doing it without having to give the road vertices any texture coordinates what i did was i first created a texture atlas containing all of the possible road markings for a single road tile as i said i wanted to do all of this without having to add any extra vertex data to the road vertices so instead i used the alpha component of the color attributes of the vertices which i previously hadn't been using the alpha component is represented by one byte so it can represent a number between 0 and 255 so in this byte i stored the id of the tile in the texture atlas that that vertex should use then in the shader i could use that id and the vertex positions to work out the texture coordinates to sample from the texture atlas and voila it worked almost so so close unfortunately it created this one pixel wide glitch along the seams of the tiles which i don't think i can fix this issue comes from how the vertex positions are converted to texture coordinates in the shader basically the row tiles are all aligned with the world grid so by doing the vertex positions mod one you get the tile coordinates between zero and one perfect for texture coordinates except that on the positive edge of the tile the position value would be one but one mod one is zero so all the texture coordinates on the tile are correct except for the final pixel where it goes from 0.99 something all the way back to zero causing the glitch so that was a bit unfortunate but to be honest after thinking about it a bit more and trying out this system is probably for the best because using extra textured quads for the road markings would just be so much more flexible anyway and would allow for infinite different combinations of markings on a road tile rather than it being limited to the combinations that i can fit into this texture atlas so i'll implement that next time when i work on the roads and for now at least we've got some road markings the final thing i've implemented recently was one extra improvement to the new placement tool there was one situation where i felt that the feedback to the player could be improved a bit and that was in cases like this where you'd be getting ready to place a new road and then the preview would just disappear without it really being obvious why and it feels a little bit unintentional that the road has just suddenly gone whereas actually in this case it was because there was an obstacle further back blocking the road so i thought maybe i could highlight the tiles in red where a road can't be placed to show the user that the tool is still working but you just can't place the road because of some sort of obstacle now i do already have a tile highlighting system in the game which you might have seen before but that system is rather inflexible it's actually quite a similar situation to the road markings i generate this tile highlight in the terrain shader which means that it can only be this shape and there can only be one of them which was no good for what i wanted to do here so like the road markings i decided to implement a new more flexible tile highlighting system which uses textured quads to create the overlays for the tiles and i then used that to make these red highlights when the placement of the road isn't possible and that is the update for the roads finished for now next time i'll be getting back to the ai and the life of the townspeople and i'm going to be implementing the concept of homes and owning a house so the people will move into one specific building and then they'll always return to that house when they haven't got anything else to do before i finish i want to give a big shout out to the top patreon supporters from last month who were adam farkas alexander chavez andrew witt caffeine coder christoph herpo connerton adventures dieta reinette fred mastro gregory horvath hargan vingard harry chung john needham leandro dipietro merrick michelineczyk mario martins neil blakey milner sean mccrory sergey and kinovich simon ganza thomas johnson and timothy gibbons so a massive thank you to you guys and of course to everyone else supporting me over on patreon for this video that is going to be it so thank you all very much for watching and i will see you all next time

Channel: ThinMatrix

Views: 86,166

Keywords: devlog, indie game, city building, game, gamedev, game development, city builder, thinmatrix, opengl, java, sandbox, simulation, day in the life, indie developer, programming, game engine, roads, network, lwjgl, low poly, model, house, building, cars, traffic, indie game developer, art, low poly houses, low poly art, animations, ai

Id: imm3ws0pifw

Length: 12min 33sec (753 seconds)

Published: Sun Nov 14 2021

Reddit Comments

[u/Germanunkol]

Very cool dev log! Thanks for sharing :)

The end result feels very snappy.

Although I also liked the roads without the many street markings. It was a nice style with the plain roads. Maybe you could make the marking a bit darker so they stand out less?