N-Slice Editor Screen

After clicking the Create New button and selecting a sprite, the N-Slice Editor screen will be displayed as follows:

The default setting is a 5x5 grid with all tiles set to Stretchable. (If the sprite is not visible in the editor screen, move the horizontal or vertical slider of the editor to check if it's hidden outside the screen.)

Creating a Simple 9-Slice

First, let's create the simplest 3x3 9-slice using N-Slicer.

• Set both Rows and Columns to 3 in the Grid Settings at the top right.

• Drag the boundary lines on the screen with the mouse to adjust to the desired position. (Or you can directly manipulate the values in the Axes area on the right.)

• After that, differentiate and set the parts that should be fixed and the parts that should stretch in each tile.

• Since we want to achieve the same effect as traditional 9-slicing, let's set each corner to Fixed.

Understanding Tile Settings

Looking closely at the sprite preview screen, each tile's character is indicated by an icon:

• The red X mark indicates fixed tiles
• The blue - mark indicates tiles that stretch only horizontally
• The yellow | mark indicates tiles that stretch only vertically
• The green + mark indicates tiles that can stretch both horizontally and vertically

Tiles that are logically impossible according to their settings will be displayed in gray. (For example, when a tile is set to Stretchable while fixed tiles exist in both its row and column.)

Saving Your Changes

Now, click the Save Changes button to save the changes.

Basic Usage of N-Slicer

This guide covers the fundamental concepts and workflow for using N-Slicer in your Unity projects.

Creating an NSliceData Asset

The first step is to create an NSliceData asset:

1. Select your sprite in the Project window
2. Right-click and select "Create > N-Slicer > NSliceData"
3. The N-Slice Editor will open automatically

Configuring the Grid

In the N-Slice Editor:

1. Set the number of rows and columns using the controls at the top
2. Click on cells to select them
3. Use the property panel to set cell properties:
   • Fixed: The cell will not stretch
   • Stretch X: The cell will stretch horizontally
   • Stretch Y: The cell will stretch vertically
   • Stretch XY: The cell will stretch in both directions

Using with UI Elements

To use N-Slicer with UI elements:

1. Add an NSliceImage component to your UI GameObject
2. Assign your sprite to the Source Sprite field
3. Assign your NSliceData asset to the Slice Data field
4. Adjust the size of your UI element to see the slicing in action

Using with Sprite Renderers

To use N-Slicer with Sprite Renderers:

1. Add an NSliceSpriteRenderer component to your GameObject
2. Assign your sprite to the Source Sprite field
3. Assign your NSliceData asset to the Slice Data field
4. Adjust the size of your GameObject to see the slicing in action ```