任苗苗馬燕

（1.重慶師范大學(xué) 計算機與信息科學(xué)學(xué)院，重慶 401331； 2.重慶師范大學(xué) 研究生院，重慶 401331）

基于HTML5動畫工具的教育游戲設(shè)計與開發(fā)
——以小學(xué)英語課程為例

任苗苗1馬燕2

（1.重慶師范大學(xué) 計算機與信息科學(xué)學(xué)院，重慶 401331； 2.重慶師范大學(xué) 研究生院，重慶 401331）

教育游戲以其娛樂性和教育性，被視為改善枯燥學(xué)習(xí)的一種有益方式。教育游戲的開發(fā)對一線教育工作者提出了更高的要求。由于技術(shù)和時間問題，一線教師教育游戲開發(fā)效果并不理想?；诖?，本研究將市場上HTML5工具與傳統(tǒng)動畫制作工具進行對比，分析其對教師操作的支持，在此基礎(chǔ)上以一款HTML5工具進行教育游戲設(shè)計與開發(fā)。實踐表明，HTML5動畫工具無代碼交互、多媒體集成、全平臺支持等特點極大降低了教育游戲開發(fā)入門條件，提升了制作效率。

教育游戲；HTML5動畫工具；動畫；設(shè)計；開發(fā)

一、問題提出

隨著移動網(wǎng)絡(luò)技術(shù)的發(fā)展，教育游戲逐漸成為廣大教育工作者關(guān)注的熱點。教育游戲的教育功能、學(xué)習(xí)機制為教育課程改革所提倡的教育理念的實現(xiàn)提供了一種新的途徑，將會對教育和學(xué)習(xí)方式的變革產(chǎn)生重大的影響[1]。目前，教育游戲在一線教師中的使用并不理想。HTML5動畫制作工具具有動畫制作簡單、交互實現(xiàn)便捷、支持自媒體傳播、跨平臺等優(yōu)點，在教育行業(yè)中的應(yīng)用開始受到關(guān)注。本研究從教師制作角度出發(fā)，在教育游戲的制作中運用HTML5動畫工具，以期為一線教師教育游戲的制作和開發(fā)提供可操作的思路。

二、HTML5動畫工具在教育游戲制作中可行性分析

（一）與傳統(tǒng)動畫工具特征對比

HTML5是一種非常方便的時尚網(wǎng)站編程語言，能實現(xiàn)多種功能。以往HTML動畫需要專業(yè)編程知識，創(chuàng)建動畫耗時煩瑣，利用HTML進行動畫設(shè)計需要專業(yè)人員。但是，隨著技術(shù)發(fā)展和市場需求，許多HTML5動畫制作工具應(yīng)運而生。這些工具使用門檻更低，無須編程語言基礎(chǔ)，而且簡化了動畫制作過程。本研究調(diào)研了市場上多款HTML5動畫工具，與傳統(tǒng)動畫制作軟件相比，HTML5動畫制作工具特點如表1所示。

表1 HTML5動畫制作工具和傳統(tǒng)動畫制作工具對比

續(xù)表

（二）對教師操作的支持功能分析

1.支持多種媒體集成，提供多種設(shè)計選擇

HTML5動畫工具支持圖片、文本、音頻、視頻多種格式，提供預(yù)設(shè)動畫模版、背景圖片、特效等，動畫編輯能力強大。教師可以利用編輯器提供的模板，也可以自己導(dǎo)入圖片、文本、音頻和視頻內(nèi)容。因此，在游戲界面進行動畫設(shè)計時，教師可以根據(jù)教學(xué)設(shè)計有選擇性地使用，自由創(chuàng)作。

2.無代碼交互，應(yīng)用方便

HTML5動畫工具提供動畫播放控制、媒體播放控制、超鏈接、搖一搖、拖拽交互、碰撞檢測、重力感應(yīng)等，交互設(shè)定無須代碼?？梢赃M行投票、評論、信息列表操作等，支持微信接口，可從編輯頁面快速分享到社交平臺。對沒有專業(yè)動畫基礎(chǔ)的教師而言，無須高難度培訓(xùn)，很快就可以輕松實現(xiàn)交互內(nèi)容創(chuàng)作。

3.幀序列控制，動畫精準

HTML5動畫工具多數(shù)繼承傳統(tǒng)時間線方式組織動畫編輯和創(chuàng)作功能，能夠?qū)崿F(xiàn)對動畫進行精準細致的編輯操作，同時支持關(guān)聯(lián)控制，可以最大限度地幫助教師實現(xiàn)靈感創(chuàng)意。

