基于FLASH的文明知行游戏的设计与实现.docx

1、基于FLASH的文明知行游戏的设计与实现毕 业 论 文（设 计）论文（设计）题目：基于FLASH的“文明知行”游戏的设计与实现姓 名 苗 龙 学 号 12053020115 院 系 计算机与信息工程学院 专 业 计算机应用技术 年 级 2012级 指导教师 朱 楠 2015年5月9日目 录摘 要 1ABSTRACT 2第1章 绪论 3 1.1 Flash游戏研究现状 3 1.2 Flash游戏的应用领域 3 1.3 Flash游戏的研究意义 4 1.4 作品使用的关键技术 5 1.5论文的组织结构 5第2章 游戏需求分析 6 2.1 游戏的制作目标 6 2.2 游戏可行性分析 6 2.3 游戏

2、的界面需求 6 2.4 游戏的操作模式 7 2.5 游戏的论坛策划 7第3章 游戏设计 9 3.1 游戏结构图 9 3.2 游戏开场动画设计 10 3.3 游戏角色设计 11 3.4 游戏关卡设计 14 3.5 游戏帮助设计 19 3.6 游戏论坛设计 19第4章 运行测试 22 4.1 游戏运行环境 22 4.2 测试结果及分析 22第5章 总结 24 5.1 已经完成的工作 24 5.1 不足 24参考文献 25致 谢 26摘 要本次毕业设计是使用FLASH技术开发一个名为“文明知行”的游戏。该论文的撰写基于本次毕业设计。设计包括前台和后台两大部分，前台主要使用FLASH技术设计游戏中的各

3、关卡，后台主要使用ASP.NET技术实现论坛的基本功能。该游戏以“城市文明建设”和“环保”为主题，利用动画的形式展现日常生活中的各场景，并兼顾游戏的娱乐性，倡导人们自觉规范日常行为，注重环保。本次设计注重原创，画面精美，动画流畅，后台功能完善，是计算机应用技术专业课程知识的一次综合应用。关键词：FLASH技术；ASP.NET技术；图形图像处理技术；游戏开发；城市文明ABSTRACTThis graduation design is the use of FLASH technology to develop a civilization of knowledge of the game. Th

4、e thesis based on the graduation design. The design includes two parts front and back, in front of the main use of FLASH technology to design each level in the game, the basic function of ASP.NET technology is mainly used to achieve the background of the forum. The game with the theme of city civili

5、zation construction and environmental protection, using the form of animation showing the various scenes of daily life, and recreational game, advocating people to consciously regulate behavior, pay attention to environmental protection. The design on the original, beautiful screen, smooth animation

6、, backstage function perfect, is a comprehensive application of professional knowledge of computer application technology.Keywords: FLASH technology; ASP.NET technology; image processing technology; game development; city civilization第1章 绪论随着信息技术的飞速发展以及计算机动画技术条件的日趋成熟，以Flash动画为代表的网络动画得到了蓬勃的发展。时至今日，功能

7、强大的Flash已经能够创作出很多高品质、具有完整故事情节的动画，以及具有强大交互性的游戏作品1。作为新的媒介，Flash动画的出现大大拓宽了传统动画领域。而Flash动画的开放性文本结构和非线性叙事方式，也可以带给观众与传统动画不同的崭新的视听体验。另一方面，Flash游戏也以其独特的优势和视觉效果久久占据着游戏市场2。这些跟大投入大制作的大型网络游戏比起来非常简单甚至是简陋的Flash小游戏，在画面精美的网络游戏泛滥成灾的今天，却始终保持了独特的魅力和吸引力，吸引着无数的玩家。相信随着计算机的继续普及Flash游戏也必将会拥有更大的应用舞台。1.1 Flash游戏研究现状Flash游戏是一

