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 ファイルです。このドキュメントの残りの部分では、テーマのカスタマイズに使用されるさまざまなツールについて説明します。

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

注意

Don't use the custom theme option in the Project Settings, as there are known bugs with theme propagation. Instead, apply your theme to the root Control node's Theme property. It will propagate to instanced scenes automatically. To get correct theming in the editor for instanced scenes, you can apply the theme resource to the instanced scene's root node as well.

テーマのオプション

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

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

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

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

使用例:

var theme = Theme.new()
theme.set_color("font_color", "Label", Color.red)

var label = Label.new()
label.theme = theme
var theme = new Theme();
theme.SetColor("fontColor", "Label", new Color(1.0f, 0.0f, 0.0f));

var label = new Label();
label.Theme = theme;

In the example above, a new theme is created. The "font_color" option is changed and then applied to a label. Therefore, the label's text (and all children and grandchildren labels) will be red.

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

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

In the inline help of Godot (in the Script tab), you can check which theme options are overridable, or check the Control class reference.

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

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

../../_images/themecheck.png

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

テーマの作成

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

../../_images/sb2.png

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

例: ボタンのテーマ化

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

../../_images/themeci.png

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

../../_images/themeci2.png

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

../../_images/themeci3.png

From Styles, open the "Normal" drop-down menu next to where it probably says "null" and create a "New StyleBoxTexture", then edit it. A texture stylebox contains a texture and the size of the margins that will not stretch when the texture is stretched. This is called nine-patch or "3x3" stretching:

../../_images/sb1.png

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

../../_images/sb2.png

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

../../_images/skinbuttons1.png

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

../../_images/skinbuttons2.png

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