画像要素を使用して、アプリケーションにグラフィカルなアセットを追加します。画像ギャラリー、製品リスト、レンダリングプレビュー、ユーザープロファイルなどのビジュアルコンテンツを UI に表示するための汎用性の高い強力なツールです。
UXML または C# コードを使用して、UI で画像要素を追加し、USS カスタムプロパティに対して画像ソースを --unity-image 指定する必要があります。
画像スケールモードは、--unity-image-size USS カスタムプロパティで設定できます。--unity-image-tint-color USS カスタムプロパティで画像の色合いを設定することもできます。
以下の UXML の例では、インラインスタイルを使用して画像ソースを追加しています。
<ui:Image style="--unity-image: url('path/to/image');"/>
画像要素のサイズとレイアウト、および要素内の画像のサイズとレイアウトを設定できます。これにより、特定の領域に合わせてサイズ変更したり、他の UI 要素との位置を合わせたりするなど、UI 内での画像の表示方法をコントロールできます。また、ユーザーが画像をクリックまたはタップしてアクションをトリガーできるようにするなど、画像要素に相互作用性を追加することもできます。不透明度の調整や色フィルターの適用など、画像要素と画像自体にスタイルを適用できます。
VisualElement.style.backgroundImage
画像要素と VisualElement.style.backgroundImage プロパティの両方を使用して、UI にビジュアルコンテンツを追加できます。どちらを選択するかは、アプリケーションの特定の用途と要件によって異なります。
画像要素は通常、画像ギャラリーやユーザープロファイルのアバターなど、UI の特定の領域内の画像を表示するために使用します。サイズ変更、スケーリング、トリミングのオプションなどにより、画像の外観をより詳細にコントロールできます。画像 は、画像のサイズによってレイアウト内の要素のサイズが変化するように設定する場合に使用します。画像要素に要素を追加してオーバーレイを作成したり、相互作用性を追加したりすることもできます。ただし、パフォーマンス上の理由から、画像のインスタンスを多数使用する場合は、固定値の幅と高ささを指定します。
VisualElement.style.backgroundImage プロパティは、UI 要素の背景として画像を設定するために使用します。これは、UI のメインコンテンツや機能を損なうことなく、要素に視覚的な関心を追加したい場合に便利です。VisualElement.style.backgroundImage プロパティでは、USS を使用して多くの異なる要素のソース画像を変更することもできます。
一般に、画像要素は画像の外観やレイアウトをよりコントロールする必要がある場合に、VisualElement.style.backgroundImage プロパティは UI 要素に背景画像を追加する場合にのみ使用することをお勧めします。ただし、どちらのアプローチも有効で、必要に応じて同じ UI で併用できます。
ノート:
style.backgroundImage プロパティもサポートします。画像要素に画像ソースが設定され、透明でない場合、背景画像は表示されません。
C# クラス: Image
名前空間: UnityEngine.UIElements
基本クラス: VisualElement
この要素は基本クラスから以下の属性を継承します。
| 名前 | 型 | 説明 |
|---|---|---|
focusable |
boolean |
要素がフォーカス可能である場合は true。 |
tabindex |
int |
フォーカスリング内のフォーカス可能な要素をソートするために使用される整数。0 以上の値に設定する必要があります。 |
この要素は VisualElement から以下の属性も継承します。
| 名前 | 型 | 説明 |
|---|---|---|
content-container |
string |
子要素が追加されますが、通常は子要素は要素自体と同じです。 |
data-source |
Object |
継承されたデータソースをオーバーライドするこの VisualElement にデータソースを割り当てます。このデータソースはすべての子に継承されます。 |
data-source-path |
string |
データソースから値へのパス。 |
data-source-type |
System.Type |
この VisualElement に割り当て可能なデータソースの型。 この情報は、設計時に有効なデータソースを指定できない場合に、データソースパスフィールドを補完するヒントとして UI Builder でのみ使用されます。 |
language-direction |
UIElements.LanguageDirection |
要素のテキストの向きを示します。値は要素の子に伝播されます。 languageDirection を RTL に設定すると、テキストの反転と改行/折り返しの適切な処理による、右から左へ (RTL) の基本サポートが追加されます。ただし、包括的な RTL サポートは提供されません。これには、文字の並べ替えを含むテキストシェーピングと OpenType フォント機能のサポートが必要になるためです。将来のアップデートでは、言語、スクリプト、フォント機能の仕様を処理するための追加の API を含む、包括的な RTL サポートが予定されています。 このプロパティの RTL 機能を拡張するには、Unity Asset Store で入手可能なサードパーティ製のプラグインを探し、 ITextElementExperimentalFeatures.renderedText を利用してください。 |
name |
string |
この VisualElement の名前。 このプロパティを使用して、特定の要素を対象とする USS セレクターを記述します。要素には一意の名前を付けるのが標準的です。 |
picking-mode |
UIElements.PickingMode |
mouseEvent または IPanel.Pick クエリの間にこの要素を選択 (ピック) できるかどうかを決定します。 |
style |
string |
VisualElement スタイルの値を設定します。 |
tooltip |
string |
ユーザーが要素をマウスオーバーした後、わずかな時間、情報ボックス内に表示するテキスト。これはエディター UI でのみサポートされます。 |
usage-hints |
UIElements.UsageHints |
VisualElement の意図されている使用パターンの概要を指定するヒント値の組み合わせ。このプロパティは、VisualElement がまだ Panel の一部でない場合にのみ設定できます。Panel の一部になると、このプロパティは事実上読み取り専用となり、変更しようとすると例外がスローされます。適切な UsageHints を指定することで、予想される使用パターンに基づいて、特定の操作をどのように処理するか、または高速化するかについて、システムがより適切な判断を下すようになります。これらのヒントは動作や視覚的な結果には影響せず、パネルとその中の要素の全体的なパフォーマンスにのみ影響することに注意してください。常に適切な UsageHints を指定することを考慮するようお勧めしますが、特定の条件下 (例: ターゲットプラットフォームのハードウェア制限) では、一部の UsageHints が内部的に無視される可能性があることに留意してください。 |
view-data-key |
string |
ビューデータの永続性 (ツリーの展開状態、スクロール位置、ズームレベルなど) に使用されます。 このキーは、ビューデータストアからビューデータを保存およびロードするために使用されます。このキーを設定しないと、関連する VisualElement の永続性が無効になります。詳細については、ビューデータの永続性を参照してください。 |
以下の表は、すべての C# パブリックプロパティ名と、それに関連する USS セレクターのリストです。
| C# プロパティ | USS セレクター | 説明 |
|---|---|---|
ussClassName |
.unity-image |
この型の要素の USS クラス名。 |
disabledUssClassName |
.unity-disabled |
ローカルで無効に設定されている要素の USS クラス名。 |
以下の表は、USS の画像要素でのみ使用可能なカスタムプロパティの概要です。
| プロパティ | タイプ | 説明 |
|---|---|---|
--unity-image |
string | 画像ファイルのソース。画像アセットの参照方法については、アセットを参照してください。 |
--unity-image-size |
string | 画像スケールモード。使用可能な値は stretch-to-fill、scale-and-crop、scale-to-fit です。 |
--unity-image-tint-color |
string | 画像の色合い。 |