Introduction to Unity Sprite Shapes
Using Unity’s Sprite Shapes, making 2D environments has never been easier. Best of all, you can get get started with just a couple of sprites! By Ajay Venkat.
Creating the Ground Shape Using the Tools
Now that you have played around with the tools a bit, it’s time to create the ground for your game. You will create the ground shown below:
Each of the nodes serve an important purpose; for example, you may be wondering why node 5 may be of any importance.
To modify the location of a node, select the node and change the point position attribute in the Sprite Shape Controller.
Here is the purpose and location of each node:
- This is a corner node; therefore, it is a linear point, and is placed at
(X: -2, Y: 0.4). - This is a linking node; its sole purpose is to satisfy the conditions for a corner. Since node 3 is a mirrored tangent node there has to be a linear point between node 1 and node 3 to create a corner at node 1. This node is a linear node and is at
(X: -0.8, Y: 0.4). - Is a mirrored tangent node, which creates a slight downward curve. It is situated at
(X: 0.095, Y: 0.4). - Another mirrored tangent node, which creates a smooth curve from node 3. It is located at
(X: 2, Y: -0.6). - Is a linking node. It is a linear node and it is positioned at
(X: 4.13, Y: -0.6). - Another corner node. It is a linear node and is located at
(X: 5, Y: -0.6). - Is a linear node. It can be found at
(X: 5, Y: -2). - This is another corner. You know how it goes — it’s a linear node that is at
(X: -2, Y: -2).
Well done! You just set up your very first Sprite Shape from a profile to a good looking GameObject. It’s time to get some characters in the game. :]
Applying Collisions to Sprite Shape
For the character to interact with the Sprite Shape, it has to have a collider. To do this, add an Edge Collider 2D to the Ground Object. You may notice that the collider doesn’t exactly fit the shape of the Ground Object however there are a few more options in the Sprite Shape Controller now. One of these options is the offset; play with this value to make the collider fit the outline of the Ground Object.
Once you add an Edge Collider 2D, there are a few more options you can modify within the Sprite Shape Controller.
- Update Collider: When you modify the shape of a Sprite Shape and you want to update the collider, deselect it and select it again.
- Detail: Modifies the level of detail of the collider; the higher the detail the more smooth the collider (increasing the detail may decrease performance).
- Offset: Offsets the collider’s edges from the center.
It is time to add the hero of your game now!
Drag-and-drop the Player from RW/Prefabs into the scene. Ensure that the player is centered in the Camera‘s view and is also standing on the Ground Object. Select the Player GameObject from the Hierarchy and drag it into the Player slot in Camera Focus on Main Camera.
Press play and you can move and jump around on your ground. If you couldn’t tell from the amazing art, the player is a programmer who is currently in the middle of a coding session and hasn’t taken a break for the last two days. :]
Finishing up the Scene
Create a new Sprite Shape GameObject called Middle Ground Object and assign the Ground profile, move the GameObject to the right of the Ground Object leaving a small gap.
Form a pentagonal shape using the tools and techniques previously discussed, also add an Edge Collider 2D to the Middle Ground Object so that the player can interact with it.
Adding Platforms to the Scene
The scene is looking a bit boring right now, so give it some love by adding a few floating platforms.
Create a new Sprite Shape GameObject called Floating Platform and attach the Platform profile. Unlike the Ground Object this is not a close-ended shape so enable the Open Ended option in the Sprite Shape Controller.
The tools to modify the Floating Platform are the exact same as the ones you used for the Ground Object. To make the platform, delete the two bottom nodes leaving you with a straight horizontal platform. Fill the gap between the two solid grounds using the Floating Platform. Don’t forget to add an Edge Collider 2D and adjust the offset to fit the collider onto the sprite.
Duplicate the Floating Platform and rename it Floating End Platform; this is where you are going to place the finishing flag.
Place the Floating End Platform after the Middle Ground, so that the player can jump onto it from the Middle Ground.
These are the positions and type of each node:
- A linear node located at
(X: -1, Y: 2). - A non-mirrored tangent node located at
(X: 0.45, Y: 2). - A non-mirrored tangent node located at
(X: 2, Y: 2.8). - A linear node located at
(X: 4, Y: 2.8).
This platform is going to be a bit different. During the creation of the Platform profile, you assigned two different sprites to the same angle range. To toggle what sprite each node uses, select the node and pick which sprite you want to use in the sprite variant field.
Change the first and third node to the second sprite variant to create some variation in the platform.
Press Play and the player should be able to run and jump across the map. If the player is not able to jump onto a platform, make sure to lower it’s height off the ground to make it easier to jump onto. This is also a good time to check if all the Sprite Shapes have colliders.
