虛擬現實方向的設計實踐與應用

摘? 要：近年來，隨著虛擬現實技術的快速發展，游戲產業也迎來新的機遇與挑戰。虛幻引擎軟件的畫面渲染效果更加精致，使三維游戲制作更為便捷。在具體的畢業實踐設計考察中發現，利用引擎進行游戲設計占比呈上升趨勢，其中游戲用戶界面設計是虛擬游戲中提升用戶體驗感的重要部分，有利于提升玩家的交互性和沉浸感。因此文章主要側重研究虛擬現實方向游戲UI部分的設計實踐，以常見游戲中的血條設計與制作為例，講解虛幻引擎UE中的UI界面設計與藍圖制作。

關鍵詞：虛幻引擎；用戶界面；藍圖

中圖分類號：TP317；TP391.9 文獻標識碼：A? 文章編號：2096-4706（2023）12-0013-05

Design Practice and Application in Virtual Reality Direction

—Design and Production of Game Blood Bar

TIAN Jin

（Suzhou Tourism and Finance Institute， Suzhou? 215104， China）

Abstract： In recent years， with the rapid development of virtual reality technology， the gaming industry has also faced new opportunities and challenges. The rendering effect of the Unreal Engine software is more refined， making 3D game production more convenient. In the specific graduation practice design inspection， it is found that the proportion of using engines for game design is on the rise， and game user interface design is an important part for enhancing user experience in virtual games， which is conducive to enhancing players' interactivity and immersion. Therefore， this paper mainly focuses on the design practice of virtual reality oriented game UI part， taking the design and production of blood bars in common games as an example to explain the UI interface design and blueprint production in the unreal engine UE.

Keywords： unreal engine; user interface; blueprint

0? 引? 言

隨著信息化社會的高速發展，虛擬現實逐漸成為熱門技術。畢業設計中選擇虛擬現實方向，可讓作品更具技術感。畢業設計創作是體現學生全方面技能和素養的主要手段，一個完整、美觀且有創意的作品，需要選用合適的虛擬現實相關軟件設計與制作。以游戲為例，常用游戲的血條設計與展示方式，可以使作品具有更好的視覺沖擊感和玩家體驗感。

1? 虛擬現實在游戲領域的發展

1.1? 虛擬現實

從20世紀虛擬現實誕生來，虛擬現實技術（又稱VR技術）日漸成熟，能夠利用模型、交互引擎、實時捕捉等多種技術，讓用戶與數字化的場景、物品、人物等進行互動，通過模擬真實視聽感受創建一個虛擬的世界。虛擬現實技術具有三種特征：沉浸性、交互性、想象性，其中交互性最為重要，主要涉及用戶在體驗。具體可以在操作中可以借助各類設備，如：手柄、手套等進行各種虛擬交互[1]。在視覺上，界面設計的好壞影響著用戶帶來更好的體驗感受。因此虛擬現實技術具有一定的復雜性。

1.2? 虛擬現實游戲

虛擬現實游戲指的是借助虛擬現實技術來獲得更沉浸體驗感的游戲，是電子游戲的一個新分支，也是虛擬現實技術應用的熱門方向。隨著信息化社會的快速發展，人們對游戲的體驗要求越來越高，虛擬現實類的游戲也逐漸興起。制作虛擬現實游戲的內容，要綜合使用各種軟件工具，對虛擬現實內容進行調研、分析、設計與開發。主要包括UI界面、場景設計、角色設計，在設計后，再進行建模、動畫、引擎搭建等[2]。一個虛擬現實游戲需要多人的團隊分工配合，共同完成設計開發測試發布。

很多游戲使用相同的游戲引擎來運行，選取合適的引擎軟件，可以更好地將游戲設計完成并展示效果。我校五年制數字媒體藝術設計專業學生，在畢業設計實踐應用時，多選用游戲公司EPIC開發的虛幻引擎Unreal Engine，該軟件可以快速搭建三維場景，將建好的模型導入，通過可視化的編程，實現游戲交互功能，并可以渲染出影視化的視覺效果。

2? 虛擬游戲UI設計整體思路

2.1? 符合基本人機交互

游戲UI設計是近年非常熱門的職業，是UI設計的一個分支，主要給游戲設計整體的操作顯示界面，讓玩家體驗游戲的時候更為簡單自然。最基本的就是要符合人機交互，UI中的游戲界面、按鈕等設計，要讓玩家快速方便地完成想要的操作，和游戲更自然地進行交互[3]。在前期游戲定位時要對游戲終端進行調研如手機、PAD、電腦或是其他游戲機，游戲界面版式，玩家游玩姿勢，操作便捷性等都是UI設計的中簡化人機交互的基礎。

