UI Style Editor (UI スタイル エディタ) ユーザー ガイド

ドキュメント概要: UI Styles (UI スタイル) での作業の UnrealUI^? Style Editor (UnrealUI^? スタイル エディタ) パッケージソフトを使用するためのガイド。

Maury Mountain により作成。Richard Nalezynski^? により管理。

はじめに

このドキュメントは、Unreal UI Style Editor (Unreal UI スタイル エディタ) の主要な機能を解説します。

UI シーンにスタイルを使用すると、ユーザー インターフェースをカスタマイズする際に、多大な時間と労力を節約することができ、UI のビジュアル的外見に集中したエリアを持たせることができます。スタイルは、ウェブ開発の Cascading Style Sheets (段階スタイル シート) (CSS) と似たように機能し、UI を通してテキストや画像が従うプロパティや所定の外見を設定することができます。CSS に似て、特定のスタイルのプロパティを変更すると、それが現在割り当てられているすべてのウィジェットでアップデートされます。

Style Editor (スタイル エディタ) の使用

スタイルの作成

スタイルを作成する際には、3 つのタイプから 1 つを作成し、Friendly Names (フレンドリ名) と Unique Tag (固有のタグ) を与え、UI Editor (UI エディタ) 内での整理や簡単な割り当てのためにグループ化し、どの UI 状態がスタイルを使用するかを確立し、プロパティを設定し、Style Editor (スタイル エディタ) でスタイルの結果をプレビューすることができます。

Style Editor (スタイル エディタ) 概観

エディタ レイアウト

これらは、Style Editor (スタイル エディタ) の異なるセクションです。

これらのセクションの目的は、作業をしているスタイルのタイプによって見ることができます。

スタイルでの作業

スタイルのタイプ

テキスト スタイル

フォント タイプのみに対応するスタイル タイプです。スタイルは、パッケージに現在入っているすべてのフォントを見つけ、スタイルに割り当てられるようにします。

画像スタイル

画像ウィジェット、ウィジェットの画像要素に割り当てるのに画像やマテリアル入力に対応します。

コンボ スタイル

完全に包括的なスタイルであり、1 つのスタイル内でフォントや画像スタイルをセットアップすることができます。コンボ スタイルのフォントと画像プロパティをセットアップする際に、以前に作成された Text (テキスト)、または Image Style (画像スタイル) を使用するように定義することができます。また、カスタマイズして、ニーズに基づいてスタイルをセットアップすることもできます。

スタイルの命名とグループ化

Friendly Name (フレンドリ名)

フレンドリ名フィールドは、Skin Editor^? に表示される名前であり、ウィジェットにスタイルを割り当てする際に選択するものです。スペースや特殊文字を使用することができ、簡単な認識する方法として、またスタイルを他のスタイルから区別する方法としてあります。

Unique Tag (固有のタグ)

この名前は、他のすべてのスタイルから固有でなければいけません。フレンドリ名と同じでもかまいませんが、スペースや特殊文字を持つことはできません。必要があると、このタグはコード内で参照されます。

Group Name (グループ名)

整理のためにスタイルを似たようなカスタム グループにまとめることができます。Skin Editor (スキン エディタ) では、Group Tab (グループ タブ) にナビゲートし、右クリックをして固有の名前を持つ新しいグループを作成します。すると、グループ名が Style Editor (スタイル エディタ) 内のドロップダウン メニューに表示されます。スタイルをウィジェットに割り当てていくと、コンテクスト メニューにグループ名が括弧 ([groupname]) で表示され、そのグループ内のすべてのスタイルがサブ メニューに表示されるのに気付くはずです。

スタイル プロパティ

3 つのタイプのスタイルのそれぞれは、似たようなプロパティを共有します。画像とテキストには特定のプロパティがあり、コンボ スタイル内に同じプロパティが表示されます。スタイル プロパティの 1 つの非常に重要な性質は、各状態がそれぞれ独自のプロパティを持つということです。Active (アクティブ)、Disabled (無効化)、Enabled (有効化)、Focused (フォーカス)、Pressed (押された) 状態がアクティブ (チェックされている) 場合、すべての状態に影響を与えたい場合は、すべての状態を [Shift] 選択して、プロパティを変更しなければいけません。そうでない場合、各個別の状態がそれ自身の外見と印象を持つようにセットアップすることができます。

Text Options (テキスト オプション)

Font (フォント): ゲーム内で現在読み込まれているフォントから選択します。フォントは、エディタ内の見つかった場所から Package.Group.Name のように表示されます。

Style Color (スタイル カラー): カラー ホイールを開き、その状態にカラーを割り当てます。

Alpha Value (アルファ値): 状態のアルファを 0-300 から設定します。UI のポスト プロセスがオンになっている場合は、どのような値 +100 でフォントが輝く状態になります。

Clipping Mode (クリッピング モード): フォントのためのクリッピング モードを設定します。

Overdraw (オーバードロー): ウィジェット境界の最後に達した文字列は、文字列が終わるまで境界の外を越えて続きます。

Clipped (クリップ): ウィジェットのサイズに基づいて、文字列の最後をクリップします。

