段 念1，賴雅琳1，李 敏2

?

復(fù)雜用戶界面制作設(shè)計(jì)三方合作方式的優(yōu)化與研究

段 念，賴雅琳，李 敏

（1. 華僑大學(xué)機(jī)電及自動(dòng)化學(xué)院，福建泉州 362011；2. 育碧電腦軟件有限公司，上海 200000）

隨著高性能芯片以及高速網(wǎng)絡(luò)等硬件條件的快速發(fā)展，游戲中用戶界面的開發(fā)變成一件越來越繁瑣的工作，通過分析傳統(tǒng)復(fù)雜游戲軟件用戶界面設(shè)計(jì)方法的缺陷，根據(jù)現(xiàn)有情況進(jìn)行了改進(jìn)和優(yōu)化，提出了改進(jìn)思路和構(gòu)架的實(shí)現(xiàn)，經(jīng)試驗(yàn)證明，該方法可以大大減少了復(fù)雜界面開發(fā)的時(shí)間。

計(jì)算機(jī)應(yīng)用；腳本語言；界面設(shè)計(jì)；三方合作

近年來，隨著高性能芯片以及高速網(wǎng)絡(luò)等硬件條件的快速發(fā)展，電腦游戲也進(jìn)入了前所未有的繁榮和大發(fā)展的時(shí)期。在這一時(shí)期各種新技術(shù)新變革中，與用戶交互最密切的用戶界面是最顯著最困難的革新之一。其困難主要來源于前后兩個(gè)時(shí)期對用戶界面開發(fā)要求的巨大差距。

變革之前的用戶界面受制于多方條件，并不是游戲的關(guān)鍵所在，因此投入的技術(shù)與研究相對有限，表面上體現(xiàn)為開發(fā)過程中使用簡單的開發(fā)工具，而且要花費(fèi)較長的開發(fā)時(shí)間。而在多種約束解除之后，開發(fā)者決心充分發(fā)揮新硬件的多種機(jī)能。希望可以制作更人性化交互的游戲，全新的游戲模式（例如角色扮演混合即時(shí)戰(zhàn)略）等，而這些先進(jìn)的設(shè)計(jì)思想都需要有一個(gè)完善的用戶界面。然而，開發(fā)者卻發(fā)現(xiàn)原有的用戶界面開發(fā)方式因自身的限制難以高效簡明的支持新的設(shè)計(jì)要求，其已嚴(yán)重阻礙了新游戲的開發(fā)。

用戶界面的開發(fā)主要涉及到三個(gè)方面的開發(fā)人員，設(shè)計(jì)人員、美工人員、程序人員。設(shè)計(jì)人員給出用戶界面的設(shè)計(jì)思路，從游戲開始的各種模式選擇、存檔查看、功能選擇等頁面流程，到游戲進(jìn)行過程中的交互表示、消息顯示，以及結(jié)束之后各種統(tǒng)計(jì)信息的組織與安排。美工人員根據(jù)設(shè)計(jì)人員的設(shè)計(jì)文檔制作好程序員需要的各種數(shù)據(jù)文件，例如頁面的排版，按鈕的式樣，消息提示的動(dòng)畫等。程序人員最后將各方資源整合進(jìn)游戲。這三方人員合作完成游戲的用戶界面的制作。

1 傳統(tǒng)用戶界面設(shè)計(jì)的思路與構(gòu)架

由于受局限于硬件性能以及用戶顯示終端（電視機(jī)、顯示器）條件（如分辨率不高），以微軟Xbox與索尼PS2為代表的游戲平臺上，游戲都傾向于提供簡單的用戶界面。在硬件上，過多以及華麗的用戶界面會(huì)帶來性能上的負(fù)擔(dān)。在顯示終端上，低分辨率也難以顯示豐富的內(nèi)容給用戶。因此，這個(gè)時(shí)期的游戲界面相對簡單和樸素。

1.1 具體的框架思路如下（需求分析與解決）

