背景画像の設定
UI Builder doesn’t have a dedicated “image” element. To create an image, do the following:
- Import background image into your project.
- Create a regular visual element in UI Builder.
- 要素の背景画像をインポートした画像に設定します。
When you set the background image, you must select a supported background image types:
Note: To use a SVG image as a background for a visual element, you must install a package. To do so, in the Package Manager window, install the package com.unity.vectorgraphics from git URL.
Image import settings
After you have imported an image to your project, for the most intuitive results, Unity recommends you to apply certain import settings for Textures, Sprites, and Vector images before you use them as a background for a visual element in the UI Builder.
テクスチャ
ビジュアル要素の背景として使用する テクスチャ 画像の推奨インポート設定は以下の通りです。
| プロパティ | 値 | |
|---|---|---|
| テクスチャタイプ | デフォルト | |
| Non-Power of 2 | なし | |
| Compression | なし | |
| Alpha Is Transparency (アルファ値を透明度として使用) | true | |
| テクスチャタイプ | Editor GUI and Legacy GUI | |
| Non-Power of 2 | なし | |
| Compression | なし | |
| Alpha Is Transparency (アルファ値を透明度として使用) | true | |
| テクスチャタイプ | Sprite (2D and UI) | |
| Compression | なし | |
| Alpha Is Transparency (アルファ値を透明度として使用) | true | |
| Sprite Mode | Single | |
| Mesh Type | Tight | |
Sprites
ビジュアル要素の背景として使用する スプライト 画像の推奨インポート設定は以下の通りです。
| プロパティ | 値 | |
|---|---|---|
| テクスチャタイプ | Sprite (2D and UI) | |
| Compression | なし | |
| Alpha Is Transparency (アルファ値を透明度として使用) | true | |
| Sprite Mode | ファイルに複数のスプライトが含まれる場合は Multiple、そうでない場合は Single。 | |
| Mesh Type | Tight | |
Vector images
ビジュアル要素の背景として使用する ベクター 画像の推奨インポート設定は以下の通りです。
| プロパティ | 値 |
|---|---|
| Generated Asset Type | UI Toolkit ベクター画像 |
| Tessellation Settings | Basic |
| Target velocity | 満足のいく結果が得られる最小の値 |
ヒント:
- フォルダーごとにデフォルトプリセットをアセットに適用 し、希望のインポート設定を自動で設定できます。
- All image types are subject to dynamic atlasing if they’re not already in an atlas. (An image is in an atlas if imported as a Sprite with Sprite Mode set to Multiple, or if you have manually added it to a Sprite Atlas asset.) You can configure dynamic atlasing in a Panel Settings asset.
9-Slice images with UI Toolkit
Generally, you can only 9-slice a regular 2D Sprite. With UI Toolkit however, you can also 9-slice Texture, Render Texture, and SVG Vector images.
To 9-slice an image:
To 9-slice a selected image using USS:
- Open UI Builder .
- Inspector の Background セクションで、 Left、Right、Top、Bottom のスライス値を指定します。
また、以下のプロパティについては、USS、UXML、C# の各ファイルでスライス値を直接指定することができます。
-unity-slice-left-unity-slice-right-unity-slice-top-unity-slice-bottom
重要:
- Slice values set using 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 になります。