Skip to content

第3.1章: ウィジェットタイプ ​


DayZ の GUI システムはウィジェット上に構築されています --- シンプルなコンテナから複雑なインタラクティブコントロールまでの再利用可能な UI コンポーネントです。画面上のすべての可視要素はウィジェットであり、完全なカタログを理解することは Mod UI の構築に不可欠です。

この章では、Enforce Script で利用可能なすべてのウィジェットタイプの完全なリファレンスを提供します。


ウィジェットの仕組み ​

DayZ のすべてのウィジェットは Widget ベースクラスを継承しています。ウィジェットは親子ツリーで構成され、ルートは通常 GetGame().GetWorkspace() で取得される WorkspaceWidget です。

各ウィジェットタイプには3つの関連する識別子があります。

識別子例用途
スクリプトクラスTextWidgetコード参照、キャスト
レイアウトクラスTextWidgetClass.layout ファイルの宣言
TypeID 定数TextWidgetTypeIDCreateWidget() によるプログラム的な作成

.layout ファイルでは常にレイアウトクラス名(Class で終わる)を使用します。スクリプトではスクリプトクラス名を使用します。


コンテナ / レイアウトウィジェット ​

コンテナウィジェットは子ウィジェットを保持し整理します。コンテンツ自体は表示しません(色付き矩形を描画する PanelWidget を除く)。

スクリプトクラスレイアウトクラス目的
WidgetWidgetClassすべてのウィジェットの抽象ベースクラス。直接インスタンス化しないでください。
WorkspaceWidgetWorkspaceWidgetClassルートワークスペース。GetGame().GetWorkspace() で取得。プログラム的なウィジェット作成に使用。
FrameWidgetFrameWidgetClass汎用コンテナ。DayZ で最も一般的に使用されるウィジェット。
PanelWidgetPanelWidgetClassソリッドカラーの矩形。背景、仕切り、セパレータに使用。
WrapSpacerWidgetWrapSpacerWidgetClassフローレイアウト。折り返し、パディング、マージン付きで子を順次配置。
GridSpacerWidgetGridSpacerWidgetClassグリッドレイアウト。Columns と Rows で定義されたグリッドに子を配置。
ScrollWidgetScrollWidgetClassスクロール可能なビューポート。子コンテンツの縦/横スクロールを有効化。
SpacerBaseWidget--SpacerWidget と ScrollWidget の抽象ベースクラス。WrapSpacerWidget と GridSpacerWidget はどちらも SpacerWidget を継承します。

FrameWidget ​

DayZ UI の主力です。ウィジェットをグループ化する必要がある場合、デフォルトのコンテナとしてフレームを使用してください。視覚的な外観はありません --- 純粋に構造的です。

注意: FrameWidgetClass は .layout ファイルで使用でき、CreateWidget() 用に FrameWidgetTypeID も存在しますが、FrameWidget スクリプトクラスは存在しません。PanelWidget と同様に、フレームはベースの Widget として扱ってください --- FrameWidget にキャストしないでください。

主要メソッド:

  • すべてのベース Widget メソッド(位置、サイズ、色、子、フラグ)

使用場面: ほぼどこでも。関連するウィジェットのグループをラップします。ダイアログ、パネル、HUD 要素のルートとして使用します。

c
// 名前でフレームウィジェットを検索
Widget panel = root.FindAnyWidget("MyPanel");
panel.Show(true);

PanelWidget ​

ソリッドカラーの可視矩形です。FrameWidget と異なり、PanelWidget は実際に画面上に何かを描画します。

主要メソッド:

  • SetColor(int argb) -- 背景色を設定
  • SetAlpha(float alpha) -- 透明度を設定

使用場面: テキストの背後の背景、色付き仕切り、オーバーレイ矩形、ティントレイヤー。

c
PanelWidget bg = PanelWidget.Cast(root.FindAnyWidget("Background"));
bg.SetColor(ARGB(200, 0, 0, 0));  // 半透明の黒