8、种新兴起的游戏形式，以游戏简单，操作方便，绿色，无需安装，文件体积小等优点现在渐渐的被广大网友喜爱。Flash游戏又叫做Flash 小游戏，因为Flash游戏主要应用于一些趣味化的、小型的游戏之上，以完全发挥它基于矢量图的优势。Flash游戏在游戏形式上的表现与传统游戏基本无异，但主要生存与网络之上，因为它的的体积小、传播快、画面美观，所以大有取代传统web 网游的趋势，现在国内外用Flash 制作无端网游已成为一种趋势，只要浏览器安装了Adoboe的Flash Player，就可以玩所有的Flash游戏，这比传统的web 网游进步了许多。Flash是开发的网页富媒体及强交互技术，最初用来研发

9、交互式或动画网站组件，近几年获得了突飞猛进的发展。根据Adoboe公司的统计，其互联网PC桌面普及率达到了惊人的99%，而Java为85.1%。目前Flash更在大力向PDA及智能手机端发展3。1.2 Flash游戏的应用领域Flash采用了矢量图形和流式技术，使用Flash制作的游戏迅速在网站游戏领域占据了极高的份额。Flash游戏能够很好地支持声音，游戏文件较小，并有着独特的跨平台特性，使得用Flash制作的游戏具有很强的生命力4。国外对Flash游戏在娱乐、教育等方面都有了大量应用。在教育领域利用Flash制作的教学游戏与课件生动有趣，切实满足学生和学校教学的需要5；在娱乐领域诸如时代华

10、纳利用Flash制作的游戏更是在互联网络中随处可见，其中部分高质量游戏完全可以和一些游戏相匹敌。在国内，对Flash的研究和开发发展迅猛，出现了大量的Flash动画和小游戏。如“三国志”、“上古神器”、“魔术笔”等。也形成了如“4399小游戏网”、“17173小游戏”等一系列的游戏展示、交流网站。 Flash游戏也逐步向着群体化、面向过程化发展。在国内的教育领域，随着教育信息化的持续推进，利用Flash制作的教学游戏、课件也逐步出现在学生的课堂上，尚俊杰、庄绍勇提出Flash游戏与教育平台相结合来实现互动教学等。Flash游戏在教育中已经进行了一定的实践，如背景某公司开发的“快乐教育”，珠海某

11、软件公司开发的“奥卓尔学习世界”6。 总之，随着信息化的不断推进，Flash游戏开始被更多的企业与大众关注及研究、开发。并在目前的成果上不断的发展，Flash游戏的质量越来越高。但是其在公益领域的应用还不多见。1.3 Flash游戏的研究意义游戏的主题为文明之行，而文明建设恰是我国社会主义建设中的重点，是社会主义现代化建设的重要组成部分。随着我国城镇化的逐步推进，可以说物质文明得到极大的提升，但如何随之提升精神文明就成为当下的主要任务7。在传统方式中利用报纸、电视进行宣传或是树立精神文明典型人物，都得到了一定的成效。但是在进入网络时代的今天，各传统媒体份额不断缩小，新媒体传播方式日益受到人们的

12、喜爱。所以开辟网络传播新方式成为文明建设的突破点。在传统方式中利用报纸、电视进行宣传或是树立精神文明典型人物，都得到了一定的成效。但是在进入网络时代的今天，各传统媒体份额不断缩小，新媒体传播方式日益受到人们的喜爱。所以开辟网络传播新方式成为文明建设的突破点8。正是基于新媒体的利用与网络的普及，再加上文中谈到的Flash软件的自身优势，Flash动画和Flash游戏被广泛利用。经过多年的发展，Flash游戏制作者在图像处理、动画制作、脚本编写等方面也越趋成熟，同时也积累了一大批Flash游戏的专业开发者与游戏受众9。游戏从开发到应用实现变得更加简单，利用Flash技术制作文明宣传、环保教育类的游

