在處理游戲界面時(shí)，典型的UMG文本塊提供了各種選項(xiàng)和自定義設(shè)置。然而，許多開發(fā)人員發(fā)現(xiàn)，需要更靈活的文本來支持樣式更改、嵌入圖像和超鏈接的標(biāo)記。在實(shí)驗(yàn)性的富文本塊控制中，上面的很多需求已經(jīng)可以通過代碼實(shí)現(xiàn)了。

在4.20版本中，該控件可以在UMG使用，并且其工作流程得到了改進(jìn)，比以前更加靈活和可擴(kuò)展。在改進(jìn)過程中，我們沒有試圖支持開發(fā)人員可能需要的所有可能的定制，而是將富文本塊設(shè)置為接受裝飾器類，以便您可以定義項(xiàng)目所需的標(biāo)記行為。您會(huì)發(fā)現(xiàn)我們提供了一個(gè)decorator類作為例子，它允許您通過richtextblockagedecorator.cpp設(shè)置自己的decorator。

在這篇博文中，我將從UI設(shè)計(jì)師和程序員的角度介紹如何在UMG使用新的富文本塊控件。我將向您展示如何使用decorator類來擴(kuò)展它的功能。在開始添加您自己的定制之前，最好先熟悉一下UMG新公開的富文本塊功能。富文本塊控件允許您自定義塊內(nèi)容，或者通過使用數(shù)據(jù)表資源的文本樣式和裝飾器，或者通過使用您自己的裝飾器類。

您創(chuàng)建的數(shù)據(jù)表資源用于根據(jù)任何用戶定義的結(jié)構(gòu)存儲(chǔ)任何類型的數(shù)據(jù)。創(chuàng)建數(shù)據(jù)表時(shí)，您會(huì)注意到提供了兩種結(jié)構(gòu):文本樣式行和圖像行。文本樣式行結(jié)構(gòu)是富文本塊提供的內(nèi)置樣式的一部分，它允許您定義字體類型，如輪廓、顏色類型和字體大小。圖像行是所提供的RichTextBlockImageDecorator示例類的一部分，它允許您在富文本塊控件中指定任何Decorator類。它類似于文本樣式的線條結(jié)構(gòu)，允許您定義嵌入圖像的屬性，如大小縮放、色調(diào)、對(duì)齊等。

您可以使用RichTextBlockImageDecorator類示例作為起點(diǎn)來創(chuàng)建您自己的標(biāo)記文本，然后用您需要的任何Slate內(nèi)容來替換它，包括圖像、超鏈接甚至控件！數(shù)據(jù)表可以存儲(chǔ)任何類型的數(shù)據(jù)，并且可以通過數(shù)據(jù)表資源在編輯器中進(jìn)行設(shè)置。

初級(jí)課程

首先，我們需要?jiǎng)?chuàng)建一個(gè)新的控件藍(lán)圖，并使用調(diào)色板將富文本塊拖到畫布上。選擇富文本塊，并使用“詳細(xì)信息”面板查找文本樣式集。通過這個(gè)資源指定槽，我們可以傳遞樣式數(shù)據(jù)表來定義文本樣式和我們想要使用的任何數(shù)量的額外樣式。您可以選擇指定的下拉菜單并選擇“數(shù)據(jù)表”，或者使用內(nèi)容瀏覽器并選擇“添加新項(xiàng)>:雜項(xiàng)>:數(shù)據(jù)表”來創(chuàng)建新的數(shù)據(jù)表。

創(chuàng)建數(shù)據(jù)表時(shí)，可以直接從UMG的“詳細(xì)信息”面板中創(chuàng)建。從“選擇結(jié)構(gòu)”窗口和下拉菜單中選擇“富文本樣式行”作為行結(jié)構(gòu)。