4.布局明晰，輕松上手

HTML5動畫制作工具在界面設(shè)計上，將不同功能分區(qū)。如將圖片、聲音、視頻、文字、文本段落等匯集成媒體區(qū)，將輸入框、單選框、多選框等匯集成表單區(qū)。將動畫、行為、動作等不同功能分區(qū)組合，產(chǎn)品界面設(shè)計尊重用戶的使用習(xí)慣，工具布局明晰，降低操作難度，教師可輕松入門。

5.HTML5技術(shù)，全平臺支持

HTML5動畫制作工具由HTML技術(shù)支持，對現(xiàn)有移動設(shè)備支持性強，跨平臺效果顯著。制作產(chǎn)品可以在OS、IOS、Windows、Android等系統(tǒng)上流暢運行。

6.云端存儲，泛在創(chuàng)作

HTML5動畫工具幾乎都支持云端存儲，編輯的內(nèi)容以HTML代碼的方式存儲在云端。教師無須安裝代碼和插件，只須注冊一個賬戶，便可以在任何時間在有網(wǎng)絡(luò)的地方通過終端設(shè)備用同一個網(wǎng)址訪問應(yīng)用，進行創(chuàng)作。

7.選擇種類多，成本下降

隨著技術(shù)的成熟和各種HTML5工具的涌現(xiàn)，HTML5制作已經(jīng)漸漸走向標準化，使用成本也隨著一些工具的出現(xiàn)越來越低。目前，一些HTML5工具在許多功能上提供免費版本，如iH5、木疙瘩的免費體驗版等。

綜上，HTML5動畫工具提供的教育游戲制作環(huán)境支持教師對學(xué)習(xí)過程的設(shè)計，支持對學(xué)習(xí)資源的設(shè)計、整合和再開發(fā)，教師在制作中可以專心于學(xué)習(xí)過程的設(shè)計表達。此外，隨著技術(shù)的成熟和工具選擇的增多，使用成本將逐漸下降。

三、基于HTML5動畫工具的教育游戲設(shè)計與開發(fā)

（一）設(shè)計理念

1.問題解決原則

喬納森認為，培養(yǎng)學(xué)生的問題解決能力是教育的核心目標[2]，認為有意義的學(xué)習(xí)是主動的、建構(gòu)的、有圖的、真實的、合作的，而問題解決就是有意的學(xué)習(xí)[3]。所謂游戲就是以好玩的態(tài)度進入的一個解決問題的活動[4]。游戲提供了一個基于問題的學(xué)習(xí)環(huán)境，在這個環(huán)境中，大問題被分解為一些小問題，并以挑戰(zhàn)的形式呈現(xiàn)給學(xué)生[5]。

2.遵循游戲機制

在設(shè)計游戲時，教師需要考慮問題以什么樣的形式呈現(xiàn)能產(chǎn)生游戲的效果，讓玩家有興趣努力去解決問題。文獻研究表明，讓玩家在游戲中嘗試解決需要運用專業(yè)知識才能解決的專業(yè)問題，能夠有效促進學(xué)習(xí)的發(fā)生[6]。

3.控制技能與挑戰(zhàn)

教育游戲的最大特點是兼具娛樂性與學(xué)習(xí)性，促進沉浸式學(xué)習(xí)體驗產(chǎn)生。影響沉浸感的兩個主要因素是技能和挑戰(zhàn)[7]?；趯W(xué)習(xí)者對環(huán)境的控制能力，挑戰(zhàn)過高，會增加焦慮，產(chǎn)生挫敗感；挑戰(zhàn)過低，則顯得單調(diào)乏味，產(chǎn)生厭倦感；只有挑戰(zhàn)適中，才有利于沉浸發(fā)生。因此，在游戲設(shè)計時，要著重平衡學(xué)生技能水平和游戲挑戰(zhàn)，促進沉浸式學(xué)習(xí)。

（二）游戲設(shè)計

1.設(shè)計思路

本研究以人教版小學(xué)三年級英語上冊為例進行研究。在教育游戲設(shè)計時主要分析教學(xué)對象、教學(xué)內(nèi)容、教學(xué)目標和游戲情境四個方面，設(shè)計思路如圖1所示。

圖1 設(shè)計思路