13、戏具有创新的意义。不同于传统媒体文字、口号、图片的宣传，利用Flash游戏进行宣传教育更能让受众全方位的体验游戏。将被动接受变为主动参与游戏，整个教育宣传效果将得到极大的提升。综上所述，基于Flash的文明宣传、环保教育游戏将会为宣传提供一个更新、更快、更优的宣传途径。因此，本文从游戏开发所使用的Flash技术、.NET技术、图形图像技术的角度具体阐述“文明知行”Flash游戏的设计与实现。1.4 作品使用的关键技术本游戏主要使用Flash技术设计游戏中的人物及背景，使用AS编程完成各种交互控制，使用图形图像技术进行素材处理，使用.NET技术完成后台论坛的各项功能。Flash是用来编辑二维动画

14、的软件，经过几代版本改进后，采用了矢量图形和流式技术，迅速成为网上动画的霸主。Flash能够很好地支持声音，具有交互功能，独特的跨平台特性、灵活的界面控制以及多媒体特性的使用。本游戏利用Flash制作，充分发挥出Flash的强大功能，完成动画设计、脚本控制、场景及人物绘制10。图形图像处理技术主要处理以像素所构成的数字图像，使用其众多的编修与绘图工具，可以有效地进行图片编辑工作11。在设计中有部分素材正是利用图形图像处理技术进行二次加工、修改。1.5论文的组织结构本论文由五部分组成，每部分的内容如下：第1章为绪论。指出当今社会文明宣传的紧迫需求和Flash技术在当今的发展成果，以及Flash游

15、戏在网络环境下的优势。第2章为需求分析。需求分析规定了本游戏要制作的具体目标，与完成目标的具体步骤，并确定了整个游戏的故事情节及各关卡对应的游戏形式。第3章为游戏设计。游戏设计包括整个游戏的布局，游戏各个部分之间的联系，以及制作本游戏的具体思路、游戏关卡的设计、开场动画及背景素材的设计等。第4章为游戏测试。测试的主要目的是对游戏的操作及功能的一个检测，找出其中的缺陷与不足，从而进行查漏补缺，保证游戏功能的健全。第5章为总结。总结主要是在整个游戏制作过程中的收获和感悟，以及游戏的不足和有待改进的地方。总结这些经验对我们以后的工作和学习将会很有帮助。游戏从设计到完成，基本的功能都已经实现了，但是还

16、有一些地方是可以用更好的思路去制作的，这将是我们以后努力的方向。第2章 游戏需求分析基于目前社会主义精神文明的建设需要以及新媒体传播的发展趋势，目前急需一款能够在网络媒体中传播并且可互动的文明宣传多媒体作品12。采用Flash制作文明宣传、环保教育游戏将会为宣传提供一个更新、更快、更优的途径。为了使制作出的Flash游戏具有丰富的内容及较高的游戏性，在设计前需做详细的前期策划，确定游戏主题、游戏框架、画风、游戏内容模块。2.1 游戏的制作目标确定游戏目标是一款游戏的起点，在本阶段需确定游戏主题、游戏类型是什么、采取什么样的风格，游戏要达到什么样的目的。“文明知行”游戏主题来源于我们对现代文明、

17、环保的倡导。使得广大受众在游戏中获得乐趣的同时，能够发现生活中不易发现的不文明想象，身体力行的改变这些不文明的行为。游戏的游戏类型主要根据社会不文明与环境污染两个方面，相应的将游戏模式分为动作闯关类型与道具解密类型，其中闯关模式需要玩家控人物躲避不安全因素过关；解密模式通过寻找道具解决污染问题。通过玩本游戏，可以让玩家认识到平时不经意间的不文明现象，会给自身与他人的安全带来多少隐患。从而凸显城市文明的重要性。2.2 游戏可行性分析首先在技术方面：该游戏的设计是通过Flash技术、ASP.NET技术来实现的，这两种技术市场上销售价格较低，网络上也有下载版本，在设计开发中已经被大量使用，比较成熟，