在UMG的“詳細(xì)信息”面板或內(nèi)容瀏覽器中，雙擊新創(chuàng)建的數(shù)據(jù)表將其打開。在數(shù)據(jù)表編輯器中，我們首先創(chuàng)建一個(gè)名為“默認(rèn)”的新行。這一行代表默認(rèn)狀態(tài)下的文本。如果文本沒有顯式設(shè)置為另一種樣式，富文本塊將自動(dòng)使用該文本。

探索新創(chuàng)建的默認(rèn)行下的不同選項(xiàng)，并設(shè)置您想要用來設(shè)置字體類型、大小和字體的基準(zhǔn)樣式。設(shè)置選項(xiàng)后，單擊加號(hào)按鈕添加新行，然后在“行名稱”文本框中輸入名稱以添加更多樣式。

返回到分配有數(shù)據(jù)表資源的控件藍(lán)圖，并通過“詳細(xì)信息”面板在富文本塊的文本部分添加一些文本。

在UMG工具欄中，您可能需要單擊編譯按鈕來顯示富文本塊控件中的文本。

這里的文本使用剛剛設(shè)置的默認(rèn)行。若要應(yīng)用在數(shù)據(jù)表資源中創(chuàng)建的其他樣式，請(qǐng)使用以下格式將樣式應(yīng)用于換行文本:

& ltStyleName >文本<。/>。

在本例中，我們將在標(biāo)記中包含繼承數(shù)據(jù)表資源中Rich行的樣式的文本。這樣，文本現(xiàn)在將繼承我們?cè)O(shè)置的屬性，在這種情況下，橙色文本帶有黑色輪廓。

應(yīng)該記住，這個(gè)樣式標(biāo)簽可以在沒有任何前綴或后綴的情況下工作，并且不區(qū)分大小寫。

使用裝飾器

現(xiàn)在我們已經(jīng)能夠?qū)Ω晃谋緣K中的文本應(yīng)用不同的樣式，但是如果我們想要插入一些其他的文本呢？我們可以使用decorator來設(shè)置自己的標(biāo)記，以實(shí)現(xiàn)這個(gè)目標(biāo)。這些標(biāo)簽使我們能夠使用Slate無縫地呈現(xiàn)文本中的任何內(nèi)容。

為了方便起見，我們包含了一個(gè)RichTextBlockImageDecorator類的例子，通過它您可以使用Decorator類向富文本塊添加圖像。像富文本樣式行的內(nèi)置樣式一樣，富圖像行結(jié)構(gòu)定義了您希望在嵌入文本中支持的所有圖像。

現(xiàn)在，我們繼續(xù)擴(kuò)展所提供的RichTextBlockImageDecorator類，以便子類指向剛剛創(chuàng)建的富圖像行數(shù)據(jù)表。最簡(jiǎn)單的方法是創(chuàng)建一個(gè)新的藍(lán)圖類，選擇提供的RichTextBlockImageDecorator類作為父類，打開藍(lán)圖，將數(shù)據(jù)表分配給該類的Image Set屬性。

請(qǐng)注意，在4.20中，圖像裝飾器不會(huì)出現(xiàn)在父類列表中，但在4.21中會(huì)得到支持。目前，您可以將其擴(kuò)展到一個(gè)C++類，并在C++文件中指定您的數(shù)據(jù)表，或者在標(biāo)題頂部的UCLASS宏中添加Blueprintable，將子類擴(kuò)展到藍(lán)圖。

設(shè)置裝飾器后，將其添加到富文本塊的裝飾器類數(shù)組中，并在表格中插入帶有以下標(biāo)記的圖像:

<img id="ImageNameFromTable"/>& ltimg id="ImageNameFromTable"/>。

為了使更改生效，您可能需要單擊工具欄中的“編譯”按鈕。

添加新的裝飾器

雖然我們提供了RichTextBlockImageDecorator類作為例子，但是富文本塊最強(qiáng)大的一點(diǎn)是，您現(xiàn)在可以定義自己的自定義Decorator來充分利用Slate，這樣您就可以在文本中嵌入任何內(nèi)容。為此，您需要編寫兩個(gè)類:URichTextBlockDecorator和FRichTextDecorator。在設(shè)置了這兩個(gè)類之后，您可以使用UMG的富文本塊控件，通過DecoratorClasses數(shù)組向任何富文本塊添加裝飾器。您也可以使用標(biāo)簽通過裝飾器解析文本。

