デモプロジェクト / SDKを使ってアプリケーションのUIを設定する方法

SDKを使ってアプリケーションのUIを設定する方法

このSDKには、UIビルダーが含まれています。UIビルダーでは、アプリケーションのUIの視覚を設定することができます。

UIを変更するには、UI要素の視覚に影響を与えるグローバル設定(色、テクスチャ、フォント)を編集します。これらのプロパティは、テーマとしてまとめられます。

同じタイプのUI要素を入れ替えるには、作成したUI要素のコンテナであるウィジェットラッパーを使用します。

UIビルダーには、2つの独立した部分が含まれています:

テーマを操作する

テーマは、XsollaUtilsThemeタイプのアセットです。UI要素で使用される色、フォント、テクスチャのリストが含まれています。すべてのリストは、キーと値のペアのセットで、キーはテーマパラメータの一意の名前、それで値は対応する色、フォント、またはテクスチャです。

Settings > Project Settings > Plugins > Xsolla UIBuilderでテーマを操作できます:

  • UIのテーマを設定するには、Interface Themeフィールドでそれを選択します。
  • 選択したテーマを編集するには、Interface Themeフィールドの近くにある🔎アイコンをクリックします。

お知らせ
SDKがEpic Gamesランチャー経由でインストールされている場合、SDKの標準テーマを変更すると、これらのテーマを使用している他のプロジェクトにも変更が生じます。アプリケーション用に別のテーマを作成することをお勧めします。

  • 新しいテーマを作成するには、Interface Themeフィルドの近くにある+アイコンをクリックします。
  • 選択したテーマを削除するには、Interface Themeフィルドの近くにある×アイコンをクリックします。

お知らせ
テーマのパラメータ名を変更した場合、そのウィジェットはすべて編集が必要になります。

UI要素をテーマに接続する

UI要素をテーマに接続するには:

  1. UI要素ウィジェットのブループリントで、次の方法でテーマにアクセスします:
    • GetCurrentTheme — プラグイン設定で指定された現在のテーマを返します。
    • GetThemeThemeClassパラメータで指定された名前でテーマを返します。
  2. 以下のメソッドを使用して、テーマのパラメータ名を渡すことで、テーマから確定したパラメータの値を取得します:
    • GetColor — 色の値を取得します。
    • GetFont — フォントを取得します。
    • GetBrush — テクスチャを取得します。

デモプロジェクトでは、テーマをサポートするすべてのウィジェットは、テーマパラメータ名を持つStringタイプのパラメータのセットを持っています。これらのパラメーターは、UI要素の視覚を設定するために使用されます。

テーマをサポートするウィジェットの例を見つけるには、Content Browser > Xsolla Content > Common > Components > Primitivesに移動します。

ウィジェットマネージャーを使用する

ウィジェットマネージャーは、同じ種類のUI要素のビジュアルや動作を変更して、自動的に置き換えることができる仕組みです。

ウィジェットマネージャーに対応したUIを作成するには、以下の条件を満たす必要があります:

  • 指定されたUI要素の統一されたインターフェースを持つウィジェットを作成します。
  • ウィジェットライブラリのUI要素ウィジェットのタイプ名を定義します。
  • UI要素のウィジェットタイプをラッパーに渡します。ラッパーは、UI要素を作成するためのコンテナーです。ウィジェットタイプの名前は,ライブラリの名前と同じでなければなりません。
  • UIを作成する際には、ウィジェットではなくラッパーを使用します。

ウィジェットラッパー

コンテナ内のラッパーで,ページ内のラッパーが占める領域に必要なウィジェットを作成するもの。

UIの作成時にウィジェットラッパーを使用することで、UI全体の中でUI要素を自動的に変更することができます。これを行うには、ラッパーのウィジェットを変更します。UIプリミティブを使用する標準的なフローでは,このシナリオではすべてのウィジェットを手動で置き換えることを提案しています。

