How To Make 2D Curved Terrain In Godot

in this video we're going to be having a look at how you can create 2d curved terrain inside of goodell we'll have a look at close shapes open shapes and how to set up the materials for them we'll also have a look at how you can add collision shapes and that's how you can snap objects to the terrain sounds good then let's get started so godot doesn't come with this functionality of default but thanks to robert guy and ryan we have the awesome smart shape 2d add-on which we'll be using today let's start with installing the plugin so inside of godot let's go to the asset library and then let's search for smart shape and then let's click on this plugin right here let's hit download and once it's finished downloading let's click install and again once it's finished installing you will see that i created the folder called add-ons with within it a folder for the plugin now the add-on is installed but it's not enabled yet so let's go to project project settings and then go to plugins and enable the smart shape to the add-on now everything is properly set up let's start with creating a closed shape so let's go and add a node to the scene and going to node2d and scroll down and here you will see a couple of new nodes you also see some nodes and resources that are prefixes rm shape these are old nodes and are deprecated so don't use them what we need is under ssd shape base and we will start with a closed shape hit create and you will see that a couple of new options appeared in the toolbar the first one is for creating points so let's use that to create our basic shape it has to be in clockwise order otherwise this gets kind of messy you can remove points by right clicking and once i have my basic shape down i prefer to switch to the second tool which lets you select points and move them around it still also lets you subdivide existing lines so now we have a basic shape down let's add some background texture for the background i have this basic 16 by 16 round square and you can add a pattern to it if you want so once you've dragged the texture into your project let's select it and then go to the import tab and then go to presets let's select 2d pixel because it's a pixel architecture and then one important thing we need to set is the repeat let's set that to the enabled because we want to repeat the texture over the entire shape let's hit re-import and then go into presets and let's set it as a default for the texture so we don't have to do this again so now let's select our shape and then in the inspector let's go to shape materials and here you will see all the fill textures let's select fill textures and then change the size to one here you can drag in your background sprite so and then you might need to drag around one of the points for it to update but here we go now we have a background now let's add textures to the edges i really love how they introduce this in the wiki like texturing the edges this is where the rubber hits the road the real meat of the tool um yeah they're not wrong but the sport is also kind of difficult so pay attention to what i do so with our shape selected let's go into edge meta materials so open it up and change the size to one in this slot we need to select an edge meta material and you'll see this massive list of resources this is currently a bug with godot itself but let's search for there we go ss3 material edge metadata let's open it up and you'll see a bunch of new properties first we need to set an edge material and then we need to scroll all the way down again and let's select ssud material edge there we go if you go into this resource you'll see that there now is a slot for the textures for the edge texture i'm going to use this 16 by 16 grass style i made now let's go into textures and increase it to 1 and i will drag in the grass texture and here we go now we have our edge and now let's change the underside of the shape to dirt so once again for this i'm going to use a 16 by 16 texture but you might be tempted to dry it upside down because it's going on the underside of the shape but for all textures on the edges they have to be facing upwards in the edge meta materials let's increase its size to 2 and let's close the first entry and now we need to go through the entire process of selecting an edge metadata and an edge material again now let's add the dirt texture by dragging it into the texture slot as you'll see the dirt now overlaps the grass this is because we need to set up some constraints for when to show the dirt and when to show the grass if we click on the grass meta material you will see that there is a normal range resource we click on this you will see that there is a begin and the distance value but first let's talk about what a normal range actually is easiest way to think of an edge normal is as a line perpendicular to the edge so this edge right now has an angle of zero degrees and if we rotate it it will now have an angle of about 55 degrees or so and if we rotate again then it has an angle of about 90 degrees and so on so what we want for our shape is that the grass starts at about this angle and the same on the other side if we now put these arrows inside of the degree circle you'll see that we need about this range which starts at 45 degrees and ends at 135 degrees so now let's set this in the editor in the grass materials normal range resource let's set the begin to 45 degrees like on the degree circle and you can drag around the distance to see its update so the distance from 45 degrees to 135 is 90 degrees so let's set that to 90. so now we have the grass on top you also see that the dirt continues behind the grass so this is something you might want like i kind of want but in case you don't want it you can go into the dirt material and then set the begin to 135 and we want the range to be about here which is to 270. and now you can see that it stops when the cross starts but i kind of like the look when it just continues behind the grass so let's set the values back to zero so now that we've finally finished the material for now let's have a look at some more ways you can manipulate your shape let's finally add some curves so select the second tool in the toolbar and then hold shift and drag on a point you'll see that it gets kind of messed up but if we drag it the other way around there we go we have some nice curves you can reset the curves by right clicking and you can also manipulate the bezier handles individually feel free to mess around with this for a bit and create a shape that you like if you want to learn about more shortcuts you can hover over the tools and in the tooltips you will see all the shortcuts but i want to teach you about one more shortcut that doesn't seem to be mentioned in the tooltips we want to create a new shape with the same materials you can hold alt and shift while having one of the first tools selected let's hold alt and shift and let's click to add a point now let's release alt and shift and you can add the second point and create a new shape but now for some reason the grass renders behind the dirt so to fix that let's go into the shape material and etch mana materials and let's go to the grass let's scroll down to the z index and increase that to a higher number so we're sure that the graphs will always render in front of the dirt now that we've finished that let's now have a look at how you can create open shapes first let's save our materials so with the shape selected let's go into the edge meta materials and let's click on the grass material and scroll all the way down and then let's hit save i'm going to create a new folder called materials and then let's just name it grass and now as you can see we have saved the material as a separate resource and then let's also save the dirt material an open shape works pretty much the same as a closed shape in the shape material let's go into the edge meta materials and let's increase the size to two and then let's just drag in the grass material and the dirt material and now let's reselect our open shape to make the options in the toolbar reappear let's add some points to create the open shape it has to be in left to right order otherwise it doesn't work properly it basically works the same as the closed shape so feel free to mess around with this for a bit now that we know how open and close shapes work let's have a look at how we can improve the materials now we have a look at the closed shapes you can see that the textures get kind of warped at 90 degree corners to make this look better you can add corner textures like this one it has to be facing up and to the right then let's go into the dirt material and then into the edge material and let's search for textures corner outer let's open it up and increase its size to 1. let's drag in the corner texture as you can see it already looks a lot better on some places it might not show up so you might have to move the points a little it has to be about a 90 degree angle and you can do the same for the inside of a 90 degree corner with a texture like this and it also has to be facing up and to the right here you can see that the dirt texture goes behind the grass and gets kind of warped on this side let's go into the textures corner inner and increase it and let's drag in the inner corner and there we go that looks so much better now let's have a look at how we can make the edges of the grass material a little bit more interesting for that we can use taper textures these are the textures that will show up on the left and right end of a material to add these let's go into the grass material and then the edge material and let's go to textures taper left and let's increase the size to 1. let's drag in the left taper texture and for attackers taper right let's also drag in the right taper texture now we'll see that it creates a bit of a curved ending edge it doesn't show up on the other side for some reason but if we subdivide the top edge you'll see that it does show up so the tapered edges might look a little bit weird sometimes you might need to tweak the points and the curvature a little bit to make it look better this depends on how much room there is for the texture to stretch so tapered edges might not be all that useful for close shapes but they are for open shapes to make the ends look a little bit nicer but the problem we have right now is that the dirt texture goes behind the grass and makes the edge square to fix that without losing the other material let's duplicate the dirt material and let's call it something like dirt with normal range let's go into the material and then oops into the normal range and then we need to set the begin and distance of the normal range again which if you remember was 135 and 270 and then let's go into our open shape and let's replace the dirt material with the new one and now as you can see it created a nicely shaped ending edge that looks pretty good nice so before we move on to collision shapes let's have a look at how you can change the material of a specific edge for that we can use the edge property tool in the toolbar if you then hover over an edge and right click on it a menu will appear if you click material overwrite you can enable and disable the rendering of an edge and you can also set a custom material so you might think that you can now select the dirt or grass materials but it doesn't really work that way for that we need to save an edge material i know this is not an edge material this is an edge meta material the edge material is this resource right here so if we want to save the grass edge material we can go into its edge material and in this menu scroll all the way down to the bottom and let's hit save but it complains that we need to make it unique first so let's go through the process again let's make it unique and then again then let's save it and then let's let you save it and in the materials let's call it grass edge material which is going to be kind of confusing so you might want to make a separate folder for this but i'm lazy and then once we select the edge property tool again and select your edge that we want to change let's click on set material and we can select the grass edge material and there we go it now renders the custom material on this specific edge so now that you've mastered creating the materials let's tackle the most difficult part of this entire process creating the collision shape you press this button and that's about it if you show the collision shape you'll see that it creates a nice collision polygon but the only thing we might need to tweak is the collision size if we zoom in on this edge right here you can see that the collision shape doesn't properly follow the edges with the shape selected let's go into collision and let's lower the size value and there you go now you can see that the collision polygon follows the shape a lot better so now that our collision shape is finished let's move on to the last topic which is snapping objects to the terrain let's first hide collision shape again and for this we need to add a special note let's go under noted and scroll down to ssd shape anchor and let's add it to the scene in the nodes properties let's assign a shape path which will be or shape and then you will see that it snaps to the first point in the smart shape and to attach anything to the anchor we can just make it a child of it so if we drag in the sprite you'll see that it will automatically rotate to the rotation of the anchor then let's select for sprite and move it a little closer to the anchor and then let's select our anchor again and let's change the shape points index this is the point in the shape that the anchor snaps to and the shape offset is between the selected point and the next point so that if we move this around you'll see that it moves between the two points some increases all the way so it shows on top then we can tweak it a little so it fits nicely on top of the grass and there you go now it can slide nicely over the grass so you've made it to the end i am so proud of you now you can use this knowledge to create the next hillclimb racing game or i don't know you can create a sonic fan game so if you have any questions about this plugin or if you've created anything cool with it be sure to join the smart shape to the discord server here you can share the things you make ask questions and talk to the developers i hope you enjoyed this tutorial as much as i enjoyed making it and i will see you next time bye

Channel: LucyLavend

Views: 10,578

Keywords: Godot, SmartShape2D, RMSmartShape, Sprite shape, 2d terrain, Godot tutorial, tutorial, gamedev, curved terrain, tilemap, godot engine, game development, godot game engine, unity

Id: 45PldDNCQhw

Length: 20min 25sec (1225 seconds)

Published: Tue Mar 16 2021

Reddit Comments

[u/The_Black_Cat_19]

good tutorial

Thx for making it

[u/golddotasksquestions]

Thank you, this is really well explained and very helpful!

[u/sc0tr]

Great tutorial for a really nice plug in! Can't wait to see all the creative ways people use it

[u/panamluke]

This plugin is just brilliant