9-Slice images with UI Toolkit

Generally, you can apply the 9-slice technique to a regular 2D Sprite. However, with UI Toolkit, you can apply the 9-slice technique to Texture, Render Texture, and SVG Vector images.

To apply the 9-slice technique to an image:

• 스프라이트 이미지의 경우 스프라이트 에디터 또는 USS를 사용합니다.
• 다른 타입의 이미지의 경우 USS를 사용합니다.

To apply the 9-slice technique to a selected image with USS:

1. Open UI Builder.
2. 인스펙터의 Background 섹션에서 Left, Right, Top, Bottom 슬라이스 값을 지정합니다.

다음 프로퍼티에 대해 USS, UXML, C# 파일에서 직접 슬라이스 값을 지정할 수도 있습니다.

• -unity-slice-left
• -unity-slice-right
• -unity-slice-top
• -unity-slice-bottom
• -unity-slice-scale

중요:

• Slice values set with USS apply only to the image in the associated visual element. The values don’t apply to the same image used in other visual elements, in other UI documents, or in a scene.
• Unset slice value is zero. For example, if you set the Top, Bottom, and Right slice attributes but leave the Left slice empty, the Left slice is zero.
• USS에 설정된 슬라이스 값은 스프라이트 에디터에 설정된 슬라이스 값보다 우선합니다. 위의 예에서 스프라이트 에디터에서 Left 슬라이스에 추가한 값에 관계없이 Left 슬라이스 값은 0입니다.

추가 리소스

• UXML element Image
• Set background images with an image asset