根據(jù)皮亞杰的認知發(fā)展理論，三年級學(xué)生處于具體運算階段，一線教學(xué)的調(diào)研結(jié)果也表明，單詞記憶對學(xué)生而言有一定難度，而且由于缺乏語言環(huán)境，語言實踐困難，學(xué)習(xí)容易遺忘。所以，本研究將游戲設(shè)計的功能定位為幫助學(xué)習(xí)者單詞記憶和語言運用。游戲以貼近生活的真實情景為基礎(chǔ)，以問題為導(dǎo)向，通過“創(chuàng)設(shè)問題—解決問題”，把單詞學(xué)習(xí)和語言運用融入游戲情景中，從而達到輔助英語學(xué)習(xí)的目標。

2.游戲設(shè)計

根據(jù)游戲設(shè)計思路，以每個單元為一個主題，設(shè)計不同情景故事。每個游戲設(shè)計三個階段，功能分別為單詞瀏覽、單詞記憶和語言應(yīng)用，從易到難。以第五單元“Let’s Eat”為例，游戲設(shè)計如圖2所示。

圖2 游戲框架

進入：該場景為背景敘述。美食城開業(yè)第一天，麗麗和媽媽一起去購物。

階段一：美食世界

進入“美食世界”場景，帶有食物的圖片會一個一個顯示出來，并配有英漢名稱和發(fā)音。該環(huán)節(jié)難度最小，其目的是讓學(xué)習(xí)者復(fù)習(xí)課堂學(xué)到的單詞，幫助學(xué)習(xí)者認讀本單元有關(guān)食物的單詞：juice,egg,milk,bread，cake,fish,rice,water。

階段二：尋找美食

這個階段需要解決的問題是根據(jù)購物清單買食物。該階段分為三個環(huán)節(jié)：第一個環(huán)節(jié)是“找食物”，根據(jù)英文購物清單找到食物。該環(huán)節(jié)教學(xué)意義是幫助學(xué)習(xí)者初步識別英文單詞的含義。第二個環(huán)節(jié)是“選食物”。在挑選食物的過程中麗麗放入了很多購物清單以外的食物，可是媽媽發(fā)現(xiàn)帶的錢不夠，于是需要把購物清單以外的很多食物拿出去，只留下購物清單上的食物。此環(huán)節(jié)目的是強化學(xué)習(xí)者單詞記憶。第三個環(huán)節(jié)是“介紹食物”。場景設(shè)定是在逛美食城的過程中偶遇同學(xué)Mary，于是向她介紹買了哪些東西。這個環(huán)節(jié)最具挑戰(zhàn)性，學(xué)習(xí)者需要根據(jù)漢語識別出正確的英文。

階段三：音樂食間

進入一個音樂餐廳，在虛擬對話場景中讓學(xué)習(xí)者聽懂“ I’d like...”“Have some...”“Can I have some...？”“Here you are.”這些句子。這個場景幫助學(xué)習(xí)者遷移課堂中學(xué)到的句子，提升其在真實情景中的語言運用能力。

考慮到學(xué)習(xí)者的能力水平，該游戲沒有進行嚴格的關(guān)卡設(shè)置。游戲者可以根據(jù)自己的能力從第一階段逐次過關(guān)，也可以直接選取某個環(huán)節(jié)進行學(xué)習(xí)。在獎勵機制上，游戲通過贊賞鼓勵學(xué)習(xí)者，在游戲最后設(shè)置了答題結(jié)果統(tǒng)計和排名，利用競爭激發(fā)學(xué)習(xí)者的學(xué)習(xí)積極性。

（三）游戲?qū)崿F(xiàn)

目前，市場上可供選擇的HTML5動畫制作工具繁多，教師可根據(jù)自己的使用習(xí)慣和功能需求選取適合自己的工具。以下是本研究主要游戲功能實現(xiàn)過程。

1.進程控制

在場景外添加任意圖形，給圖形添加行為動作，在行為編輯中選擇“動畫播放控制”中的“暫?！?，將觸發(fā)條件選擇為“出現(xiàn)”，通過按鈕控制頁面內(nèi)的動畫播放，每個環(huán)節(jié)內(nèi)要有學(xué)生參與學(xué)習(xí)游戲才能進行。不同環(huán)節(jié)間進程控制，通過按鈕設(shè)置行為編輯中“動畫播放控制”里面的“禁止翻頁”和“跳轉(zhuǎn)到頁”，讓學(xué)生根據(jù)自己學(xué)習(xí)能力選擇學(xué)習(xí)環(huán)節(jié)，掌控每一環(huán)節(jié)學(xué)習(xí)強度。此外，在“返回”設(shè)置中，需要通過行為編輯將返回頁之后設(shè)置的屬性復(fù)原。