WrapSpacerWidget ​

フローレイアウトで子を自動配置します。子は1つずつ配置され、スペースがなくなると次の行に折り返されます。

主要レイアウト属性:

  • Padding -- 内部パディング(ピクセル)
  • Margin -- 外部マージン(ピクセル)
  • "Size To Content H" 1 -- 子に合わせて幅をリサイズ
  • "Size To Content V" 1 -- 子に合わせて高さをリサイズ
  • content_halign -- コンテンツの水平配置(left, center, right)
  • content_valign -- コンテンツの垂直配置(top, center, bottom)

使用場面: 動的リスト、タグクラウド、ボタン行、子のサイズが異なるレイアウト。

GridSpacerWidget ​

固定グリッドに子を配置します。各セルは同じサイズです。

主要レイアウト属性:

  • Columns -- 列数
  • Rows -- 行数
  • Margin -- セル間のスペース
  • "Size To Content V" 1 -- コンテンツに合わせて高さをリサイズ

使用場面: インベントリグリッド、アイコンギャラリー、均一な行を持つ設定パネル。

ScrollWidget ​

可視領域を超えるコンテンツ用のスクロール可能なビューポートを提供します。

主要レイアウト属性:

  • "Scrollbar V" 1 -- 縦スクロールバーを有効化
  • "Scrollbar H" 1 -- 横スクロールバーを有効化

主要メソッド:

  • VScrollToPos(float pos) -- 縦方向の位置にスクロール
  • GetVScrollPos() -- 現在の縦スクロール位置を取得
  • GetContentHeight() -- コンテンツ全体の高さを取得
  • VScrollStep(int step) -- ステップ量だけスクロール

使用場面: 長いリスト、設定パネル、チャットウィンドウ、ログビューア。


表示ウィジェット ​

表示ウィジェットはユーザーにコンテンツを表示しますが、インタラクティブではありません。

スクリプトクラスレイアウトクラス目的
TextWidgetTextWidgetClass単一行テキスト表示
MultilineTextWidgetMultilineTextWidgetClass複数行読み取り専用テキスト
RichTextWidgetRichTextWidgetClass埋め込み画像付きテキスト(<image> タグ)
ImageWidgetImageWidgetClass画像表示(イメージセットまたはファイルから)
CanvasWidgetCanvasWidgetClassプログラム可能な描画サーフェス
VideoWidgetVideoWidgetClass動画ファイル再生
RTTextureWidgetRTTextureWidgetClassレンダーテクスチャサーフェス
RenderTargetWidgetRenderTargetWidgetClass3D シーンレンダーターゲット
ItemPreviewWidgetItemPreviewWidgetClass3D DayZ アイテムプレビュー
PlayerPreviewWidgetPlayerPreviewWidgetClass3D プレイヤーキャラクタープレビュー
MapWidgetMapWidgetClassインタラクティブワールドマップ

TextWidget ​

最も一般的な表示ウィジェットです。単一行のテキストを表示します。

主要メソッド:

c
TextWidget tw;
tw.SetText("Hello World");
tw.GetText();                           // 文字列を返す
tw.GetTextSize(out int w, out int h);   // レンダリングされたテキストのピクセル寸法
tw.SetTextExactSize(float size);        // フォントサイズをピクセルで設定
tw.SetOutline(int size, int color);     // テキストアウトラインを追加
tw.GetOutlineSize();                    // int を返す
tw.GetOutlineColor();                   // int を返す(ARGB)
tw.SetColor(int argb);                  // テキスト色

主要レイアウト属性: text, font, "text halign", "text valign", "exact text", "exact text size", "bold text", "size to text h", "size to text v", wrap。

MultilineTextWidget ​

複数行の読み取り専用テキストを表示します。テキストはウィジェット幅に基づいて自動的に折り返されます。

使用場面: 説明パネル、ヘルプテキスト、ログ表示。

RichTextWidget ​