2.2? 操作邏輯清晰

游戲UI界面中含有大量的操作邏輯，用于幫助玩家獲取想要的信息、進行正確的交互完成某一事件。在UI設計時要考慮常規玩家的習慣，對UI界面進行歸類，對重要UI操作適時地給予指示引導，對重點消息加一些提示，視覺顏色上進行增加飽和度等方式，讓玩家清晰地了解游戲，操控游戲，體驗游戲。

2.3? 界面整體美觀

游戲UI通常包括多種元素：登錄界面、游戲界面、玩家模塊、道具模塊、各類圖標、按鈕等，還有界面交互跳轉、玩家體驗時的視覺效果等。這些都需要UI設計時將風格統一一致，適當簡化交互視覺、字體風格、UI布局，減少長時間游玩時對玩家的刺激過度。目前游戲中常用HUD元素，HUD原指抬頭顯示系統，游戲中是將游戲UI界面以類似HUD方式顯示出來，讓玩家實時了解游戲的重要內容，體驗游玩時得到實時反饋。比如射擊類游戲包含玩家血量、敵人血量、武器狀態、小地圖、目標指引等，競速類游戲包含模擬儀表盤、方向盤、行駛速度、檔位等[4]。

3? 虛擬游戲UI中的血條設計實踐

3.1? 引擎中UI制作

在虛幻引擎中用來實現HUD元素和前端菜單等UI功能的設計器叫虛幻示意圖形界面設計器（Unreal Motion Graphics UI Desdigner）簡稱UMG，使用UMG創建控件藍圖可以完成UI的各種功能。UMG中有設計師界面和圖表界面，設計師界面中用于使用各種控件來實現畫面的顯示和布置，圖表界面中來實現控件的邏輯功能，如果要在游戲中調用該控件藍圖，需要使用藍圖節點來顯示、隱藏或關閉。

控件是指對數據和方法的封裝，在虛幻引擎中為用戶提供了大量的控件，簡化操作。常用的控件包括畫布面板、按鈕、文本、圖片、水平框、垂直框等，在設計師視圖中，可以通過拖拽方便地完成UI布局[5]。設計器中的設計，所見即所得，可以很方便地對UI界面進行可視化設計。如同設計器中的清晰方便，在圖表視圖中，使用虛幻引擎的藍圖語言，也很方便地對UI中的控件進行綁定、生成、更新和銷毀。在虛幻引擎游戲項目制作中，將不同玩家以及敵人血條進行區分，需要制作不同的血條，并在交互編程中對所需實現的功能進行藍圖編程，實現各種功能。

3.2? 二維血條制作

玩家血條常見的為長條形或圓形，需要直觀的以HUD元素實時顯示在界面上，讓玩家在游玩體驗中隨時清晰方便地了解自身血量。下面以簡單的長條形為例，講解二維血條的設計與制作。

在虛幻引擎UE4中，新建一個控件藍圖。打開此藍圖后進入設計師界面——設計器，在控制板中搜索進度條控件，并將其拖拽放置在畫布下方。畫布面板是控件藍圖中默認自帶的，將控件放置在畫布中，方便管理。畫布控件的大小可以自由設置，默認為填充屏幕。屏幕尺寸也可以根據最后游戲主要運行設備進行修改。

新建的進度條控件，對其進行命名方便后期管理。使用鼠標拖拽縮放控件大小，也可以在細節面板中精確地輸入尺寸XY的數值進行設定。使用錨點，將進度條固定在底部居中，在后期運行時會根據屏幕大小變化而等比縮放，不會出現位置偏差。細節面板中的參數根據實際需要進行調整，包括進度條的百分比，填充顏色，背景顏色，邊框圖形等，為了更為精準的顯示當前血條和最大血條的數值，在進度條上方添加2個文本控件。畫布中通過改變控件上下關系，可以調整UI界面中的層疊關系。將文本控件顯示于進度條上方，調整字體大小、顏色等。

3.3? 二維血條藍圖制作

下面通過藍圖編寫來實現二維血條UI的顯示、數值綁定調用、扣血機制、死亡判定、完善血條視覺效果。

3.3.1? 血條UI的顯示

