戴錦程
(西北民族大學(xué)數(shù)學(xué)與計(jì)算機(jī)科學(xué)學(xué)院 甘肅 蘭州 730030)
隨著數(shù)字化轉(zhuǎn)型的快速發(fā)展,軟件行業(yè)成為了當(dāng)今經(jīng)濟(jì)中最具活力和潛力的領(lǐng)域之一。 在這個(gè)充滿機(jī)遇和挑戰(zhàn)的領(lǐng)域,優(yōu)秀的用戶體驗(yàn)是一個(gè)至關(guān)重要的環(huán)節(jié),因?yàn)樗梢灾苯佑绊戃浖a(chǎn)品的市場(chǎng)競(jìng)爭(zhēng)力和商業(yè)價(jià)值。 而實(shí)現(xiàn)優(yōu)秀用戶體驗(yàn)的過(guò)程中,用戶界面設(shè)計(jì)則是其中最關(guān)鍵的方面之一。 一個(gè)簡(jiǎn)潔、易用、美觀的用戶界面能夠讓用戶更輕松地理解和使用軟件,提高效率和便捷性。 然而,在實(shí)際開(kāi)發(fā)過(guò)程中,設(shè)計(jì)出符合用戶需求和預(yù)期的用戶界面卻不是一件容易的事情。
為了解決這些問(wèn)題,本文提出了一種基于即時(shí)模式圖形用戶界面(immediate mode graphical user interface,ImGui)的跨平臺(tái)可視化用戶界面設(shè)計(jì)方法。 ImGui 是一種高效、輕量級(jí)的用戶界面設(shè)計(jì)庫(kù),適用于多種編程語(yǔ)言和操作系統(tǒng)平臺(tái)。 它采用即時(shí)模式繪圖技術(shù),使用戶界面渲染速度更快且更容易實(shí)現(xiàn)。 該方法可以幫助開(kāi)發(fā)者更輕松、高效地設(shè)計(jì)出優(yōu)秀的用戶界面。 通過(guò)使用圖形化界面設(shè)計(jì)工具,開(kāi)發(fā)人員可以快速創(chuàng)建和編輯用戶界面,并在不同的操作系統(tǒng)和平臺(tái)上運(yùn)行。 這種方法還允許開(kāi)發(fā)者通用一套代碼庫(kù),在跨多個(gè)平臺(tái)時(shí)實(shí)現(xiàn)一致性,從而提高代碼的可維護(hù)性和可擴(kuò)展性。
ImGui 又稱Dear ImGui,相比于傳統(tǒng)的應(yīng)用程序開(kāi)發(fā)框架(QtToolkit, Qt) 等圖形用戶界面(graphical user interface, GUI)設(shè)計(jì)工具,它是一種輕量級(jí)的開(kāi)發(fā)框架,是不依賴于外部庫(kù)的即時(shí)模式GUI 圖形開(kāi)發(fā)工具。
(1)易于使用:ImGui 使用C++編寫,且核心代碼量較少,設(shè)計(jì)簡(jiǎn)單,易于學(xué)習(xí)和使用。 用戶不需要專業(yè)的圖形設(shè)計(jì)知識(shí),只需基本的圖形學(xué)知識(shí)即可輕松上手。
(2)跨平臺(tái):ImGui 被設(shè)計(jì)為與任何圖形應(yīng)用程序編程接口(application programming interface, API)集成,使它能夠在各種不同的平臺(tái)之間進(jìn)行移植,包括Windows、Linux、MacOS X、iOS、Android 等操作系統(tǒng)。
(3)輕量級(jí)高效:ImGui 專注于提供高效簡(jiǎn)潔的用戶界面(user interface, UI)設(shè)計(jì),不需要一些其他的龐大的GUI 庫(kù)。
(4)低開(kāi)銷:ImGui 是一種“即時(shí)模式”GUI 框架,它并不創(chuàng)建和保存應(yīng)用程序中的GUI 對(duì)象。 它只是在每一幀中生成必要的內(nèi)容,使它具有非常低的開(kāi)銷。
(5)可定制性強(qiáng):ImGui 框架提供了大量的自定義選項(xiàng)和插件式的擴(kuò)展功能,使用戶可以完全控制GUI 的外觀和功能,從而創(chuàng)造出獨(dú)特的用戶體驗(yàn)。
(6)易于調(diào)試:ImGui 為用戶提供了完整的調(diào)試工具,使用戶可以更輕松地調(diào)試UI 的實(shí)現(xiàn),并最終得到非常高效的可執(zhí)行文件。
使用者必須編寫大量代碼來(lái)管理GUI 對(duì)象的創(chuàng)建和銷毀[1],例如開(kāi)發(fā)一個(gè)項(xiàng)目,經(jīng)常需要?jiǎng)?chuàng)建許多個(gè)GUI 小部件,如果數(shù)據(jù)非常大,GUI 對(duì)象的創(chuàng)建和銷毀速度慢會(huì)導(dǎo)致UI 響應(yīng)緩慢;除此之外,與其他UI 庫(kù)相比,ImGui 的功能相對(duì)簡(jiǎn)單,只提供了一些基本控件和圖形繪制功能,不能滿足所有的UI 需求,需要在應(yīng)用中進(jìn)行二次開(kāi)發(fā),由于ImGui 的設(shè)計(jì)思路適用于需要快速創(chuàng)建原型或小型項(xiàng)目,因此不適合用于大型、復(fù)雜的工程項(xiàng)目。
ImGui 在游戲開(kāi)發(fā)中有著廣泛的應(yīng)用,可以作為游戲引擎的默認(rèn)UI 框架,例如Unity3D、Unreal Engine 等都支持集成ImGui,極低的渲染消耗使ImGui 只需要一次性渲染整個(gè)UI,這種方式比傳統(tǒng)GUI 所需的大量事件處理和重復(fù)渲染要少得多,從而減少了開(kāi)放式圖形庫(kù)(open graphics library, OpenGL)和DirectX API 的調(diào)用次數(shù)。 同時(shí)ImGui 提供了極大的繪圖控制,包括對(duì)布局、對(duì)鼠標(biāo)、鍵盤事件的全控制、Texture Pack、樣式、語(yǔ)言等。 這些都使得ImGui 可以根據(jù)游戲引擎的特定需求提高性能和渲染效率;ImGui 可以輕松實(shí)現(xiàn)動(dòng)態(tài)布局,能夠根據(jù)分辨率、顯示比例和其他變化因素自動(dòng)適應(yīng)UI 布局,從而更好地適應(yīng)各種屏幕大小。 此外,與傳統(tǒng)的圖形界面庫(kù)不同,ImGui很容易定制。 用戶可以輕松地編寫定制功能,使其滿足程序的特定需求。
由于其超低的UI 開(kāi)銷和省時(shí)省力的特點(diǎn),ImGui 在快速開(kāi)發(fā)用戶界面方面非常有優(yōu)勢(shì)。 另外,ImGui 的易于定制和跨平臺(tái)支持也使其成為開(kāi)發(fā)人員的不二之選,能夠快速創(chuàng)建自定義UI 元素,以適應(yīng)各種特定的應(yīng)用程序需求。 此外,ImGui 的安全性和社區(qū)支持度高,也使得開(kāi)發(fā)人員更加信任它。 總之,ImGui 是一個(gè)十分優(yōu)秀的用戶界面框架,也是開(kāi)發(fā)人員完成各種領(lǐng)域的應(yīng)用程序所欣賞的工具。
Web Assembly 是一種低級(jí)的類匯編語(yǔ)言,具有緊湊的二進(jìn)制格式,可以接近原生的性能運(yùn)行,并為諸如C/C++/rust/go 等語(yǔ)言提供一個(gè)編譯目標(biāo),以便它們可以在Web 瀏覽器上運(yùn)行[2]。 它被設(shè)計(jì)為可以與JavaScript 共存,允許兩者一起工作,而ImGui 是一個(gè)用于創(chuàng)建用戶界面的工具庫(kù),它可以用于創(chuàng)建圖形化用戶界面和各種控件,通過(guò)將C++編寫的Dear ImGui 項(xiàng)目編譯為Web Assembly(WASM)二進(jìn)制文件,并使用Emscripten 將其部署到Web 上,可以在瀏覽器中運(yùn)行ImGui 界面,同時(shí)利用GLES 3.0 實(shí)現(xiàn)圖形渲染。 此組合的優(yōu)勢(shì)在于無(wú)需安裝任何本地軟件,在Web 上可以實(shí)現(xiàn)包括用戶交互界面、數(shù)據(jù)監(jiān)測(cè)、數(shù)據(jù)可視化等功能,且在不同平臺(tái)上都能夠獲得不錯(cuò)的性能表現(xiàn)[3],見(jiàn)圖1。 傳統(tǒng)的基于JavaScript 的Vue.js框架,用于構(gòu)建現(xiàn)代Web 應(yīng)用程序,具有易用性、可擴(kuò)展性和可重用性等優(yōu)點(diǎn),它可以幫助設(shè)計(jì)者快速構(gòu)建出美觀的用戶界面。 然而,Vue. js 的一個(gè)明顯劣勢(shì)是它的性能,Vue.js 需要在瀏覽器中解析和執(zhí)行大量的JavaScript 代碼,這可能會(huì)導(dǎo)致較慢的加載速度和響應(yīng)時(shí)間[4],相比之下Dear ImGui+Web Assembly+GLES 3.0 在實(shí)現(xiàn)Web 的一些類似數(shù)據(jù)監(jiān)測(cè)系統(tǒng)用戶界面時(shí),可以提供更快的加載速度、響應(yīng)時(shí)間和渲染性能,為其實(shí)現(xiàn)方案提出了另一種思路。
圖1 Web 界面展示
ImGui 庫(kù)允許在游戲運(yùn)行時(shí)直接調(diào)試和修改游戲狀態(tài)和變量,其原理是通過(guò)在游戲循環(huán)中實(shí)時(shí)創(chuàng)建、更新和渲染用戶界面,使用戶能夠在游戲運(yùn)行時(shí)查看和修改游戲狀態(tài)和變量。
ImGui 的工作原理可以歸納為以下幾個(gè)步驟:
(1)在游戲的初始化函數(shù)中創(chuàng)建ImGui 上下文。
(2)在每幀更新之前調(diào)用ImGui 函數(shù)以更新界面狀態(tài)。
(3)在游戲的渲染循環(huán)中調(diào)用ImGui 函數(shù),以顯示調(diào)試信息。
(4)在游戲結(jié)束時(shí)清除ImGui 上下文。
在游戲運(yùn)行時(shí),ImGui 庫(kù)通過(guò)創(chuàng)建、更新和渲染界面來(lái)實(shí)時(shí)顯示和修改游戲狀態(tài)和變量。 ImGui 的界面是通過(guò)在每幀更新時(shí)動(dòng)態(tài)生成的,因此可以隨時(shí)添加或刪除組件。 ImGui 提供了各種不同的組件,如文本框、按鈕、滑塊、下拉菜單等,可以方便用于游戲調(diào)試。 在ImGui 庫(kù)中,所有的UI 元素都是立即模式,意味著每幀都必須重新創(chuàng)建并渲染。 ImGui 庫(kù)使用GPU 加速來(lái)渲染UI 元素,因此其性能較高。
此外,由于ImGui 庫(kù)的代碼量很小,所以它可以輕松地集成到游戲引擎中,在主流的開(kāi)發(fā)引擎Unity 和Unreal Engile 中可以使用ImGui 插件或第三方插件來(lái)添加ImGui界面。 可以輕松地將ImGui 界面集成到游戲中。 見(jiàn)圖2。同時(shí),ImGui 插件還支持與編輯器進(jìn)行交互,并在運(yùn)行時(shí)實(shí)時(shí)查看和修改游戲狀態(tài)和變量,以幫助開(kāi)發(fā)者更輕松地調(diào)試和開(kāi)發(fā)游戲,而不會(huì)影響游戲的性能和穩(wěn)定性。 總之,ImGui 庫(kù)是一種快速、靈活且易于使用的調(diào)試工具,從而加快開(kāi)發(fā)進(jìn)程和提高游戲質(zhì)量,部分示例代碼如下:
圖2 調(diào)用ImGui 調(diào)試游戲
在應(yīng)用程序開(kāi)發(fā)中,登錄器是一個(gè)必不可少的組件。傳統(tǒng)的登錄器通常使用傳統(tǒng)的GUI 庫(kù)(如Windows Forms、WPF、Qt 等)來(lái)實(shí)現(xiàn)。 這種方式需要編寫大量的代碼,同時(shí)還需要花費(fèi)很長(zhǎng)的時(shí)間來(lái)創(chuàng)建和調(diào)試GUI 界面,增加了開(kāi)發(fā)時(shí)間和開(kāi)發(fā)成本[5-6]。 相比之下,使用ImGui 開(kāi)發(fā)登錄器具有以下優(yōu)點(diǎn):
(1)易于實(shí)現(xiàn)和快速迭代:使用ImGui 可以快速構(gòu)建簡(jiǎn)單而美觀的GUI 界面。 ImGui 的API 簡(jiǎn)單易用,使用者只需幾行代碼就可以創(chuàng)建和修改GUI 元素。 此外,ImGui提供了實(shí)時(shí)預(yù)覽功能,可以讓開(kāi)發(fā)者快速看到所做的更改,加快了迭代速度。
(2)跨平臺(tái)支持:傳統(tǒng)的GUI 庫(kù)通常是為特定平臺(tái)設(shè)計(jì)的,這意味著在不同平臺(tái)上使用時(shí)需要進(jìn)行適配和調(diào)試。 相比之下,ImGui 是一個(gè)跨平臺(tái)的GUI 庫(kù),可以在各種平臺(tái)上使用,包括Windows、MacOS、Linux 等。
(3)更少的開(kāi)發(fā)成本:傳統(tǒng)的GUI 庫(kù)需要編寫大量的代碼來(lái)創(chuàng)建和修改GUI 界面。 相比之下,ImGui 的API 簡(jiǎn)單易用,減少了編寫代碼的時(shí)間和工作量。 此外,ImGui還提供了各種自定義主題和控件,可以快速創(chuàng)建獨(dú)特的GUI 界面,從而減少了開(kāi)發(fā)成本。
(4)更好的性能表現(xiàn):傳統(tǒng)的GUI 庫(kù)通常需要在渲染時(shí)重新計(jì)算并繪制所有GUI 元素,這可能會(huì)影響性能。相比之下,ImGui 使用了高效的渲染機(jī)制和基于GPU 的即時(shí)渲染技術(shù),可以提高渲染性能和繪制效率,從而提高了應(yīng)用程序的運(yùn)行速度和用戶體驗(yàn)[7]。
總之,相比傳統(tǒng)的GUI 庫(kù),使用ImGui 開(kāi)發(fā)應(yīng)用程序登錄器具有更低的開(kāi)發(fā)成本、更好的性能表現(xiàn)、更快的迭代速度和跨平臺(tái)支持等優(yōu)點(diǎn)。 圖3 為使用ImGui 制作的登錄器。
圖3 使用ImGui 制作的登錄器
綜上所述,基于ImGui 的跨平臺(tái)可視化用戶界面設(shè)計(jì)具有高度的靈活性和可定制性,能夠大大提高開(kāi)發(fā)效率和用戶體驗(yàn),通過(guò)不斷的實(shí)踐和探索,可以深入理解其內(nèi)部原理和實(shí)現(xiàn)方式。 在未來(lái),ImGui 框架將會(huì)在更多的領(lǐng)域中得到廣泛應(yīng)用,并且持續(xù)為用戶界面設(shè)計(jì)和開(kāi)發(fā)領(lǐng)域帶來(lái)新的革新和突破。