<image> タグを使用してテキスト内にインライン画像を埋め込むことをサポートします。テキストの折り返しもサポートします。

主要レイアウト属性:

  • wrap 1 -- 単語の折り返しを有効化

テキスト内での使用:

"Health: <image set:dayz_gui image:iconHealth0 /> OK"

使用場面: アイコン付きステータステキスト、フォーマットされたメッセージ、インライン画像付きチャット。

ImageWidget ​

イメージセットのスプライトシートまたはファイルパスからロードされた画像を表示します。

主要メソッド:

c
ImageWidget iw;
iw.SetImage(int index);                    // image0, image1 などを切り替え
iw.LoadImageFile(int slot, string path);   // ファイルから画像をロード
iw.LoadMaskTexture(string path);           // マスクテクスチャをロード
iw.SetMaskProgress(float progress);        // ワイプ/リビールトランジション用の 0-1

主要レイアウト属性:

  • image0 "set:dayz_gui image:icon_refresh" -- イメージセットからの画像
  • mode blend -- ブレンドモード(blend, additive, stretch)
  • "src alpha" 1 -- ソースアルファチャネルを使用
  • stretch 1 -- ウィジェットに合わせて画像をストレッチ
  • "flip u" 1 -- 水平反転
  • "flip v" 1 -- 垂直反転

使用場面: アイコン、ロゴ、背景、マップマーカー、ステータスインジケータ。

CanvasWidget ​

プログラム的にラインをレンダリングできる描画サーフェスです。

主要メソッド:

c
CanvasWidget cw;
cw.DrawLine(float x1, float y1, float x2, float y2, float width, int color);
cw.Clear();

使用場面: カスタムグラフ、ノード間の接続線、デバッグオーバーレイ。

MapWidget ​

完全なインタラクティブワールドマップです。パン、ズーム、座標変換をサポートします。

主要メソッド:

c
MapWidget mw;
mw.SetMapPos(vector pos);              // ワールド位置を中心に
mw.GetMapPos();                        // 現在の中心位置
mw.SetScale(float scale);             // ズームレベル
mw.GetScale();                        // 現在のズーム
mw.MapToScreen(vector world_pos);     // ワールド座標をスクリーン座標に
mw.ScreenToMap(vector screen_pos);    // スクリーン座標をワールド座標に

使用場面: ミッションマップ、GPS システム、位置選択ツール。

ItemPreviewWidget ​

任意の DayZ インベントリアイテムの 3D プレビューをレンダリングします。

使用場面: インベントリ画面、ルートプレビュー、ショップインターフェース。

PlayerPreviewWidget ​

プレイヤーキャラクターモデルの 3D プレビューをレンダリングします。

使用場面: キャラクター作成画面、装備プレビュー、ワードローブシステム。

RTTextureWidget ​

子を画面に直接ではなくテクスチャサーフェスにレンダリングします。

使用場面: ミニマップレンダリング、ピクチャインピクチャエフェクト、オフスクリーン UI 合成。


インタラクティブウィジェット ​

インタラクティブウィジェットはユーザー入力に応答し、イベントを発行します。

スクリプトクラスレイアウトクラス目的
ButtonWidgetButtonWidgetClassクリック可能なボタン
CheckBoxWidgetCheckBoxWidgetClassブーリアンチェックボックス
EditBoxWidgetEditBoxWidgetClass単一行テキスト入力
MultilineEditBoxWidgetMultilineEditBoxWidgetClass複数行テキスト入力
PasswordEditBoxWidgetPasswordEditBoxWidgetClassマスクされたパスワード入力
SliderWidgetSliderWidgetClass水平スライダーコントロール
XComboBoxWidgetXComboBoxWidgetClassドロップダウン選択
TextListboxWidgetTextListboxWidgetClass選択可能な行リスト
ProgressBarWidgetProgressBarWidgetClassプログレスインジケータ
SimpleProgressBarWidgetSimpleProgressBarWidgetClass最小限のプログレスインジケータ