18、技术上是可行的。其次在适用性方面：而随着信息化建设的不断发展基于Flash技术的动画、课件、游戏必定会在各个领域兴起。在设计本作品时我们调查到了现在市面上关于Flash的公益作品大多都是动画形式，没有互动性。正是这方面的欠缺，我们才设计这个作品来弥补不足。设计作品有实际意义，先进的技术受到广大用户的支持和认可。2.3 游戏的界面需求一个好的开场动画是设计好游戏的前提13。由于制作的是关于文明宣传、环境保护类的Flash游戏，所以在开场动画的界面颜色上，采用了蓝色为主色调，给人一种舒怀、博大的视觉感受。在实际游戏中则选用绿色，黄色，橙色这四种颜色构成各个界面的主体，使页面更为清新亮丽，充满活力。

19、游戏中的字体大部分采用黑色，显示效果清晰。做游戏设计一定要绘制好背景、人物，计美观大方的设计会为整个游戏的可玩性增色不少。因为是Flash制作的游戏，在人物控制与游戏中自然要使用许多的脚本代码。部分游戏关卡切换时，在两关之间添加了与游戏内容有关的过场动画，使各关的联系更加紧凑。2.4 游戏的操作模式针对城市不文明现象与环境污染两个问题制定出两种不同的游戏模式。1城市不文明现象：结合具体的社会想象，完成闯关模式前三关的设计，分别基于社会公共设施丢失、高层建筑坠物、汽车随意停放三个社会问题进行游戏设计。并将游戏时间与城市污染联系起来。玩家需要在雾霾笼罩城市前，控制人物跳过被偷走井盖的下水井、躲避高

20、空被风吹落的花盆、将随意停放的车辆推进停车位来进行度过这些难关，逃离污染严重的城市。2环境污染的治理：虽然暂时逃离了城市，但是城市污染在不断加剧。为了重新回到城市生活，人们开始了污染治理行动。通过寻找合适的道具来对城市生活与工业生产中的污染进行治理，使得环境得到恢复，人们回到城市生活。2.5 游戏的论坛策划为整个游戏能够有更多的社会价值，在本游戏中还设计了游戏论坛功能。游戏者能够针对游戏中的各种问题及现实中个不文明现象进行讨论。在系统中，人们可以轻松的查看最新的信息，可以发表自己的帖子与更多的人来分享，同时管理员可以对用户发表的帖子进行回复等。为了管理员方便管理，也为了满足广大用户的需求设计了

21、以下几个功能：1管理回帖：对管理员，管理员可以查看发帖的人的基本信息，进而对帖子进行审核。2浏览帖子：对用户，用户不仅仅可以在网站中查看自己发表的帖子，还可以浏览其他人发表的帖子。3管理用户：对管理员，管理员对用户发表的帖子给予回复, 如果您现在还不是管理员的话，您无法对用户发表的帖子进行回复操作，您可以注册新的管理员用户，注册成功可以进行回复、管理系统等操作。4管理帖子：对管理员，通过系统对用户发表的帖子进行在线管理操作。5浏览版块：对管理员、用户，通过用户发表的帖子，进行模块式的管理，这样便于浏览与查找。6管理版块:管理员可以对用户所发表的帖子进行模块式的管理。系统将根据用户角色分配不同的

22、功能权限给用户；管理员在系统中的权限高于用户，所获得的功能也是最多的。第3章 游戏设计经过前期的策划，确定游戏主题、游戏框架、画风、游戏内容模块后。就需要根据策划的内容进行游戏的设计，首先确定游戏的架构图，并按照架构图不断丰富游戏内容14。在游戏内容的选择上我们基本使用现实生活中可以看到的各种现象来进行设计。部分游戏关卡之间衔接设计有过场动画，使得游戏更具连贯性。3.1 游戏结构图文明知行游戏的整体结构清晰，在游戏设计中我们把所有界面分为三级。第一级是开场动画与主界面；第二级是主界面菜单中相应的功能，分别是游戏模式选择、游戏帮助、游戏论坛；第三级是在正式游戏模式选择下的不同游戏关卡。游戏的结构

