Version: 2023.1
言語: 日本語
UXML 要素 IMGUIContainer
UXML 要素 InspectorElement

UXML 要素 Image

アプリケーションにグラフィックアセットを加えるには、Image 要素を使用します。画像ギャラリー、商品リスト、レンダリングプレビュー、ユーザープロフィールなど、UI にビジュアルコンテンツを表示するための多用途で強力なツールです。

画像の作成

UI に Image 要素を加え、--unity-image USS カスタムプロパティに画像ソースを提供するには、UXML または C# コードを使用する必要があります。

画像のスケールモードは --unity-image-size USS カスタムプロパティで設定できます。また、--unity-image-tint-color USS カスタムプロパティで画像の色を設定できます。

以下の UXML の例では、インラインスタイルを使って画像ソースを加えます。

<ui:Image style="--unity-image: url('path/to/image');"/>

Image 要素のサイズとレイアウト、および要素内の画像のサイズとレイアウトを設定できます。これにより、特定の領域に合うようにサイズを変更したり、他の UI 要素と整列させるなど、UI 内での画像の表示方法を制御できます。また、Image 要素に相互作用性を加えることもできます。例えば、ユーザが画像をクリックまたはタップしてアクションを発生させる、などです。不透明度の調整やカラーフィルタの適用など、Image 要素や画像自体にスタイルを適用できます。

Image 対 VisualElement.backgroundImage

Image 要素と VisualElement.backgroundImage プロパティの両方を使用して、UI にビジュアルコンテンツを加えることができます。この 2 つのどちらを選択するかは、アプリケーションの具体的な使用方法と要件に依存します。

Image 要素は通常、画像ギャラリーやユーザプロファイルのアバターなど、UI の特定の領域内に画像を表示するために使用されます。Image 要素は、リサイズ、拡大縮小、トリミングなどのオプションを含め、画像の外観をより細かく制御することができます。画像サイズをレイアウト内の要素のサイズに反映させたい場合は、Image を使用します。また、Image 要素に追加要素を追加してオーバーレイを作成したり、相互作用性を追加したりすることもできます。ただし、パフォーマンス上の理由から、Image のインスタンスを多数使用する場合は、幅と高さを固定で指定してください。

VisualElement.backgroundImage プロパティを使用して、UI 要素の背景に画像を設定 します。これは、UI のメインコンテンツや機能を損なうことなく、要素に視覚的な面白さを加えたい場合に便利です。また、VisualElement.backgroundImage プロパティを使用すると、USS を使用してさまざまな要素のソース画像を変更することができます。

一般的に、画像の外観やレイアウトをより詳細に制御する必要がある場合は Image 要素を使用し、単に UI 要素に背景画像を加えたい場合は VisualElement.backgroundImage プロパティを使用することを推奨します。しかし、どちらのアプローチも有効であり、必要に応じて同じ UI でそれらを一緒に使用することもできます。

ノート:

  • Image 要素は backgroundImage プロパティもサポートします。Image 要素に画像ソースが設定されていて、それが透明でない場合、背景画像は表示されません。
  • UI Builder は Image 要素を部分的にサポートします。UXML からの読み込みと UXML への書き込みが可能で、標準的なビジュアル要素として基本的なオーサリングが可能です。Image 固有の設定は USS カスタムプロパティとして定義され、UI Builder Inspector の Attributes セクションには表示されません。

C# の基本クラスと名前空間

C#クラス: Image
名前空間: UnityEngine.UIElements
基本クラス: VisualElement

継承された UXML 属性

この要素は基本クラスから以下の属性を継承します。

名前 説明
focusable boolean 要素がフォーカス可能である場合は true。
tabindex int フォーカスリング内でフォーカス可能なものをソートするために使用される整数。0 以上であることが必要です。

この要素は、VisualElement から以下の属性も継承します。

名前 説明
content-container string 子要素はそれに追加されますが、通常は要素自体と同じです。
name string この VisualElement の名前。

このプロパティを使用して、特定の要素を対象とする USS セレクターを記述します。要素には一意の名前を付けるのが標準的です。
picking-mode UIElements.PickingMode mouseEvents または IPanel.Pick クエリの間にこの要素を選択 (ピック) できるかどうかを決定します。
style string この要素のスタイルオブジェクトへの参照。

C# でこのオブジェクトに書き込まれた USS ファイルまたはインラインスタイルから計算されたデータが含まれます。
toolbar string ユーザーが要素をマウスオーバーした後、わずかな時間、情報ボックス内に表示するテキスト。これはエディター UI でのみサポートされます。
usage-hints UIElements.UsageHints VisualElement の高レベルの使用パターンを指定するヒント値の組み合わせ。このプロパティは、VisualElement がまだ Panel の一部でない場合にのみ設定できます。Panel の一部になると、このプロパティは事実上読み取り専用となり、変更しようとすると例外がスローされます。適切な UsageHints を指定することで、予想される使用パターンに基づいて、特定の操作をどのように処理するか、または高速化するかについて、システムがより適切な判断を下すようになります。これらのヒントは動作や視覚的な結果には影響しませんが、パネルとその中の要素の全体的なパフォーマンスにのみ影響することに注意してください。常に適切なUsageHints を指定することを考慮することをお勧めしますが、特定の条件下 (例えば、ターゲットプラットフォームのハードウェア制限など) では、いくつかの UsageHints が内部的に無視される可能性があることに留意してください。
view-data-key string ビューデータの永続性 (ツリーの展開状態、スクロール位置、ズームレベルなど) に使用されます。

これは、ビューデータストアからビューデータを保存/ロードするために使用されるキーです。このキーを設定しないと、この VisualElement の永続性が無効になります。

USS クラス

以下の表は、すべての C# パブリックプロパティ名と、それに関連する USS セレクターのリストです。

C# プロパティ USS セレクター 説明
ussClassName .unity-image この型の要素の USS クラス名。
disabledUssClassName .unity-disabled ローカルで無効にされた要素の USS クラス名。

USS カスタムプロパティ

以下の表は、USS の Image 要素でのみ利用可能なカスタムプロパティの概要です。

プロパティ タイプ 説明
--unity-image string 画像ファイルのソース。画像アセットの参照方法については、アセット を参照してください。
--unity-image-size string 画像のスケールモード。利用可能な値は、stretch-to-fillscale-and-cropscale-to-fit です。
--unity-image-tint-color string 画像の色。

その他の参考資料

UXML 要素 IMGUIContainer
UXML 要素 InspectorElement