基于Flex的教育類網(wǎng)頁游戲設(shè)計(jì)與實(shí)現(xiàn)

【摘要】隨著RIA(富互聯(lián)網(wǎng)應(yīng)用)技術(shù)的發(fā)展，以及網(wǎng)頁游戲的“井噴式”增長，給教育游戲的發(fā)展帶來了新的啟示。文章運(yùn)用目前RIA最主流的技術(shù)之一Flex，設(shè)計(jì)一款題材為昆蟲知識的教育類網(wǎng)頁游戲案例，以期對教育游戲研究者有所借鑒與助益。

【關(guān)鍵詞】Flex;網(wǎng)頁游戲;昆蟲知識;游戲設(shè)計(jì)文檔

【中圖分類號】G434 【文獻(xiàn)標(biāo)識碼】B【論文編號】1009—8097(2010)01—0065—04

隨著教育游戲日益增多，逐漸為大眾所認(rèn)識，但應(yīng)用甚廣的C/S模式以及單機(jī)版模式的局限，在一定程度上束縛著教育游戲邁入學(xué)校家庭，比如學(xué)生想玩游戲前必須得先下載體積不小的客戶端程序或者購買光盤。2008年網(wǎng)頁游戲的“井噴”式發(fā)展[1]，給教育游戲帶來了一個(gè)信號，是否可以在網(wǎng)頁上玩教育游戲，學(xué)生只需往瀏覽器輸入地址即可使用?筆者針對此現(xiàn)狀，運(yùn)用Flex3開發(fā)平臺(tái)設(shè)計(jì)的一款教育類網(wǎng)頁游戲案例，主要以面向小學(xué)生的昆蟲知識為題材，以期對教育游戲研究者有所借鑒與助益。

一 網(wǎng)頁游戲簡介

網(wǎng)頁游戲，又稱Web游戲，是用互聯(lián)網(wǎng)瀏覽器玩的游戲，源于上世紀(jì)90年代曾風(fēng)靡一時(shí)的MUD文字游戲。網(wǎng)頁游戲的優(yōu)勢是無需下載或購買任何客戶端，不用實(shí)時(shí)在線，占時(shí)間少，操作簡單。2008年網(wǎng)頁游戲在沒有任何征兆的情況下突然興盛，且多使用PHP、ASP、JSP、.net、JavaScript、Vbscirpt等網(wǎng)頁語言開發(fā)[2]，由于其技術(shù)門檻低很快陷入同質(zhì)化。借助RIA(Rich Internet Application，富互聯(lián)網(wǎng)應(yīng)用)技術(shù)，如Flex、SilverLight、JavaFX等的革新，開心網(wǎng)等SNS(Social Networking Services，社會(huì)性網(wǎng)絡(luò)服務(wù))社區(qū)內(nèi)的休閑網(wǎng)頁游戲，以及面向低齡兒童的“摩爾莊園”、“奧比島”等社區(qū)網(wǎng)頁游戲在競爭中脫穎而出，同時(shí)“學(xué)樂吧”等教育類網(wǎng)頁游戲也應(yīng)運(yùn)而生。Flex作為Abobe公司面向桌面應(yīng)用的主推產(chǎn)品，其豐富的特效與強(qiáng)大的桌面交互功能，以及更為快速的傳輸速度，成為RIA最流行的代表技術(shù)之一。“學(xué)樂吧”正是運(yùn)用了Flex作為表現(xiàn)層，這表明Flex等RIA技術(shù)正在挖掘網(wǎng)頁游戲新的潛力，給教育游戲的研究應(yīng)用帶來了新啟示。

二 游戲案例的設(shè)計(jì)

關(guān)于本教育類網(wǎng)頁游戲案例的設(shè)計(jì)，主要從所依據(jù)的教育心理學(xué)理論以及指導(dǎo)開發(fā)全過程所用的游戲設(shè)計(jì)文檔進(jìn)行闡述。

1 理論基礎(chǔ)

(1)皮亞杰認(rèn)知發(fā)展論