建立一個(gè)用戶界面引擎，界面引擎主要由兩部分構(gòu)成，一是圖形模塊，二是事件響應(yīng)模塊。圖形方面，圖形編輯器與實(shí)時(shí)渲染合用界面引擎的圖形模塊，編輯器本質(zhì)是界面引擎圖形模塊功能的GUI表示。事件響應(yīng)模塊使用設(shè)計(jì)模式中的bridge模式，根據(jù)不同的事件，每個(gè)頁面調(diào)用在該頁面注冊過的回調(diào)函數(shù)。如圖1所示。

圖1 傳統(tǒng)的用戶界面設(shè)計(jì)流程圖

1.2 構(gòu)架（實(shí)現(xiàn)）

用戶界面引擎的中心是一個(gè)棧。棧內(nèi)的頁面將根據(jù)在棧中的順序，被繪制，更新，以及接受各種事件（如用戶按鍵）。每個(gè)頁面調(diào)用注冊的回調(diào)函數(shù)，因此也需要相應(yīng)的類來管理回調(diào)函數(shù)。實(shí)際應(yīng)用時(shí)至少需要三種類型的管理類（handler），分別是drawhandler（管理渲染的回調(diào)，如predraw，postdraw），pagehandler（管理頁面事件的回調(diào)，如頁面的進(jìn)棧，出棧，被置頂，被遮蓋），eventhanlder（管理定制事件的回調(diào)，如按鍵、網(wǎng)絡(luò)消息等）。

1.3 三方合作方式

設(shè)計(jì)人員通過文檔給出要求，從頁面的流程關(guān)系到內(nèi)容安排。設(shè)計(jì)人員在這個(gè)階段只給出用戶界面的概述。制作完全依賴于美工人員與程序人員。

美工人員根據(jù)文檔，首先設(shè)計(jì)頁面風(fēng)格、按鈕式樣、制作貼圖。然后根據(jù)程序人員的建議制作相應(yīng)的頁面動(dòng)畫與特效，例如文字效果、混合模式等。美工人員完全依賴程序人員，增加任何新的頁面特效都需要程序員提供支持。每次新特效的增加都至少經(jīng)過可行性與需求分析、流程設(shè)計(jì)、編碼測試、維護(hù)再改進(jìn)等幾個(gè)步驟。這樣漫長的過程無疑會(huì)顯著降低美工人員的工作效率。

程序員根據(jù)文檔編寫每個(gè)頁面的回調(diào)函數(shù)，處理每個(gè)按鍵的相應(yīng)，每個(gè)頁面進(jìn)棧、出棧的處理（如在頁面進(jìn)棧的時(shí)候，將頁面的內(nèi)容設(shè)置好）。并根據(jù)美工要求調(diào)整、增加用戶界面引擎圖形部分的功能。

1.4 傳統(tǒng)方法存在的問題

原有開發(fā)方式的落后的體現(xiàn)在于開發(fā)的難度加大以及開發(fā)的周期延長。而造成這樣的情況是因?yàn)橹暗拈_發(fā)模式不僅沒有充分協(xié)調(diào)三方開發(fā)人員，反而帶來了混淆，設(shè)計(jì)人員與美工人員都嚴(yán)重的受制于程序人員，而程序人員因?yàn)槌袚?dān)了太多的工作，需要處理太多的事情又反而會(huì)被降低工作效率。因此，在新的用戶界面開發(fā)方式里，要解決的問題就是調(diào)整三方開發(fā)人員的工作方式，降低彼此之間的依賴，提高各方的工作效率來適應(yīng)新的開發(fā)要求。

2 優(yōu)化與改進(jìn)