23、图如图1所示。游戏主界面退出游戏游戏论坛游戏帮助进入游戏解密模式闯关模式工业中的污染治理生活中的节能减排推车入库游戏躲避高空抛物跳跃下水道口图1 游戏结构图3.2 游戏开场动画设计Flash游戏开场动画设计的好坏往往能体现整体设计的成效，好的漂亮的开场动画可以使整个设计的动画展示添光添彩，对整个设计起到极好的推动作用，给欣赏者留下极深的印象，那么具有动感效果的开场动画无疑是给整个设计提到一个更高的设计层次15。文明知行游戏的开场是一个短篇幅的动画，为了整个游戏的开场动画运行顺畅，在开场动画前设计有文件加载读条。加载读条的外观是由八栋国内外知名建筑物的剪影，按照一个圆环排列构成。并在加载时逐个渐

24、变透明度并缩放，整体设计富有动感，加载外观如图2所示。图2 开场动画加载加载功能百分比的实现主要通过设定onEnterFrame循环事件来完成。百分比的获取通过已经加载的文件大小比上文件总大小来获取。当获取到的比值结果为1时，表示整个游戏加载完成。此时删除onEnterFrame事件，并进入下一场景，加载功能的主要代码如下：onEnterFrame = function () var percent_loaded = _root.getBytesLoaded()/_root.getBytesTotal(); jindu_mc.value = percent_loaded; delete onE

25、nterFrame; 当游戏加载完成后，跳转到开场动画所在场景。开场动画设计为蓝色的天空与大海连为一线，在此之后的青山绿树缓缓出现将天海分开，在白云、青山的映衬下，一座城市慢慢浮现在画面上。在城市出现后，天上落下一枚印章，以背景动画为纸张将游戏主题“文明知行”印在画面上。开场动画结束后的画面定格，成为游戏的主界面并出现主菜单。主界面中的四个按钮上均有动态效果。进入游戏按钮动画是主角握拳向下，并显示GO的英文字母；游戏帮助显示人物手拿帮助手册；游戏论坛动画为两个用户动态聊天；退出游戏动画为一个蘑菇人不舍得拿出常来看我的牌子。主界面风格已蓝色、绿色为主，体现广阔的生机与活力；一枚印章印下游戏主题，

26、体现权威性与刻不容缓。开场动画与游戏主界面融为一体，新颖的设计也为设计增加了不少的亮点。主界面如图3所示。图3 游戏主界面图3 开场动画截图3.3 游戏角色设计1主角设计本游戏闯关模式游戏主角设定为青年，红色的上衣，蓝色牛仔裤。牛仔裤作为大众服饰代表我们的主角是众多普通人中的一位。上衣设计为红色是因为各关游戏背景多是蓝色、绿色、橙色三色，在这样的背景下使用红色是为了突出人物。人物配饰为一只手表，预示闯关逃离刻不容缓，与游戏时间限制呼应。在闯关模式中也采用手表表面的形式显示时间。按照游戏的人物操作的实际需求，人物设定有站立、跑步、跳跃三种动作的元件，元件中人物胳膊、头、身体和腿都是不同的元件，可

27、以方便的在不同人物元件中重复使用。在三种动作元件中除站立元件外均设计有动画效果。跑动元件采用逐帧动画的方式制作跑动的动作，胳膊摆动采用补间动画制作。跳跃元件制作方法与跑动相似均采用逐帧动画配合补间动画制作，不同的是在人物跳跃的时候在人物身后复制有人物虚影，以体现跳跃的动感，人物各动作如图4所示。图4 人物动作图不同的人物动作元件与键盘上的键的ASCII码向照应，通过按下键盘上的相应键调用不同的元件。当按下a键与d键时调用人物跑动元件；如果同时按下空格键则调用人物跳跃元件；不按下任何键则调用人物站立元件。人物的左右移动通过a键与d键控制，方法是增加、减少元件的绝对坐标中X值来改变元件位置。人物移

