2D Sprite Shape
Table of Contents
- Sprite Shape Profile
- Sprite Shape Controller
- What is a Sprite Shape Profile
- Creating a Sprite Shape Profile
5a. Creating an Angle Range
5b. Assigning Sprites
5c. Preview Multiple Angle Ranges
- Open-Ended Sprite Shapes
- Closed Sprite Shapes
- The Sprite Shape Controller Settings
8a. Point Modes
8c. Sprite Index
- Enabling Collision
A Sprite Shape is an Asset that contains multiple Sprites assigned to specific angles. When rendered in a Scene, a Sprite Shape tiles assigned Sprites along its spline path or outline, automatically deforming and changing the Sprites displayed depending on its settings.
In this way, Sprite Shapes are powerful worldbuilding tools that allow you to construct your game world quickly and efficiently. The following examples demonstrate the different ways to construct levels using different kinds of Sprite Shapes.
There are two parts to creating and editing Sprite Shapes, namely the Sprite Shape Profile, and the Sprite Shape Controller. The Sprite Shape Profile contains the settings for the Sprite Shape Asset, such as all the Sprites included in the shape and the angle ranges that they are assigned to. The Sprite Shape Controller component allows you to edit a Sprite Shape’s outline into different shapes.
|Use Sprite Borders||Enable to cap both ends of an Open-Ended spline path. Assign the Sprites to be used as bookends in the Sprite Editor.|
|Bevel Cutoff||The angle threshold when corners are bevelled. Only has an effect if the Control Point and its neighbors are in Linear Point mode.|
|Bevel Size||Length of slant at bevelled corners. Only has an effect if the Control Point and its neighbors are in Linear Point mode.|
|Texture||Set the texture to fill a closed Sprite Shape. Has no effect if the Spline is set to Open Ended.|
|Pixels Per Unit||The pixels per unit value of the Fill texture of a Sprite Shape. This value affects the scale of the Fill texture, with higher values reducing the size of the texture.|
|World Space UV||Enable to apply the Fill texture per the World Space UV, instead of per Object UV.|
|Offset||Determines the border offset at the edges of the Fill texture.|
Angle Ranges (tool)
|Assign Sprites to specific angle ranges with this tool.|
|Start (degrees)||The starting angle for the selected angle range.|
|End (degrees)||The endpoint for the selected angle range.|
|Order||Determine the priority of Sprites when they overlap each other. Sprites with higher values are rendered above lower ones.|
|Sprites (list)||List of Sprites assigned to the selected angle range. The default Sprite is always the one at the top of the list.|
|All Corner options||Assign selected Sprites to the different corners. When the Sprite Shape is rendered in the Scene, the assigned Sprites are displayed at their respective corners, or is left blank if no Sprite was assigned.
Note that a Corner Sprite is only displayed if the Control Point and its neighbors are in Linear Point Mode.
( + ) - Property is only visible when a Control Point is selected
To use a Sprite Shape, you begin by creating a Sprite Shape Profile. A Sprite Shape Profile is an Asset that contains the Sprites that make up the Sprite Shape, and settings such as the angles that those Sprites are displayed at.
Go to Assets > Create > Sprite Shape Profile, and there are three Profile options available - Empty, Strip, Shape
The Empty profile is the default, and contains no preset settings or angle ranges. The Strip profile is a preset that prepares Sprite Shapes for long continuous segments. For example, if you want to create platforms, or background details like a tree line.closed Sprite Shape is created when the Sprite Shape is dragged onto a Scene. Rearranging or resizing the control points of this Sprite Shape causes the Sprites to react to changes in angles and automatically switch to the correct Sprite for that angle range.
If a Fill texture is set, then a closed Sprite Shape also displays the Fill texture within itself. This makes closed Sprite Shapes especially useful for creating and shaping backgrounds, platforms, or other kinds of worldbuilding elements for your Project.
A key feature of the Sprite Shape Profile is the Angle Ranges tool. Assigning an Angle Range determines what Sprite is displayed at specific angles.
Left-click to create a range in the highlighted area.
Edit a range by entering new values into Start and End, or drag either endpoint to the desired angles. The endpoint of a range cannot be extended into a neighboring range.
To delete an Angle Range, select the range then press the Del/Delete key.
After creating an Angle Range, the next step is to assign Sprites to that range.
Beneath the Angle Ranges tool is the Sprites list that shows all the Sprites currently assigned to that range.
To add Sprites to the list, click the + icon to insert a new row and Sprite to the list. Click the circle icon next to the empty row to open the Object Picker window, which displays all available Sprites in the project.
Another way to add Sprites is to simply drag a Sprite onto a row to add it. A single Angle Range can have multiple Sprites assigned to it, one per row. Only the Sprite at the top of the list is displayed by default. The other Sprites in the list are displayed by changing to their respective Sprite Index numbers in the Sprite Shape Controller settings.
Drag the leftmost ends of the rows up or down to reorder them. Changing the order of the Sprite rows also changes their respective Sprite Index number.
After creating multiple Angle Ranges and assigning different Sprites, you can preview the Sprites as they appear at their assigned angles by rotating the Preview Handle around the tool.
The Strip preset is ideal to create continuous platforms (see Fig 18). These Sprite Shapes can be extended or deformed as needed for your Project, with the Sprites automatically tiling along the spline path.
Fig 19: The original Sprite
Import the Sprite into the Project, and open the Sprite Editor to edit its borders.
The Sprite border appears as as a green outline along the edges of the Sprite. Click and drag the Control Points of the border to change its size and shape. Divide the Sprite into 3 sections - a middle section that will be repeatedly tiled, and two sections that border the middle to act as bookends.
With the Strip preset settings, the middle section is tiled along the spline path, and both ends of the Sprite Shape can be capped by the left and right sections defined in Fig 20.
Select Apply to save these new Sprite borders.
Exit the Sprite Editor and create a new Sprite Shape Profile with the Strip preset.
Assign a Sprite to the Angle Range.
Click and drag the Preview Handle to see how the same Sprite is displayed at every angle in its full 360° range. This means that no matter which angle the Sprite Shape’s, the Sprite is displayed as a continuous tiling pattern that looks like a platform.
Ensure that Use Sprite Borders is checked in the Sprite Shape Profile settings.
This ensures that the left and right segments defined in Step 2 bookend the endpoints of the Sprite Shape, creating a visually complete platform.
Drag the Sprite Shape Profile into the Scene to create a Sprite Shape GameObject based on the Profile settings.
To continue editing the Sprite Shape within the Scene, you need to adjust the settings in the Sprite Shape Controller component. It is automatically attached to the Sprite Shape once it is dragged into the Scene or Hierarchy.
Use closed Sprite Shapes ton construct large sections of a level that contains a Fill texture, such as a background wall or a large platform.
Create a closed Sprite Shape by clearing the Open Ended checkbox in the Sprite Shape Controller options (see Fig 26). This causes the two endpoints of an open-ended Sprite Shape to automatically connect and form a closed shape.
Constructing a closed Sprite Shape allows it to use additional Sprite Shape features such as automatic Corners and displaying a Fill textures.
To edit the Spline path and shape of a Sprite Shape, click the Edit Spline button to make the Spline path and its Control Points become visible and editable.
Once Edit Spline is enabled, you can do the following:
Add additional Control Points by clicking anywhere along the spline path.
Select and move Control Points to adjust the shape and length of the spline path.
Change the Point Mode of the selected Control Point.
Set the Sprite Index number of the selected Control Point.
Set the Corner setting to Automatic or Disabled for the selected Control Point.
When a Control Point is selected, its Point Mode can be changed into one of 3 modes- Linear, Mirrored, and Non-Mirrored.
Point Modes control the behavior of tangent lines on the selected Control Point. These tangents control the shape of the curve between them, and affects how the Sprites between Control Points are deformed. Each Control Point in a Sprite Shape has its own unique Point Mode settings.
Linear Point Mode
In Linear Point Mode, there are no tangent lines to control the curve between the Control Point and its neighbors. When a Control Point and its immediate neighbors are all set to Linear Point mode, the corners between them can only be rounded via the Bevel Cutoff and Bevel Size settings.
The Bevel settings are ignored if any of the Control Point's immediate neighbors is set to a non-Linear Point Mode.
The Control Point first refers to the Bevel Cutoff and Bevel Size settings in the original Sprite Shape Profile Asset. Adjusting the same settings in the Sprite Shape Controller from their default of 0 causes them to override the original Profile settings.
Mirrored/Non-Mirrored Point Mode
In these two modes, tangent lines appear on either side of the selected Control Point, and the Bevel Cutoff and Bevel Size settings are ignored.
Adjusting the tangents controls the curve of the spline between a selected Control Point and its neighbors.
The Sprite Index number determines what Sprite is shown in between two Control Points. The number refers to a row on the Sprites list, and the Sprite assigned to that row.
Adding to the Sprite Index List
To add additional Sprites to the Sprites list, open the Sprite Shape Profile to find the list of Sprites currently assigned to the Sprite Shape under the Angle Ranges tool.
Click the + icon to add another row to the list. Add a Sprite to the list by dragging it onto the empty row. Clicking the circle icon on the right opens the Object Picker window and allows you to select an available Sprite as well.
The Sprite at the top of the list is the default Sprite displayed by the Sprite Shape at Sprite Index 0. The next Sprite in the list given index number 1, and so on.
Changing the Sprite Index Number
To display a different a Sprite at a Control Point:
View the Sprite Shape Controller component settings of the selected Sprite Shape.
Check the Edit Spline option, and select a Control Point.
Adjust the Control Point’s Sprite Index setting with the slider, or enter the index value. Note that setting the Sprite Index number to one that doesn’t exist in the Sprite List displays the default Sprite.
The Corners settings displays the list of Sprites that are currently assigned to their respective corners (see Fig 35 below). These Sprites are automatically assigned if the Corner setting in the Sprite Shape Controller is set to Automatic.
When the Sprite Shape is rendered in the Scene, the assigned Sprites are displayed at the respective corners (see Fig 36).
Note that a corner Sprite is only displayed if the Control Point and its neighbors are all in Linear Point Mode.
In the Sprite Shape Profile, you can select a texture that automatically fills any closed Sprite Shape derived from the same Sprite Shape Profile. This setting has no effect if the Spline is set to Open Ended.
The Pixel Per Unit setting allows you to scale the Fill texture, while the Offset slider allows the Fill texture to bleed out or retract from the edges of the Sprite Shape if needed.
Enabling the World Space UV setting causes the Fill texture to refer to the World Space UV, instead of per Object UV. By default, World Space UV is disabled, and each Sprite Shape’s Fill texture refers to its own Object UV (see Fig 37).
With World Space UV enabled, Sprite Shapes derived from the same Sprite Shape Profile appear to overlay a single large Fill texture that spans the entire layer instead.
To enable your Sprite Shape to respond to 2D physics, attach a Collider 2D component to the Sprite Shape.
All Collider 2D components can be used, except for the Tilemap Collider 2D. However, the Sprite Shape Controller’s Collider properties are only available if either a Polygon Collider 2D or Edge Collider 2D is attached.
When first attached, the Collider’s mesh and outline does not match the Sprite Shape (see Fig 40). To automatically match the Collider mesh to the Sprite Shape, go to the Sprite Shape Controller’s Collider settings (see Fig 41), and check the Update Collider checkbox.
To make manual edits to the Collider mesh, go to the component’s settings and enable Edit Collider to move and create the Collider mesh’s control points (see Fig 42).
Note that Colliders are unique to each instance of the Sprite Shape Profile in the Scene. To duplicate a Collider mesh, you must duplicate the entire Sprite Shape object it is attached to as well.