Verse フィールドは UMG で直接定義できます。 変数はユーザー ウィジェットで作成された後、Verse コード内のウィジェット プロパティにバインドされます。 変数は Verse のデータを渡し、アセット ダイジェストに反映されます。また、デバイスのビュー モデルに依存せずに、独自の動的 UI を作成することもできます。
島内の取引 UI の例
このストアフロントの例では Verse フィールドと Verse UI を使ってカスタム UI 要素を追加し、Marketplace API を拡張しています。 API からデータ層にデータが渡され、Verse クラスがプレイヤーを追跡し、オブジェクトの購入に応答します。
テンプレート内の次のファイルがカスタム UI の外観を作成します。
shop_setup_device_template- このファイルはvar Shopを定義し、ShowUI関数を呼び出してui_shopファイル内の UI コードを表示します。ui_shop- Verse UI を通じて全てのウィジェットを Verse ファイルに統合するクラス。 UMG は、キャラクター画像、アイテムの詳細、ヘッダーと価格、アイテムの行を処理します。 Verse API は背景レイヤーとボタンを処理します。ui_shop_offer_item- 各アイテム行の [View (表示)] ボタンに追加するクラス。link_volume_to_shop_device- ボリューム仕掛けをトリガーとして使用し、ショップ インターフェースを表示する仕掛けスクリプト。
この例で使用される全てのマテリアル、テクスチャ、およびユーザー ウィジェットは、[UI] > [Verse] > [InIslandTransaction] フォルダーにあります。
ショップ UI
メイン ショップ UI のデザインは OverlayRoot でコーディングされています。 OverlayRoot は、マテリアル ブロックを使用してメイン背景とオファー背景の背景マテリアルのマテリアル インスタンスを呼び出します。
set OverlayRoot = overlay:
Slots := array:
overlay_slot:
Widget := BackgroundWidget
VerticalAlignment := vertical_alignment.Fill
HorizontalAlignment := horizontal_alignment.Fill
overlay_slot:
Widget := CloseButton
Padding := margin {Left := 824.0, Bottom := 30.0}
VerticalAlignment := vertical_alignment.Bottom
Stack Box を含む 2 番目のオーバーレイ ウィジェットが追加されます。 Stack Box はオファーの本文を作成するために使用されます。 最後の Stack Box スロットは、詳細のデザインを含むユーザー ウィジェットである OfferDetailsOverlayRoot 用に予約されています。
overlay_slot:
Widget := stack_box:
Orientation := orientation.Horizontal
Slots := array:
stack_box_slot:
Widget := stack_box:
Orientation := orientation.Vertical
Slots := array:
stack_box_slot:
Widget := HeaderWidget
PopulateOffers
PopulateOffers 関数は、OfferItemWidget にリストされている各アイテムに対して入力されたアイテム行の数を作成し、Stack Box 内の各オファーに対して機能する繰り返し可能なアクションを作成します。 たとえばオファーが 3 つある場合、この機能はアイテムごとに 3 つのオファー ウィジェットを作成します。
PopulateOffers(InOffers:[]offer) : void =
for (Offer : InOffers):
var OfferItemWidget : ui_shop_offer_item = ui_shop_offer_item {}各オファーについて、UpdateSelectedOfferDetails 関数は次のデータを更新します。
名前
アイコン
短い説明
PriceFloat
UpdateSelectedOfferDetails(SelectedOffer : offer) : void =
var PriceFloat : float = 0.0
if (PriceVB := price_vbucks[SelectedOffer.Price]):
set PriceFloat = GetPriceVBucks(PriceVB)
HandleBuyButtonClicked メソッドは、プレイヤーが購入を行ったときに、プレイヤーを Epic Games の配当ワークフローに送信します。
HandleBuyButtonClicked(SelectedOffer : offer) <suspends> : void =
BuyButton.OnClick().Await()
if (PlayerUI := GetPlayerUI[Player]):
HideUI(PlayerUI)
BuyOffer(Player, SelectedOffer)
仕掛けトリガー
この例では、ボリューム仕掛けをショップ UI を開くトリガーとして使用します。 任意の仕掛けを代替トリガーとして使用できます。 あるいは仕掛けをまったく使用しないこともできます。 プレイヤーが各アイテムに近づくと、UI がポップアップ表示されます。
# A Verse-authored creative device that can be placed in a level
link_volume_to_shop_device := class(creative_device):
@editable
var ShopTemplate:shop_setup_device_template = shop_setup_device_template{}
@editable
var OfferVolume:volume_device = volume_device{}