2.反饋控制

按鈕觸碰反饋。選擇行為編輯中“屬性控制”菜單下的“改變元素屬性”，設(shè)置觸發(fā)條件并編輯屬性參數(shù)。一個按鈕可以添加多個觸發(fā)事件。

答題反饋。新建圖層并添加“關(guān)鍵幀”，將反饋頁面排版編輯，給答題選項添加“跳轉(zhuǎn)到幀并播放”的動畫播放控制行為，添加“改變元素屬性”關(guān)聯(lián)反饋畫面。對于每一題的分數(shù)反饋，首先添加文本框并命名。給正確選項添加“改變元素屬性”的行為，選擇控制對象，選取“文本取值”屬性，賦值方式改為“在現(xiàn)有基礎(chǔ)之上增加”，設(shè)置每一題的取值。

正確率反饋。新建兩個文本框，一個是“%”，一個是“正確率”數(shù)值，為正確率文本框添加關(guān)聯(lián)，關(guān)聯(lián)對象為該環(huán)節(jié)內(nèi)每一題的分數(shù)，關(guān)聯(lián)屬性為文本取值，方式是“自動關(guān)聯(lián)”，添加兩個自動關(guān)聯(lián)，主控量為因其變化的元素，被控量為變化的元素。第一個自動關(guān)聯(lián)為初始值設(shè)置，第二個自動關(guān)聯(lián)為最大值設(shè)置。為正確率文本框添加“改變元素屬性”行為，當(dāng)它出現(xiàn)時“用設(shè)置值替換現(xiàn)有值”。

3.答題交互控制

美食世界：該環(huán)節(jié)利用“屬性控制”和“媒體播放控制”實現(xiàn)。為每一個食物圖片添加“改變元素屬性”行為和“播放聲音”行為，觸發(fā)條件為“手指按下”?！案淖冊貙傩浴毙袨樵O(shè)置需要控制元素的“透明度”為“用設(shè)置值替代現(xiàn)有值”,“播放聲音”行為設(shè)置圖片對應(yīng)的聲音原件，自動循環(huán)為“否”。

尋找美食：“找食物”主要利用“擦玻璃”控件，將其“屬性”中的背景設(shè)置成食物圖片，前景設(shè)置為食物對應(yīng)的英文。設(shè)置“媒體播放控制”行為“播放聲音”，觸發(fā)條件為“擦玻璃完成”?！斑x食物”和“介紹食物”利用“屬性控制”“媒體播放控制”“動畫播放控制”。利用“改變元素屬性”控制選擇“選擇項”時的狀態(tài)，利用“媒體播放控制”中“播放聲音”和“動畫播放控制”中“下一幀”來實現(xiàn)對錯的交互，正確選項對應(yīng)正確“你真棒”的贊美和正確的反饋頁面，錯誤選項對應(yīng)“加油吧”的鼓勵和錯誤的反饋頁面。反饋頁面在“下一幀”中提前排版，利用“屬性控制”設(shè)置回答正確或錯誤的不同畫面。

音樂食間：主要利用“預(yù)制動畫”控制人物運動，利用“媒體播放控制”實現(xiàn)語音場景模擬。

四、HTML5動畫工具應(yīng)用于教育游戲的優(yōu)勢分析

（一）無代碼交互，資源豐富，提升制作效率

HTML5動畫工具提供動畫播放控制、媒體播放控制、超鏈接等交互設(shè)定，實現(xiàn)無須代碼。在游戲制作中，教師不必花費大量時間學(xué)習(xí)編程語言。此外，HTML5工具提供很多在線模板，這些模板可供教師直接編輯使用，簡化了游戲制作流程，提升了制作效率。

（二）目標明確，反饋及時，保證學(xué)習(xí)參與

HTML5動畫工具設(shè)計簡單，界面符合用戶使用習(xí)慣，操作難度低，入門快，支持動畫關(guān)聯(lián)，控制精準，教師可以設(shè)計更貼合學(xué)習(xí)目標的游戲環(huán)節(jié)，提供更加及時的游戲反饋。學(xué)習(xí)者可以根據(jù)自身特點獲得更多學(xué)習(xí)路徑選擇，根據(jù)反饋即時調(diào)整學(xué)習(xí)策略，進而保證學(xué)習(xí)參與的積極性，促進學(xué)習(xí)發(fā)展。

（三）全設(shè)備兼容，促進移動學(xué)習(xí)