ウィジェットのタイプに応じて以下のようなラッパーがあります:

  • W_ButtonWrapper — ボタン用
  • W_InputWrapper — 入力フィールド用
  • W_TextWrapper — テキスト用
  • W_RichTextWrapper — リッチテキスト用
  • W_ImageWrapper — 画像用
  • W_CheckBoxWrapper — ボックス用

Detailsパネルでは、ラッパーによって作成されたウィジェットの表示パラメータを設定することができます。Widget Library Nameフィールドには、現在のウィジェットライブラリからウィジェットタイプの名前を指定します。

ウィジェットラッパーのブループリントは、Content Browser > Xsolla Content > Common > Components > Wrappersにあります。

ラッパーは,ウィジェットマネージャのメソッドを使用してウィジェットを操作します。

ウィジェットインターフェース

UIプリミティブが通常のウィジェットと同じようにウィジェットラッパーと相互作用するようにするために、ラッパーは統一されたインターフェイスを使用します。

ウィジェットのタイプに応じて以下のようなラッパーがあります:

  • BPI_PrimitivesButton — ボタン用
  • BPI_PrimitivesInput — 入力フィールド用
  • BPI_PrimitivesText — テキスト用
  • BPI_PrimitivesRichText — リッチテキスト用
  • BPI_PrimitivesImage — 画像用
  • BPI_PrimitivesCheckbox — ボックス用

UI要素ウィジェットのインターフェースは、DetailsパネルのImplemented Interfacesセクションで設定することができます。

ウィジェットのインターフェースは、Content Browser > Xsolla Content > Common > Components > Interfaceにあります。

ウィジェットライブラリ

ウィジェットライブラリは、XsollaUtilsWidgetsLibraryタイプのアセットで、キーと値のペアの形式でウィジェットクラスのリストを含んでいます。キーにはウィジェットタイプの名前が含まれ、値にはこのキーを使用して対応するラッパーによって作成されるウィジェットクラスが含まれます。

ウィジェットライブラリは,ラッパーとウィジェットクラスをつなぐコネクタとして機能します。

BP_DefaultWidgetLibraryのデフォルトウィジェットライブラリはSDKに含まれています。このライブラリには、デモプロジェクトのUI要素のリストが含まれています。

Settings > Project Settings > Plugins > Xsolla UIBuilderでウィジェットライブラリを操作できます:

  • 現在のウィジェットライブラリをインストールするには、Widgets Libraryフィールドでそれを選択します。
  • 選択したウィジェットライブラリを編集するには、Widgets Libraryフィルドの近くにある🔎アイコンをクリックします。

お知らせ
SDKがEpic Gamesランチャー経由でインストールされている場合、SDKの標準ウィジェットライブラリを変更すると、これらのウィジェットライブラリを使用している他のプロジェクトにも変更が生じます。アプリケーション用に別のウィジェットライブラリを作成することをお勧めします。

  • 新しいウィジェットライブラリを作成するには、Widgets Libraryフィルドの近くにある+アイコンをクリックします。
  • 選択したウィジェットライブラリを削除するには、Widgets Libraryフィルドの近くにある×アイコンをクリックします。

ラッパーブループリントで次のメソッドを使用して、ウィジェットライブラリにアクセスします:

  • GetCurrentWidgetsLibrary — プラグイン設定で指定された現在のウィジェットライブラリを返します。
  • GetWidgetsLibraryWidgetLibraryClassパラメータで指定された名前で指定されたウィジェットライブラリを返します。

ラッパーブループリントのGetWidgetメソッドを利用して、ライブラリからウィジェットタイプを取得します。

ウィジェットマネージャーのメソッド

次のメソッドは、ウィジェットと対話するためにラッパーによって使用されます。テーマをサポートする独自のラッパーやウィジェットを作成するときに使用します。

ボタンを使用するメソッド

