{"id":23867811,"url":"https://github.com/kwan3854/twentyfiveslicer","last_synced_at":"2026-03-02T03:33:02.022Z","repository":{"id":264823711,"uuid":"894385307","full_name":"kwan3854/TwentyFiveSlicer","owner":"kwan3854","description":"A Unity package for handling advanced 25-slice sprites.","archived":false,"fork":false,"pushed_at":"2025-02-24T09:30:50.000Z","size":17492,"stargazers_count":172,"open_issues_count":0,"forks_count":8,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-05T04:11:18.562Z","etag":null,"topics":["25-slice","25patch","9-slice","9patch","ugui","uguicomponent","ui","unity","unity-3d","unity-editor","unity-package","unity2d","unity3d","unity3d-editor","unity3d-plugin"],"latest_commit_sha":null,"homepage":"","language":"C#","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kwan3854.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"kwan3854"}},"created_at":"2024-11-26T09:09:46.000Z","updated_at":"2025-03-15T04:39:11.000Z","dependencies_parsed_at":"2025-01-10T12:37:29.512Z","dependency_job_id":"85bbe9a6-cf30-4724-bf6d-db7c532eb328","html_url":"https://github.com/kwan3854/TwentyFiveSlicer","commit_stats":null,"previous_names":["kwan3854/twentyfiveslicer"],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kwan3854%2FTwentyFiveSlicer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kwan3854%2FTwentyFiveSlicer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kwan3854%2FTwentyFiveSlicer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kwan3854%2FTwentyFiveSlicer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kwan3854","download_url":"https://codeload.github.com/kwan3854/TwentyFiveSlicer/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247284951,"owners_count":20913704,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["25-slice","25patch","9-slice","9patch","ugui","uguicomponent","ui","unity","unity-3d","unity-editor","unity-package","unity2d","unity3d","unity3d-editor","unity3d-plugin"],"created_at":"2025-01-03T11:14:25.359Z","updated_at":"2026-03-02T03:33:02.017Z","avatar_url":"https://github.com/kwan3854.png","language":"C#","funding_links":["https://github.com/sponsors/kwan3854"],"categories":[],"sub_categories":[],"readme":"# 🚀 Announcing N-Slicer: The Evolution of TwentyFiveSlicer\n\n📢 **New Release**: Beyond the open-source spirit of TwentyFiveSlicer, this enhanced solution is now available on the **Unity Asset Store**!\n \n- [Purchase on Unity Asset Store](https://assetstore.unity.com/packages/slug/319511)\n- [Visit the Official Website](https://www.nbeyond.dev/docs/nslicer)\n\n**[N-Slicer](https://assetstore.unity.com/packages/slug/319511) is the next-generation sprite slicing solution, representing the technological advancement of TwentyFiveSlicer!**\n \n\u003cimg src=\"Documentation~/Images/nslicer_cover.png\" alt=\"n-slicer\" width=\"700\" /\u003e\n\n\u003cimg src=\"Documentation~/Images/nslicer.gif\" alt=\"n-slicer\" width=\"700\" /\u003e\n\nWhile TwentyFiveSlicer evolved from 9-slice to 25-slice, N-Slicer takes it to the next level with **unlimited customizable slices**. Each slice can be individually configured as Fixed or Stretchable, enabling more sophisticated UI implementations.\n\n---\n\n# Twenty Five Slicer\n\n[![openupm](https://img.shields.io/npm/v/com.kwanjoong.twentyfiveslicer?label=openupm\u0026registry_uri=https://package.openupm.com)](https://openupm.com/packages/com.kwanjoong.twentyfiveslicer/)\n\n**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.\n\n---\n\n## 9-slice vs 25-slice\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"Documentation~/Images/9slice_VS_25slice_3.gif\" alt=\"9-slice vs 25-slice\" width=\"700\" /\u003e\n\u003c/p\u003e\n\n---\n\n## Key Concept\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"Documentation~/Images/25slice_debugging_view.gif\" alt=\"25-slice Debugging View\" width=\"700\" /\u003e\n\u003c/p\u003e\n\n- **9 slices**: Non-stretchable areas.\n- **6 slices**: Stretch horizontally only.\n- **6 slices**: Stretch vertically only.\n- **4 slices**: Stretch in both directions.\n\nThis 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.\n\n---\n\n## Installing the Package\n\n### 1. Install via OpenUPM\n\n#### 1.1. Install via Package Manager\nPlease follow the instructions:\n1. Open **Edit → Project Settings → Package Manager**\n2. Add a new Scoped Registry (or edit the existing OpenUPM entry)\n  - **Name**: `package.openupm.com`\n  - **URL**: `https://package.openupm.com`\n3. Click **Save** or **Apply**\n4. Open **Window → Package Manager**\n5. Click the `+` button\n6. Select **Add package by name...** (or **Add package from git URL...**)\n7. Paste `com.kwanjoong.twentyfiveslicer` into **Name**\n8. Paste a version (e.g., `1.1.2`) into **Version**\n9. Click **Add**\n\n---\n\n#### 1.2. Alternatively, merge the snippet into `Packages/manifest.json`\n```json\n{\n  \"scopedRegistries\": [\n    {\n      \"name\": \"package.openupm.com\",\n      \"url\": \"https://package.openupm.com\",\n      \"scopes\": []\n    }\n  ],\n  \"dependencies\": {\n    \"com.kwanjoong.twentyfiveslicer\": \"1.1.2\"\n  }\n}\n```\n\n---\n\n#### 1.3. Install via command-line interface\n```sh\nopenupm add com.kwanjoong.twentyfiveslicer\n```\n\n---\n\n### 2. Install via Git URL\n\n1. Open the Unity **Package Manager**.\n2. Select **Add package from Git URL**.\n3. Enter: `https://github.com/kwan3854/twentyfiveslicer.git`\n4. To install a specific version, append a version tag, for example:  \n   `https://github.com/kwan3854/twentyfiveslicer.git#v1.0.0`\n\n---\n\n## How to Use\n\n### Create Slice Data Map (First-time Setup)\n\n1. Navigate to the `Assets/Resources` folder. (Create it if it doesn't exist.)\n2. Right-click → **Create → TwentyFiveSlicer → SliceDataMap**\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"Documentation~/Images/how_to_add_25slice_datamap.png\" alt=\"How to Add 25-slice DataMap\" width=\"550\" style=\"display:inline-block; margin-right:20px;\" /\u003e\n  \u003cimg src=\"Documentation~/Images/sliceDataMap.png\" alt=\"SliceDataMap Example\" width=\"200\" style=\"display:inline-block;\" /\u003e\n\u003c/p\u003e\n\n---\n\n### Editing a Sprite\n\n1. **Open the 25-Slice Editor**\n  - **Window → 2D → 25-Slice Editor**\n\n   \u003cp align=\"center\"\u003e\n     \u003cimg src=\"Documentation~/Images/how_to_open_editor.png\" alt=\"How to Open 25-Slice Editor\" width=\"700\" /\u003e\n   \u003c/p\u003e\n\n2. **Load Your Sprite**\n  - Drag and drop your sprite into the editor or select it via the provided field.\n\n3. **Adjust the Slices**\n  - Use the sliders to define horizontal and vertical cut lines, dividing the sprite into 25 sections.\n  - Borders are displayed visually for accurate adjustments.\n\n   \u003cp align=\"center\"\u003e\n     \u003cimg src=\"Documentation~/Images/editor.png\" alt=\"25-Slice Editor\" width=\"700\" /\u003e\n   \u003c/p\u003e\n\n4. **Save the Configuration**\n  - Click **Save Borders** to store the 25-slice settings.\n\n---\n\n### Using the 25-Sliced Sprite\n\n#### 1. Using with **UI (TwentyFiveSliceImage)**\n\nThis is the **UI** approach, similar to `UnityEngine.UI.Image`:\n1. **Create a TwentyFiveSliceImage GameObject** or add `TwentyFiveSliceImage` to an existing **UI** element in a Canvas.\n2. Assign your 25-sliced sprite to the `TwentyFiveSliceImage`.\n3. Adjust the RectTransform size to see how each slice region scales or remains fixed.\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"Documentation~/Images/how_to_add_25slice_gameobject.png\" alt=\"How to Add 25-Slice GameObject\" width=\"700\" /\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"Documentation~/Images/image_component.png\" alt=\"How to Add 25-Slice GameObject\" width=\"700\" /\u003e\n\u003c/p\u003e\n\n#### 2. Using with **2D Scenes (TwentyFiveSliceSpriteRenderer)**\n\nThis is the **MeshRenderer**-based approach, similar to `SpriteRenderer`:\n1. You can create a **25-Sliced Sprite** in the **Hierarchy**:\n  - **Right-click → 2D Object → Sprites → 25-Sliced**  \n    *This will instantiate a GameObject named `25-Sliced Sprite` with `TwentyFiveSliceSpriteRenderer` attached.*\n2. In the Inspector, assign your 25-sliced sprite to its `Sprite` field.\n3. Adjust the **Size** property in the Inspector (instead of using `transform.localScale`) to properly stretch or preserve corners/edges as needed.\n4. **Sorting Layer** and **Order in Layer** are also available, just like a normal SpriteRenderer.\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"Documentation~/Images/sprite_renderer_menu.png\" alt=\"How to Add 25-Slice GameObject\" width=\"700\" /\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"Documentation~/Images/sprite_renderer_component.png\" alt=\"How to Add 25-Slice GameObject\" width=\"700\" /\u003e\n\u003c/p\u003e\n\n---\n\n## Key Features\n\n- Divide sprites into a 5x5 grid for highly detailed control.\n- Seamlessly scale and stretch specific sprite regions.\n- **UI approach** (`TwentyFiveSliceImage`) for usage in UGUI-based canvases.\n- **2D Mesh approach** (`TwentyFiveSliceSpriteRenderer`) for usage in 2D scenes without UI.\n- Compatible with Unity's 2D workflow, supports Sorting Layers.\n- Intuitive editor window with clear visual guidance for precise adjustments.\n\n---\n\n## Delete Unused Data\n\nYou can remove slice data that is no longer needed:\n**Tools → Twenty Five Slicer Tools → Slice Data Cleaner**\n\n---\n\nFor more information or contributions, visit the [repository](https://github.com/kwan3854/TwentyFiveSlicer).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkwan3854%2Ftwentyfiveslicer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkwan3854%2Ftwentyfiveslicer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkwan3854%2Ftwentyfiveslicer/lists"}