このレッスンでは、Cave Engine の UI 要素の視覚的外観をカスタマイズする方法を学びます。

スタイルプロパティ（色、透過性、画像、ぼかし）を変更する方法や、プロジェクトのために新しい UI スタイル を作成する方法を見ていきます。

UI スタイルは、複数の UI 要素にわたって同じ視覚的設定を再利用することができるため便利です。これにより、インターフェースを一貫して整理することが容易になります。

1. UI スタイル

デフォルトでは、Cave Engine で UI Element Default を作成すると、そのスタイルに UI スタイル が自動的に割り当てられます。

このスタイルは Default Style と呼ばれます。

このスタイルは、UI 要素の初期の外観を定義する役割を担っています。

Content Browser の Interface フォルダー内で見つけることができます。

これは、Default Style に対する変更が、そのスタイルを使用しているすべての UI 要素に自動的に影響を与えることを意味します。

そのため、Default Style を Cave Engine のデフォルトインターフェーススタイルとして保持し、プロジェクトのカスタマイズ用に新しい UI スタイル を作成することが良い慣行です。

このようにすることで、デフォルトスタイルをまだ使用しているすべての要素を誤って変更することなく、UI 要素の外観を変更できます。

UI Element を選択し、Style Override プロパティで、先ほど作成した新しい UI スタイル に Default Style を置き換えます。

これで、この UI 要素はデフォルトのスタイルではなく、カスタムスタイルを使用することになります。

スタイルを編集するには、UI スタイルフィールドの横にある鉛筆アイコンをクリックします。

スタイルファイルを直接 Content Browser で選択してスタイルエディタを開くこともできます。

2. カスタマイズ

UI スタイルエディタ内では、その要素の視覚的プロパティをカスタマイズできます。

9-Slice Scaling オプションを使用すると、境界や角を歪めることなく、UI 要素のサイズを変更できます。

このオプションを有効にすると、要素は 9 つの領域に分割されます。4 つの角は常に同じサイズのままであり、境界は一方向だけで引き伸ばされ、中央の領域のみが自由にリサイズされます。

これは、異なるサイズをサポートしつつ、視覚的品質を保つ必要があるパネル、ウィンドウ、ダイアログボックス、ボタン、その他のインターフェース要素を作成するのに非常に便利です。

9-Slice Scaling を使用しない場合、ボタンやパネルのサイズを変更すると、全体の画像が引き伸ばされ、角が歪む可能性があります。9-Slice Scaling を使用すると、要素のサイズを大きくしたり小さくしたりしながら境界をクリーンに保つことができます。

Image オプションでは、コンピュータからテクスチャを読み込んで、UI 要素の視覚的外観に使用できます。
Tint では、UI 要素に適用される色を変更できます。これは、要素で使用される画像の上に塗りつぶすようなもので、元のテクスチャを編集せずに外観を変更できます。
Alpha は、UI 要素の透明度レベルを制御します。値が高いほど要素は不透明になり、値が低いほど透明度が増します。
Blur は、UI 要素の背後にぼけ効果を適用します。これは、メニュー、ポップアップ、一時停止画面、ダイアログウィンドウ、およびゲームシーンから目立たせる必要があるパネルに役立ちます。

同じ設定を、UI 要素の Hover および Click 状態にも適用できます。

これにより、各インタラクション状態に対して特定の画像、色、透明度、ぼかし値を定義できます。

たとえば、ボタンはアイドル時に一つの色を持ち、マウスがその上にあるときに明るくなり、クリック時に再び変わることができます。

これにより、プレイヤーに明確な視覚フィードバックが与えられ、インターフェースがより応答的で洗練されているように感じられます。

この時点で、UI スタイルが Cave Engine 内の UI 要素の外観を制御する方法を理解しました。

デフォルトスタイルを直接編集するのではなく、自分のスタイルを作成することで、プロジェクトを整理し、視覚的設定を再利用し、メニュー、ボタン、パネル、HUD 要素全体で一貫した外観を持つインターフェースを構築できます。

Cave: ゲームユーザーインターフェイス (ゲームUI) システム

UIスタイルのカスタマイズ