Introduction to Unity Sprite Shapes

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:

If the corner node angle is too harsh, then the assigned corner cap sprites will not be applied.

• 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.
• Point Mode:
  • 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.

• 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.

Time to put these tools to use!