28、动的主要代码如下：if (Key.isDown(a) & player._x100) if (isJumping = false) player.gotoAndStop(跑); player._x -= 5;player._xscale = 100;2其他角色设计根据游戏的剧情需求，游戏还设计有4个角色。分别是扫地老人、政府公务员、蘑菇仔、工厂看守狗。这些角色的绘制中均使用Flash工具栏中的绘图工具勾画出角色轮廓，再加上填充颜色设计完成。设计出的角色从勾线到填色均要满足该角色的对应特色。如在绘制蘑菇仔的过程中，为体现其可爱的形象更多的大多使用了较圆润的线条及明亮的色彩，如图5所示。图5 蘑菇

29、仔设计过程老人扫地及公务员挥舞书动作主要采用补间动画制作；蘑菇仔哭的表情主要是逐帧动画制作；狗流口水的动画采用逐帧动画配合补间动画设计制作。上述这些角色在本游戏剧情中没有交互或移动的需要，所以在角色设计中主要对角色本身动画效果进行设计。每个角色要体现社会人群的特点，如扫地者的老人形象，公务员的着装等都需推敲设计，如图6所示。 图6 其他角色设计图3.4 游戏关卡设计在主界面单击开始游戏后会跳转到游戏模式选择界面，如图7所示。游戏的游戏类型主要根据社会不文明与环境污染两个方面，分为动作闯关类型与道具解密类型，其中闯关模式需要玩家控制人物躲避不安全因素过关；解密模式通过寻找道具解决污染问题。图7

30、游戏模式选择界面1闯关模式闯关模式作为游戏的主要游戏方式，本模式结合具体的社会想象，分别针对社会公共设施丢失、高层建筑坠物、汽车随意停放三个社会问题进行游戏设计。玩家需要在3分钟内，控制游戏人物闯过不文明现象构成的难关。分别需要跳过被偷走井盖的下水井、躲避高空被风吹落的花盆、将随意停放的车辆推进停车位，最终逃离污染的城市。闯关模式中有时间限制，其中实现累加及显示功能的主要代码为：out_count = 你的得分为:+count+分;/daojishijian = cssj+jlsj;/dao_time = 剩余时间为:+daojishijian+秒; 代码起到的作用是：整个游戏的通过时间变量递

31、减的方式计时，同时累加游戏分数。当分数满足要求时使用GoToPlay跳转到下一个场景中进行游戏。第一关：的背景是公共设施丢失，游戏界面左上方显示游戏积分与时间，在游戏界面的右上角显示人物的操作提示。本关背景绘制与游戏主界面中城市的远景基本相同，是将主界面中的城市进行重复利用，并将原有的海洋修改为人行道，营造一种海边公路的感觉。在本关中井盖元件共使用5次。需要玩家用键盘控制人物跳过被偷走井盖的下水井口，人物移动通过A键与D键控制，主要通过修改人物实例的X坐标与Y坐标达到人物前后走与跳跃的功能。当人物实例的坐标与下水道的坐标重合则判定游戏失败。如正常通过，那么每通过一个加20分，得到100分过关。游戏添加有背景音乐，并且在每次井盖出现前会有声音进行提示，界面具体布局如图8所示。图8 闯关模式第一关游戏界面第二关：背景是高空抛物的危险，游戏界面上方显示游戏积分与时间。游戏与上一关衔接有过场动画，动画内容一阵风将放在阳台上的花盆吹落，主角在躲避从高空坠落的花盆。本关的人物仍然沿用上一关的人物模型，主要操作是通过AD键控制人物进行左右躲避，每成功一个加一定的积分，满足200过关。花盆元件实例坠落是修改其Y坐标，为了提升游戏性，花盆是