隨著次世代游戲機(jī)的興起，如微軟的Xbox360，索尼的PS3，在帶來強(qiáng)大計(jì)算能力的同時(shí)，也顛覆了很多傳統(tǒng)的游戲制作方式與方法，例如以前的游戲引擎多是單線程，既串行處理。而次世代游戲機(jī)都是多核心處理器，并行處理成為主流。其中，人機(jī)界面也是受影響非常大的一個(gè)方面，具體體現(xiàn)在兩方面：第一，硬件性能的提升，不僅讓游戲可以容納更多的內(nèi)容，如更多的人物，更多的事件，這些都需要用戶界面給出相應(yīng)的表示；也能提供更廣闊的平臺，制作更多類型的游戲，例如以前的游戲類型比較集中在第一人稱射擊(FPS)，等?，F(xiàn)在次世代上已經(jīng)出現(xiàn)了以前沒有的RTS類型，以及多種類型結(jié)合的情況。這也要求用戶界面設(shè)計(jì)方法求同存異，既能提供具有普適性的流程方法，又能留下豐富的擴(kuò)展空間，適應(yīng)各種特定的需求。第二，配套設(shè)備的升級，也要求用戶界面做出較大的革新。例如，高清晰電視的普及，可以給用戶界面提供更多的顯示空間，而如果有效利用，也需要反復(fù)的設(shè)計(jì)與改進(jìn)，這又是之前用戶界面構(gòu)架主要的缺陷之一。

2.1 具體的框架思路如下（需求分析與解決）

現(xiàn)有構(gòu)架的局限性主要因兩方面引起，既用戶界面引擎的兩個(gè)組成部分，圖形模塊與事件響應(yīng)模塊。圖形模塊的局限性是無法快速解決美工對新功能的需求；事件響應(yīng)模塊的局限性是沒有建立一套規(guī)范成熟的圖形模塊功能函數(shù)的API，無法讓設(shè)計(jì)人員完全參與腳本的編寫。解決這兩方面的局限性，需要調(diào)整用戶界面引擎的角色與功能。用戶界面引擎圖形模塊應(yīng)避免做重復(fù)的工作，可以使用現(xiàn)有成熟圖形工具軟件核心（如flash），將其某些與游戲相關(guān)的功能（例如材質(zhì)與內(nèi)存的管理方式，混合模式的實(shí)現(xiàn)等）做修改或延伸；在事件響應(yīng)模塊上，需要提供一套完善的圖形模塊API給設(shè)計(jì)人員使用，讓程序員無需再參與腳本的編寫。同時(shí)肯定消息響應(yīng)機(jī)制在降低通信雙發(fā)耦合性的成功，在新構(gòu)架下充分發(fā)揮其優(yōu)勢，作為腳本與游戲引擎通信連接的中間層。圖2為改進(jìn)后的設(shè)計(jì)流程圖。

圖2 改進(jìn)后的設(shè)計(jì)流程圖

2.2 構(gòu)架（實(shí)現(xiàn)）

構(gòu)架的實(shí)現(xiàn)采用的是lua腳本語言，利用分形上的曼德布洛特集合算法的小程序比較了十幾種腳本語言包括Io, Python, Lua, Java, C qcc，SBCL，Ghostscript等的各方面的綜合性能后，選擇了lua腳本語言，界面引擎的基于Adobe公司的Flash Lite 3.0 SDK平臺上開發(fā)的，使用該平臺的原因是界面設(shè)計(jì)師現(xiàn)在都是使用Adobe Flash CS3 Professional編輯器，這樣一來就能夠大大提高平臺的移植性。圖3為各腳本語言的響應(yīng)時(shí)間及速度等的圖表的部分截圖。

圖3 各腳本語言的響應(yīng)時(shí)間及速度等的圖表

用戶界面引擎與游戲核心引擎在邏輯上分離，界面引擎提供原生的腳本支持，包括事件響應(yīng)模塊整合腳本管理模塊，圖形功能模塊提供完善的圖形功能API。在邏輯上，界面引擎只與腳本發(fā)生調(diào)用。中間件只留下消息處理部分，成為一個(gè)負(fù)責(zé)腳本與游戲核心進(jìn)行通信的虛擬機(jī)。

2.3 三方合作方式

