新课程杂志首页 > 来稿选登 >

基于Html5技术的博物馆主题游戏设计与开发

作者:陈阳,姚嘉毅 本文字数:3276
  [摘           要]  从短精快的思路和低成本开发的角度进行某个品牌或项目的推广工作,依托新媒体网络平台,使用高品质的游戏制作、简单明了的关卡玩法、富有感染力的游戏创意和文案、多渠道多方位的传播途径等,使Html5轻游戏在未来的推广营销策略上赢得先机。
  [关    键   词]  HTML5游戏;轻游戏;HTML5技术
  [中图分类号]  TP317 [文献标志码]  A   [文章编号]  2096-0603(2019)32-0176-02
   随着前些年《围住神经猫》和《看你有多色》等优质Html5小游戏在微信朋友圈迅速传播后,Html5小游戏凭借着跨平台、易开发、无需安装等特点,受到了越来越多的开发者和开发机构的青睐[1]。不仅仅游戏本身备受追捧,其系列表情包等相关衍生品也得到大量的使用,足以见得Html5轻游戏在游戏圈内的影响力。
   一、项目依托
   为了加强馆校合作,凸显工学商项目课程,2018年11月底,由我校藝术设计学院与广东省博物馆联合举办的“粤博馆庆六十周年文创礼品开发项目”全方位展开,在游戏方面,基于Html5技术的广东省博物馆主题游戏《火种》在此背景下进入设计与实际开发过程。
   二、实际调研
   广东省博物馆是国家一级博物馆,也是广东省范围内唯一的省级综合性博物馆。其陈列展览以自然、艺术、广东历史文化等为三大主要陈列方向,总共分为自然馆、历史馆、艺术馆和临展馆四大部分,广东省博物馆藏品非常丰富,截至2016年12月,该馆的藏品总数已达17.28万余件(套)。
   为了提取游戏合适元素,游戏团队围绕博物馆观众进行了一套针对上网习惯、网络游戏和网页游戏的相关调查问卷,,旨在了解玩家的兴趣爱好、生活情况、玩法黏性等,同时涵盖本次H5游戏项目类型、题材、广东省博物馆的藏品风格、建筑造型和游戏玩法设计等核心要素,充分了解网游玩家的真实想法和玩家共性,借以帮助游戏团队加深对项目所涉及的网游市场的调查研究和理解[2]。
   三、策划方案
   通过问卷调研获取的相关数据,并与相关专业人士的沟通后,游戏团队最终确定了《火种》的整体游戏类型、游戏风格和表现手法。并对游戏开发难度进行预估,形成可行性报告。
  ■
   本款游戏可基于电脑和微信平台,玩法很简单,主要是通过火种的不断传播、延伸,不断植入广东省博物馆的logo形象、品牌特征和建筑风格,加深玩家对该馆形象的记忆和印象。
   根据调研的结果,本游戏受众定位为对各类轻游戏有一定喜爱度的玩家,主要面向8岁以上40岁以下且对历史藏品有浓厚兴趣的观众。
   四、界面设计
   《火种》界面设计主要原则有:(1)由于面向对象较为年轻化,因此界面设计时采用的风格简洁可爱,从视觉上取得玩家的兴致和共鸣。(2)简单易懂,便于控制,方便玩家对操作方法的理解。(3)游戏主显示区域尽量避免干扰,界面元素可以按照玩家的意愿及时展开或收起[3]。
  ■
   按照以上思路,《火种》界面设计的基本概念设计可以用图表的形式表达出来,包括基本功能、元素表达、信息结构、屏幕安排等。根据概念设计,绘制并细化游戏界面的布局图,界面的表现形式可以很直观地展现,为实现功能做好铺垫。
   《火种》界面设计沿用了惯用的冒险闯关游戏的界面布局。引导界面和结束界面凸显广东省博物馆的logo和相关主体信息。主体界面上主要显示得分、时间、关卡、其他类资讯这些信息通常都设置在屏幕的顶部区域,提示的资讯不会影响玩家的正常游戏[4]。
   五、动画制作
   《火种》中所涉及的动画主要有:过场动画、角色动画。过场动画主要出现在游戏开始和结束前不同场景间切换时,用来交代情节的发展和场景的变化。角色动画主要表现在游戏实际进展过程中,游戏主体即广东省博物馆logo在角色升级和过时降级情况下的动画设定。
  ■
   实际制作过程中,场景动画主要基于CSS3动画效果,角色动画所应用的星云动画特效基于HTML5 Canvas技术,整个画面动态模拟了一个星系的外观变化,就比如模拟太阳系的整体环境,有很多小行星围绕着太阳系中心进行旋转,产生瞬间的动态图形变化,而其星系中心也会显得格外绚丽多彩。这些小星点都在HTML5 Canvas上进行绘制而成,时间很短暂,但显得非常亮丽夺目。
   六、程序实现
   《火种》中使用Html5+jQuery API,jQuery是一个精简、高效并且功能非常丰富的JavaScript工具库。游戏流程实现:先init()初始化,再getImageRes()装载主界面和背景音乐loadAudioResources(number),创建游戏对象和加载关卡,具体过程见下流程图。
  ■
   七、结语
   无疑,Html5是最近几年web前端开发最为热门的话题,它从根本上改变了开发机构开发Web应用的方式,从PC端浏览器到手机端移动应用,Html5是对HTML标准的第五次修订。而其语法则是向后兼容的,正逐渐成为一个不断在更新和变化的活标准。
   而基于Html5技术的《火种》等作品是学院工学商一体化项目制课程结出的又一硕果,有助于促进学院与省博物馆在人才培养、文创产品和艺术衍生品设计研究、创新应用领域开展广泛深入的合作。
   参考文献:
   [1]黄伊琳.基于HTML5的微信游戏设计[J].计算机系统应用,2017(12):22-24.
   [2]臧金梅.基于HTML5的简单拼图游戏的设计和实现[J].信息技术与信息化,2017(12):22-24.
   [3]谢运佳.基于HTML5的认知训练小游戏的设计与开发[J].广州广播电视大学学报,2017(4):104-106.
   [4]陈宏扬.基于HTML5的闯关游戏式移动学习平台的开发和设计[J].广东轻工职业技术学院学报,2017(16):9-12.
  ◎编辑 武生智
  Design and Development of Museum Theme Games Based on Html5 Technology
  GHEN Yang,YAO Jia-yi
   Abstract:The promotion of a brand or project from the perspective of short,precise and quick thinking and low-cost development,relying on the new media network platform,using high-quality game production,simple and clear levels of play,infectious game creativity and copy,multi-channel and multi-dimensional communication channels,etc.,make Html5 light games win the first chance in the future promotion and marketing strategy.
   Key words:HTML5 game;light games;HTML5 technology