使用控件藍圖制作好的血條UI，如果要顯示在游戲畫面中，需要使用藍圖進行控件調用。語句比較簡單，可以編寫在關卡、人物等公用藍圖中，也可以根據實際功能，編寫在需要顯示的程序后。玩家血條一般在關卡運行時即顯示，則可在人物藍圖中，使用“事件開始運行”后編寫創建控件藍圖和添加到視口，如圖1所示。虛幻引擎還提供了其他幾種顯示UI的方式，包括二維三維顯示、UI是否可以交互等。

3.3.2? 數值綁定和調用

變量是計算機編程語言中最基礎的對象，可以用于儲存計算的結果或者能表示值的抽象概念。虛幻引擎UE藍圖的基礎是C++編程語言，所以藍圖也是通過變量的名字來進行訪問，變量包括常用的整數型、浮點型、布爾型、數組、對象等多種類型，以滿足虛幻引擎編寫需求。

首先，玩家血條中需要綁定的基礎變量包括：當前血量和最大血量。為了方便引擎編程后期大量數據的整理，可在玩家人物藍圖中創建2個整數型變量儲存玩家的血量。在血條的控件藍圖中使用“綁定”，創建函數或者直接編寫藍圖，對血條的進度條百分比、文本數值和變量進行連接，在程序運行中可以實時進行扣血、加血等操作。函數是指計算機編程中一個固定的程序段，帶有一個入口和一個出口，通過綁定函數可以方便清晰地完成計算并輸出。圖2為進度條百分比綁定的函數藍圖，因之前設置的血量變量為整數型，而百分比為浮點型，當使用藍圖連接時，系統會自動進行變量類型轉換。

文本中的當前血量和最大血量使用相同方法綁定，變量HP_Now和HP_Max的值根據游戲設定賦值，比如玩家等級提升后最大血量上升。此處可先直接先設置為100，方便測試后面扣血、死亡判定的藍圖編寫。

3.3.3? 扣血機制實現

按游戲設定要求，玩家在受到不同傷害的時候會產生不同血量的扣除，例如輕擊、重擊、爆炸傷害、高空摔落等，但扣血藍圖可以共用一個，只需將扣除的血量設為一個變量，當受到不同傷害時，賦值給該變量。扣血藍圖使用自定義事件編寫，該事件是由用戶自己創建的，在需要的時間直接調用即可，這樣可以簡化藍圖的圖表，將不同的功能單獨編寫，方便測試修復BUG。

編寫階段可以將傷害的賦值簡單地使用按鍵操作，測試編寫的扣血機制是否正常運行。扣血自定義事件也比較簡單，如圖3所示，當按1或按2時，會出現不同的扣血效果，血條UI也會相應地減少。

3.3.4? 死亡判定

完成扣血操作后測試發現，血量可以無限地減少，變為負數。此現象并非我們所要，此處將制作一個死亡判定，當血量為0時，設置玩家死亡，并且不能再次扣血。設置一個新的布爾變量，用于儲存玩家是否死亡，初始值為false。當血量為0時，一是將當前血量設置為0，不出現負數。二是顯示失敗的UI。三是將死亡變量設置為ture。同時，死亡變量需要添加到扣血機制處，對玩家死亡后不可再執行扣血自定義事件進行控制，如圖4所示。涉及藍圖的流程控制——分支，經常用于游戲中各種特定條件的判斷，對事件流程進行分支進行。死亡判斷的三個事件可以依次執行也可以使用流程控制序列執行，具體效果基本相同。在后期藍圖制作中，還需要對死亡制作更多的設置，比如播放死亡動畫、音效，完善失敗UI的設計和制作等，添加到死亡判斷后執行。

3.3.5? 完善血條視覺效果

完成血條基本功能后，對血條的視覺效果進行完善。如血條的顏色可根據百分比進行設定，低于20%時修改顏色為紅色，作為玩家體驗時生命值過低的UI提示。該效果在血條UI進度條的填充顏色處進行函數綁定，并做數值的判定，分別給予常規血條綠色和低血量血條紅色。

另外，還可以對減血效果進行優化，比如使用時間軸，制作平滑的減血效果。或在減血的同時出現黃色的拖尾效果，豐富游戲體驗時的視覺沖擊感。拖尾效果制作是在原始血條底下復制一層，并制作更為緩慢的減血效果，其減少的血量和上層一致，因此不需要另外進行數值綁定，事件調用，只需設置一個新的背景血量為整數型變量，對其制作緩慢減少效果的藍圖。可使用藍圖中的“以事件設置定時器”設置一個循環的計時器，每隔0.008秒背景血量減少1。這個間隔時間根據實際減少的效果而定，也不能太過于緩慢，利用眼睛的視覺殘留特點，制作出拖尾的視覺效果，如圖5所示，這個黃色拖尾效果自定義事件可以放置在前面扣血自定義事件中，使每一次扣血均顯示該效果。

