制作簡單的AVG互動(dòng)教學(xué)引擎

陳凱

為了提高學(xué)生學(xué)習(xí)的興趣和主動(dòng)性，教師可以在課堂或課外提供一些和教學(xué)內(nèi)容有關(guān)的互動(dòng)小游戲。在往期連載文章中，筆者曾經(jīng)介紹過借用AVG游戲引擎來制作交互性的教學(xué)課件，玩家從某一個(gè)場景跳轉(zhuǎn)到另一個(gè)場景。至于如何跳轉(zhuǎn)，取決于玩家的選擇或者填寫的信息，教師可以用AVG引擎來展示教學(xué)資料，也可以通過場景跳轉(zhuǎn)時(shí)的條件判斷，讓使用者鞏固所學(xué)習(xí)到的知識(shí)，運(yùn)行起來大致是如圖1所示的效果。

不過，用現(xiàn)成的AVG引擎較難實(shí)現(xiàn)以下一些需求：

當(dāng)前常用的一些AVG引擎雖然編輯起來方便，但運(yùn)行時(shí)對操作系統(tǒng)環(huán)境要求比較多，有一些必須連網(wǎng)運(yùn)行，最終作品的打包和分發(fā)比較麻煩。怎樣提高用AVG引擎制作的教學(xué)課件發(fā)布和運(yùn)行的靈活性，甚至讓課件能夠方便地移植到移動(dòng)設(shè)備上運(yùn)行呢？

教師們平時(shí)積累了很多用于教學(xué)的演示文稿、圖片或其他資源，怎樣把這些素材加入到用AVG引擎制作的課件中呢？

怎樣把學(xué)生創(chuàng)作的故事情節(jié)方便地用到自己的AVG引擎課件中？

怎樣方便地將許多AVG游戲片段整合成一個(gè)完整的類似解謎游戲的教學(xué)互動(dòng)課件？

筆者考察了許多不同的AVG游戲制作引擎，發(fā)現(xiàn)若要實(shí)現(xiàn)以上需求還是頗為麻煩的，畢竟，AVG游戲引擎的主要功能是制作游戲，而不是教學(xué)課件。然而，AVG引擎的制作思路卻值得借鑒：只要替換數(shù)據(jù)資料而不需要更改程序代碼，就可以快速制作出新的互動(dòng)教學(xué)課件來。考察對比之后，筆者最后決定借助演示文稿和HTML5，自己親手打造一個(gè)簡單的AVG引擎。整個(gè)設(shè)計(jì)工作完成之后，筆者發(fā)現(xiàn)實(shí)際上這個(gè)簡單的AVG引擎的制作過程本身，也可以作為供學(xué)生自主探索學(xué)習(xí)的教學(xué)素材。

第一步：用演示文稿和立繪工具制作場景

互動(dòng)教學(xué)課件的場景用演示文稿就可以制作出來，日常工作中所積累的教學(xué)資料的演示文稿也可以直接派上用處。為了能讓演示文稿中的畫面成為AVG引擎的場景，可以將演示文稿導(dǎo)出為圖片（PowerPoint、WPS演示或其他第三方工具都能輕松實(shí)現(xiàn)），導(dǎo)出的圖片按數(shù)字序號(hào)編好號(hào)碼，如圖2所示。

場景不一定是圖片，也可以是其他媒體形式，比如視頻。

怎樣對素材進(jìn)行編號(hào)，是值得認(rèn)真思考的問題。例如，為了方便地將來臨時(shí)插入新的場景，可以松散地從小到大編號(hào)，第一張是10.jpg，第二張是20.jpg，然后是30.jpg，如此類推。也有這樣的可能，制作的AVG小游戲既能獨(dú)立運(yùn)行，同時(shí)也將會(huì)成為一個(gè)更大的互動(dòng)游戲的一部分，那么序號(hào)編碼規(guī)則可以更復(fù)雜些，比如說游戲主線都是10開始的四位數(shù)，而游戲支線可以是20、30、40開始的四位數(shù)，這樣可以便于后期場景之間的跳轉(zhuǎn)。至于場景圖片，當(dāng)然不一定非要用演示文稿來生成，自己繪制的圖畫或拍攝的照片都是可以的。

為了讓場景具有互動(dòng)性，可能需要一個(gè)或多個(gè)人物角色。要憑空把人物畫出來，對大部分人來說未免比較困難，好在有許多現(xiàn)成的工具可以用來生成帶有不同表情、動(dòng)作、服飾和道具的人物角色，搜索“立繪生成器”或“Avatar Maker”等關(guān)鍵字，就能找到不少制作工具。例如，https：//www.avachara.com/avatar/在線提供了繪制人物形象的功能，如圖3所示。

