Showing grid on a map in Unity - Grid Placement System P2

in this video we are going to create a grid visualization using a custom Shader and we are going to place it on top of our plane where we want to be placing our objects to create our grid visualization we need to use a custom Shader and to do that we need to import the Shader graph package so go to the top menu window and select the package manager here in the top left corner we are going to select the unity registry from our list and in the top right corner in the search box we are going to type Shader and now you should see the Shader graph package make sure that you download it into your project when you have this package installed we need to also download the sample package so here in the Shader graph description we have those samples and this contains procedural patterns those include a rectangular grid and a hex grid so make sure that you import this into your own project when you're done in the project tab you are going to find in the assets samples folder which contains your sub shaders that we have imported as samples before we explore those samples we are going to create a new Shader graph so I'm going to select my shaders folder right click create select Shader graph I'm using urp pipeline so I'm going to select the only Shader graph I'm going to call it a grid rectangular transparent and I'm going to open this Shader up okay here is my graph here in the Shader graph window press spacebar and either search for grid and if you don't find anything we will need to go to samples and open those folders until you reach the subshooters we're going to drag the grid topshooter into our graph and I'm going to maximize our Shader graph and as you can see here is our grid node so we can modify the size and we need to skip it around one but basically we are controlling the size of the cells I'm going to set it to 0.95 for now the next parameter that we have is the tile link we can set it to four by four basically we are modifying the number of cells shown or outputted by our grid node and we can modify the offset so this allows us to adjust the position of those grid lines and the cells if we need to now since we want to grab the edges or the lines of our grid rather than the cells we are going to Output drag the output of the grid to 1 minus node so now you can see that those white lines are representing what will be visible and the black spaces of the cells will be transparent right now we need to enable transparency in our Shader so go to the graph inspector if you don't see it just press in the top right corner graph inspector and the Blackboard we're going to go to the settings we are going to select the surface type we're going to select transparent and now in the fragment Shader we should see not only the base color but also the alpha value we're going to drag the output of the one minus node to the base color and to the alpha value and in the main preview you can right click and select the quad and you will see that we are not outputting a grid that is four by four let's save our Shader click save asset in the top left corner I'm going to unmaximize the Shader and I'm going to go to my shaders folder right click on the Shader graph that I have created create and I'm going to select material okay I'm going to select the scene View and I'm going to create in the hierarchy select a 3D object and create a plane since there is a bit of Z fighting we are going to select the transform of this plane make sure that it is set on zero zero zero and on the y-axis we are going to rise it by 0.015 so it is on top of our grass plane and I'm going to drag our Shader graph material that we have created on this Lane and as you can see we have our grid visualization our grid overlay on top of our grass plane now the problem with this is that if I select the transform of the plane and scale it on X we are going to be stretching of these cells instead of adding more cells to our grid so that's what we want to achieve also I want to point out that if we select our plane and press shift H we're going to go to the isolation mode for this plane if I now go to the scene View and select the display mode and select the wireframe we are going to see that actually our plane is represented by 10 Unity units by 10 unit units so this is the default scale okay let's reset the shielding mode to be shaded and let's press shift age to go out of the isolation mode for the plane and let's go back to our Shader to be able to use our scale properly and to add more cells when we scale our plane we will need to go to the Blackboard and here we are going to add a new Vector to property using this plus icon let's call it default scale and we are going to set it using the graph inspector using the node settings we are going to set the default value to be 10 by 10. since this is the size of our plane Indian P units next thing that we want to do is add another variable of type color and we are going to call it well we can leave it as a color this will be the color of our grid let's set the default color to be white with full Alpha although it doesn't really matter now to be able to modify the size of our grid we are going to add another Vector to size and we are going to leave it for now at one by one so let's set the default value to one by one and we are going to be able to modify the size of the cells of the grid next we need to add another parameter of type float and we are going to call it thickness and this will be the thickness of our grid lines we are going to select the mode to be a slider and we are going to set the mean value to be 0.01 and we are going to set the max value to be 0.05 and let's set the default value to be 0.05 okay so this will allow us to set the thickness of the grid lines now let's drag the graph inspector away and we are going to add a new note so press spacebar and we are going to type object because we need to access the scale of this object we are going to drag it to the split node because we need to access only the X and the Z value so R and B so we are going to drag the R value so x to the vector 2 x value and we are going to drag the B values of the Z scale to the Y of this Vector 2. let's drag it a bit further so now we have our scale of the object we are going to drag it the multiply node and I have already explained that the default scale of the object or default size is 10 by 10 so we're going to multiply the output of the scale by the default size of our plane so this will be the 10 by 10 value now we can use the output of this multiply node directly onto the grid tile Link in case we want to always have the cell size to be one by one but if we want to be able to modify it we need to drag the multiply output to another multiply node and we are going to multiply this by the size so the vector one by one right now but we can use it to multiply the size output of this previous multiplication so now we can modify the size of the each cell of our grid so we are going to drag it to the tiling of the grid I just want to point out that we are multiplying this value by the size but obviously if we set the size to be 2 by 2 here we are going to get more cells so let's select the size and set it to be two by two you're going to increase the number of cells but in our grid component we need to set it to be Point Half to achieve more granular grid so we could use a divide node here but it is more performant if we use multiplication operation since this Shader will run this code very often so that's why we are accounting for the performance using the multiplication node we are going to set the size back to 1 by 1. okay so we have our tile link now we need to use the thickness parameter from our Blackboard let's drag it and since I have told you that we need to have the value around one we are going to use the one minus node to subtract the thickness from value 1 and now we can drag the result as the size of our grid so this will be the size of the cells and we are going to thanks that be able to modify the value or the size of the edges or the lines of our grid we could of course add one more parameter for the offset if you need to modify it now let's go to the fragment Shader and instead of directly dragging this result of 1 minus to the base color we are going to drag this to the multiplying node and we are going to multiply this by the color so let's drag the color from our Blackboard and let's multiply this Lines by the color and now we're going to drag the result of this multiplication to the base color so if we modify the color we are going to modify the color of the lines of our grid okay so this is it for this Shader let's save this and let's go back to our scene in case you want to learn more about cheaters check out the UNT Shader Bible by jet Ellie it should help you out now the result is that we are seeing the grid that contains 10 by 10 cells if you want to modify it we can go to the material in the projects Tab and we can select the thickness and modify the thickness we can change the color here and we can also change the size if we set it to be 2x2 we are going to obviously have more cells so to apply this to our grid component we would need to select it and we are going to select the grid grid parent and we would need to set the size to be 0.5 the account for the more granular grid that's why I have mentioned that we are multiplying in the Shader but in the grid cell size we wouldn't to set the half of the size to adjust it we are going to leave those values as one and we are going to change the material size to be one by one since those is the size of the prefabs that I have preferred for the later part of this tutorial now let's make sure that we drag our plane to the a grid parent and let's make sure that both grid and plane are at position zero zero zero and let's press play great so now we have our grid visualization and we can move our cell preview or cell prefab around those cells and we see that it moves just like we would want it to so the grid representation is valid I just want to point out that thanks to creating a grid parent object and putting the plane and the grid as the child objects we can easily move it and you will see that we can still adjust our placement of the cell representation to the grids represented by our Shader so everything is working if I reset the position of our grid parent I can also scale the plane if I scale it by 1.5 we can experience a problem with selecting the cell so we need to adjust the plane position so just give it an offset so all the position we are going to give that 0.5 and 0.5 and now again our cell representation matches what we have selected on our grid and we can still select the cells that are outside side of the grass plane but that are represented by our grid visualization plate great in the next video we are going to start placing objects on our grid see you there

Channel: Sunny Valley Studio

Views: 24,422

Keywords: unity grid shader, grid on a map in unity, how to add grid to unity, how to show placement grid, Showing grid on a map

Id: nKF4Pwb-6Ow

Length: 12min 13sec (733 seconds)

Published: Fri Mar 24 2023