制作简单的AVG互动教学引擎

陈凯

为了提高学生学习的兴趣和主动性，教师可以在课堂或课外提供一些和教学内容有关的互动小游戏。在往期连载文章中，笔者曾经介绍过借用AVG游戏引擎来制作交互性的教学课件，玩家从某一个场景跳转到另一个场景。至于如何跳转，取决于玩家的选择或者填写的信息，教师可以用AVG引擎来展示教学资料，也可以通过场景跳转时的条件判断，让使用者巩固所学习到的知识，运行起来大致是如图1所示的效果。

不过，用现成的AVG引擎较难实现以下一些需求：

当前常用的一些AVG引擎虽然编辑起来方便，但运行时对操作系统环境要求比较多，有一些必须连网运行，最终作品的打包和分发比较麻烦。怎样提高用AVG引擎制作的教学课件发布和运行的灵活性，甚至让课件能够方便地移植到移动设备上运行呢？

教师们平时积累了很多用于教学的演示文稿、图片或其他资源，怎样把这些素材加入到用AVG引擎制作的课件中呢？

怎样把学生创作的故事情节方便地用到自己的AVG引擎课件中？

怎样方便地将许多AVG游戏片段整合成一个完整的类似解谜游戏的教学互动课件？

笔者考察了许多不同的AVG游戏制作引擎，发现若要实现以上需求还是颇为麻烦的，毕竟，AVG游戏引擎的主要功能是制作游戏，而不是教学课件。然而，AVG引擎的制作思路却值得借鉴：只要替换数据资料而不需要更改程序代码，就可以快速制作出新的互动教学课件来。考察对比之后，笔者最后决定借助演示文稿和HTML5，自己亲手打造一个简单的AVG引擎。整个设计工作完成之后，笔者发现实际上这个简单的AVG引擎的制作过程本身，也可以作为供学生自主探索学习的教学素材。

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

互动教学课件的场景用演示文稿就可以制作出来，日常工作中所积累的教学资料的演示文稿也可以直接派上用处。为了能让演示文稿中的画面成为AVG引擎的场景，可以将演示文稿导出为图片（PowerPoint、WPS演示或其他第三方工具都能轻松实现），导出的图片按数字序号编好号码，如图2所示。

场景不一定是图片，也可以是其他媒体形式，比如视频。

怎样对素材进行編号，是值得认真思考的问题。例如，为了方便地将来临时插入新的场景，可以松散地从小到大编号，第一张是10.jpg，第二张是20.jpg，然后是30.jpg，如此类推。也有这样的可能，制作的AVG小游戏既能独立运行，同时也将会成为一个更大的互动游戏的一部分，那么序号编码规则可以更复杂些，比如说游戏主线都是10开始的四位数，而游戏支线可以是20、30、40开始的四位数，这样可以便于后期场景之间的跳转。至于场景图片，当然不一定非要用演示文稿来生成，自己绘制的图画或拍摄的照片都是可以的。

为了让场景具有互动性，可能需要一个或多个人物角色。要凭空把人物画出来，对大部分人来说未免比较困难，好在有许多现成的工具可以用来生成带有不同表情、动作、服饰和道具的人物角色，搜索“立绘生成器”或“Avatar Maker”等关键字，就能找到不少制作工具。例如，https：//www.avachara.com/avatar/在线提供了绘制人物形象的功能，如图3所示。

场景制作完成后，就可以用HTML5来显示场景，代码就是普通的HTML代码，如图4所示。

注意，代码中只有第一行素材的display属性是block，也就是素材可见，其他素材都默认为隐藏。

第二步：用HTML5控制场景的跳转

为了能够在不同场景之间跳转，需要一些简单的JavaScript代码，跳转控件需要用到一个文本框和一个按钮，涉及HTML代码如下：

其中的showp函数，作用是根据用户输入的文字，判断跳转到哪一个场景，函数的代码稍微复杂些，但也并不难懂。

语句的作用，就是将当前场景图片隐藏，显示下一张场景图片。至于到底显示哪一张场景图片，是由一系列数组来决定的，myimga数组按场景序号存储有每个场景问题的答案，当用户的回答正确时，按当前场景的序号，从myimgr数组中获得通关后下一场景的序号；当用户回答错误时，按当前场景的序号，从myimgw数组中获得未能通关后下一场景的序号。实际上，这十几行代码是整个简易AVG引擎最核心的部分，无论之后创作的画面和情节如何变化多端，都不需要变动这些代码，根据游戏情节发生变化的，是控制场景跳转的数组数据。

这段代码都是变量及数组的定义和赋值，结合刚才showp函数的代码一起看，其功能还是很容易看出来的。比如，下面的数组数据所表达的含义是，第一个场景的答案是“bit”，若玩家答对，则跳转到第3个场景；若玩家答错，则跳转到第2个场景。

如果不需要玩家回答问题，则无论对错，均跳转到指定场景即可。

可以发现，只要改变赋值语句后双引号内的数值，就可以使得游戏剧情发生不同的变化，所以说，上述代码实现的是一个AVG引擎。

第三步：将代码和素材打包生成课件

HTML5的代码和素材复制到操作系统任意文件夹中，都可以直接运行。不过有时候为了防止使用者提前浏览目录中的场景图片作弊，可以将所有的HTML代码和素材打包成EXE可执行文件。网络上可找到许多打包工具，比如HTML Compiler，只要将首页面的地址告诉打包工具，就能轻松生成EXE可执行程序，如图5所示。

HTML Compiler使用的是Windows操作系统内置的WebBrowser，所支持的HTML5的功能有一点局限，设计者可以使用node-webkit工具将整个迷你浏览器打包到EXE可执行程序中，打包方法要复杂很多，这里就不展开讨论了。如果要将HTML5代码和素材打包成平板、手机等移动设备上的应用软件，也有各种打包工具可用，这样，AVG引擎就能跨平台运行了。比如，有一个叫Quick App的工具，简单到只要按回车就能实现安卓APK安装包的打包工作，如图6所示。

在制作AVG引擎的整个过程中，涉及到的知识和技能很多，比如演示文稿、画图软件、HTML标记、JavaScript语言、移动设备应用程序等，综合性和实践性很强，具体的知识和技能的学习难度却并不高，所以稍加改造后也可用作拓展性、研究性学习的素材。