場景制作完成后，就可以用HTML5來顯示場景，代碼就是普通的HTML代碼，如圖4所示。

注意，代碼中只有第一行素材的display屬性是block，也就是素材可見，其他素材都默認(rèn)為隱藏。

第二步：用HTML5控制場景的跳轉(zhuǎn)

為了能夠在不同場景之間跳轉(zhuǎn)，需要一些簡單的JavaScript代碼，跳轉(zhuǎn)控件需要用到一個(gè)文本框和一個(gè)按鈕，涉及HTML代碼如下：

其中的showp函數(shù)，作用是根據(jù)用戶輸入的文字，判斷跳轉(zhuǎn)到哪一個(gè)場景，函數(shù)的代碼稍微復(fù)雜些，但也并不難懂。

語句的作用，就是將當(dāng)前場景圖片隱藏，顯示下一張場景圖片。至于到底顯示哪一張場景圖片，是由一系列數(shù)組來決定的，myimga數(shù)組按場景序號(hào)存儲(chǔ)有每個(gè)場景問題的答案，當(dāng)用戶的回答正確時(shí)，按當(dāng)前場景的序號(hào)，從myimgr數(shù)組中獲得通關(guān)后下一場景的序號(hào)；當(dāng)用戶回答錯(cuò)誤時(shí)，按當(dāng)前場景的序號(hào)，從myimgw數(shù)組中獲得未能通關(guān)后下一場景的序號(hào)。實(shí)際上，這十幾行代碼是整個(gè)簡易AVG引擎最核心的部分，無論之后創(chuàng)作的畫面和情節(jié)如何變化多端，都不需要變動(dòng)這些代碼，根據(jù)游戲情節(jié)發(fā)生變化的，是控制場景跳轉(zhuǎn)的數(shù)組數(shù)據(jù)。

這段代碼都是變量及數(shù)組的定義和賦值，結(jié)合剛才showp函數(shù)的代碼一起看，其功能還是很容易看出來的。比如，下面的數(shù)組數(shù)據(jù)所表達(dá)的含義是，第一個(gè)場景的答案是“bit”，若玩家答對，則跳轉(zhuǎn)到第3個(gè)場景；若玩家答錯(cuò)，則跳轉(zhuǎn)到第2個(gè)場景。

如果不需要玩家回答問題，則無論對錯(cuò)，均跳轉(zhuǎn)到指定場景即可。

可以發(fā)現(xiàn)，只要改變賦值語句后雙引號(hào)內(nèi)的數(shù)值，就可以使得游戲劇情發(fā)生不同的變化，所以說，上述代碼實(shí)現(xiàn)的是一個(gè)AVG引擎。

第三步：將代碼和素材打包生成課件

HTML5的代碼和素材復(fù)制到操作系統(tǒng)任意文件夾中，都可以直接運(yùn)行。不過有時(shí)候?yàn)榱朔乐故褂谜咛崆盀g覽目錄中的場景圖片作弊，可以將所有的HTML代碼和素材打包成EXE可執(zhí)行文件。網(wǎng)絡(luò)上可找到許多打包工具，比如HTML Compiler，只要將首頁面的地址告訴打包工具，就能輕松生成EXE可執(zhí)行程序，如圖5所示。

HTML Compiler使用的是Windows操作系統(tǒng)內(nèi)置的WebBrowser，所支持的HTML5的功能有一點(diǎn)局限，設(shè)計(jì)者可以使用node-webkit工具將整個(gè)迷你瀏覽器打包到EXE可執(zhí)行程序中，打包方法要復(fù)雜很多，這里就不展開討論了。如果要將HTML5代碼和素材打包成平板、手機(jī)等移動(dòng)設(shè)備上的應(yīng)用軟件，也有各種打包工具可用，這樣，AVG引擎就能跨平臺(tái)運(yùn)行了。比如，有一個(gè)叫Quick App的工具，簡單到只要按回車就能實(shí)現(xiàn)安卓APK安裝包的打包工作，如圖6所示。

在制作AVG引擎的整個(gè)過程中，涉及到的知識(shí)和技能很多，比如演示文稿、畫圖軟件、HTML標(biāo)記、JavaScript語言、移動(dòng)設(shè)備應(yīng)用程序等，綜合性和實(shí)踐性很強(qiáng)，具體的知識(shí)和技能的學(xué)習(xí)難度卻并不高，所以稍加改造后也可用作拓展性、研究性學(xué)習(xí)的素材。