根據(jù)皮亞杰[3]的認(rèn)知發(fā)展階段論，大致年齡7到11歲的兒童處于具體運(yùn)算階段，其邏輯思維能力雖然有所提高，但還不能進(jìn)行抽象思維;大致年齡11歲到成年，是處于第四個(gè)階段——形式運(yùn)算階段，具備假設(shè)-演繹思維、抽象思維、系統(tǒng)思維的能力。臺(tái)灣楊士良[4]對學(xué)生各年齡重視游戲元素的實(shí)踐研究表明，處于具體運(yùn)算階段的兒童仍延續(xù)早期受高亮度色彩的吸引，但已經(jīng)從單純的色彩轉(zhuǎn)而重視游戲畫面的精致度，且開始重視游戲中的解謎和過關(guān)。當(dāng)進(jìn)入形式運(yùn)算階段，認(rèn)知趨于成熟的兒童逐漸擺脫了具體實(shí)際經(jīng)驗(yàn)的支柱，能夠理解并使用相互關(guān)聯(lián)的抽象概念。皮亞杰[5]認(rèn)為在這一階段的青少年其思維的抽象性獲得了很大提高。他們對于游戲提出了更高的要求，開始重視游戲的內(nèi)涵(背景設(shè)定及劇情)。由于本教育游戲案例面向?qū)ο鬄樾W(xué)生，因此將整體風(fēng)格設(shè)計(jì)得較為活潑，且色彩鮮艷對比分明，以適應(yīng)此年齡段注重高亮色彩的特點(diǎn)，同時(shí)兼顧完整的敘事串聯(lián)劇情。

(2)心流理論

心理學(xué)家米哈里#8226;齊克森米哈里(Mihaly Csikszentmihalyi)[6]將心流(Flow)定義為一種將個(gè)人精神力完全投注在某種活動(dòng)上的感覺;心流產(chǎn)生時(shí)同時(shí)會(huì)有高度的興奮及充實(shí)感。齊克森米哈里指出心流體驗(yàn)過程的本身就是一種歡樂，以致于會(huì)不惜代價(jià)全然投入，認(rèn)為使心流發(fā)生的活動(dòng)特征是傾向于去從事的活動(dòng)、專注一致的活動(dòng)、有清楚目標(biāo)的活動(dòng)、有立即反饋的活動(dòng)、對活動(dòng)有主控感、主觀的時(shí)間感改變等，并認(rèn)為有創(chuàng)意的空間排列、游戲場的設(shè)計(jì)、平行而有組織的聚焦、以視覺增進(jìn)效能等工作群體特征也可以激發(fā)心流，將心流的概念應(yīng)用到了改善西方文化構(gòu)成(如游戲場景設(shè)計(jì))的領(lǐng)域中。心流理論對“挑戰(zhàn)”和“技能”關(guān)系的揭示，為創(chuàng)建有利于學(xué)習(xí)者獲得心流體驗(yàn)的教育游戲環(huán)境提供了有力的心理學(xué)依據(jù)[7]。本教育游戲案例以形象的情境代入感，輔以每關(guān)小游戲挑戰(zhàn)，獲得各個(gè)昆蟲知識技能;在目標(biāo)任務(wù)的驅(qū)動(dòng)下，激發(fā)出游戲?qū)ο蟮男牧黧w驗(yàn)。

2 游戲設(shè)計(jì)文檔

游戲設(shè)計(jì)文檔一般由游戲概述文檔與游戲腳本文檔兩部分組成。

(1)游戲概述文檔

游戲概述文檔字?jǐn)?shù)應(yīng)控制在一頁內(nèi)，表述諸如游戲名稱、適用對象、游戲類型、教學(xué)目標(biāo)、游戲結(jié)構(gòu)等基本信息[8]。本游戲案例名為“茱迪的奇妙冒險(xiǎn)”，適用對象為小學(xué)生，游戲類型為角色扮演游戲，軟件開發(fā)平臺(tái)為Adobe Flex Builder 3。教學(xué)目標(biāo)是游戲者在不同場景下完成不同的任務(wù)，在游戲體驗(yàn)中習(xí)得各類昆蟲生物知識，同時(shí)培養(yǎng)其對昆蟲的興趣以及熱愛自然保護(hù)森林的意識。游戲主要描述毛蟲茱迪為尋找樂園“阿卡迪亞”，在森林里遇到各類昆蟲，在冒險(xiǎn)旅程中認(rèn)識了昆蟲們的特征習(xí)性，并最終化為美麗的蝴蝶。概述文檔強(qiáng)調(diào)以毛蟲的視角在虛擬情境中體驗(yàn)以及與昆蟲們互動(dòng)。游戲的教學(xué)單元結(jié)構(gòu)見圖1，介紹在藤蔓、枯木塊、溝渠、大樹、荒土五個(gè)區(qū)域的所見昆蟲知識，參考教材為人民教育出版社《九年義務(wù)教育六年制小學(xué)教科書:自然》、安徽少兒出版社出版芭芭拉#8226;泰勒所著《昆蟲世界》、陜西旅游出版社出版法布爾所著《昆蟲記》。

