前言
Common UI給虛幻的UI系統(tǒng)帶來(lái)了很多新特性，這些新特性往往面向不同的使用場(chǎng)景。目前我看到很多的Common UI教程，都是把這些特性很籠統(tǒng)地展示一遍，這就很容易造成初學(xué)者的困惑：“我當(dāng)前做的這些工作，到底是為了實(shí)現(xiàn)什么？”所以本文采用分場(chǎng)景介紹的方式，希望能夠幫初學(xué)者理清一下Common UI的工作邏輯。
0. 通用設(shè)置
只要使用Common UI就要做的設(shè)置
0.1 開(kāi)啟插件
開(kāi)啟Common UI插件
0.2 設(shè)置Viewport
Viewport是程序運(yùn)行時(shí)Widget的容器及管理器，Common UI從原來(lái)的Widget繼承樹(shù)上又派生了新的分支，新分支自然需要擴(kuò)展后的新Viewport(CommonGameViewportClient)去管理。
1. 分場(chǎng)景教程
1. 1 在僅使用鼠標(biāo)控制的場(chǎng)景下
如果你游戲完全用鼠標(biāo)控制，那么除了上述通用設(shè)置以外，Common UI中最值得關(guān)注的部分就是新增的Common Activatable Widget 以及Common Activatable Stack
Common Activatable Widget
Common Activatable Stack
Common Activatable Stack
Common Activatable Stack 顧名思義就是一個(gè)棧。UI中的Widget經(jīng)常會(huì)有上下堆疊的狀態(tài)，處于頂層的Widget處于可用狀態(tài)(Activate)（當(dāng)用鍵盤或游戲手柄控制的時(shí)候，它會(huì)獲得控制焦點(diǎn)），而非頂層的Widget會(huì)處于不可用狀態(tài)，被置灰或者隱藏。這時(shí)候我們往往要自己動(dòng)手實(shí)現(xiàn)一個(gè)Stack，來(lái)管理這些Widget的行為。Common Activatable Stack 就是Common UI為我們內(nèi)置的這樣一個(gè)Stack。
當(dāng)Common Activatable Stack 對(duì)Common Activatable Widget進(jìn)行Push Widget操作時(shí)，會(huì)將原來(lái)?xiàng)ｍ數(shù)?code>Common Activatable Widget進(jìn)行DeactivateWidget。當(dāng)然也可以手動(dòng)ActivateWidget和DeactivateWidget
void UCommonActivatableWidgetContainerBase::SetSwitcherIndex(int32 TargetIndex, bool bInstantTransition /*= false*/)
{
if (MySwitcher && MySwitcher->GetActiveWidgetIndex() != TargetIndex)
{
if (DisplayedWidget)
{
DisplayedWidget->OnDeactivated().RemoveAll(this);
if (DisplayedWidget->IsActivated())
{
DisplayedWidget->DeactivateWidget();
}
else if (MySwitcher->GetActiveWidgetIndex() != 0)
{
// The displayed widget has already been deactivated by something other than us, so it should be removed from the container
// We still need it to remain briefly though until we transition to the new index - then we can remove this entry's slot
bRemoveDisplayedWidgetPostTransition = true;
}
}
MySwitcher->TransitionToIndex(TargetIndex, bInstantTransition);
}
}
Common Activatable Widget
只有Common Activatable Widget才可以被Common Activatable Stack 管理，在Common Activatable Widget的Activation中設(shè)置ActivateWidget和DeactivateWidget時(shí)Common Activatable Widget的行為：
void UCommonActivatableWidget::NativeOnActivated()
{
if (ensureMsgf(bIsActive, TEXT("[%s] has called NativeOnActivated, but isn't actually activated! Never call this directly - call ActivateWidget()")))
{
if (bSetVisibilityOnActivated)
{
SetVisibility(ActivatedVisibility);
UE_LOG(LogCommonUI, Verbose, TEXT("[%s] set visibility to [%s] on activation"), *GetName(), *StaticEnum<ESlateVisibility>()->GetDisplayValueAsText(ActivatedVisibility).ToString());
}
if (CommonUI::IsEnhancedInputSupportEnabled() && InputMapping)
{
if (const ULocalPlayer* LocalPlayer = GetOwningLocalPlayer())
{
if (UEnhancedInputLocalPlayerSubsystem* InputSystem = LocalPlayer->GetSubsystem<UEnhancedInputLocalPlayerSubsystem>())
{
InputSystem->AddMappingContext(InputMapping, InputMappingPriority);
}
}
}
BP_OnActivated();
OnActivated().Broadcast();
BP_OnWidgetActivated.Broadcast();
}
}
void UCommonActivatableWidget::NativeOnDeactivated()
{
if (ensure(!bIsActive))
{
if (bSetVisibilityOnDeactivated)
{
SetVisibility(DeactivatedVisibility);
UE_LOG(LogCommonUI, Verbose, TEXT("[%s] set visibility to [%d] on deactivation"), *GetName(), *StaticEnum<ESlateVisibility>()->GetDisplayValueAsText(DeactivatedVisibility).ToString());
}
if (CommonUI::IsEnhancedInputSupportEnabled() && InputMapping)
{
if (const ULocalPlayer* LocalPlayer = GetOwningLocalPlayer())
{
if (UEnhancedInputLocalPlayerSubsystem* InputSystem = LocalPlayer->GetSubsystem<UEnhancedInputLocalPlayerSubsystem>())
{
InputSystem->RemoveMappingContext(InputMapping);
}
}
}
// Cancel any holds that were active
ClearActiveHoldInputs();
BP_OnDeactivated();
OnDeactivated().Broadcast();
BP_OnWidgetDeactivated.Broadcast();
}
}
關(guān)于如何定義一個(gè)Common Activatable Widget，在《官方項(xiàng)目《內(nèi)容示例》中Common UI部分筆記： 1.1 Activatable Widgets》一文中有較詳細(xì)的敘述。
1.2 當(dāng)焦點(diǎn)落到一個(gè)按鈕時(shí)顯示默認(rèn)確認(rèn)（Click/Accept）按鍵圖標(biāo)
上面是僅用鼠標(biāo)的場(chǎng)景，接下來(lái)聊的都是主要用鍵盤或游戲手柄的場(chǎng)景。
當(dāng)一個(gè)按鈕獲取到控制焦點(diǎn)時(shí)，按鈕上顯示默認(rèn)的確認(rèn)按鍵會(huì)提升玩家的使用體驗(yàn)。
實(shí)現(xiàn)這樣的效果，需要實(shí)現(xiàn)一個(gè)派生自UCommonButtonBase的按鈕，在UCommonButtonBase有一個(gè)UCommonActionWidget類型的InputActionWidget,從它的meta中可以看到，它是一個(gè)BindWidget,也就是說(shuō)，允許我們?cè)谒{(lán)圖中定義一個(gè)同名（即名為"InputActionWidget"）的UCommonActionWidget。
UPROPERTY(BlueprintReadOnly, Category = Input, meta = (BindWidget, OptionalWidget = true, AllowPrivateAccess = true))
TObjectPtr<UCommonActionWidget> InputActionWidget;
在UCommonActionWidget的UpdateActionWidget方法中會(huì)從游戲的預(yù)設(shè)**(Common Input Seetings)**中讀取到默認(rèn)Click按鍵的圖標(biāo)顯示出來(lái)，這個(gè)UpdateActionWidget在很多情況下都會(huì)被調(diào)用，包括按鈕的Hover狀態(tài)。
void UCommonActionWidget::UpdateActionWidget()
{
if (!IsDesignTime() && GetWorld())
{
const UCommonInputSubsystem* CommonInputSubsystem = GetInputSubsystem();
if (GetGameInstance() && ensure(CommonInputSubsystem) && CommonInputSubsystem->ShouldShowInputKeys())
{
const FCommonInputActionDataBase* InputActionData = GetInputActionData();
if (InputActionData || (EnhancedInputAction && CommonUI::IsEnhancedInputSupportEnabled()))
{
if (bAlwaysHideOverride)
{
SetVisibility(ESlateVisibility::Collapsed);
}
else
{
Icon = GetIcon();
if (Icon.DrawAs == ESlateBrushDrawType::NoDrawType)
{
SetVisibility(ESlateVisibility::Collapsed);
}
else if (MyIcon.IsValid())
{
MyIcon->SetImage(&Icon);
if (GetVisibility() != ESlateVisibility::Collapsed)
{
// The object being passed into SetImage is the same each time so layout is never invalidated
// Manually invalidate it here as the dimensions may have changed
MyIcon->Invalidate(EInvalidateWidgetReason::Layout);
}
if (IsHeldAction())
{
MyProgressImage->SetVisibility(EVisibility::SelfHitTestInvisible);
}
else
{
MyProgressImage->SetVisibility(EVisibility::Collapsed);
}
MyKeyBox->Invalidate(EInvalidateWidget::LayoutAndVolatility);
SetVisibility(ESlateVisibility::SelfHitTestInvisible);
return;
}
}
}
}
SetVisibility(ESlateVisibility::Collapsed);
}
}
接下來(lái)我們?cè)倏纯磩偛盘岬降?(Common Input Seetings)
Common Input Action DataBase
首先我們要?jiǎng)?chuàng)建一個(gè)格式為Common Input Action DataBase的數(shù)據(jù)表備用，這個(gè)數(shù)據(jù)表的作用其實(shí)就如同我們?cè)贗nput或Enhanced Input中配置的按鍵和Action的映射表
Input Data
再回到Common Input Seetings中，新建一個(gè)Common UIInput Data類的對(duì)象，在其中選擇剛才創(chuàng)建的數(shù)據(jù)表并配置如下兩個(gè)選項(xiàng)：
-
Default Click Action: 默認(rèn)的按鈕確認(rèn)事件 -
Default Back Action: 默認(rèn)的返回（撤回）事件
Common Activatable Widget可以選擇是否接受Back Action事件，如果勾選Is Back Handler默認(rèn)情況下，接收到Back Action事件，該Common Activatable Widget會(huì)被Deactivate。
Common Input Base Controller Data
在Common Input Seetings中的Controller Data下面可以就是配置針對(duì)各個(gè)平臺(tái)控制器按鍵圖標(biāo)的地方
1.3 即使焦點(diǎn)沒(méi)有落到該按鈕上，也可以使用指定按鍵觸發(fā)該按鈕，并且按鈕上會(huì)顯示按鍵提示圖標(biāo)(Input Action和Triggering Input Action)
如果UI上的按鈕較多或著有些常用按鈕距離較遠(yuǎn)，我們常常希望即使控制焦點(diǎn)沒(méi)有在那個(gè)按鈕上，也能夠用鍵盤或游戲手柄的某個(gè)特定按鍵觸發(fā)這個(gè)按鈕，這就是Common UI中的Input Action，類似快捷鍵。
實(shí)現(xiàn)Input Action的也要基于上面1.2中的若干設(shè)置，接下來(lái)實(shí)現(xiàn)Input Action有兩種方式：
- 使用名為"InputActionWidget"的
UCommonActionWidget，也就是上文中可以接受并顯示默認(rèn)Click事件圖標(biāo)的那個(gè)UCommonActionWidget，這時(shí)只需要在Triggering Input Action中配置觸發(fā)它的事件即可，配置方法和上文中配置默認(rèn)事件的方法一樣。注意：Input Action無(wú)論是否獲得控制焦點(diǎn)均會(huì)顯示。這說(shuō)明它就不再顯示默認(rèn)Click圖標(biāo)了。
2. 自定義一個(gè)UCommonActionWidget
這時(shí)我們需要在構(gòu)造函數(shù)(Construct)或預(yù)構(gòu)造函數(shù)(Pre Construct)中將它設(shè)置給Triggering Input Action
1.4 當(dāng)前UI觸發(fā)按鍵提示欄(Common Bound Action Bar)
當(dāng)一個(gè)UI有很多按鈕都有Input Action觸發(fā)鍵的時(shí)候，我們想在一目了然的地方（比如屏幕左下角）做一個(gè)顯示全部或部分觸發(fā)鍵圖標(biāo)的提示欄。
這個(gè)功能的實(shí)現(xiàn)需要用到Common UI為我們提供的Common Bound Action Bar
Common Bound Action Bar中的按鍵圖標(biāo)以及按鍵功能提示依賴于Action Button Class中提供的Common Bound Action Button類，這個(gè)類派生自剛才我們使用過(guò)的UCommonButtonBase
它們的工作邏輯也是一樣的，只不過(guò)里面又多了一個(gè)UCommonTextBlock類型的Text_ActionName，和InputActionWidget一樣，Text_ActionName也是和藍(lán)圖綁定的用于顯示按鍵說(shuō)明文字。
protected:
UPROPERTY(BlueprintReadOnly, meta = (BindWidget), Category = "Text Block")
TObjectPtr<UCommonTextBlock> Text_ActionName;
如果一個(gè)按鈕的觸發(fā)按鍵想顯示在Action Bar中，只需要配置其Triggering Input Action并勾選下面的選項(xiàng)即可。
文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-822811.html
2. 小結(jié)
碼了這么多字，好累！文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-822811.html
到了這里，關(guān)于官方項(xiàng)目《內(nèi)容示例》中Common UI部分筆記：Common UI 分場(chǎng)景使用教程的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
