SUBWAY SURFER Curved World Shader Graph (Updated 2023)

let's learn how to make a curved World Shader graph like Subway Surfers I've gotten a couple requests to make this and I've spent a week or two trying to figure this out and I will just say that this is by far the simplest Shader graph I've personally seen for this effect so if that's your jam let's begin but if you decide that you don't want to make this Shader and you just want something that works out of the box there's a really great asset on the unity asset store called curved worlds where you can do all kinds of crazy stuff it's really cool and pretty reasonably priced so I will put a link in the description below if you want to check that out but onward we go taking a look at Subway Surfers gameplay let's make two important observations number one they have this cool globe-like effect similar to Animal Crossing which I covered how to do last week but there's something interesting here it's not only bending like a globe backward but it's also bending to the side as well so that the player has a better view of what's coming up literally around the bend we now know that we need two things to happen to get this right the farther away the road is from the player curve the world backward into the side in other words the world needs to curve exponentially depending on the player's position key word here being exponential looking at the finished version I'm going to make the values extreme just so you can see the effect happening here if we look at it from the side you can see that the shape we're making is actually a parabola and it changes depending on where the camera is but if we look at it from the top we can also see that we're creating another Parabola so we're creating a 3D shape made from two parabolas fun fact this shape is called a paraboloid but I digress starting from scratch I'm going to be creating a new urp project we're going to be making this effect using Shader graph which is only available in urp or hdrp I am now going to add in a plane zero out its coordinates and I'm going to scale it up a bit and so that it kind of looks like a road now that we have that let's create our Shader I'm going to right click go to create Shader graph urp and then lit Shader graph all lit means is that we want our Shader to be affected by light I'm going to name it Subway Surfer double click and open up Shader graph if you double click again you can maximize this tab to get a much better View since we want this effect to be more intense the farther away the plane and the objects are from the player we need to know where the player is in the world first the easiest way to do this in this scenario is to find the camera's position the camera will have a script on it that will be following the player like all third person games have so this is essentially just a way to calculate where the player is so we're going to add in a position node and a camera node the position node provides you with the position of the object that the Shader is on we can also pull the position of the camera with the camera node and since we want to calculate the distance between the object and the camera we're going to add in a subtract node to find that value we are then going to subtract the camera position from the world position using the subtract node the output here is a vector 3 value so an x y and a z but since we only want this effect to happen when the player is moving from the front or to the back not when moving side to side we need to extract only the Z value from this equation we don't want the curvature amount to change if the player moves from the left or to the right we only care if the player is changing their value along the Z axis to do this we're going to extract the Z value from this Vector 3 using a split node it's a little confusing because the values say rgba but you can also use this when it comes to vectors 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 exponential effect 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 from earlier but what if we want to be able to control the strength of the curvature either from front to back or from side to side and what if we want the side to side curvature to be stronger in the front to back curvature well in that case we need to add a vector 3 node since I want to be able to control these values from the inspector I'm going to create two float nodes and turn them into properties one is going to be sideways strength and the other is going to be backward strength and we'll plug sideways strength into the X slot and the backward strength into the Y slot and we're going to leave the Z value at 0 here since that is going to remain unchanged now that I have that I need to multiply my new values by the power node so that we get that exponential effect it's also a good idea when working with Shader graph to constantly be thinking about what your final output is and what you're looking for what we're really doing with this is changing the position of a mesh so we're ultimately looking for a vector 3 value now that we have our formula our new values we can create an add node add in those values and plug back in the position of the object so that as the position of the camera and player changes the Shader is updating the position of the mesh the last thing to do before we plug this into our final output node is add in a transform node the original position node is using World space which is what we want we want to access the position information of the object in regards to the entire scene not to just itself however the final output node only accepts Vector 3 values in object space so we just have to convert it at the end 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 to add a Shader to this material I need to find the Shader drop down at the very top here the default is the universal render pipeline but if I click into the drop down I can see a section for Shader graph Shader which the Shader we just created is under with that done I can drag and drop my new material onto my plane now if we click on our object we can see the properties that we created I defaulted the float values to zero just so that I was only messing around with the values inside of the inspector now it doesn't take a lot to create a big effect so we're working with teeny tiny values here like .001 type values believe it or not this is the bulk of our work but what if we want to apply this to 3D objects like a bus or walls and what if we want to change the appearance of our materials going back into Shader graph let's quickly create a way for us to add textures to our materials inside Shader graph if we want to add a texture we need to add a sample texture to denode and plug it into our base color you could plug a texture in here and call it a day but I'm going to add a 2d texture asset node turn this into a property and then plug it into the texture slot here so that I can add textures from the inspector now if we want 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 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 ideally I want these values to be the same so the scale is always the same therefore I'm going to add a vector 2 node here but control it with a single value plugging in a float value here and then turning it into a property so that I can control it from the inspector also make sure that value on the vector 2 is a 1 instead of 0 or else you won't get any tiling now heading back over to our scene view I can now click on our Shader plug in any texture and start messing around with a tiling value to get the right look I created this really simple Road texture so I'm going to plug that in now beautiful now if I want to create the walls and the buses I might have a problem the plane looks great but if I add a cube object here and scale it up to kind of look like a wall you can see that it's not curving exponentially it is changing but not in the way that we want it to and that is because the default Cube object in unity only has eight vertices so Unity is accounting only for those eight vertices but what about this entire middle section in between those there's nothing there for Unity to change so I went into blender real quick and made a cube and added a bunch of loop cuts and imported back into Unity with those side by side with the same Shader you can now see that this object bends with the world how it's supposed to just thought that was a good call out to make if you are running into that problem you might just need more vertices and just keep in mind that every object in the scene will need this Shader attached or the objects will float and look odd I will be posting a screenshot of the Shader on my blog and I will also post the entire project file on my patreon as well and with a little Razzle Dazzle and some simple materials we have a seat hopefully this was helpful and if you like this you might also like my Animal Crossing Shader video hope to see you in the next one foreign

Channel: Rigor Mortis Tortoise

Views: 7,613

Keywords: subway surfers, shader, shader graph, shader graph tutorial, urp, hdrp, curved world unity, curved world shader, shader tutorial

Id: BPuW5EUORA4

Length: 9min 26sec (566 seconds)

Published: Wed Aug 16 2023