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

青岛大学软件技术学院

二维动画课程设计报告题目名称Flash游戏制作——《填色游戏》

姓名杨玉清

专业数字媒体艺术

班级 08级1班

指导教师徐卓

二0一0年一月十五日

目录

目录 (2)

第一章游戏功能概述 (3)

第二章角色与场景设计 (4)

2.1 角色设计 (4)

2.2场景设计 (4)

第三章游戏功能设计与实现 (6)

3.1 模块一：取色功能 (6)

3.1.1主要功能及函数介绍 (6)

3.1.2 代码 (6)

3.2 模块二：辅助功能 (9)

3.2.1 简介 (9)

3.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 模块一：取色功能

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);

n.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的颜色}