為保持故事的連續(xù)性，將游戲結(jié)構(gòu)設(shè)定為線性結(jié)構(gòu)，如圖2所示，游戲者必須從引子開始依次闖過關(guān)卡才能完成游戲。比如，游戲者準(zhǔn)備進(jìn)入枯木塊場景，則必須先在藤蔓場景內(nèi)完成與蛾蠟蟬的“捉迷藏”游戲任務(wù)。

(2)游戲腳本文檔

游戲腳本文檔一般包含游戲機(jī)制、人工智能、游戲元素、游戲進(jìn)程、系統(tǒng)菜單等。本游戲案例是一款第三人稱視角的2D(二維平面)游戲，游戲側(cè)重在冒險(xiǎn)的過程中，遭遇到各類昆蟲，并通過游戲了解它們的習(xí)性。游戲機(jī)制允許游戲者自由、直觀地控制游戲角色，欣賞并置身于美麗而奇妙的微觀昆蟲世界。文檔需對以下游戲機(jī)制進(jìn)行描述:GUI(圖形用戶界面)、開始和保存游戲、控制操作方法、片頭、地圖、昆蟲角色、對話、游戲故事、題庫、關(guān)卡[9]。由于以體驗(yàn)昆蟲世界為基調(diào)，因此AI(Artificial Intelligence，人工智能)的首要任務(wù)是賦予每個(gè)昆蟲NPC(Non-Player Character，非游戲者角色)鮮明的個(gè)性，并在互動(dòng)中展示各自的特征習(xí)性。游戲元素選用“對角色的完善”、“探險(xiǎn)”、“解決問題”、“史詩般的故事”、“搜尋寶物”、“資源管理”等角色扮演游戲的經(jīng)典元素，以滿足游戲者的游戲好奇心需要、探究需要，提高其成就感;游戲情境的設(shè)計(jì)重視畫面的精致度，保持鮮艷的色彩，以滿足低齡游戲者的審美需要。此外，本游戲案例情節(jié)為毛蟲茱迪在森林中尋找“阿卡迪亞”認(rèn)識各類昆蟲的故事，在情節(jié)推動(dòng)上采用“平緩-沖突-平緩-沖突-高潮-平緩”的節(jié)奏，力爭使游戲者始終保持緊張刺激感，專注于游戲本身，激發(fā)心流的產(chǎn)生，并以此將游戲進(jìn)程劃分為三個(gè)階段。游戲?qū)能锏吓c金龜子對話開始，連過五關(guān)，最后化蝶并明白生命的旅程才是真正的“阿卡迪亞”。在關(guān)卡的控制上，游戲者必須完成每一關(guān)的游戲任務(wù)，才能進(jìn)入下一場景;游戲者還可在任務(wù)完成后選擇是否回答NPC老樹仙的問題，若答對則可獲得杏葉。杏葉可補(bǔ)充隨著時(shí)間流逝而消耗的體力值，若體力值降為0，則主角將死去，以此間接推動(dòng)游戲者在學(xué)習(xí)體驗(yàn)后答題檢驗(yàn)學(xué)習(xí)成果。本游戲案例可以運(yùn)用鼠標(biāo)進(jìn)行操作，方便低齡游戲者的控制。系統(tǒng)菜單主要有兩種，一種是在游戲啟動(dòng)時(shí)初始界面上的菜單按鈕，另一種是在游戲進(jìn)行中主界面邊緣的功能按鈕。

三 游戲案例的實(shí)現(xiàn)

本游戲案例運(yùn)用Flex搭建游戲主程序，控制AI、菜單命令、角色移動(dòng)以及數(shù)據(jù)的存儲(chǔ)交換等，各個(gè)場景內(nèi)闖關(guān)時(shí)的小游戲任務(wù)運(yùn)用Flash開發(fā)。Flash已是一個(gè)成熱的商用產(chǎn)品，但在企業(yè)級應(yīng)用上仍有不足，F(xiàn)lex的推出通過提供一個(gè)程序員們已經(jīng)熟知的工作流和編程模型來改善這個(gè)問題，它引入了MXML 腳本語言，使得可以動(dòng)態(tài)編譯用戶界面，并且能夠用Flash Player 來隨時(shí)進(jìn)行描述。Flex與Flash的配合，在處理復(fù)雜動(dòng)態(tài)交互、提高終端用戶體驗(yàn)與反應(yīng)速度上更具優(yōu)勢。

1 功能模塊

