Animal Crossing Curved World Shader Unity (UPDATED 2023)

let's learn how to make a curved Shader graph like Animal Crossing in unity if we take a look at animal crossings gameplay I want to make a really important call out here start to notice exactly where the world starts to have that curved World effect and you will notice that it's really only when the player goes from front to back or back to front but the world does not change however if you move from left to right so the world of Animal Crossing is not as perfectly spherical as I originally thought it was I'm sure many others so if we want to recreate this effect we really have to dive into exactly how they're doing it so before we dive into the Shader graph I figured the best way to do this would be to actually show you what effect that we are creating so I have my plane right here my game plane and the effect that we're going to be creating essentially instead of the player walking around here we want it to be curved so when they go from front to back we're just going to do something like this we turn it that way this is the effect that we are going to be creating but the important part here is that the player in the camera are always going to be at the Apex of this effect so as the player moves from front to back we're gonna see an effect something like this happening depending on which way the player is moving so as the player moves we're gonna see something kind of like this almost like a curvy treadmill type effect but we have to know in the world space where the camera is since this is going to be like a typical game the camera is going to be following the player so we can access the position of the camera in regards to the world and something else I want to mention too is that when we're creating this shape this shape is a parabola and the shape that we want to create is a negative Parabola so instead of x squared we have negative x squared and depending on where the camera is will determine where the world starts to bend okay okay let's get into it here's the scene I created before making the video and as you can see it's like a big cylinder not really a sphere and as I change my position along the z-axis the vertex positions change with me and that's all we're really doing here is transforming the vertex positions based on the position of the camera but let's start from scratch I'm going to create a new scene and name it curved world I should also mention that we're going to be using Shader graph which is only available in urp or hdrp so if you don't know what that means I'll put a link on the screen for you to check out but in our new scene I am going to add in a plane zero out its coordinates and I'm going to scale it up a bit now that we have that let's create our Shader I'm going to right click go to create new Shader graph urp and then lit and all lit means is that we want our Shader to be affected by light I'm going to name mine curved World double click and let's open up Shader graph I also want to mention that this Shader is based on a Shader by the Creator not slot which I will link his video below it's a great video and it dives into some more advanced concepts with this Shader the reason I'm even making this video is one the interface is a bit different from a few years ago so this is a bit more up to date two I want to dive into how each of the nodes actually work and why we're setting it up the way that it is and three I want to show you how to actually go about setting up a very similar environment to Animal Crossing so the first thing we need to do is calculate the position of the camera in regards to the position of the plane so we're going to add in a position node and a camera node keep in mind the camera will have a script on it that will be following the player so this is almost a way to calculate where the player is in the world we are then going to subtract the camera position from the world position of the plane using a subtract node and the subtract node takes in two values and it is a minus B and the output of this is a vector 3 value so an x y and a z value but since we only want this effect to happen when the player is moving to the front or to the back not when moving side to side we only need to extract the Z value from this equation we only care if Z value is changing to do this we're going to add in a split node and it's a little confusing because the values here say rgba but you can also use this node when it comes to vectors as well and in the case of vectors these values are actually x y z and W in this case b is equal to Z and from here we want to alter the Z value this is where our Parabola comes in we're going to plug our Z value into a power node power as in x to the power of 2. if we remember our Parabola formula for from earlier but what if we want to change the scale of the parabola what if we want to change how curvy the world is well in our math formula that would look something like this we would multiply x squared by a number to change the shape of the parabola so that's exactly what we need to do in our graph we need to add a multiply node and connect a float value into that multiply node but before I get ahead of myself I think it's important to keep our eyes on the prize here the prize being an altered Vector 3 value we still need to keep track of what exactly our formula is doing and right now we just have an altered Z value But ultimately we need an entire set of XYZ values so let's add in a vector 3 node and plug our new value in now even though we grabbed our Z value out we need to plug this into the Y slot here because we want this effect to happen over the y-axis just like a parabola now let's multiply this value by a float so that we can control the strength of the curve I'm going to add in a float node and plug it into the multiply node here I'd recommend leaving the default value at 0 and just change it in the inspector so you can see the results in real time but if you do decide to set a default value keep in mind we're talking teeny tiny numbers here like .001 type values and if you set a value in your preview shape disappears it is because that number is too high and let's also make sure that we turn this float value into a property so that we can see it in the inspector so now we have our y value set up and we're ready to go but we need to make the connection between our new y value and how that actually translates to the object that has the material on it in this case our plane our ultimate goal is to have a new Vector 3 value and right now even though we've plugged our y value into a vector 3 node x and z are defaulting to zero and not taking in the relevant Vector information from the scene so we need to add the plane's position its Vector 3 value to this new Vector 3 value that we've just created so we're going to add and add node plug in our Vector 3 value and plug in the position node which will yield us a new Vector 3. the last thing we need to do before we plug this into the final output node is add a transform node the original position node is using World space which is what we want we want to access the vertex information of the plane in regards to the entire scene not to just itself however the final output node only accepts Vector 3 values in object's face so we just have to convert it at the end we can finally plug in our add node into our transform node make sure that it's converting the space from World space to object space and then plug it into the position slot in the output node now let's switch back to the editor and apply this to our plane to apply a Shader to an object we first have to create a new material so I'm going to create a new material and name it curvy to add a Shader to this material I need to find the Shader drop down at the very top here but if I click into the drop down I can see a section here for Shader graph shaders which the Shader we just created is under with that done I can drag and drop my new material onto my plane now we can play around with the strength a little bit here and notice these are very small numbers and I also have the ability to bend the plane upwards if the number is positive and downwards if the number is negative you may want to keep it this way but if you intend to only have this effect facing downwards we can go back into our shaded graph and add a negate node which will just turn any positive number negative it's not totally necessary but it can be annoying to type in that negative sign over and over again so it is a Time Saver now let's add a way for you to add a texture like the green grass in Animal Crossing I've already downloaded the texture from online but we're going to add a way in our Shader to title the pattern and be able to change it from the inspector inside Shader graph if we want to add a texture we need to add a sample texture to the node and plug it into the base color you could plug a texture in here and call it a day but I'm going to add a 2d texture acid node turn it into a property and then plug it into the texture slot here just so I can add textures from the inspector now to tile our texture we need to add a tiling and offset node and plug this into the UV slot on our sample texture 2D node the default for tiling is one and one which is no tiling same thing here you could set some default values here and call it a day but I want to be able to see how much tiling is needed via the inspector now the tiling slot takes two values in X and A Y but if I change one and not the other I'm going to get some weird stretching happening so I ideally want these values to be the same so the scale is always the same therefore I'm going to plug in a float value here and turn it into a property so that I can control it from the inspector now heading back over to our scene view I can now click on our Shader plug in the Animal Crossing texture that I downloaded and start messing around with the tiling value to get the right look now this is the bulk of our work right here but if you want your world to look like Animal Crossing you have to do one more thing to the objects in your scene since the Shader we just created is essentially vertex displacement if you don't add this Shader to the objects in your scene as well as your ground floor the objects in your scene will look like they're floating or syncing depending on your Viewpoint there's a fix for that though we simply have to create new materials for the objects that we want to be in our scene these new materials need to have the new Shader on them and luckily since we have the texture broken out it's not too much of a lift after we've done that we just need to make sure that the curve strength is the same number as what's on our plane and we're good to go thanks for watching and I'll see you in the next one foreign [Music]

Channel: Rigor Mortis Tortoise

Views: 3,625

Keywords: unity, unity3d, shader, shader graph unity, shader graph, curve shader, animal crossing, animal crossing unity, unity tutorial, gamedev, devlog, game development

Id: GF0_1-8NWBs

Length: 11min 46sec (706 seconds)

Published: Thu Jul 20 2023