アプリケーションにグラフィックアセットを加えるには、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 要素や画像自体にスタイルを適用できます。
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 でそれらを一緒に使用することもできます。
ノート:
backgroundImage
プロパティもサポートします。Image 要素に画像ソースが設定されていて、それが透明でない場合、背景画像は表示されません。C#クラス: Image
名前空間: UnityEngine.UIElements
基本クラス: VisualElement
この要素は基本クラスから以下の属性を継承します。
名前 | 型 | 説明 |
---|---|---|
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 の永続性が無効になります。 |
以下の表は、すべての C# パブリックプロパティ名と、それに関連する USS セレクターのリストです。
C# プロパティ | USS セレクター | 説明 |
---|---|---|
ussClassName |
.unity-image |
この型の要素の USS クラス名。 |
disabledUssClassName |
.unity-disabled |
ローカルで無効にされた要素の USS クラス名。 |
以下の表は、USS の Image 要素でのみ利用可能なカスタムプロパティの概要です。
プロパティ | タイプ | 説明 |
---|---|---|
--unity-image |
string | 画像ファイルのソース。画像アセットの参照方法については、アセット を参照してください。 |
--unity-image-size |
string | 画像のスケールモード。利用可能な値は、stretch-to-fill 、scale-and-crop 、scale-to-fit です。 |
--unity-image-tint-color |
string | 画像の色。 |
Did you find this page useful? Please give it a rating:
Thanks for rating this page!
What kind of problem would you like to report?
Thanks for letting us know! This page has been marked for review based on your feedback.
If you have time, you can provide more information to help us fix the problem faster.
Provide more information
You've told us this page needs code samples. If you'd like to help us further, you could provide a code sample, or tell us about what kind of code sample you'd like to see:
You've told us there are code samples on this page which don't work. If you know how to fix it, or have something better we could use instead, please let us know:
You've told us there is information missing from this page. Please tell us more about what's missing:
You've told us there is incorrect information on this page. If you know what we should change to make it correct, please tell us:
You've told us this page has unclear or confusing information. Please tell us more about what you found unclear or confusing, or let us know how we could make it clearer:
You've told us there is a spelling or grammar error on this page. Please tell us what's wrong:
You've told us this page has a problem. Please tell us more about what's wrong:
Thank you for helping to make the Unity documentation better!
Your feedback has been submitted as a ticket for our documentation team to review.
We are not able to reply to every ticket submitted.