メソッド名説明
SetButtonEnabledキーボード、マウス、タイマーイベントなどにボタンが反応するかどうかを定義するボタンの状態を設定します。
IsButtonEnabledボタンがキーボード、マウス、タイマーイベントなどに反応するかどうかを定義するボタンの状態を返します。
GetWidgetウィジェットを含むUIプリミティブのリストを返します。ボタンクリックイベントのサブスクライブに使用されます。
ConstructButtonボタンウィジェットを初期化します。ウィジェットラッパーによって使用されます。
SetExtraDataボタンの追加データのリストを設定します。すべてのウィジェットは、受信したデータを処理し、それを実証し、内部ロジックに従って使用します。例えば、追加データのセットを使って、ドロップダウンメニューを持つボタンに、ドロップダウンメニューの要素のリストを渡すことができます。
SetIconDataボタンに表示するアイコンのリストを設定します。アイコンのサイズや、他のボタン要素との距離を指定するには、このメソッドを使います。
SetButtonSelectedトグル位置を設定します。例えば:オンまたはオフカート内またはカートに入らないなど。
GetThemeDataボタンウィジェットが使用するテーマパラメータのセットを返します。
SetButtonTextボタンのテキストを設定します。

ボックスを使用するメソッド

メソッド名説明
SetIsCheckedボックスがチェックされているか、チェックされていないかの状態を設定します。
GetIsCheckedボックスの状態を返します。
IsTickHoveredカーソルがボックス領域にカーソルを合わせているかどうかを確認します。
ConstructCheckboxボックスウィジェットを初期化します。ウィジェットラッパーによって使用されます。
GetWidgetウィジェットに含まれるUIプリミティブのリストを返します。ボックスイベントのサブスクライブに使用されます。
GetThemeDataボックスウィジェットが使用するテーマパラメーターのセットを返します。
SetTextボックスのテキストを設定します。
GetTextボックスのテキストを受信します。

テキストまたはリッチテキストを操作するメソッド

メソッド名説明
GetTextテキストの値を返します。
SetTextテキストの値を設定します。
GetWidgetウィジェットに含まれるUIプリミティブのリストを返します。テキストイベントのサブスクライブに使用されます。
GetThemeDataテキストウィジェットで使用されるテーマパラメーターのセットを返します。
ConstructTextテキストウィジェットを初期化します。ウィジェットラッパーによって使用されます。

画像を使用するメソッド

メソッド名説明
GetImage画像を返します。
SetImage画像を設定します。
GetWidgetウィジェットに含まれるUIプリミティブのリストを返します。画像イベントのサブスクライブに使用されます。
GetThemeDataイメージウィジェットが使用するテーマパラメータのセットを返します。
ConstructImage画像ウィジェットを初期化します。ウィジェットラッパーによって使用されます。

入力フィルドを使用するメソッド

メソッド名説明
GetText入力フィールドのテキストを返します。
SetText入力フィールドのテキストを設定します。
GetWidgetウィジェットに含まれるUIプリミティブのリストを返します。入力フィルドイベントのサブスクライブに使用されます。
ConstructInput入力フィールドウィジェットを初期化します。ウィジェットラッパーによって使用されます。
GetHint入力フィールドのヒントテキストを返します。
SetHint入力フィールドのヒントテキストを設定します。
SetupFocus入力フィールドのフォーカスを設定します。
GetThemeData入力フィールド・ウィジェットが使用するテーマパラメータのセットを返します。
この記事は役に立ちましたか?
ありがとうございます!
改善できることはありますか? メッセージ
申し訳ありません
この記事が参考にならなかった理由を説明してください。 メッセージ
ご意見ありがとうございました!
あなたのメッセージを確認し、体験を向上させるために利用させていただきます。
このページを評価する
このページを評価する
改善できることはありますか?

答えたくない

ご意見ありがとうございました!
最終更新日: 2022年8月12日

誤字脱字などのテキストエラーを見つけましたか? テキストを選択し、Ctrl+Enterを押します。

問題を報告する
当社は常にコンテンツを見直しています。お客様のご意見は改善に役立ちます。
フォローアップ用のメールをご提供してください
ご意見ありがとうございました!