游戲案例的主要功能模塊如圖3所示，分通關(guān)記錄、角色交互、體力值、答題、任務(wù)與資源管理模塊。通關(guān)記錄模塊保存游戲者在某一場景內(nèi)的角色狀態(tài)以及關(guān)卡通過記錄，可以判斷游戲者是否可以進(jìn)入下一場景;當(dāng)游戲者下一次登陸游戲時(shí)，該模塊會(huì)提示游戲者是否回到上次游戲記錄，可跳轉(zhuǎn)到上次所經(jīng)歷的最后場景。角色交互模塊負(fù)責(zé)NPC的AI，控制NPC在地圖上的運(yùn)動(dòng)規(guī)律，以及與游戲者的交互。體力值模塊負(fù)責(zé)計(jì)算游戲運(yùn)行時(shí)間，并定制體力值的消耗頻率，控制體力值的相應(yīng)增減。答題模塊負(fù)責(zé)題庫的生成與隨機(jī)抽題，并記錄游戲者的答題成績，以判斷游戲者是否得到獎(jiǎng)勵(lì)。任務(wù)模塊負(fù)責(zé)記錄游戲者的任務(wù)詳細(xì)情況，并以列表形式顯示。資源管理模塊負(fù)責(zé)存放游戲者所得的各類獎(jiǎng)勵(lì)物品，并可查看與使用。

2 體系結(jié)構(gòu)

本游戲案例體系結(jié)構(gòu)如圖4所示，基于J2EE框架分為表示層、業(yè)務(wù)層、數(shù)據(jù)層。

在表示層引入Flex UI(User Interface，用戶界面)組件，邏輯處理程序和客戶端程序能夠同時(shí)運(yùn)行在提供有FlashPlayer的PC機(jī)上。游戲角色的對話使用Panel、Image、Text、Button等組件實(shí)現(xiàn)，角色的運(yùn)動(dòng)使用Canvas 容器、SWFLoader等實(shí)現(xiàn)，小游戲的載入使用Loader動(dòng)態(tài)導(dǎo)入實(shí)現(xiàn)。Flex由數(shù)據(jù)構(gòu)成，能夠接受web應(yīng)用中不同格式的數(shù)據(jù)，能與最常見的服務(wù)器互動(dòng)。Flash素材與Flex的聯(lián)系使用LocalConnection方法實(shí)現(xiàn)。表示層具體采用基于Flex組件的體系結(jié)構(gòu)和對象模型，用于連接到外部數(shù)據(jù)源、管理數(shù)據(jù)，并將數(shù)據(jù)綁定到UI組件。WebService Connector、XMLConnector等組件保證了與服務(wù)器的數(shù)據(jù)互通。前端數(shù)據(jù)集成包含數(shù)據(jù)連接、數(shù)據(jù)綁定、數(shù)據(jù)管理三方面[10]。角色數(shù)據(jù)的創(chuàng)建、讀取與修改，使用Remote ShareObjects實(shí)現(xiàn)。在業(yè)務(wù)層內(nèi)，服務(wù)端使用的是J2EE Application Server，可在服務(wù)器上建立和公開業(yè)務(wù)邏輯，負(fù)責(zé)處理應(yīng)用程序的業(yè)務(wù)邏輯和業(yè)務(wù)校驗(yàn)，管理事務(wù)，管理業(yè)務(wù)層級別對象的依賴。數(shù)據(jù)層負(fù)責(zé)把java域?qū)ο笈c數(shù)據(jù)庫表之間建立起一個(gè)映射關(guān)系，通過操作這些域?qū)ο蟛僮鲾?shù)據(jù)庫[11]。用戶信息等數(shù)據(jù)保存在遠(yuǎn)程數(shù)據(jù)庫中。

3 界面設(shè)計(jì)

游戲案例界面可細(xì)分為初始界面、主運(yùn)行界面、小游戲任務(wù)界面、答題界面、資源管理界面、幫助知識界面。登陸界面供游戲者開始與載入存檔。主運(yùn)行界面包含游戲角色、主地圖與各類功能圖標(biāo)，如圖5所示。小游戲任務(wù)界面包含闖關(guān)時(shí)的特寫場景(類似于網(wǎng)絡(luò)游戲的副本)。答題界面包含提問NPC、題目與反饋。資源管理界面包含游戲中所得的各類獎(jiǎng)勵(lì)物品。幫助知識界面提供游戲者游戲操作步驟、知識參考。

四 游戲案例的優(yōu)勢與意義

1 獨(dú)特的游戲視角

教育游戲雖然眾多，但很少有游戲能以一只毛蟲的視角去觀察世界。在毛蟲的視界里，螳螂是不是依然可愛，鳥兒是不是依然溫柔，杏葉是不是不能被吃等問題，都需要游戲者去重新思考。換位思考，能讓游戲者更加體會(huì)生命的美麗與珍貴。此外，原本人類眼內(nèi)的微觀世界在被放大比例后，森林的一草一葉都能給游戲者以完全不同的聚焦感受，增強(qiáng)愛護(hù)大自然的信念。