根據游戲整體UI設計，血條也可以制作成圓形、環形等，通過修改進度條控件的貼圖形狀，進度條百分比的顯示方向，使用同樣的方法來制作不同形狀的血條。貼圖使用PhotoShop軟件進行設計和繪制，更加適配整體UI界面效果。

4? 三維血條制作和綁定

因游戲場景多為三維，經常會將血條制作為3D效果的UI，使得視覺呈現方式更為真實。3D血條適合顯示在AI敵人頭上，隨著AI的移動而移動，方便玩家在擊殺時，實時了解敵人的血量。此血條只需使用簡單的條形進度條，特別是普通的AI敵人，如大型的BOSS可以多添加一些數值顯示，進度條的邊框美化。

3D血條因不需要使用整個屏幕，在設計器中修改為自定義大小，設定一個適合的大小：100×10，添加進度條為同樣大小，修改填充色和百分比，方便后面效果的查看。在AI角色藍圖的視口中添加一個控件組件，在細節面板中選擇制作好的3D血條UI，此時可預覽到3D血條效果，修改大小位置到合適。3DUI默認為場景空間，在運行時如果在不同方向看，會有某些角度無法顯示，可修改為“屏幕”模式，這樣在三維游戲場景中運行，此3D血條會永遠正對攝像機，也就是玩家身后的攝像機。

3D血條的綁定調用和二維差不多，也是設置變量儲存敵人的血條的當前血量和最大血量，在進度條的百分比處做函數綁定，將血量和血條百分比進行關聯。然后在后期敵人受擊判定、死亡判定等環節，對血量進行變量修改，敵人的3D血條就會相應變化。

5? 動態效果血條

以上幾種方式均使用控件藍圖里的進度條控件，可以制作各種形狀，二維三維血條，但無法制作出動態的效果。虛幻引擎UE中還提供了一種用戶界面材質，可以用于制作動態效果的UI。通過材質藍圖中對PS軟件制作的貼圖進行動態化編寫，將材質直接使用在UGM中的圖像、按鈕等控件上，實現動態的UI效果。

創建一個材質球，修改材質域為用戶界面，混合模式為半透明，使用PS等軟件制作的血條貼圖和紋理圖，在材質編寫中，將紋理圖制作出移動的效果，可將控制移動的數值改為參數，后期在材質球里實時預覽修改。再將動態的紋理層和血條貼圖進行混合，虛幻引擎里的材質混合是各種節點控制的，這邊編寫了一個材質函數，可以使用如圖6中的“比例”參數，對混合的百分比進行控制。這個參數和上面制作進度條血條中的變量一樣，使用材質參數集和血量進行綁定的，當受到攻擊或血量為零是判定死亡都可以修改該參數數值。

6? 結? 論

虛擬現實技術的興起和發展為越來越多的領域和行業拓寬了發展的思路，在游戲行業中的運用更是具有得天獨厚的優勢，讓虛擬現實游戲成為當下的一種潮流。其中，對于游戲UI的設計與制作更是提供了新的技術環境和要求。本文主要探討在虛擬現實方向的實踐設計中UI血條部分的實現方式，根據不同游戲設定，后期還需要完善血條其他特性，例如加血、復活等，同時可以遷移到魔法值、特殊傷害值、體力值等其他類似UI上，以此著重強調在細節處完善虛擬現實的可視性和交互性。

參考文獻：

[1] 吳超.側重表現效果的3D游戲UI引擎設計與實現 [D].北京：北京交通大學，2010.

[2] 蘇文芝.UI設計中用戶體驗研究 [J].無線互聯科技，2017（2）：66-67.

[3] 朱悅.基于UE4的射擊類手機游戲系統的設計與實現 [D].武漢：華中科技大學，2018.

[4] 黃岡.基于虛幻引擎的FPS游戲開發與設計 [D].西寧：青海師范大學，2020.

[5] 趙菡菲.基于虛擬現實技術的交互式界面設計系統 [J].單片機與嵌入式系統應用，2021，21（10）：22-26.

作者簡介：田晉（1983.10—），女，漢族，江蘇蘇州人，講師，碩士研究生，研究方向：信息技術、數字媒體。

收稿日期：2023-01-30

基金項目：2020年度蘇州旅游與財經高等職業技術學校研究課題（2020jyjx10）