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

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