2D Games have always been fun to play, yet making a 2D game can quickly get overwhelming due to all the assets you need. Using Unity’s Sprite Shapes, making 2D environments has never been easier. Best of all, you can get started with just a couple of sprites!
A Sprite Shape is an asset that contains sprites assigned to specific angles. When in a scene, a Sprite Shape will tile assigned sprites along its path. It deforms the sprites that it will display depending on its settings. This allows you to create complex geometry using simple tools and settings.
In this tutorial, you’ll make a game using Sprite Shapes. Along the way, you will learn the key components of:
- Creating and modifying Sprite Shapes.
- Changing Sprite Shapes based on orientation.
- Using Sprite Shape spline tools to change its shape.
- Adding variation to your Sprite Shapes.
- Generating close-ended and open-ended Sprite Shapes.
- Applying colliders to Sprite Shapes.
You’ll need a copy of Unity 2019.1 (or newer) installed on your machine to follow along.
You will also need to know the basics of how to work in a 2D environment. If you haven’t played around with 2D before, check out this great Introduction to 2D tutorial.
Now that you have Unity, you need to download the sample project. You can do that by clicking one of the Download Materials buttons at the top or bottom of this tutorial.
Once downloaded, extract the files and open the Introduction to Sprite Shapes Starter project in Unity. With the project loaded, open the RW folder using the Project window, then observe the folder structure:
Here’s what each contains:
- Animations: Contains all the animations and animation controllers for the enemy and player.
- Physics Materials: Contains a high friction physics material for the Player.
- Prefabs: Currently contains the player, enemy and flag.
- Scenes: This contains the main game scene.
- Scripts: Contains all the scripts required for the player, camera, SFX and game management.
- Sounds: Contains all the sounds used within the game.
- Sprite Shapes: Currently an empty folder where you will create new Sprite Shapes.
- Sprites: Contains all the premade sprites for the player, enemies and environment.
Before you begin using Sprite Shapes, you have to install it from the Package Manager. To do this, select Window ► Package Manager from the top menu.
In the Package Manager, select Advanced ► Show preview packages and install the 2D SpriteShape package.
Open the MainScene in the Scenes folder, and look at the Game view. You will see an empty blue sky that you will fill with beautiful Sprite Shapes.
Creating the Sprite Shape Profile
A Sprite Shape Profile is an asset that configures all the options for a particular type of shape. Within this asset, you will assign the sprites you wish to use and tell Sprite Shape how to render them.
First, you are going to create all the different Sprite Shape Profiles, then you will go into the scene and add them to the scene.
To create a Sprite Shape Profile, navigate to the Sprite Shapes folder and select Assets ► Create ► Sprite Shape Profile ► Open Shape. Name the profile Platform.
Select the Platform Sprite Shape and look at the Inspector; this is where you change all the settings for the profile. Before you begin playing around with these settings, here are the most important settings:
In this tutorial, these are the settings you will change:
- Fill Texture: On a closed shape, Unity will tile this texture to fill the inside of the shape.
- Currently Selected Angle Range: Using the rotating slider, you can select different angle ranges, doing this will allow you to modify settings for that angle range.
- Sprite Preview: This will preview the first sprite assigned to this angle range.
- Possible Sprites in Angle Range: This allows you to assign multiple sprites to one angle range allowing for variation. You will cover this in more detail later in this tutorial.
- Corner Sprites: This allows you to assign sprites for each corner.
It’s great to know what everything does in theory, but now it’s time to create a platform for your game!
Setting up the Platform Sprite Shape
Sprite Shapes consist of two main types:
- Close Ended: The shape’s line segments or curves are all connected, this makes Sprite Shape use a fill texture. A circle and square are Close Ended as they don’t have any loose ends.
- Open Ended: The shape is essentially a line used as a path for sprites to be tiled across. This type of Sprite Shape does not allow a fill texture.
The platform is an open-ended shape; now you can begin filling out the empty Sprite Shape Profile asset.
Setting up an Angle Range
Considering that the platform is an open-ended Sprite Shape Profile, multiple angle ranges are not required. You only need one angle range for the Sprite Shape.
When you assign a Sprite to an angle range, the Sprite will be automatically rotated to fit the current angle, therefore, eliminating the need for manual orientation during the creation of a sprite.
Select your Platform profile, and note that an angle range has already been created for you, ranging from 180 to -180 degrees, essentially covering the entire circle.
To attach a Sprite to the angle range select the + button under the Sprites and select the Platform Blank sprite asset.
That is all you need to do on the platform profile; however, you may notice that the platform is split into multiple segments within the sprite preview. To get a long continuous strip, you need to edit the sprite, but don’t worry the Sprite editor is here to help.
Editing Sprite Borders
To do this, select Platform Blank.png in RW/Sprites/Other and select the Sprite Editor button in the inspector to bring up the sprite editor.
The green control points around the sprite will be the main thing of interest in the Sprite editor. By using borders, you can tell Sprite Shape which part of the sprite should be tiled, and which parts you want to act as the border sprites; the border sprites will only be rendered at the start and end of the path.
Adjust the borders to ensure only the middle portion of the sprite is being tiled. Press the Apply button to save your adjustments.
Repeat this process for Platform Flowers.png in RW/Sprites/Other and attach Platform Flowers to the current angle range within the Platform profile.
The reason for adding two sprites into one angle range is to add some variation without having to create multiple Sprite Shape profiles for each sprite.
Creating Decorations with Sprite Shape
Sprite Shapes can be used in many creative ways to reduce the workload and create variation in your sprites. In this case, you will create a Sprite Shape containing trees that can be tiled across your grounds acting as some pleasant backdrop.
This Sprite Shape Profile is very similar to the Platform so duplicate the Platform profile, using Control+D (or Command+D) and rename it to Tree Decorations.
Edit the Tree Decorations profile and replace the current two sprites with new sprites from the RW/Sprites/Other/Tree Decorations.png and adding a third.
Assign the sprites in the order shown below:
The reason for the Empty sprite is to allow for gaps when the Sprite Shape is used in the Scene view.
You have now created a platform that your player can jump on to when the player leaves the ground. You have also added decorations to make the scene look good. Oh, wait! You don’t have a ground yet. Why don’t you do that next?
Creating a Ground Sprite Shape
The process is similar to creating the platform; however, this time, you will use multiple angle ranges, fill textures and corners.
First, create a new Sprite Shape Profile in the Sprite Shapes folder by selecting Assets ► Create ► Sprite Shape Profile ► Open Shape and name it Ground. The Closed Shape can also be used; however, you are going to use an Open Shape to learn how to make your own angle ranges. This time, it will be a bit harder but a lot more interesting.
Creating Multiple Angle Ranges
To create multiple angle ranges, select the outer ring on four different sides and set their exact angle ranges using the Start and End text boxes. The exact angle ranges are as follows:
- Top: Starts at 45 and ends at -45.
- Right: Starts at -45 and ends at -135.
- Bottom: Starts at 225 and ends at 135.
- Left: Starts at 135 and ends at 45.
Now that the angle ranges are set up, add sprites to each angle range the same way you did for the platform shape however this time make sure you select the correct angle range you want to edit before you start adding sprites.
Conveniently each angle range has a corresponding name (refer to the green text in the screenshot above if necessary), attach the following sprites for each range:
Adding a Fill and Corners
This Sprite Shape needs to function as a Close Ended shape, meaning that it will need a fill texture. The fill texture is RW/Sprites/Other/Ground Fill Texture.png, and it is important to ensure that the Wrap Mode of the texture is set to Repeat.
Do this now and Apply the change.
This tells Unity that the texture can be tiled and for a fill texture; this is important to fill the shape correctly. Now, assign the texture to the Sprite Shape profile.
Add the corner textures by inserting the following sprites into their respective fields:
Creating corners and fills is just a matter of assigning sprites to their correct fields.
Just look at that sprite preview, it looks beautiful! You’re probably really excited to put these into the scene, so here comes the fun part!
Adding Sprite Shapes to the Scene
Create a Sprite Shape by selecting Create ► 2D ► Sprite Shape in the Hierarchy. Name the GameObject Ground Object.
Once you create the object, assign the Ground profile to the Ground Object in the Profile field within the Sprite Shape Controller component. To get a view corresponding to the screen shot below you need to click on the Edit Spline button and then select one of the nodes that will appear in the Scene view.
You may also want to ensure that your Scene view is in 2D mode.
The most important settings for the Ground Object can be found within the Sprite Shape Controller.
The yellow dot in the Scene view is the currently selected node; most of the options in the Sprite Shape Controller will directly impact this node.
Here are the most important settings:
- Edit Spline: Once you’ve got that enabled, within your scene, you will be able to rearrange, add, and delete nodes on your spline. To add a new node, simply Left-Click anywhere on the spline. To delete a node, select it and press Delete.
- Point Position: This is the position of the point relative to the origin of the GameObject.
- Linear Mode: In this mode curves are not formed through the node.
- Mirrored Mode: The node now has two mirrored tangents which create a smooth connected curve.
- Non-Mirrored Mode: The node has two tangents which are not connected, allowing for full freedom however the curves may not stay connected.
- Height: Modifies the height of the sprite at that node, it is useful to create variation.
- Sprite Variant: This sprite picker allows you to toggle between the different sprites you assigned for the current angle range.
- Corner: You can toggle between Disabled and Automatic, if you assigned corners within the profile it will show here. However, there are rules to corners. The two adjacent nodes must be in Linear Point Mode and the corner node itself must be in Linear Point Mode, the angle of the corner also cannot be too harsh.
- Open Ended: This toggles between an open-ended shape and a close-ended shape.
If the corner node angle is too harsh, then the assigned corner cap sprites will not be applied.
Time to put these tools to use!
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.
Applying Decorations to the Level
Everything works fine, but to spice up the scene you need to add some background decorations. Add another Sprite Shape GameObject to the scene and call it Tree Decorations. Ensure that the Sprite Shape is Open Ended and it is using the Tree Decorations profile.
This Sprite Shape can be tiled on top of the different grounds and platforms to add a pleasant backdrop. You attached three different sprites to the Tree Decorations profile. Two types of trees and an empty sprite, using the sprite index you can toggle between these sprites.
If that variation isn’t enough, you can also play with the height property of each node. First place the nodes roughly matching the outline of the Ground Object.
Add a few nodes in between and change the sprite index to create more variety.
Slightly change the height of some of the nodes to make it seem less repetitive. You may have to adjust the position of the node to set the sprite back on the ground.
Repeat the process of adding new decoration Sprite Shape GameObjects with the Tree Decorations profile for each ground and platform. Once you’re done, the scene should look something like this:
You should be proud — that is a beautiful looking scene created with just a couple of assets! :] Time to tie everything up with some awesome gameplay elements.
Tying up Game Elements
Before adding any enemies, clean up the Hierarchy by grouping the ground objects and platform objects. Make the decorations a child of the platform or ground they are on so that if you move the ground, the decorations will move with it.
You may have noticed the timer in the top-left; this is to see how quickly you can finish the level. The timer will stop when you reach the end. To add the finish, drag the Flag from RW/Prefabs onto the Floating End Platform.
The Flag represents the sweet taste of victory when you press the Play button and everything works fine, but you don’t live in a perfect world and there are always errors blocking the way.
Drag the Enemy from RW/Prefabs onto the Ground Object. You will notice a horizontal green line going through the Enemy; this is the path that the Enemy will patrol. You can modify this path using the Left Point and Right Point in the Enemy Controller.
Duplicate the Enemy and strategically place it around the scene to give yourself a challenge (group the enemies together under an empty GameObject to keep the Hierarchy organized). Modify the path of the enemy to suit the ground that it is on. Your scene should look something like this, with all the enemies:
To win, you have to reach the flag at the end; if you touch an enemy you will die but if you jump on top of the enemy you can destroy it.
Press Play and control your coffee-powered programmer to a successful build, crushing all errors in your path!
Can you do better than 15 seconds?
Where to Go From Here?
You can download the complete project using the Download Materials button at the top or bottom of this tutorial.
In this Sprite Shape tutorial for Unity, you learned how to:
- Install and configure Sprite Shapes.
- Create and modify Sprite Shape profiles.
- Work with Sprite Shape tools to create close- and open-ended shapes.
- Use the given tools to add variation using limited sprites.
This project is only the beginning; there is so much more you can add. I’m interested to see what you come up with!
Did you enjoy this tutorial? Want to learn more? Check out our book Unity Games by Tutorials, which has more info on making games with Unity.
If you have any suggestions, questions or if you want to show off what you did to improve this project, join the discussion below.