Introduction to Unity Sprite Shapes
- Getting Started
- Creating the Sprite Shape Profile
- Setting up the Platform Sprite Shape
- Setting up an Angle Range
- Editing Sprite Borders
- Creating Decorations with Sprite Shape
- Creating a Ground Sprite Shape
- Creating Multiple Angle Ranges
- Adding a Fill and Corners
- Adding Sprite Shapes to the Scene
- Creating the Ground Shape Using the Tools
- Applying Collisions to Sprite Shape
- Finishing up the Scene
- Adding Platforms to the Scene
- Applying Decorations to the Level
- Tying up Game Elements
- Where to Go From Here?
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.