利用HTML5工具設(shè)計的內(nèi)容支持在IOS、Android、Windows和OS系統(tǒng)上瀏覽和學(xué)習(xí)，無須任何插件。學(xué)習(xí)場所不局限于室內(nèi)，學(xué)習(xí)設(shè)備不局限于某種平臺。良好的跨平臺兼容性有利于學(xué)生根據(jù)自己的實際情況選擇設(shè)備，促進移動學(xué)習(xí)。

五、結(jié)語

本研究分析了HTML5動畫工具的特征及其在教育應(yīng)用中的可行性，并在此基礎(chǔ)上選擇市場上的一款HTML5工具進行教育游戲?qū)嵺`開發(fā)，探索了HTML5動畫工具在教育游戲開發(fā)中的優(yōu)勢。HTML5工具為一線教師進行教育游戲制作提供了極大便利。但是，在游戲開發(fā)中一些問題仍然需要注意，如游戲功能和教學(xué)設(shè)計的安排，游戲情景和教學(xué)問題的創(chuàng)設(shè)，游戲路徑與學(xué)生水平的把握。開發(fā)一款好的教育游戲，除了工具支持，仍然需要廣大教育研究者和一線教師的不斷探索與實踐。

[1]周伯華,曲瑋婷.國內(nèi)教育游戲存在的問題及對策研究[J].中國電化教育,2011，(7)：92-94.

[2]JONASSEN D H.Toward a design theory of problem solving [J].Educational Technology Research and Development (S1042-1629), 2000,48(4)：63-85.

[3]喬納森,豪蘭,摩爾,等.學(xué)會用技術(shù)解決問題—— 一個建構(gòu)主義者的視角[M].任友群,李妍,施彬飛，譯.第2版.北京:教育科學(xué)出版社,2014：2-14.

[4]SCHELL J.The art of game design: A book of lenses [M].Boca Raton: CRC Press,2008：34-37.

[5]KIILI K.Digital game-based learning:Towards an experiential gaming mode[J].The Internet and Higher Education (S1096-7516),2005,8(1)：13-24.

[6]WU J H,CHEN Y N,MA X T. Blance between education and game-play-taking design and optimization of book classification mini-game as an example [J].Chinese Journal of Library and Information Science(S1674-3393),2015,8(1)：53-65.

[7]陶侃.沉浸理論視角下的虛擬交互與學(xué)習(xí)探究——兼論成人學(xué)習(xí)者“學(xué)習(xí)內(nèi)存”的拓展[J].中國遠程教育,2009，(1)：20-25，78.

（責(zé)任編輯 孫震華）

Design and Development of Educational Games Based on the Animation Making Tool of HTML5—A Case Study of the Primary School English Curriculum

REN Miaomiao1,MA Yan2
(1.College of Computer and Information Science,Chongqing Normal University,Chongqing,China 401331; 2.Graduate School, Chongqing Normal University, Chongqing, China 401331)

With its entertaining and educational purposes,educational games are regarded as a useful way to change the dull status of learning.The development of educational games proposes a higher demand for front-line teachers.Due to technical problems and time limit,the effectiveness of educational games developed by front-line teachers is far from satisfactory.Therefore,by comparing an HTML5 tool on the marketplace with a traditional animation making tool,this study analyzes the support provided by the HTML5 tool for teachers’ operation of the tool.Thus,an educational game is designed and developed on the basis of an HTML5 tool.In practice,the HTML5 animation making tool greatly lowers the threshold requirement of educational games development due to the characteristics of no code switches,multimedia integration,and allplatform support etc.Hence,it promotes the production efficiency of educational games.

educational games;animation making tools of HTML5;animation;design;development

G434

A

2096-0069（2017）01-0075-05

2016-10-12

重慶市研究生教育教學(xué)改革研究項目（重大項目）“重慶市研究生創(chuàng)新創(chuàng)業(yè)實踐教育研究”（Yjg151007）；重慶市研究生科研創(chuàng)新項目“基于創(chuàng)客理念的中小學(xué)機器人教育學(xué)習(xí)系統(tǒng)開發(fā)”（CYS16145）

任苗苗（1992— ），女，河南焦作人，碩士，研究方向為教育技術(shù)前沿理論研究及新媒體技術(shù)應(yīng)用；馬燕（1960— ），男，云南昭通人，教授，博士，重慶師范大學(xué)研究生院院長，主要研究方向為人工智能、社會計算、現(xiàn)代教育技術(shù)等。