Flash游戏制作-《填色游戏》

./大学软件技术学院二维动画课程设计报告题目名称Flash游戏制作——《填色游戏》姓名玉清专业数字媒体艺术班级08级1班指导教师徐卓二0一0年一月十五日课程设计任务书一、目的：本次课程设计的目的是通过使用FlashActionScript3.0编程技术制作一个Flash小游戏或交互场景动画,使学生在巩固本学期FlashActionScript编程技术和上一学期Flash动画制作的基础上,进一步培养学生的动画制作能力和编程技术,学会应用所学知识制作交互场景动画和Flash小游戏,积累制作flash动画和游戏的经验,巩固课程所学的理论知识,为以后工作打下基础。二、要求：每位同学从所给题目中选择一个作为本次课程设计的主题,使用FlashActionScript3.0制作一个小游戏或交互场景动画,设计要求如下：作品主题积极向上,容健康完整；作品中的游戏主角或场景须为自己独立创作,并自己编写程序完成游戏或场景功能；作品中要充分利用所学知识进行制作,功能相对完整,运行流畅,画面美观,形式生动活泼,观赏性实用性强；撰写不少于3000字的报告,报告结构合理,语句通顺,能够说明制作过程和原理。同时上交作品文件〔SWF及FLA文件两种格式和课程设计报告。三、时间与地点：—；上午8：00—11：30；下午13：30—15：30地点：西3#实验楼204四、进度计划：1月4日选题1月5日搜集资料,确定选题1月6日编写剧本1月7-8日设计分镜台本并准备素材绘制主要角色及场景1月11日动画制作1月12-14编写程序及测试完善1月15日撰写报告目录目录2第一章游戏功能概述3第二章角色与场景设计42.1角色设计42.2场景设计4第三章游戏功能设计与实现63.1模块一：取色功能63.1.1主要功能及函数介绍63.1.2代码63.2模块二：辅助功能93.2.1简介93.2.2代码9第四章音乐的添加11第五章小结12第六章心得体会13致14参考文献15.第一章游戏功能概述填色游戏的主要功能是由游戏提供未涂色的图片,由玩家根据自己的喜好给空白图片添加上相应的颜色。游戏提供画笔,调色板,空白图片轮廓等,其中画笔跟随鼠标移动,用画笔提取调色盘中的颜色,然后填充在空白图片中,调色盘提供了红,绿,蓝,紫等十一种颜色,为玩家提供了巨大的选择空间,调色盘设置为可移动的,用画笔可以任意拖动调色盘的位置,游戏提供了六可爱的图片,供玩家游戏。我们还为按钮添加了声音,使游戏者在玩的过程中不至于太单调,此外,我们还为游戏添加了音乐,游戏者可以根据自己的喜好选择边玩游戏边听音乐,或者是没有音乐,可以任意控制音乐的播放,主界面如图1。图1主界面第二章角色与场景设计2.1角色设计主要角色是六空白图片轮廓,根据游戏需要,我分别从书本网络上搜集了一些简单漂亮的图片,然后根据图片分别绘制出相应角色,有小蘑菇,尾巴燃着火的小龙,福娃晶晶,目不转睛注视苹果的小狗,身着官服的九品芝麻官,还有可爱的小精灵。其中小蘑菇如图2所示,福娃晶晶如图3所示,还有小精灵如图4所示,是我负责制作的。图2小蘑菇图3福娃晶晶图4小精灵根据游戏需要,绘制完所有角色之后,我们又将其按部分分割填充颜色,分别转化成元件,以便添加相应的侦听事件,方便填充颜色,有的甚至分割成二十多块,部分元件如图5。图5元件实例2.2场景设计游戏的主场景我们绘制了一个大象形的绘图板,为了使场景美观,我们又导入了一幅位图图片作为背景衬在大象形画板的后面,主场景主要运用了暖色调,给人一种温馨愉悦的感觉。这些细小的地方均为我们两个人合作,具体效果如图5。图5场景图片第三章游戏功能设计与实现3.1模块一：取色功能主要功能及函数介绍本游戏的取色模块主要实现用画笔从调色板中提取颜色,取色之后再将其添加到目标区域,即画笔点击某块特定的区域将画笔的颜色添加到其中。游戏功能的实现主要运用了事件侦听和颜色设置函数,鼠标单击目标更改目标颜色,达到提取颜色和添加颜色的目的。此项功能的实现主要运用了Transform类,每个显示对象都有一个transform属性,它是Transform类的实例,Transform类有一个colcrTransform属性,此属性又有一个ColorTransform类的实例,通过设置此实例的color属性可以改变可视对象的颜色。方法是先定义一个ColorTransform类的变量用来存储颜色,然后将相应的颜色值存储在变量中,要改变目标颜色时,将存储在刚刚定义的变量赋值给实例的transform.colorTransform属性即可。代码1.导入相应的类importflash.events.MouseEvent;importflash.geom.ColorTransform;2.分别给调色盘上的颜色按钮添加事件侦听和函数pan.hei.addEventListener<MouseEvent.CLICK,makeHei>;//给黑色按钮〔实例名pan.hei添加事件侦听pan.bai.addEventListener<MouseEvent.CLICK,makeBai>;pan.lv.addEventListener<MouseEvent.CLICK,makeLv>;//给绿色按钮〔实例名pan.lv添加事件侦听pan.huang.addEventListener<MouseEvent.CLICK,makeHuang>;pan.lan.addEventListener<MouseEvent.CLICK,makeLan>;pan.zi.addEventListener<MouseEvent.CLICK,makeZi>;//给紫色按钮〔实例名pan.zi添加事件侦听pan.danlan.addEventListener<MouseEvent.CLICK,makeDanLan>;pan.hong.addEventListener<MouseEvent.CLICK,makehong>;pan.juhuang.addEventListener<MouseEvent.CLICK,makejuhuang>;//给橘黄色按钮〔实例名pan.juhuang添加事件侦听pan.fenhong.addEventListener<MouseEvent.CLICK,makefenhong>;pan.shenlv.addEventListener<MouseEvent.CLICK,makeshenlv>;3.单击颜色按钮时笔头的颜色变为按钮颜色varcolorInfo:=bi.bitou.transform.colorTransform;//定义ColorTransform对象,用来保存产颜色<1>笔头变成黑色函数functionmakeHei<event:MouseEvent>:void{colorInfo.color=0x000000;//将黑色保存在colorInfo中 bi.bitou.transform.colorTransform=colorInfo;//将笔头〔实例名bi.bitou的颜色改为colorInfo的颜色}functionmakeBai<event:MouseEvent>:void{ colorInfo.color=0xFFFFFF;//将白色保存在colorInfo中 bi.bitou.transform.colorTransform=colorInfo;//将笔头〔实例名bi.bitou的颜色改为colorInfo的颜色}〔2笔头变成绿色函数functionmakeLv<event:MouseEvent>:void{ colorInfo.color=0x00cc00;//将绿色保存在colorInfo中 bi.bitou.transform.colorTransform=colorInfo;//将笔头〔实例名bi.bitou的颜色改为colorInfo的颜色 }<3>笔头变成黄色函数functionmakeHuang<event:MouseEvent>:void{ colorInfo.color=0xffff00;//将黄色保存在colorInfo中 bi.bitou.transform.colorTransform=colorInfo;//将笔头〔实例名bi.bitou的颜色改为colorInfo的颜色 }<4>笔头变成蓝色函数functionmakeLan<event:MouseEvent>:void{ colorInfo.color=0x0000ff;//将蓝色保存在colorInfo中 bi.bitou.transform.colorTransform=colorInfo;//将笔头〔实例名bi.bitou的颜色改为colorInfo的颜色 }<5>笔头变成紫色函数functionmakeZi<event:MouseEvent>:void{ colorInfo.color=0x9900ff;//将紫色保存在colorInfo中 bi.bitou.transform.colorTransform=colorInfo;//将笔头〔实例名bi.bitou的颜色改为colorInfo的颜色 }<6>笔头变成淡蓝色函数functionmakeDanLan<event:MouseEvent>:void{ colorInfo.color=0x00ffff;//将淡蓝色保存在colorInfo中 bi.bitou.transform.colorTransform=colorInfo;//将笔头〔实例名bi.bitou的颜色改为colorInfo的颜色 }<7>笔头变成红色函数functionmakehong<event:MouseEvent>:void{ colorInfo.color=0xff0000;//将红色保存在colorInfo中 bi.bitou.transform.colorTransform=colorInfo;//将笔头〔实例名bi.bitou的颜色改为colorInfo的颜色 }<8>笔头变成橘黄色函数functionmakejuhuang<event:MouseEvent>:void{ colorInfo.color=0xff6600;//将橘黄色保存在colorInfo中 bi.bitou.transform.colorTransform=colorInfo;//将笔头〔实例名bi.bitou的颜色改为colorInfo的颜色}<9>笔头变成粉红色函数functionmakefenhong<event:MouseEvent>:void{ colorInfo.color=0xff00ff;//将粉红色保存在colorInfo中 bi.bitou.transform.colorTransform=colorInfo;//将笔头〔实例名bi.bitou的颜色改为colorInfo的颜色 }<10>笔头变成深绿色函数functionmakeshenlv<event:MouseEvent>:void{ colorInfo.color=0x006600;//将深绿色保存在colorInfo中 bi.bitou.transform.colorTransform=colorInfo;//将笔头〔实例名bi.bitou的颜色改为colorInfo的颜色 }3.2模块二：辅助功能简介通过用画笔拖动调色盘,来实现移动调色盘的位置；将调色盘中的颜色制作成按钮,用画笔点击不同的按钮,画笔提取不同的颜色。代码1.下一按钮及声音stop<>;varmyButton:button=newbutton<>;//定义一个button类的元件实例xia.addEventListener<MouseEvent.CLICK,next2>;//给下一按钮添加事件侦听functionnext2<e:MouseEvent>{gotoAndPlay<7>;myButton.play<>;//按钮声音播放}此部分代码完成的任务是,单击下一按钮,图片切换到下一,让玩者进行下一图片颜色的填充,单击按钮的同时触发声音事件。2.上一按钮及声音shang.addEventListener<MouseEvent.CLICK,front1>;//给上一按钮添加事件侦听functionfront1<e:MouseEvent>{ gotoAndPlay<6>; myButton.play<>;//按钮声音播放 }此部分代码完成的任务是,单击上一按钮,图片切换到上一,让玩者进行上一图片颜色的填充,单击按钮的同时触发声音事件。3.隐藏画笔bi.addEventListener<Event.ENTER_FRAME,moveBi>;//给画笔〔实例名bi添加事件侦听functionmoveBi<e:Event>{ Mouse.hide<>;//鼠标隐藏 bi.x=mouseX+1; bi.y=mouseY-7;//定义画笔〔实例名bi的位置坐标}此部分代码的作用是实现画笔跟随鼠标移动,隐藏鼠标并改变鼠标的位置,让鼠标刚好位于画笔头部,以便下面的操作。4.调色盘的移动pan.addEventListener<MouseEvent.MOUSE_DOWN,dragPan>;pan.addEventListener<MouseEvent.MOUSE_UP,stopDragPan>;//给调色盘〔实例名pan添加事件侦听functiondragPan<e:MouseEvent>{ Mouse.hide<>;//鼠标隐藏 pan.startDrag<>;}//添加开始拖动函数functionstopDragPan<e:MouseEvent>{ Mouse.hide<>;//鼠标隐藏 pan.stopDrag<>;}//添加停止拖动函数此部分代码实现的是调色盘的拖动,在调色盘上添加事件侦听,然后添加的拖动函数,隐藏鼠标,画笔跟随鼠标移动。第四章音乐的添加导出的游戏,效果基本还算令人满意,然而游戏过程中没有声音,玩起来未免有点单调,我们又给游戏添加了声音来配合游戏,首先是按钮的声音,每次单击按钮都会有相应的声音配合,在前面的代码中已经介绍了。我添加了music按钮,并添加了事件侦听事件,让鼠标点击按钮时,播放预定的音乐。开始的Play按钮,我添加了音乐,鼠标在按钮围时可以播放音乐,而鼠标移出按钮之后音乐播放停止。添加音乐使玩者在游戏过程中可以听音乐,从而达到游戏的放松与娱乐目的。游戏开头有点生硬缺乏活力,为了使游戏更吸引人,我们对片头部分进行了完善,添加了动画让Play按钮在鼠标移入时,进行左右摇摆的动画。第五章小结游戏制作过程中遇到很多问题,主要问题是：画笔从调色盘中提取颜色之后笔头的颜色无法随之改变,解决方法是对每个按钮添加事件侦听,然后根据按钮颜色设置笔头的颜色,但是此法有个弊端就是无法提取笔头的颜色将其添加到目标区域中,我们试了很多函数但是还是无法提取到笔头的颜色,最后在老师的提醒下我们应用了事件侦听目标函数〔e.target最终解决了这个问题。开始我们对所有单击目标添加了事件侦听事件,结果是无论单击哪一个元件实例,元件实例都会变色,甚至按钮的颜色都被改变了,经过反复尝试,我们将要添加颜色的实例部分重新命名为mi其中i为整数,然后对mi添加事件侦听,解决了这个问题。第六章心得体会通过这次的Flash游戏的设计制作,我学到了很多课本上没有的东西,对FlashActionScript3.0也有了进一步深刻的认识,更学到了一些Flash游戏制作设计的宝贵经验。一个看似简单的小游戏凝聚了作者的很多心血。在开始制作之前我们查阅了好多资料,包括从网上下载小游戏作为参考,最后我们选定了一个填色游戏,虽然我们下载了游戏的源文件,但是,源文件的代码是ActionScript2.0跟ActionScript3.0有这很大的不同,或者说基本上是完全不同的,因此,我们没有参考源文件的代码,直接根据游戏的功能,应用所学知识和现有资料重新编写代码,一部分一部分的添加修改和完善,最终终于完成了填色游戏的制作,尤其是在画笔颜色的提取和图形颜色的添加上,我更是费了不少的时间和心血,由一个颜色到多个颜色,由一个色块到多个色块,一点点慢慢完善修改,最终解决了所有的错误,达到了想要的效果。然而,此次游戏制作,我最深的感触就是团队合作的重要,起初我对团队的理解就是每个人各自把自己的东西做完就行了,对合作的理解更是困难,然而这次的作品是我和王璐两个人合作完成的,这次的合作使我深刻体会了了一个团队该如何合作,来创造出更好的作品,虽然我们只是一个两个人的小团队,但是,有小才能有大,就像是我们编写代码,一个大的代码是由一个个小的代码组成的,而一个个小代码又必须互相配合才能组成这个有这强大功能的完善大程序。致在这一年的ActionScript3.0的学习中,我学到了很多以前甚至不曾接触过的东西,期间得到了老师和同学的许多帮助,他们教会了我许多东西,尤其是在专业学习中,课堂上老师耐心细致的讲解让我受益匪浅；课下,同学们也给与我许多无私的帮助,让我对所学知识有了更深刻的认识和理解。非常感老师和同学们的关心与帮助。首先,非常要感我的指导老师,感她对我学习上细致的指导和帮助,无论什么时候,老师总是细心的讲解,认真的指导我们修改作品,帮助我们解决难题,给我们提了很多宝贵的意见和建议。在完成作品的过程中,我们遇到很多问题,老师多次提出的指导性、启发性的建议,提高了作品的整体水平,也使得课程设计报告结构更加紧凑和严密。其次,我要感那些给我帮助和鼓励的同学们,在我因为一些失误心烦意乱无法静下心学习时,是她们鼓励我帮助我,让我有信心和耐心做完做好这一任务,正因为有了