基于Flex的教育类网页游戏设计与实现_教育类网页
时间：2019-01-14 03:35:17 来源：雅意学习网 本文已影响 人 
【摘要】随着RIA(富互联网应用)技术的发展,以及网页游戏的“井喷式”增长,给教育游戏的发展带来了新的启示。文章运用目前RIA最主流的技术之一Flex,设计一款题材为昆虫知识的教育类网页游戏案例,以期对教育游戏研究者有所借鉴与助益。
【关键词】Flex;网页游戏;昆虫知识;游戏设计文档
【中图分类号】G434 【文献标识码】B【论文编号】1009―8097(2010)01―0065―04
随着教育游戏日益增多,逐渐为大众所认识,但应用甚广的C/S模式以及单机版模式的局限,在一定程度上束缚着教育游戏迈入学校家庭,比如学生想玩游戏前必须得先下载体积不小的客户端程序或者购买光盘。2008年网页游戏的“井喷”式发展[1],给教育游戏带来了一个信号,是否可以在网页上玩教育游戏,学生只需往浏览器输入地址即可使用?笔者针对此现状,运用Flex3开发平台设计的一款教育类网页游戏案例,主要以面向小学生的昆虫知识为题材,以期对教育游戏研究者有所借鉴与助益。
一 网页游戏简介
网页游戏,又称Web游戏,是用互联网浏览器玩的游戏,源于上世纪90年代曾风靡一时的MUD文字游戏。网页游戏的优势是无需下载或购买任何客户端,不用实时在线,占时间少,操作简单。2008年网页游戏在没有任何征兆的情况下突然兴盛,且多使用PHP、ASP、JSP、.net、JavaScript、Vbscirpt等网页语言开发[2],由于其技术门槛低很快陷入同质化。借助RIA(Rich Internet Application,富互联网应用)技术,如Flex、SilverLight、JavaFX等的革新,开心网等SNS(Social Networking Services,社会性网络服务)社区内的休闲网页游戏,以及面向低龄儿童的“摩尔庄园”、“奥比岛”等社区网页游戏在竞争中脱颖而出,同时“学乐吧”等教育类网页游戏也应运而生。Flex作为Abobe公司面向桌面应用的主推产品,其丰富的特效与强大的桌面交互功能,以及更为快速的传输速度,成为RIA最流行的代表技术之一。“学乐吧”正是运用了Flex作为表现层,这表明Flex等RIA技术正在挖掘网页游戏新的潜力,给教育游戏的研究应用带来了新启示。
二 游戏案例的设计
关于本教育类网页游戏案例的设计,主要从所依据的教育心理学理论以及指导开发全过程所用的游戏设计文档进行阐述。
1 理论基础
(1)皮亚杰认知发展论
根据皮亚杰[3]的认知发展阶段论,大致年龄7到11岁的儿童处于具体运算阶段,其逻辑思维能力虽然有所提高,但还不能进行抽象思维;大致年龄11岁到成年,是处于第四个阶段――形式运算阶段,具备假设-演绎思维、抽象思维、系统思维的能力。台湾杨士良[4]对学生各年龄重视游戏元素的实践研究表明,处于具体运算阶段的儿童仍延续早期受高亮度色彩的吸引,但已经从单纯的色彩转而重视游戏画面的精致度,且开始重视游戏中的解谜和过关。当进入形式运算阶段,认知趋于成熟的儿童逐渐摆脱了具体实际经验的支柱,能够理解并使用相互关联的抽象概念。皮亚杰[5]认为在这一阶段的青少年其思维的抽象性获得了很大提高。他们对于游戏提出了更高的要求,开始重视游戏的内涵(背景设定及剧情)。由于本教育游戏案例面向对象为小学生,因此将整体风格设计得较为活泼,且色彩鲜艳对比分明,以适应此年龄段注重高亮色彩的特点,同时兼顾完整的叙事串联剧情。
(2)心流理论
心理学家米哈里•齐克森米哈里(Mihaly Csikszentmihalyi)[6]将心流(Flow)定义为一种将个人精神力完全投注在某种活动上的感觉;心流产生时同时会有高度的兴奋及充实感。齐克森米哈里指出心流体验过程的本身就是一种欢乐,以致于会不惜代价全然投入,认为使心流发生的活动特征是倾向于去从事的活动、专注一致的活动、有清楚目标的活动、有立即反馈的活动、对活动有主控感、主观的时间感改变等,并认为有创意的空间排列、游戏场的设计、平行而有组织的聚焦、以视觉增进效能等工作群体特征也可以激发心流,将心流的概念应用到了改善西方文化构成(如游戏场景设计)的领域中。心流理论对“挑战”和“技能”关系的揭示,为创建有利于学习者获得心流体验的教育游戏环境提供了有力的心理学依据[7]。本教育游戏案例以形象的情境代入感,辅以每关小游戏挑战,获得各个昆虫知识技能;在目标任务的驱动下,激发出游戏对象的心流体验。
2 游戏设计文档
游戏设计文档一般由游戏概述文档与游戏脚本文档两部分组成。
(1)游戏概述文档
游戏概述文档字数应控制在一页内,表述诸如游戏名称、适用对象、游戏类型、教学目标、游戏结构等基本信息[8]。本游戏案例名为“茱迪的奇妙冒险”,适用对象为小学生,游戏类型为角色扮演游戏,软件开发平台为Adobe Flex Builder 3。教学目标是游戏者在不同场景下完成不同的任务,在游戏体验中习得各类昆虫生物知识,同时培养其对昆虫的兴趣以及热爱自然保护森林的意识。游戏主要描述毛虫茱迪为寻找乐园“阿卡迪亚”,在森林里遇到各类昆虫,在冒险旅程中认识了昆虫们的特征习性,并最终化为美丽的蝴蝶。概述文档强调以毛虫的视角在虚拟情境中体验以及与昆虫们互动。游戏的教学单元结构见图1,介绍在藤蔓、枯木块、沟渠、大树、荒土五个区域的所见昆虫知识,参考教材为人民教育出版社《九年义务教育六年制小学教科书:自然》、安徽少儿出版社出版芭芭拉•泰勒所著《昆虫世界》、陕西旅游出版社出版法布尔所著《昆虫记》。
为保持故事的连续性,将游戏结构设定为线性结构,如图2所示,游戏者必须从引子开始依次闯过关卡才能完成游戏。比如,游戏者准备进入枯木块场景,则必须先在藤蔓场景内完成与蛾蜡蝉的“捉迷藏”游戏任务。
(2)游戏脚本文档
游戏脚本文档一般包含游戏机制、人工智能、游戏元素、游戏进程、系统菜单等。本游戏案例是一款第三人称视角的2D(二维平面)游戏,游戏侧重在冒险的过程中,遭遇到各类昆虫,并通过游戏了解它们的习性。游戏机制允许游戏者自由、直观地控制游戏角色,欣赏并置身于美丽而奇妙的微观昆虫世界。文档需对以下游戏机制进行描述:GUI(图形用户界面)、开始和保存游戏、控制操作方法、片头、地图、昆虫角色、对话、游戏故事、题库、关卡[9]。由于以体验昆虫世界为基调,因此AI(Artificial Intelligence,人工智能)的首要任务是赋予每个昆虫NPC(Non-Player Character,非游戏者角色)鲜明的个性,并在互动中展示各自的特征习性。游戏元素选用“对角色的完善”、“探险”、“解决问题”、“史诗般的故事”、“搜寻宝物”、“资源管理”等角色扮演游戏的经典元素,以满足游戏者的游戏好奇心需要、探究需要,提高其成就感;游戏情境的设计重视画面的精致度,保持鲜艳的色彩,以满足低龄游戏者的审美需要。此外,本游戏案例情节为毛虫茱迪在森林中寻找“阿卡迪亚”认识各类昆虫的故事,在情节推动上采用“平缓-冲突-平缓-冲突-高潮-平缓”的节奏,力争使游戏者始终保持紧张刺激感,专注于游戏本身,激发心流的产生,并以此将游戏进程划分为三个阶段。游戏将从茱迪与金龟子对话开始,连过五关,最后化蝶并明白生命的旅程才是真正的“阿卡迪亚”。在关卡的控制上,游戏者必须完成每一关的游戏任务,才能进入下一场景;游戏者还可在任务完成后选择是否回答NPC老树仙的问题,若答对则可获得杏叶。杏叶可补充随着时间流逝而消耗的体力值,若体力值降为0,则主角将死去,以此间接推动游戏者在学习体验后答题检验学习成果。本游戏案例可以运用鼠标进行操作,方便低龄游戏者的控制。系统菜单主要有两种,一种是在游戏启动时初始界面上的菜单按钮,另一种是在游戏进行中主界面边缘的功能按钮。
三 游戏案例的实现
本游戏案例运用Flex搭建游戏主程序,控制AI、菜单命令、角色移动以及数据的存储交换等,各个场景内闯关时的小游戏任务运用Flash开发。Flash已是一个成热的商用产品,但在企业级应用上仍有不足,Flex的推出通过提供一个程序员们已经熟知的工作流和编程模型来改善这个问题,它引入了MXML 脚本语言,使得可以动态编译用户界面,并且能够用Flash Player 来随时进行描述。Flex与Flash的配合,在处理复杂动态交互、提高终端用户体验与反应速度上更具优势。
1 功能模块
游戏案例的主要功能模块如图3所示,分通关记录、角色交互、体力值、答题、任务与资源管理模块。通关记录模块保存游戏者在某一场景内的角色状态以及关卡通过记录,可以判断游戏者是否可以进入下一场景;当游戏者下一次登陆游戏时,该模块会提示游戏者是否回到上次游戏记录,可跳转到上次所经历的最后场景。角色交互模块负责NPC的AI,控制NPC在地图上的运动规律,以及与游戏者的交互。体力值模块负责计算游戏运行时间,并定制体力值的消耗频率,控制体力值的相应增减。答题模块负责题库的生成与随机抽题,并记录游戏者的答题成绩,以判断游戏者是否得到奖励。任务模块负责记录游戏者的任务详细情况,并以列表形式显示。资源管理模块负责存放游戏者所得的各类奖励物品,并可查看与使用。
2 体系结构
本游戏案例体系结构如图4所示,基于J2EE框架分为表示层、业务层、数据层。
在表示层引入Flex UI(User Interface,用户界面)组件,逻辑处理程序和客户端程序能够同时运行在提供有FlashPlayer的PC机上。游戏角色的对话使用Panel、Image、Text、Button等组件实现,角色的运动使用Canvas 容器、SWFLoader等实现,小游戏的载入使用Loader动态导入实现。Flex由数据构成,能够接受web应用中不同格式的数据,能与最常见的服务器互动。Flash素材与Flex的联系使用LocalConnection方法实现。表示层具体采用基于Flex组件的体系结构和对象模型,用于连接到外部数据源、管理数据,并将数据绑定到UI组件。WebService Connector、XMLConnector等组件保证了与服务器的数据互通。前端数据集成包含数据连接、数据绑定、数据管理三方面[10]。角色数据的创建、读取与修改,使用Remote ShareObjects实现。在业务层内,服务端使用的是J2EE Application Server,可在服务器上建立和公开业务逻辑,负责处理应用程序的业务逻辑和业务校验,管理事务,管理业务层级别对象的依赖。数据层负责把java域对象与数据库表之间建立起一个映射关系,通过操作这些域对象操作数据库[11]。用户信息等数据保存在远程数据库中。
3 界面设计
游戏案例界面可细分为初始界面、主运行界面、小游戏任务界面、答题界面、资源管理界面、帮助知识界面。登陆界面供游戏者开始与载入存档。主运行界面包含游戏角色、主地图与各类功能图标,如图5所示。小游戏任务界面包含闯关时的特写场景(类似于网络游戏的副本)。答题界面包含提问NPC、题目与反馈。资源管理界面包含游戏中所得的各类奖励物品。帮助知识界面提供游戏者游戏操作步骤、知识参考。
四 游戏案例的优势与意义
1 独特的游戏视角
教育游戏虽然众多,但很少有游戏能以一只毛虫的视角去观察世界。在毛虫的视界里,螳螂是不是依然可爱,鸟儿是不是依然温柔,杏叶是不是不能被吃等问题,都需要游戏者去重新思考。换位思考,能让游戏者更加体会生命的美丽与珍贵。此外,原本人类眼内的微观世界在被放大比例后,森林的一草一叶都能给游戏者以完全不同的聚焦感受,增强爱护大自然的信念。
2 巧妙融合教育性的任务
本游戏案例的教学内容主要是昆虫知识。所设计的闯关任务中,每个Flash游戏都巧妙地融合了昆虫的特点:例如,蛾蜡蝉的外形擅长拟态,混在藤叶之中难以察觉,因此设计“捉迷藏”的游戏去寻找真假难辨的蛾蜡蝉;步甲会释放毒气来驱赶天敌保护自己,因此设计“喷毒气驱鸟”的任务。这些任务将教育性与游戏性较好地融合了起来,游戏世界内的主观时间改变、立即反馈的任务、交互的控制感、创意的场景排列等因素,创设了产生心流的条件。
3 更加广泛易用的应用环境
由于游戏的运行只需要网页浏览器与FlashPlayer,这两个几乎在任何PC机上都可以满足的条件,给游戏案例的推广创造了天然的优势。游戏者只需要输入网址或者单击超链接,即可进入游戏体验奇妙的冒险,免除了下载庞大客户端的等待时间。此外,FlashPlayer可以在无需用户干预下保存单个域名下100kB的数据,Adobe的Flex技术“可离线”应用模式,使得游戏程序能像传统的桌面应用那样进行部署,游戏者不必再担忧因网络故障而造成的信息损失。
4 自由新颖的昆虫知识题材
目前国内面向小学生开发的教育游戏,B/S、C/S模式游戏甚至为数不多的RIA技术开发的网页游戏其选择的教学内容大部分仍是语文、数学、英语,对于自然科学尤其是昆虫知识涉及较少。本案例所设计的网页游戏,创造出一个任务驱动下供游戏者积极探索的昆虫世界,弥补了教育游戏在此类教学内容上的不足,为教师、家长、学生提供了研究学习的新思路新平台。
参考文献
[1] 上海艾瑞.17173 第八届中国网络游戏市场调查简版报告2008年[R].上海:艾瑞市场咨询有限公司,2008.
[2] 网页游戏.维基百科-自由的百科全书[EB/OL].
[3] 罗伯特•斯莱文.教育心理学-理论与实践[M].北京:人民邮电出版社,2004:23-33.
[4] 杨士良.我国电脑游戏之关键成功因素[D].台湾:国立交通大学,2003.
[5] 何克抗,郑永柏,谢幼如.教学系统设计[M].北京:北京师范大学出版社,2002:52-53.
[6] 心流理论.维基百科-自由的百科全书[EB/OL].
[7] 邓鹏.心流:体验生命的潜能与乐趣[J].远程教育杂志,2006,(3):74-77.
[8] Tracy Fullerton,Swain Christopher,Hoffman Steven.游戏设计工作坊[M].北京:电子工业出版社,2005:51.
[9] Richard Rouse III.游戏设计:原理与实践[M].北京:电子工业出版社,2003:250-369.
[10] 潘大四.基于FLEX技术构建可离线Web 应用程序的研究与实现[J].计算机科学,2008(7):298-301.
[11] 彭晓川.基于Flex的RIA与J2EE应用的整合[J].电脑与电信,2008(2):37-39.
