How to use SmartShape2D for Godot (Also: Post Processing and Asset Creation in Aseprite)

hello and welcome to another godot tutorial this time about a plugin called smart shape 2d in the beginning of this video i show you the asset creation process inside of esserbrite i start with the central fill texture that will be used to fill our shapes inside smart shape 2d i created a new 32x32 pixel image and set the tile mode to both axes to make the texture more interesting i used a slightly darker brownish tone to paint some roots in the next step i created a new layer and used the contour tool the shortcut is d to draw some shapes and those really help to break up the shape even more and make the texture more interesting then i change the blend mode and the opacity in the layer settings by double clicking the layer this is another step to make the texture more interesting i always try to zoom out and to see if the patterns are too obvious or not the next step was to blend in the roots a little bit better so i used the background color with a lower opacity brush and blended in all those root ends i wanted to add little stones to the earth texture so i created a new layer choose a medium gray and again using the contour tool just threw in some random shapes and also added a little bit of shadow and highlights to each of them to give those stones a little bit more variation i used the hue adjustment and made some of them lighter and some darker after finishing the fill texture i want to create a new image where i could store all the finished files so i created a new file with 128 by 128 pixels and pasted the fill texture in there back to the original file i set the tiling mode to x-axis only flattened all the visible layers and moved them down a bit so i have enough space to create the top texture to start out with the top texture i selected the medium green color and started painting the layer of grass that i had in my mind i tried to blend in the bottom of this texture into the fill texture so it has a nice gradient to it now i copy this and paste it also into the bigger file and in the next step we are going to create the left and right edges of this texture so i just remove the center of the original top texture and blend it in again i copy and paste this into the file put it on the right side select the other half and put this on the left side to create the bottom texture i basically repeat all the process of the top texture and started painting random stones to represent the bottom of the texture and i also blend it in with the original fill texture and then just copy this finished texture into the big file and just like the last time to create the left and right edges i remove the central part copy and paste it into the big file move it to the right side select the other half move to the left side and we have our bottom texture ready the next texture will wrap all around the smart shape so i create a very simple edge and don't go too crazy on this one i want to create an interesting blend effect into the fill texture but the texture itself won't have such a big edge i copy it into the big file when i'm done and now all that's left to do is the annoying task of saving all the single elements out into files i use the png format for that to keep the transparency i'll show you all the needed files in a second but before we continue to that i wanted to make the fill texture a little bit more interesting because on the original one you can quickly see a pattern i doubled the original texture size and just removed a couple of stones here and there copy and pasted some stones to different parts of the image to just break up the pattern a little bit here's an overview about all the files that i exported from asset pride and will be using in the following example the next step will be to create a new godot project and to head over to the official github page of smartshape2d i'll put a link in the description of this video follow the installation steps on the github page to install a plugin and inside godot go into the settings and activate the plugin now let's create a new scene 2d and before continuing i want to make sure that the import settings of my images are correct and that repeat is enabled and i reimport the images so let's add a smart shape to the node the name of the node is ss2d shape closed the plugin comes with a lot of different resources that can be confusing at times so let me guide you through this maze my first step is to set up the fill texture i used the fill texture that i exported from essepride and drag and drop it into the slot as you can see you see nothing to see the shape we have to add some points you can do that with the menu on the top click to add points and start with a simple shape you can press escape to cancel this process and then use the blue arrow tool at the top to add more points at any time as you can see the shape is filled with the fill texture the next step is to add edges around the shape to do that go inside the edge meter materials array add an element add an ss to the material edge metadata resource to the slot open the resource go into the edge material property add an ss2d material edge resource to this slot open that up increase the array size of textures and drag and drop the texture into this slot the plugin can be confusing at first but you'll get used to it to update the view move one of the edges and you'll see the changed edge in the next step i'll add the top texture so i increase the array size of the meta materials add another ss2d material edge meter data add another ss2d material edge and inside there add a texture a table left texture and a taper right texture after that drag and drop the files into the corresponding slots now move one of the points again to see the updated shape the edge is going all around the shape and that's not what i want to change that behavior we go into the normal range resource and change the parameters there i created this graphic to help you understand how the angles work and how to use them to get the effect you want and how to apply the edge at the area you need i changed the values inside the normal range resource and you can see the grass is now correctly placed on top of the shape you also saw that i just placed another point at the corner to make the taper edge correctly appear sometimes that can be a little tricky if you look closely the edge appears to be too low on the shape we can change that by using the offset now it's time to add the bottom texture we just repeat the same process so add a metadata resource add a edge resource and then set up the texture the texture taper left and the texture taper right then i just drag and drop the image files that i exported from assepride into the corresponding slots so everything's left to do on this edge is to set up the normal resource after moving a point i see the updated version of the shape i'm happy with the resulting shape so let's continue moving the points holding down the alt key will snap the cursor to the closest edge and that'll help me to quickly create an interesting shape you can see how the setup edges move accordingly to the shape and like this you can really easily create interesting objects for your game sometimes it can happen that an edge is a little bit glitched out you can see it there on the left this is easily fixed by moving the point a little bit another interesting option in smart shape 2d is the option to hold down shift and click and drag on a point to create bezier curves that way it's easy to create round shapes and organic objects this is one of the features that i really like about smart shape 2d and it's almost impossible to achieve this with the tools that come with godot it can happen that an edge is not rendered correctly to fix this just move the point around a little bit another great feature of the plugin is this button over here by clicking you create a static body 2d and the collision polygon 2d did get its information from the smart shape i want to show you my process how i continue from this point i make a screenshot of the smart shape put it into sprite removing the background is really easy by pressing w and using the magit went and delete all the selection i'll fast forward the process from here what i do is i create a set of props that matches the smart shape really well to make the smart shape more interesting asaproid is really perfect for this and using the spray tool is super helpful in making quick little shapes i add some shadow and highlights to the bushes and just place them so i can create more props now i'm going for some really quick trees also not super complicated and really quick props just to show you the process and how i usually do that for smart shape i try to stay in the same color scheme as the smart shape to really make the props perfectly fitted for this purpose using the fill textures colors i create some stones those will help to make the game object more interesting inside godot i continue making some random objects to spice up the example and yeah not much to tell about this here i don't have a special plan for that i just add some more objects the more objects i have the more variety i can later add to the whole scene inside godot so i'll add some more of those funny stones while painting those elements i try to stay in this 16 by 16 grid from asset pride that will later help me to set up everything in godot in an easy way elements like this one can also be used to make the bottom of the smart shape more interesting i also want to add a little bit of grass so i create some small variations of this element i also try to stay inside the grid so it will be easy to set it up now all that's left to do for this sprite sheet is to move all the elements into the grid positions so it makes sense you will see in a moment why i place those elements like this also i found it interesting to have more of these root objects for the bottom of the smart shape while trying to make objects interesting i still don't want to have super unique shapes to every object otherwise it will be quickly recognizable as an object that is used over and over again i'm done here so i export the texture and go back to godot i'll add a tile map node and create a new tile set i import the image from supride and then i start setting up atlases that's why it was important to stay inside a certain grid i'll set up the grid over here and also name and set up the selected tile the name is not super important but when you have a lot of different atlases it can be confusing i repeat the process for all the objects in the sprite sheet all that's left to do is to set up a small cell size for the grid so i can freely place my objects in the scene it's very useful here to flip and rotate the tiles adding in more of those objects can really make the smart shape much more interesting for this layer i want the objects to be behind the smart shape so i set up the z index accordingly i try to be creative in the use of the tiles i have and some of those really work well on the bottom of the smart shape i use some of the more unique tiles as an eye catcher in the scene i want to place some tiles in front of the smart shape so i duplicate the tile map and change the z index so the time map is in front of the smart shape now i select everything on the tile map and press delete now i can place some objects in front of the smart shape i'm happy with what i got so far so i want to show you how to use more than one smart shape object in your scene what i like to do is to duplicate the shape move it a little bit so i can see what's going on and then replace the point array resource like this the points are quickly erased and you can place new points with all the same resources and materials that you have already set up there's one important thing about the collision as you can see the created collision polygon 2d shape does not perfectly match the visual shape to improve that play around with the size parameter inside the collision and as you can see now it matches the visual shape much better with all the steps that i showed you so far you should have a basic understanding of smart shape 2d but i don't want to stop the video now i want to try to improve the scene to make it more aesthetically pleasing i started creating a very simple background in essepride to make the scene a bit more interesting you can see i really like the spray brush it's really cool for forests and stuff like that so i import this as a backdrop to the scene and i also add some objects to the other smart shape 2d my next steps from here include adding a canvas modulate node and there i choose a color that's a little bit darker than white to bring down the overall colors in the scene you can see how quickly it changes the overall look of the scene and the mood and i settled for some purplish tone in the next step i want to add a world environment node inside here i add a new environment and the first step in this case is to change the mode to canvas otherwise it won't work at all in there i'll enable the adjustments and add a gradient texture to the color correction with this i have a lot more control about the colors in the scene i change the gradient so it goes from cool purplish tones to warmer tones in the lights in the next step i enable the glow effect and i also enable all the levels from 1 to 5. after playing around a bit with the settings and changing it from soft light to screen i had the feeling i needed some glowing object inside my scene to achieve that i created a simple glowing texture inside as a pride and imported that back into the scene set up a new canvas item material set the blend mode to add and place the texture at a point where it somehow makes sense i also changed the modulate color and i also needed to increase the z-index i duplicated the texture so it's a bit more intense in the center i duplicated those sprites and moved them over to the other stone now back in the world environment node it's much more fun playing around with the parameters inside the glow i want to add some animated objects to the scene so i create a simple interesting texture for a particle system if you want to learn more about the particle 2d node inside godot be sure to also check out the other video that i made especially about that topic when i was happy with the effect i duplicated it for all the trees it would look much more interesting if the trees would move too but that's something for another tutorial i wanted to make the light sources more interesting so i added a small script to them that changes the size using a open simplex noise i had to play around a little bit until i had an effect i was happy with but in the end i think it really improves the overall scene i also wanted to add a foreground element so inside asapride i made a quick texture of some clouds that were repeatable on the x-axis i exported it and back inside godot i added a parallax background for the background and for the clouds if this topic is interesting i might make another video all about parallax layers because that's sometimes the science on its own all that was left to do is to add a camera and an animation player i animated the position of the camera using the animation player and here's the result of the final scene i hope you enjoyed the video and if you did leave a like subscribe and hit the bell you know the drill if you enjoy the content on this channel and you're on twitter follow me there to get more updates and also be part of the process of developing new ideas for videos so see you there have a great time enjoy developing your games and see you the next time bye