三方之間的合作將變得松散，彼此的依賴降的很低。對于設(shè)計(jì)人員來說，主要任務(wù)是設(shè)計(jì)用戶界面中的流程。在與程序員完成消息的統(tǒng)一制定后，能獨(dú)立并完成大部分用戶界面的制作，例如數(shù)據(jù)如何表示、頁面的跳轉(zhuǎn)流程等等。設(shè)計(jì)人員可以獨(dú)立完成頁面制作、修改、完善、更新。而美工人員則使用已有的成熟的第三方圖形工具制作用戶界面，不再需要程序員來增減功能。程序人員將把重點(diǎn)轉(zhuǎn)移到對用戶界面?zhèn)鬟f的特點(diǎn)消息的維護(hù)，無需再花費(fèi)大量精力在數(shù)據(jù)的表現(xiàn)上。圖4為三方之間的關(guān)系示意圖。圖中紅色與粉色部分則屬于界面引擎自動(dòng)完成的部分。

圖4 三方間連接關(guān)系示意圖

3 小 結(jié)

改進(jìn)后的模式最重要的是改變了程序人員在用戶界面制作過程中位置。設(shè)計(jì)人員與美工人員的工作無需再依賴于程序人員。有用戶界面引擎提供的腳本支持，設(shè)計(jì)人員可以完全使用圖形模塊提供的全部功能；而美工人員可以使用成熟的第三方軟件制作用戶界面資源；程序人員也可以從繁瑣的用戶界面細(xì)節(jié)工作中解脫出來。這樣解除三方人員的制約之后，項(xiàng)目的進(jìn)度能得到很大加速。而且無需編譯，方便修改。支持動(dòng)態(tài)載入，能夠在運(yùn)行同時(shí)重新載入修改過的腳本，提高工作效率。通過對功能函數(shù)的合理封裝，讓設(shè)計(jì)人員也能參與較簡單頁面代碼的編寫。但仍需依賴第三方圖形軟件，腳本帶來的性能的損失依然存在。

[1] 陸其明. 腳本驅(qū)動(dòng)的應(yīng)用軟件開發(fā)方法與實(shí)踐[M].北京: 清華大學(xué)出版社, 2006. 106.

[2] 張承忠, 李 敏. 腳本語言在復(fù)雜用戶界面制作中的應(yīng)用研究[J]. 信息技術(shù)與信息化, 2007, (3): 48-51.

[3] [韓]全 洪. 網(wǎng)絡(luò)游戲服務(wù)器編程[M]. 申玄京譯. 北京: 人民郵電出版社, 2006. 291.

[4] 闞紅星, 龔育昌. 一種基于GUI的測試腳本開發(fā)環(huán)境[J]. 計(jì)算機(jī)系統(tǒng)應(yīng)用, 2005, (1): 43-47.

[5] [美]Jennifer Preece, Yvonne Rogers, Helen Sharp. 交互設(shè)計(jì)——超越人機(jī)交互[M]. 劉曉暉, 張 景等譯. 北京: 電子工業(yè)出版社, 2003. 354.

[6] [美]Alex Varanese. 游戲腳本高級編程[M]. 陳 洪譯. 北京: 清華大學(xué)出版社, 2006. 63.

Optimization of Triple-side Cooperation in the Complicated Customer Interface Design

DUAN Nian, LAI Ya-lin, LI Min

( 1. College of Mechanical Engineering and Automation, Huaqiao University, QuanzhouFujian362011, China;2. ubiSoftware Corporation, Shanghai 200000, China)

With the high-speed development of high-performance CMOS chip and hardware condition, the traditional customer interface design becomesa very troublesome work.This paper analyzes the limitation of the traditional customer interface design method and the optimization of designing customer interface in the complicated game. Experimental results shows that the adoption of this method can greatly reduce the time consumption of complicated interface cooperation.

computer application; the script language; interface design; triple-side cooperation

TP 391

A

1003-0158(2011)01-0094-05

2009-07-20

華僑大學(xué)校級自然科學(xué)基金資助項(xiàng)目（07′0135）

段 念（1981-），女，福建福州人，講師，碩士，主要研究方向?yàn)橛?jì)算機(jī)圖形學(xué)及其應(yīng)用。