Verse 필드는 UMG에서 바로 정의할 수 있습니다. 변수는 사용자 위젯에서 생성되고, 이후 Verse 코드의 위젯 프로퍼티에 바인딩됩니다. 변수는 Verse 데이터를 전달하고 에셋 다이제스트에 반영됩니다. 변수는 또한 장치 뷰 모델을 사용하지 않고도 커스텀 동적 UI를 제작할 수 있는 방법을 제공합니다.
섬 내 거래 UI 예시
Verse 필드와 Verse UI를 통해 커스텀 UI 엘리먼트를 추가함으로써 상점 예시는 마켓플레이스 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- 각 아이템 열의 보기 버튼을 추가하기 위한 클래스입니다.link_volume_to_shop_device- 볼륨 장치(Volume 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
스택 박스가 포함된 두 번째 오버레이 위젯이 추가됩니다. 오퍼의 바디 생성을 위해 스택 박스가 사용됩니다. 마지막 스택 박스 슬롯은 상세 정보 디자인이 포함된 사용자 위젯인 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에 나열된 각 아이템에 대해 입력하는 아이템 개수 열을 만들어, 스택 박스의 각 오퍼에 작동하는 반복 가능 액션을 만듭니다. 예를 들어 오퍼 3개가 있다면 이 함수는 각 아이템에 대해 3개의 오퍼 위젯을 만듭니다.
PopulateOffers(InOffers:[]offer) : void =
for (Offer : InOffers):
var OfferItemWidget : ui_shop_offer_item = ui_shop_offer_item {}각 오퍼에 대해 UpdateSelectedOfferDetails 함수는 다음 데이터를 업데이트합니다.
이름
아이콘
ShortDescription
PriceFloat
UpdateSelectedOfferDetails(SelectedOffer : offer) : void =
var PriceFloat : float = 0.0
if (PriceVB := price_vbucks[SelectedOffer.Price]):
set PriceFloat = GetPriceVBucks(PriceVB)
HandleBuyButtonClicked 메서드는 플레이어가 구매를 할 경우 에픽게임즈 결제 워크플로로 보냅니다.
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{}