2 巧妙融合教育性的任務(wù)

本游戲案例的教學(xué)內(nèi)容主要是昆蟲知識。所設(shè)計(jì)的闖關(guān)任務(wù)中，每個(gè)Flash游戲都巧妙地融合了昆蟲的特點(diǎn):例如，蛾蠟蟬的外形擅長擬態(tài)，混在藤葉之中難以察覺，因此設(shè)計(jì)“捉迷藏”的游戲去尋找真假難辨的蛾蠟蟬;步甲會(huì)釋放毒氣來驅(qū)趕天敵保護(hù)自己，因此設(shè)計(jì)“噴毒氣驅(qū)鳥”的任務(wù)。這些任務(wù)將教育性與游戲性較好地融合了起來，游戲世界內(nèi)的主觀時(shí)間改變、立即反饋的任務(wù)、交互的控制感、創(chuàng)意的場景排列等因素，創(chuàng)設(shè)了產(chǎn)生心流的條件。

3 更加廣泛易用的應(yīng)用環(huán)境

由于游戲的運(yùn)行只需要網(wǎng)頁瀏覽器與FlashPlayer，這兩個(gè)幾乎在任何PC機(jī)上都可以滿足的條件，給游戲案例的推廣創(chuàng)造了天然的優(yōu)勢。游戲者只需要輸入網(wǎng)址或者單擊超鏈接，即可進(jìn)入游戲體驗(yàn)奇妙的冒險(xiǎn)，免除了下載龐大客戶端的等待時(shí)間。此外，F(xiàn)lashPlayer可以在無需用戶干預(yù)下保存單個(gè)域名下100kB的數(shù)據(jù)，Adobe的Flex技術(shù)“可離線”應(yīng)用模式，使得游戲程序能像傳統(tǒng)的桌面應(yīng)用那樣進(jìn)行部署，游戲者不必再擔(dān)憂因網(wǎng)絡(luò)故障而造成的信息損失。

4 自由新穎的昆蟲知識題材

目前國內(nèi)面向小學(xué)生開發(fā)的教育游戲，B/S、C/S模式游戲甚至為數(shù)不多的RIA技術(shù)開發(fā)的網(wǎng)頁游戲其選擇的教學(xué)內(nèi)容大部分仍是語文、數(shù)學(xué)、英語，對于自然科學(xué)尤其是昆蟲知識涉及較少。本案例所設(shè)計(jì)的網(wǎng)頁游戲，創(chuàng)造出一個(gè)任務(wù)驅(qū)動(dòng)下供游戲者積極探索的昆蟲世界，彌補(bǔ)了教育游戲在此類教學(xué)內(nèi)容上的不足，為教師、家長、學(xué)生提供了研究學(xué)習(xí)的新思路新平臺(tái)。

參考文獻(xiàn)

[1] 上海艾瑞.17173 第八屆中國網(wǎng)絡(luò)游戲市場調(diào)查簡版報(bào)告2008年[R].上海:艾瑞市場咨詢有限公司，2008.

[2] 網(wǎng)頁游戲.維基百科-自由的百科全書[EB/OL].

[3] 羅伯特#8226;斯萊文.教育心理學(xué)-理論與實(shí)踐[M].北京:人民郵電出版社，2004:23-33.

[4] 楊士良.我國電腦游戲之關(guān)鍵成功因素[D].臺(tái)灣:國立交通大學(xué)，2003.

[5] 何克抗，鄭永柏，謝幼如.教學(xué)系統(tǒng)設(shè)計(jì)[M].北京:北京師范大學(xué)出版社，2002:52-53.

[6] 心流理論.維基百科-自由的百科全書[EB/OL].

[7] 鄧鵬.心流:體驗(yàn)生命的潛能與樂趣[J].遠(yuǎn)程教育雜志，2006，(3):74-77.

[8] Tracy Fullerton，Swain Christopher，Hoffman Steven.游戲設(shè)計(jì)工作坊[M].北京:電子工業(yè)出版社，2005:51.

[9] Richard Rouse III.游戲設(shè)計(jì):原理與實(shí)踐[M].北京:電子工業(yè)出版社，2003:250-369.

[10] 潘大四.基于FLEX技術(shù)構(gòu)建可離線Web 應(yīng)用程序的研究與實(shí)現(xiàn)[J].計(jì)算機(jī)科學(xué)，2008(7):298-301.

[11] 彭曉川.基于Flex的RIA與J2EE應(yīng)用的整合[J].電腦與電信，2008(2):37-39.