Showing grid using Shader in Unity - Grid Placement System P2

In this Unity tutorial we will add a Grid on top of our map by creating a custom grid shader. At the end of this tutorial you will have a grid placement system that you can use in your own project.
House building system in unity project template:
courses.sunnyvalleystudio.com...
Starter Project:
/ 80441380
Scripts on github:
github.com/SunnyValleyStudio/...
Assets used:
kenney.nl/
𝗛𝗮𝘃𝗲 𝗮𝗻𝘆 𝗾𝘂𝗲𝘀𝘁𝗶𝗼𝗻𝘀? 𝗝𝗼𝗶𝗻 𝘁𝗵𝗲 𝗱𝗶𝘀𝗰𝗼𝗿𝗱!
/ discord
𝗣𝗟𝗘𝗔𝗦𝗘 support the channel:
/ sunnyvalleystudio
00:00 Importing shader graph samples
01:15 Creating Grid Shader
04:18 Using Object scale in a grid shader
08:36 Controlling grid thickness
09:11 Applying color to grid
09:59 Changing grid size
10:55 Showing grid on the map
#unity3d #gamedevelopment #indiegamedev #sunnyvalleystudio

Пікірлер: 65

  • @NightRunStudio
    @NightRunStudio10 ай бұрын

    Love your videos, man! Concise, but clear. Keep it up!

  • @SunnyValleyStudio

    @SunnyValleyStudio

    10 ай бұрын

    Thanks a lot!

  • @user-sz2tl1ow8e
    @user-sz2tl1ow8e Жыл бұрын

    I really like your tutorial, Peter! Thank you very much, and I also bought your tutorial!

  • @SunnyValleyStudio

    @SunnyValleyStudio

    Жыл бұрын

    Thank you 🙂

  • @Tozerus1
    @Tozerus1 Жыл бұрын

    Thank you for the great video. I've been following your content on Udemy and you have a talent for really well put together training material! Great Stuff!

  • @SunnyValleyStudio

    @SunnyValleyStudio

    Жыл бұрын

    You are very kind 🙂 Thank you for your support 👍

  • @bluzenkk
    @bluzenkk Жыл бұрын

    looking good! Thanks

  • @SunnyValleyStudio

    @SunnyValleyStudio

    Жыл бұрын

    Thanks! 🙂

  • @vvbgamedevx11
    @vvbgamedevx112 ай бұрын

    Excellent Tutorial. Really helpful.. Another part done.. Thanks..

  • @SunnyValleyStudio

    @SunnyValleyStudio

    2 ай бұрын

    Thanks 🙂

  • @nesaransari7453
    @nesaransari7453 Жыл бұрын

    Well explained....Waiting for next video.

  • @SunnyValleyStudio

    @SunnyValleyStudio

    Жыл бұрын

    Thanks! Next part should appear today 🙂

  • @CreeperMinecraft2000
    @CreeperMinecraft2000 Жыл бұрын

    Wow! your vids are so easy to follow along to! Can you plz make a tutorial on the alteruna multiplayer packgage?

  • @SunnyValleyStudio

    @SunnyValleyStudio

    Жыл бұрын

    I will try tackling the multiplayer soon 🙂

  • @mnicodev
    @mnicodev Жыл бұрын

    Will you cover also stacking objects like 'Unpacking game' in this series? Nice content, thank you for sharing!!

  • @SunnyValleyStudio

    @SunnyValleyStudio

    Жыл бұрын

    I will cover how to place floor and on it furniture (or rather how to place both) and how to detect when deleting the furniture first and next the floor. Stacking would be done similarly - detect IF there is a floor and only then allow to place furniture. You should have really easy time figuring it out when I release the "Removing objects" part of the tutorial 🙂

  • @asierlizaso7348
    @asierlizaso7348 Жыл бұрын

    Hey! Thanks for the video! I have a question about the grid cells. Wouldn't it be possible to connect the shader tiling attribute to the grid's cell size? That way, changing the shader should automatically make the grid cell size match, right? (I mainly use Maya so I am not very familiarized with Unity). Thanks again! :D

  • @SunnyValleyStudio

    @SunnyValleyStudio

    Жыл бұрын

    Hey! Yes you can do it. I show how in my House Building Template courses.sunnyvalleystudio.com/p/house-building-system-in-unity to encourage people to support my work 🙂 It isn't hard to figure out. It just takes a custom script.

  • @tr25ny
    @tr25ny9 ай бұрын

    I'm having a problem with the grid lines jittering when the camera moves. the only thing that works is setting render scale in URP settings to 2 and turning anti-aliasing off. however, this isn't ideal and I'm wondering if there's something else, I can adjust withing the shader.

  • @SunnyValleyStudio

    @SunnyValleyStudio

    9 ай бұрын

    It sounds like anti-aliasing issue. You can try making your grid thicker but I'm note entirely sure what do you mean by jittering. Feel free to share screenshot on discord.

  • @bishopjackson2264
    @bishopjackson22644 күн бұрын

    If you are missing the Grid. You need to go into Window > Package Manager > Select the Shader Graph package > Select the Samples tab > Import he Procedural Patterns

  • @Karlthuluu
    @Karlthuluu Жыл бұрын

    Could you maybe show how you would implement this on an uneven surface / terrain?

  • @SunnyValleyStudio

    @SunnyValleyStudio

    Жыл бұрын

    Unless you need a continuous placement you could still have a flat 2D grid since even if you are selecting a mountain its X and Z coordinates are the same as on the flat area. All you would need to to is shoot a raycast from the edges of your object to place it at an angle relative to the terrain shape. The easier approach would be to shoot a raycast from the center point and place it at this altitude. You would also need to use some form of a boxcast against your terrain to check if by any any you are not intersecting a mountain edge when placing your object. Can be a lot of work to implement this. I hope it helps!

  • @sheesh5812
    @sheesh5812 Жыл бұрын

    the sphere which serves as the cursor always has an offset to the cellindicator, it points at one cell but the cellindicator is on the diagonal opposite cell

  • @SunnyValleyStudio

    @SunnyValleyStudio

    Жыл бұрын

    Hey! in the code we are relying on the "grid.CellToWorld(gridPosition);" so the method from the Grid class. Any offset might be caused by 1) offset added to the GRID object in the hierarchy or 2) offset added to the cell indicator prefab or 3) some error in the code. You can view the code here github.com/SunnyValleyStudio/Grid-Placement-System-Unity-2022/commits/main I hope it helps. if not feel free to write me on discord (link in the description) and attach screenshot so i have a better understanding of the problem 🙂

  • @sheesh5812

    @sheesh5812

    Жыл бұрын

    @@SunnyValleyStudio Hey! Thanks for your quick answer, I made sure that every prefab and the grid start at 0,0,0. I fixed the problem by adding 1 to each the x and z position to the cellindicator position. Other than that everything worked fine, thank you for this awesome tutorial!

  • @emerald8414
    @emerald84148 ай бұрын

    Great tutorial, but the grid seems to have a thin black outline that I don't like. Do you know how I might get rid of it? Or is it just due to imprecision with the grid node?

  • @SunnyValleyStudio

    @SunnyValleyStudio

    8 ай бұрын

    I am not sure. It might be something connected to rendering settings. I am not that advanced with fixing visual bugs. Very often it can be connected to Anti Aliasing but again that is just what I would check.

  • @emerald8414

    @emerald8414

    8 ай бұрын

    @@SunnyValleyStudio okay thank you. Do you know if you're experiencing the same thing?

  • @developer7551
    @developer7551 Жыл бұрын

    when you are changing plane size your grid size also change i assume because you prefab indicator indicate move to last shader visualize grid cell but mine are not move in that way my grid size remain same tell me about this

  • @SunnyValleyStudio

    @SunnyValleyStudio

    Жыл бұрын

    I will be talking about the prefab in the next video. The prefab is of size 1x1 (grid cursor indicator). Then we modify the shader size it doesn't affect the Grid component. We have to manual (you can use a customs script) set the Grid component size to 0.5 when you set the shader size to be (2,2,2) - because we multiply there and 1 / 0.5f = 2. Anyhow the only moment that your cursor should move is when we modify the Transform of the "Grid Parent" object since it applies offset to the Grid components calculations. I hope it answers your question 🙂

  • @user-vi7yi1fm9q
    @user-vi7yi1fm9q9 ай бұрын

    The shader you created shows thin lines on the border of the grid. How to make it show even lines on the edges of the grid as well?

  • @SunnyValleyStudio

    @SunnyValleyStudio

    9 ай бұрын

    This is because we only get half of it on the edges. You could use a Rectangle nod and add a thicker outline to the edges of the plane - just have to find the correct value based on the scale and the base thickness. You could just use "Add" node to the result that we have so far and for safety "Clamp" it to 0-1.

  • @pengqihang5314
    @pengqihang53146 ай бұрын

    When making grid shader(connecting nodes and all that), the preview shows a pink sphere. If I change preview to Quad, it's just a pink rectangle. If I make it to material and put it on plane, the plane just turns pink. I'm sure I connect minus one out to fragment color. Please help.

  • @pengqihang5314

    @pengqihang5314

    6 ай бұрын

    Fixed it. It was a renderer issue

  • @SunnyValleyStudio

    @SunnyValleyStudio

    6 ай бұрын

    Glad to hear that you were able to solve it 🙂

  • @pengqihang5314

    @pengqihang5314

    6 ай бұрын

    @@SunnyValleyStudio Great Guides! Thanks!

  • @vladtzapone7737
    @vladtzapone77372 ай бұрын

    I've successfully managed to create the grid, everything is nice, the only thing is that in the distance the cells are flickering when i'm moving my character. Any fix for this? Thank you !

  • @SunnyValleyStudio

    @SunnyValleyStudio

    2 ай бұрын

    Flickering can be cause by z-fighting (that is why we move the grid plane in front of the ground). When you zoom far away the flickering can be dues to Anti-aliasing and the fact that our grid is "thin" when viewed from afar). I'm not an expert when it comes to solving graphics related problems so it's something you would have to research 🙂

  • @shazboi
    @shazboi9 ай бұрын

    How to limit the object while placing it? If I place the table at the right border, some part of it goes out of the grid. How do I clamp it's size?

  • @SunnyValleyStudio

    @SunnyValleyStudio

    9 ай бұрын

    The easiest way is to specify by hand the grid borders (later you can calculate those). Next just ask this "GridB0rders.cs" component "Are the positions selected for placement outside the grid border? " All you would have there is a "center point" and the "size" and single method with an if stement "If origin.x + offset.x I hope it makes sense

  • @shazboi

    @shazboi

    8 ай бұрын

    @@SunnyValleyStudio Yep I kinda figured it out by taking limits of the Grid then doing something in the CalculateGridPositions(); function like Vector3Int desiredPosition = gridPosition + new Vector3Int(x, 0, y); if (desiredPosition.x (gridXLimit / 2) - 1 || desiredPosition.z (gridYLimit / 2) - 1) { return null; } and then in the CanPlaceObjectAt(); function if (positionToOccupy == null) return false; Solved the thing 👍

  • @vatsoffice
    @vatsoffice6 ай бұрын

    my object in the shader editor only has position and scale. why?

  • @SunnyValleyStudio

    @SunnyValleyStudio

    6 ай бұрын

    Can be some changes done to the Shader Graph docs.unity3d.com/Packages/com.unity.shadergraph@6.9/manual/Object-Node.html . It shouldn't affect the shader that we create though 👍

  • @amenalaya1417
    @amenalaya14178 ай бұрын

    i don't have the samples folder where can i find it

  • @SunnyValleyStudio

    @SunnyValleyStudio

    8 ай бұрын

    If you mean for the shader Grid parameter you have to open Package Manager (from the Top menu I think "View" category ?) and find in it the Shader graph. Next on the right you should find "samples" and have a way to download the shader graph samples.

  • @flikera
    @flikera3 ай бұрын

    I'm using 2d sprites for my game and the grid appears in front of the sprites, how to fix that? Also how do you make the grid transparent?

  • @flikera

    @flikera

    3 ай бұрын

    I found the answer of the first: Material > Sorting Priority -1

  • @SunnyValleyStudio

    @SunnyValleyStudio

    3 ай бұрын

    Good to hear that you have found a solution!

  • @flikera

    @flikera

    3 ай бұрын

    Do you know how to control the grid alpha/transparency?@@SunnyValleyStudio I tried the color, but it doesn't do anything.

  • @chibamoon6410
    @chibamoon641027 күн бұрын

    the ball in the grid shader is just black it doesn't have the lines when we change the value to 1

  • @SunnyValleyStudio

    @SunnyValleyStudio

    24 күн бұрын

    Strange. I remember that indeed some parameters had to be limited in range from 0 - 0.99 because otherwise the shader logic would not work. Maybe I forgot to add clamp node to prevent that. Sorry about that! I'm fairly confident about the shader itself so if it is not the issue that you are experiencing maybe take a look again at the section of the video where I present the graph and compare it with yours. Feel free to join my discord discord.com/invite/RQEtYHz if you need me to send you a screenshot of my graph 🙂

  • @dmsassassin
    @dmsassassin11 ай бұрын

    No "Open Shader Editor" button!

  • @SunnyValleyStudio

    @SunnyValleyStudio

    11 ай бұрын

    Are you using URP pipeline? Another reason for it might be that you have created a default shader file and not the "Shader graph" asset. You can check this forum to read more about this issue forum.unity.com/threads/cant-open-shader-graph.669955/

  • @fabexl5898
    @fabexl58985 ай бұрын

  • @SunnyValleyStudio

    @SunnyValleyStudio

    5 ай бұрын

    Thanks for the comment! 👍

  • @uso2484
    @uso2484 Жыл бұрын

    comment for promoting your channel

  • @SunnyValleyStudio

    @SunnyValleyStudio

    Жыл бұрын

    Thanks! 🙂

  • @timow6929
    @timow692926 күн бұрын

    Had a hard time following the shader part. It was too fast and the explanations quite shallow. Otherwise good video.

  • @SunnyValleyStudio

    @SunnyValleyStudio

    24 күн бұрын

    I really appreciate the feedback 👍

  • @joaocarlosp.p.6550
    @joaocarlosp.p.655010 ай бұрын

    Sample doesn't have a Grid!

  • @SunnyValleyStudio

    @SunnyValleyStudio

    9 ай бұрын

    What do you mean? We create the grid in the tutorial

  • @benzeji9686

    @benzeji9686

    8 ай бұрын

    he's talking about the shader.@@SunnyValleyStudio

  • @osan99999

    @osan99999

    Ай бұрын

    0:55 package manager->shader graph>samples>import

  • @bishopjackson2264

    @bishopjackson2264

    4 күн бұрын

    @@SunnyValleyStudio In the recent starter package, there is no samples folder.