URichTextBlockDecorator定義了UObject類，它可以向編輯器的細(xì)節(jié)面板公開屬性。至少你需要實(shí)現(xiàn)CreateDecorator，它應(yīng)該將SharedPtr返回到你將要?jiǎng)?chuàng)建的FRichTextDecorator實(shí)例，以執(zhí)行所有繁重的任務(wù)。您還可以在這里實(shí)現(xiàn)任何屬性和實(shí)用函數(shù)，這樣設(shè)計(jì)人員就可以創(chuàng)建您的裝飾子類，作為傳輸他們需要的任何數(shù)據(jù)的藍(lán)圖。大家還記得，RichTextBlockImageDecorator定義了數(shù)據(jù)表屬性，這樣我們就可以在圖像表中傳遞它們。藍(lán)圖中要修改的任何內(nèi)容都應(yīng)該存在于UObject中。

FRichTextDecorator負(fù)責(zé)標(biāo)簽的實(shí)際解析/替換，需要實(shí)現(xiàn)兩個(gè)功能。第一個(gè)函數(shù)Supports將通過FTextRunParseResults獲取標(biāo)記的內(nèi)容，并根據(jù)裝飾器是否實(shí)際負(fù)責(zé)處理標(biāo)記返回true或false。將為DecoratorClasses數(shù)組中的每個(gè)裝飾器調(diào)用支持，然后，如果沒有找到處理標(biāo)記的裝飾器，則后退以將標(biāo)記顯示為普通文本。調(diào)用第二個(gè)函數(shù)CreateDecoratorWidget，通過替換支持的標(biāo)記來實(shí)際構(gòu)造和返回控件。如果您的標(biāo)記需要包含任何文本或元數(shù)據(jù)，您可以訪問FTextRunInfo。

以RichTextBlockImageDecorator類為例，我們定義SRichInlineImage控件，在傳遞給UObject包裝類的數(shù)據(jù)表中填充正確的圖像，然后作為CreatorDecoratorWidget的返回值傳遞。

在項(xiàng)目中使用富文本

我們已經(jīng)介紹了如何使用富文本塊的內(nèi)置特性，以及如何編寫裝飾器類來添加您自己的特性?，F(xiàn)在，您如何將此功能應(yīng)用到您的工作流程中？

如果您發(fā)現(xiàn)每次創(chuàng)建富文本塊時(shí)，都會(huì)設(shè)置一個(gè)包含相同裝飾器集合的裝飾器類數(shù)組，那么擁有一個(gè)包含一組默認(rèn)裝飾器的富文本控件子類可能會(huì)很有用。如果您需要更多的控制，SRich文本塊還支持自定義解析器和Marshall。您可以編寫自己的解析器來更改如何檢測(cè)和處理標(biāo)記的規(guī)則，并且可以通過使用自定義Marshall來控制控件中文本的布局。

雖然在所有項(xiàng)目文本區(qū)域中使用富文本塊很方便，但是在搜索標(biāo)簽時(shí)解析文本會(huì)產(chǎn)生相關(guān)的性能成本。如果性能是一個(gè)不可忽視的問題，那么在不需要富文本塊的額外功能時(shí)，就需要繼續(xù)使用普通文本塊。

富文本塊控件為您將有趣的效果應(yīng)用到項(xiàng)目文本帶來了許多可能性。有了它，你可以應(yīng)用簡(jiǎn)單的效果，比如文本高亮和手柄按鈕，或者更多的交互效果，比如嵌入式按鈕和戰(zhàn)利品鏈接，而有了decorator，你可以添加任何你能想象的效果！

點(diǎn)擊閱讀原文以訪問我們的富文本塊文檔，深入探索并開始使用它！