Twenty Five Slicer is a Unity package designed for more advanced sprite slicing, enabling a "25-slice" approach. It divides a sprite into a 5x5 grid, allowing precise scaling and manipulation of individual regions while preserving key areas.
- 9 slices: Non-stretchable areas.
- 6 slices: Stretch horizontally only.
- 6 slices: Stretch vertically only.
- 4 slices: Stretch in both directions.
This allows for far more detailed slicing. Where traditional 9-slice images often require stacking multiple image layers to achieve complex UI shapes (e.g., speech bubbles, boxes with icons or separators at the center), a 25-slice configuration can often handle these scenarios with just a single image.
Please follow the instructions:
- Open Edit → Project Settings → Package Manager
- Add a new Scoped Registry (or edit the existing OpenUPM entry)
- Name:
package.openupm.com
- URL:
https://package.openupm.com
- Click Save or Apply
- Open Window → Package Manager
- Click the
+
button - Select Add package by name... (or Add package from git URL...)
- Paste
com.kwanjoong.twentyfiveslicer
into Name - Paste a version (e.g.,
1.1.2
) into Version - Click Add
{
"scopedRegistries": [
{
"name": "package.openupm.com",
"url": "https://package.openupm.com",
"scopes": []
}
],
"dependencies": {
"com.kwanjoong.twentyfiveslicer": "1.1.2"
}
}
openupm add com.kwanjoong.twentyfiveslicer
- Open the Unity Package Manager.
- Select Add package from Git URL.
- Enter:
https://github.com/kwan3854/twentyfiveslicer.git
- To install a specific version, append a version tag, for example:
https://github.com/kwan3854/twentyfiveslicer.git#v1.0.0
- Navigate to the
Assets/Resources
folder. (Create it if it doesn’t exist.) - Right-click → Create → TwentyFiveSlicer → SliceDataMap
- Open the 25-Slice Editor
- Window → 2D → 25-Slice Editor
- Load Your Sprite
- Drag and drop your sprite into the editor or select it via the provided field.
- Adjust the Slices
- Use the sliders to define horizontal and vertical cut lines, dividing the sprite into 25 sections.
- Borders are displayed visually for accurate adjustments.
- Save the Configuration
- Click Save Borders to store the 25-slice settings.
This is the UI approach, similar to UnityEngine.UI.Image
:
- Create a TwentyFiveSliceImage GameObject or add
TwentyFiveSliceImage
to an existing UI element in a Canvas. - Assign your 25-sliced sprite to the
TwentyFiveSliceImage
. - Adjust the RectTransform size to see how each slice region scales or remains fixed.
This is the MeshRenderer-based approach, similar to SpriteRenderer
:
- You can create a 25-Sliced Sprite in the Hierarchy:
- Right-click → 2D Object → Sprites → 25-Sliced
This will instantiate a GameObject named25-Sliced Sprite
withTwentyFiveSliceSpriteRenderer
attached.
- In the Inspector, assign your 25-sliced sprite to its
Sprite
field. - Adjust the Size property in the Inspector (instead of using
transform.localScale
) to properly stretch or preserve corners/edges as needed. - Sorting Layer and Order in Layer are also available, just like a normal SpriteRenderer.
- Divide sprites into a 5x5 grid for highly detailed control.
- Seamlessly scale and stretch specific sprite regions.
- UI approach (
TwentyFiveSliceImage
) for usage in UGUI-based canvases. - 2D Mesh approach (
TwentyFiveSliceSpriteRenderer
) for usage in 2D scenes without UI. - Compatible with Unity’s 2D workflow, supports Sorting Layers.
- Intuitive editor window with clear visual guidance for precise adjustments.
You can remove slice data that is no longer needed: Tools → Twenty Five Slicer Tools → Slice Data Cleaner
For more information or contributions, visit the repository.