ButtonWidget ​

主要なインタラクティブコントロールです。瞬間クリックとトグルモードの両方をサポートします。

主要メソッド:

c
ButtonWidget bw;
bw.SetText("Click Me");
bw.GetState();              // bool を返す(トグルボタンのみ)
bw.SetState(bool state);    // トグル状態を設定

主要レイアウト属性:

  • text "Label" -- ボタンラベルテキスト
  • switch toggle -- トグルボタンにする
  • style Default -- ビジュアルスタイル

発行されるイベント: OnClick(Widget w, int x, int y, int button)

CheckBoxWidget ​

ブーリアントグルコントロールです。

主要メソッド:

c
CheckBoxWidget cb;
cb.IsChecked();                 // bool を返す
cb.SetChecked(bool checked);    // 状態を設定

発行されるイベント: OnChange(Widget w, int x, int y, bool finished)

EditBoxWidget ​

単一行テキスト入力フィールドです。

主要メソッド:

c
EditBoxWidget eb;
eb.GetText();               // 文字列を返す
eb.SetText("default");      // テキスト内容を設定

発行されるイベント: OnChange(Widget w, int x, int y, bool finished) -- Enter キーが押されると finished が true になります。

SliderWidget ​

数値用の水平スライダーです。

主要メソッド:

c
SliderWidget sw;
sw.SetMinMax(0, 100);       // 値の範囲を設定(指定しない場合はデフォルト範囲)
sw.GetCurrent();            // 設定された min/max 範囲内の float を返す
sw.SetCurrent(float val);   // 位置を設定

主要レイアウト属性:

  • "fill in" 1 -- ハンドルの背後に塗りつぶしトラックを表示
  • "listen to input" 1 -- マウス入力に応答

発行されるイベント: OnChange(Widget w, int x, int y, bool finished) -- ユーザーがスライダーを離すと finished が true になります。

XComboBoxWidget ​

ドロップダウン選択リストです。

主要メソッド:

c
XComboBoxWidget xcb;
xcb.AddItem("Option A");
xcb.AddItem("Option B");
xcb.SetCurrentItem(0);         // インデックスで選択
xcb.GetCurrentItem();          // 選択中のインデックスを返す
xcb.ClearAll();                // すべてのアイテムを削除

TextListboxWidget ​

スクロール可能なテキスト行のリストです。選択と複数列データをサポートします。

主要メソッド:

c
TextListboxWidget tlb;
tlb.AddItem("Row text", null, 0);   // テキスト、userData、列
tlb.GetSelectedRow();               // int を返す(選択なしの場合 -1)
tlb.SetRow(int row);                // 行を選択
tlb.RemoveRow(int row);
tlb.ClearItems();

発行されるイベント: OnItemSelected

ProgressBarWidget ​

プログレスインジケータを表示します。

主要メソッド:

c
ProgressBarWidget pb;
pb.SetCurrent(float value);    // 0-100

使用場面: ローディングバー、ヘルスバー、ミッション進捗、クールダウンインジケータ。


完全な TypeID リファレンス ​

プログラム的なウィジェット作成のために GetGame().GetWorkspace().CreateWidget() でこれらの定数を使用します。

FrameWidgetTypeID
TextWidgetTypeID
MultilineTextWidgetTypeID
MultilineEditBoxWidgetTypeID
RichTextWidgetTypeID
RenderTargetWidgetTypeID
ImageWidgetTypeID
VideoWidgetTypeID
RTTextureWidgetTypeID
ButtonWidgetTypeID
CheckBoxWidgetTypeID
SimpleProgressBarWidgetTypeID
ProgressBarWidgetTypeID
SliderWidgetTypeID
TextListboxWidgetTypeID
EditBoxWidgetTypeID
PasswordEditBoxWidgetTypeID
WorkspaceWidgetTypeID
GridSpacerWidgetTypeID
WrapSpacerWidgetTypeID
ScrollWidgetTypeID

