GUIのスキン処理

ああ、美しいGUI!

This tutorial is about advanced skinning of a user interface. Most games generally don't need this, as they end up just relying on Label, TextureRect, TextureButton and TextureProgress.

ただし、多くの種類のゲームでは、MMO、従来のRPG、シミュレーター、戦略などの複雑なユーザーインターフェイスが必要になることがよくあります。これらの種類のインターフェイスは、コンテンツを作成するエディタやネットワーク接続用のインターフェイスを含む一部のゲームでも一般的です。

Godotのユーザーインターフェイスは、デフォルトテーマでこれらの種類のコントロールを使用しますが、それらは、ほぼすべての種類のユーザーインターフェイスに似せてスキン化できます。

テーマ

GUIは Theme リソースを通じてスキン化されています。テーマには、すべてのコントロールの視覚的なスタイル全体を変更するために必要なすべての情報が含まれています。テーマオプションには名前が付けられているため、どの名前が(特にコードから)何を変更するかは明確ではありませんが、いくつかのツールが提供されています。各コントロールの各テーマオプションが何であるかを確認する究極の場所は、どのドキュメントよりも常に最新である、scene/resources/default_theme/default_theme.cpp ファイルです。このドキュメントの残りの部分では、テーマのカスタマイズに使用されるさまざまなツールについて説明します。

テーマは、シーン内の任意のコントロールに適用できます。その結果、すべての子コントロールと孫コントロールも同じテーマを使用します(ツリーの下で別のテーマが指定されていない限り)。テーマで値が見つからない場合、ルートに向かって階層の上位のテーマで検索されます。何も見つからなかった場合、デフォルトのテーマが使用されます。このシステムにより、複雑なユーザーインターフェイスでテーマを柔軟にオーバーライドできます。

テーマのオプション

テーマ内のオプションの種類は次のとおりです:

  • 整数定数: 単一の数値定数。通常、コンポーネント間の間隔または配置を定義するために使用されます。
  • : 透過の有無にかかわらず、単色。通常、色はフォントとアイコンに適用されます。
  • テクスチャ: 単一の画像。テクスチャはあまり使用されませんが、使用される場合は、選択用のハンドルまたは複雑なコントロール(ファイルダイアログなど)のアイコンを表します。
  • フォント: テキストを使用するすべてのコントロールには、文字列の描画に使用されるフォントを割り当てることができます。
  • **StyleBox **: Styleboxは、さまざまなサイズでパネルを描画する方法を定義するリソースです(詳細については後で説明します)。

すべてのオプションは、次の項目と関連付けられています:

  • 名前(オプションの名前)
  • コントロール(コントロールの名前)

使用例:

var t = Theme.new()
t.set_color("font_color", "Label", Color(1.0, 1.0, 1.0))

var l = Label.new()
l.set_theme(t)
var t = new Theme();
t.SetColor("fontColor", "Label", new Color(1.0f, 1.0f, 1.0f));

var l = new Label();
l.SetTheme(t);

上記の例では、新しいテーマが作成されます。”font_color" オプションが変更され、ラベルに適用されます。その結果、ラベル(およびすべての子および孫ラベル)はその色を使用します。

Control.add_color_override() のオーバーライドAPIを使用することにより、テーマを直接使用せずに、特定のコントロールに対してだけ、これらのオプションをオーバーライドすることもできます。

var l = Label.new()
l.add_color_override("font_color", Color(1.0, 1.0, 1.0))
var l = new Label();
l.AddColorOverride("fontColor", new Color(1.0f, 1.0f, 1.0f));

Godo のインライン ヘルプ(スクリプト タブ) で、オーバーライド可能なテーマ オプションを確認するか、Control クラスのリファレンスをチェックしてください。

コントロールのカスタマイズ

いくつかのコントロールのみをスキン化する必要がある場合、多くの場合、新しいテーマを作成する必要はありません。コントロールは、特別な種類のプロパティとしてテーマオプションを提供します。チェックをオンにすると、オーバーライドが行われます:

../../_images/themecheck.png

上の画像に見られるように、テーマオプションには小さなチェックボックスがあります。チェックされている場合、それらはコントロールのテーマの値をオーバーライドするために使用できます。

テーマの作成

テーマを作成する最も簡単な方法は、テーマリソースを編集することです。リソースメニューからテーマを作成します。エディタがすぐに表示されます。その後、それを保存します(たとえば、mytheme.themeという名前で):

../../_images/sb2.png

これにより、後でコントロールに読み込んで割り当てることができる空のテーマが作成されます。

例: ボタンのテーマ化

これらのアセット(skin_assets.zip)をダウンロードして、プロジェクトに追加します。テーマエディタを開き、 "Edit Theme" をクリックして、[クラスアイテム追加]を選択します:

../../_images/themeci.png

作成するコントロールのタイプを求めるメニューが表示されます。 "Button" を選択します:

../../_images/themeci2.png

すぐに、すべてのボタンテーマオプションがプロパティエディタに表示され、そこで編集できます:

../../_images/themeci3.png

Styles 内で、"Normal" の横にある、おそらく[空]と表示されているドロップダウンメニューを開き、「新規 StyleBoxTexture」を作成して編集します。テクスチャスタイルボックスには、基本的にテクスチャと、テクスチャが引き伸ばされたときに引き伸ばされないマージンのサイズが含まれます。これは ”3x3" ストレッチングと呼ばれます:

../../_images/sb1.png

手順を繰り返して、他のアセットを追加します。サンプルファイルにはホバーまたは無効な画像がないため、通常と同じスタイルボックスを使用します。提供されたフォントをボタンのフォントとして設定し、フォントの色を黒に変更します。すぐに、ボタンはレトロな見ために変わります:

../../_images/sb2.png

このテーマを.themeファイルに保存します。 2Dエディタに移動して、いくつかのボタンを作成します:

../../_images/skinbuttons1.png

次に、シーンのルートノードに移動し、”Theme” プロパティを見つけて、作成したテーマに置き換えます。次のようになります:

../../_images/skinbuttons2.png

おめでとう!再利用可能なGUIテーマが作成されました!