Ellipse (3 点リーダー): ウィジェットの境界に達する場合、“…” を文字列の最後に追加します。

Wrapped (折り返し): 文字列がウィジェットのエッジに達した場合、テキストの各行が改行されます。

Clipping Alignment (クリッピング アラインメント): クリップのために左/上、中央、または右/下にアラインします。

Alignment H/V (アラインメント H/V): 水平、垂直軸でスタイルのデフォルト テキスト アラインメントを設定します。

Scale to fit (合うようにスケール): これを設定すると、文字列を動的にスケールします。フォントを特定の値以下にスケールしないように、最小のスケールが使用されます。

Scale X/Y (スケール X/Y): 0-1 の間の値を入力します。不均一にスケールすることができます。

Spacing Chars/Lines (文字/行のスペーシング): スタイルのピクセル カーニングと行の高さの値を指定します。サブピクセル値を使用することができます。

Padding H/V (パディング H/V): 文字列のすべてのサイドに入力値ピクセルを追加します。H は文字列の最初と最後に追加し、V は上と下の行に追加します。

Image Options (画像オプション)

Color/Alpha (カラー/アルファ): スタイルに割り当てられた画像の色を設定します。備考: Image (画像) スタイルでマテリアルを使用する場合、カラー/アルファはスタイルでなく、マテリアル自身に適用されなければいけません。

Default Texture (デフォルト テクスチャ): 緑色の矢印を使用して、このフィールドにテクスチャ、またはマテリアルを割り当てます。

Image Alignment (画像アラインメント): ウィジェット内の画像の左、中央、右アラインメントです。

Adjustment Type (調節タイプ): UI シーンで描かれた際に、ウィジェット内で画像がどのようにスケールされるかを設定します。

Clipped (クリップ): ウィジェットの境界にクリップします。

Scaled (スケール): ウィジェットのサイズに基づいてスケールします。ウィジェットは、画像の形と外見を定義します。

Uniformly Scaled (不均一にスケール):

Bound (バウンド):

Stretched (ストレッチ): テクスチャの中央ピクセルを伸ばし、オリジナルの解像度に基づいて画像の上部左、右、下部左、右の角を維持します。

Sample Position/Size (サンプル位置/サイズ): カスタム UV 座標をテクスチャに適用することを可能にしたり、テクスチャの特定のエリアを選んだりすることができます。

リスト スタイル

UI リストはスタイルを使用しますが、リスト状態関数を作成するのに、リスト自身は 4 つの異なるスタイルを必要とします。

UI List (UI リスト) ウィジェットは、Active (アクティブ)、Disabled (無効化)、Enabled (有効化)、Focused (フォーカス)、Pressed (押された) の 5 つの状態を持ちます。UI List (UI リスト) 内で、セルは独自のスタイルを持ちます。各セルは、Normal (ノーマル)、Mouse Over (マウス オーバー)、Selected (選択された)、Active (アクティブ) スタイルを持つことを必要とします。これら 4 つのスタイルの中で、状態は UI List (UI リスト) の現在の状態を表します。言い換えると、Focused (フォーカス) リスト (現在スクロールしているリスト) は、Normal (ノーマル)、Selected (選択された)、Mouse Over (マウス オーバー)、Active (アクティブ) の Focused (フォーカス) 状態を使用するということです。

List Styles (リスト スタイル) をセットアップする際には、ベース スタイルを作成し、その後、メイン スタイルをテンプレートとして使用してセル スタイルを作成するのが良いでしょう。というのは、特定の状態カラーに必ずしも関わりのないすべてのスタイルに広範囲の変更を加えることができるからです。

ヒントやコツ

スタイルを作成する際に、他のスタイルをテンプレートとして使用して作成することができます。これは、必要が出てくると、特定のスタイルのセットに広範囲の変更を加えることができるからです。例えば、フォントのサイズをグローバルに増加させる必要があり、それらすべてのスタイルがその特定のフォントにベース スタイルを使用したとすると、一度しか変更する必要はなく、プロパティはテンプレートとして使用する他のすべてのスタイルに渡ってプロパゲートします。

マテリアルとマテリアル インスタンスは、画像スタイルで使用することができ、スタイル状態ごとのマテリアルを持つことができます。マテリアルに含まれているすべてのアニメーションは UI で描かれます。カラーとアルファ値は、スタイルに割り当てられたマテリアルとともに機能しません。これらは、マテリアル/マテリアル インスタンスでセットアップする必要があります。

特定のウィジェットに関して、UI エディタ内のスタイルをオーバーライドすることができます。これらのオーバーライドは、スタイルのすべての状態プロパティを完全に置換しますが、テキストをアラインさせる簡単な方法です。しかしながら、オーバーライドをグローバルに変更する簡単な方法はないので、すべてのスケール タイプをオーバーライドで設定すると、すべてのウィジェットのオーバーライド設定を調節する必要があります。

スタイルを命名する際は気を付けてください。使用中のスタイルの名前変更や削除は面倒なことになります。命名を明確にすることは、スキンに渡って複製したスタイルを多く作成してしまわないようにもします。