適切なウィジェットの選択 ​

やりたいこと使用するウィジェット
ウィジェットをグループ化(不可視)FrameWidget
色付き矩形を描画PanelWidget
テキストを表示TextWidget
複数行テキストを表示MultilineTextWidget または wrap 1 付き RichTextWidget
インラインアイコン付きテキストを表示RichTextWidget
画像/アイコンを表示ImageWidget
クリック可能なボタンを作成ButtonWidget
トグル(オン/オフ)を作成CheckBoxWidget または switch toggle 付き ButtonWidget
テキスト入力を受け付けEditBoxWidget
複数行テキスト入力を受け付けMultilineEditBoxWidget
パスワードを受け付けPasswordEditBoxWidget
ユーザーに数値を選択させるSliderWidget
ユーザーにリストから選択させるXComboBoxWidget(ドロップダウン)または TextListboxWidget(可視リスト)
進捗を表示ProgressBarWidget または SimpleProgressBarWidget
フローで子を配置WrapSpacerWidget
グリッドで子を配置GridSpacerWidget
コンテンツをスクロール可能にするScrollWidget
3D アイテムモデルを表示ItemPreviewWidget
プレイヤーモデルを表示PlayerPreviewWidget
ワールドマップを表示MapWidget
カスタムの線/図形を描画CanvasWidget
テクスチャにレンダリングRTTextureWidget

次のステップ ​


ベストプラクティス ​

  • デフォルトのコンテナとして FrameWidget を使用してください。可視の色付き背景が必要な場合にのみ PanelWidget を使用してください。
  • 後でインラインアイコンが必要になる可能性がある場合は TextWidget より RichTextWidget を優先してください --- 既存のレイアウトでタイプを切り替えるのは面倒です。
  • FindAnyWidget() と Cast() の後は必ず null チェックしてください。欠落したウィジェット名は無言で null を返し、次のメソッド呼び出しでクラッシュを引き起こします。
  • 動的リストには WrapSpacerWidget を、固定グリッドには GridSpacerWidget を使用してください。フローレイアウトで子を手動配置しないでください。
  • 本番 UI には CanvasWidget を避けてください --- 毎フレーム再描画され、バッチ処理されません。デバッグオーバーレイにのみ使用してください。

理論 vs 実践 ​

概念理論現実
ScrollWidget がコンテンツに自動スクロールコンテンツが境界を超えるとスクロールバーが表示される新しいコンテンツにスクロールするには手動で VScrollToPos() を呼ぶ必要がある; 子の追加時に自動スクロールしない
SliderWidget が連続イベントを発行ドラッグの各ピクセルで OnChange が発行されるドラッグ中は finished パラメータが false で、リリース時に true になる; 重い処理は finished == true の時のみ更新
XComboBoxWidget が多くのアイテムをサポートドロップダウンは任意の数で動作100以上のアイテムでパフォーマンスが顕著に低下する; 長いリストには代わりに TextListboxWidget を使用
ItemPreviewWidget が任意のアイテムを表示3D プレビュー用に任意のクラス名を渡すウィジェットはアイテムの .p3d モデルがロードされている必要がある; Mod アイテムには Data PBO が必要
MapWidget は単純な表示マップを表示するだけデフォルトですべてのマウス入力をインターセプトする; 重なるウィジェットへのクリックをブロックしないよう IGNOREPOINTER フラグを慎重に管理する必要がある

互換性と影響 ​

  • マルチ Mod: ウィジェットタイプ ID はすべての Mod で共有されるエンジン定数です。2つの Mod が同じ親の下で同じ名前のウィジェットを作成すると衝突します。Mod プレフィックス付きの一意なウィジェット名を使用してください。
  • パフォーマンス: 数百の子を持つ TextListboxWidget と ScrollWidget はフレーム落ちを引き起こします。50アイテムを超えるリストにはウィジェットをプールしてリサイクルしてください。

Released under CC BY-SA 4.0 | Code examples under MIT License