Channel: picster

Views: 29,157

Rating: 4.9867401 out of 5

Keywords: tutorial, game development, godot engine, godot, smart shape 2d, smartshape2d, plugin, addon, gamedev, pixelart, aseprite, environment, post process, glow

Id: r-pd2yuNPvA

Length: 18min 44sec (1124 seconds)

Published: Thu Feb 18 2021

Reddit Comments

[u/RPicster]

Hey fellow Devs!
I started using the plugin a while ago, was brought to my attention by the fantastic u/guyunger . I am now actively using it in the development of Bottomless and FRANZ FURY and I have to say... it's such a fantastic addition to my toolset.

I am also active in the SmartShape2D discord and was thinking about doing a small introduction tutorial to "spread the word" a bit.

It's absolutely worth checking out:

https://github.com/SirRamEsq/SmartShape2D

​

And you can find my example scene that I made in the video here:

https://github.com/RPicster/Godot-SmartShape2D-Example

​

By the way, the assets that I created for this video are also inside my repository, so just in case you need some pixelart environment thingies, grab them and don't look back! 🤘

​

Have a good one!

Raffa

[u/golddotasksquestions]

Watching you create your assets from scratch until the final scene arrangement is truly satisfying! Thank you for sharing!

[u/HardcoreMuse]

Thoroughly enjoyed this, and really enjoy your art style. Subscribed!

[u/foedis]

Super cool!