拼图游戏是广受欢迎的一种智力游戏,它的变化多端,难度不一,让人百玩不厌。这里我将介绍将传统的拼图移植到FLASH中的方法,从中您不仅能学到ACTION SCRIPT的一些用法,也能了解一些FLASH游戏开发的思路与方法。那么,下面我们就开始吧!
切割图片拼图游戏是广受欢迎的一种智力游戏,它的变化多端,难度不一,让人百玩不厌。这里我将介绍将传统的拼图移植到FLASH中的方法,从中您不仅能学到ACTION SCRIPT的一些用法,也能了解一些FLASH游戏开发的思路与方法。那么,下面我们就开始吧?
首先,在开始制作之前,我们先来规划一下。我们需要的是将一张完整的图片,按照一定的规律,分割成若干块,然后使用动画和程序工具将他们组织起来,按照一定的规律动作。那么,需要的素材和工具:图片一张(大约400*300像素)
ADOBE PHOTOSHOP、FLASH5.0和PUZZLE PRO 1.2。PUZZLE PRO是 AV BROS.公司开发的专门生成拼图曲线的photoshop滤镜,有了他的帮助,您的作品会更具专业水准,否则您只能将图片切成死板小方块了。
第一步:切割图片。
我们下载puzzle pro并安装,用photoshop将图片打开并从滤镜菜单中打开puzzle,在弹出的界面中调节切割的数量和曲线形状
调好后按ok,进入下一界面。
在这里你可以调节立体感的的角度和透明度等,并可隐藏或显示某一块。接下来,请将每一块单独输出,然后将每一块做为一个图层并集中到一个文件里。
然后将每一块切割另存,为了保证背景的透明,请选择:save for web,然后按png24的格式保存。
切割图片第二步:进入FLASH。
将所有图片分别导入FLASH,并将每一块都转制成影片夹子--movie clip
并按顺序为它起名。
这样做是因为在action script中只有movie clip可以当作对象来控制,为了区分对象的不同,我们还要给每一个movie clip 起一个替身名。打开instance替身面板,按顺序为mc起名字。
有了替身名,每一块图都可以受action的动态控制了,但还不能感知鼠标事件,因此我们还要让它们能够响应抓起、放下、托拽的动作,就必须有button(按钮)。我们不能把刚才制作的mc直接改变类形成button,因为这样,替身名就没了,button本身无法受action控制。因此这里我们需要制作嵌套的symbol,他的结构应该如图
所示,这样便可以两全齐美。制作嵌套symbol可以利用如下方式,用右键点击movie clip打开菜单,
选择edit in place,这样,我们就可以在其他环境不变的情况下编辑单独的symbol。接着我们 选中图片后按F8键将齐转换成为button,并同样按照规律齐好名字。
以此类推,我们将后面的都做好。
我们已经为移动图块做好了准备工作,可我们怎么能检测放置的位置时候正确呢?我的办法是在土块区的下一层再做一层检测区,用来检测放置的位置是否正确。我们首先将土块区原封不动的复制到检测层,方法是这样的:新建一个图层并放置到图块层的下面,按右t键点击图块层的关键桢并复制到新建的层。
选中所有symbol,打开effect窗口,选中tint标签,并选择为100%蓝色,
下面我们将这些蓝色的symbol赋新替身名,也要按照规律以和图块一一对应,
做好后我们就可以开始编程了。
编写程序第三步:编写程序
首先我们来实现所有图块抓起、放下和拖拽,进入第一个图块的编辑状态,打开button的action面板,
在图的窗口中输入如下程序:
on (press) { //单击未抬起
startDrag ("/part1", true);} //开始拖拽part1
on (release) { //单击并抬起
stopDrag (); //停止拖拽
if (_droptarget eq "/bg1") { //如果拖拽的物件与bg1重合时
setProperty ("/part1", _x, getProperty("/bg1", _x)); //使part1与bg1的x坐标对齐
setProperty ("/part1", _y, getProperty("/bg1", _y)); } //使part1与bg1的y坐标对齐
}
现在你可以预览一下看看,图块1是不是已经可以实现拖拽了,而且如果位置正确会自动对齐。如果功能都实现了,按照同样的方法把其它的图块做好,注意编号要对应。
完善功能第四步:完善功能
经过前3步的操作,我们已经实现了一个拼图游戏的基本部分,但这并不是一个完整的游戏。它还应该实现判断游戏是否结束甚至是在一定时间内是否结束;每次游戏开始的时候图块的位置应该是随机的,这样才不会降低游戏的难度。
那么首先在第一桢加入一段程序,使得图块更够在一定范围内随机摆放。由于flash本身提供随即函数,我们只需要建一个循环以次将图块设定坐标即可,具体程序如下:
n = 1; //设置初始变量
do { //开始循环
setProperty ("part" add n, _x, random (400)); //使图块的x坐标随机定在400以内的数值
setProperty ("part" add n, _y, random (280)); //使图块的y坐标随机定在280以内的数值
n = n+1;} //
while (n<=16); //在总数量内循环
下图即开始游戏时的画面,
左半部为图块区,右半部为拼图区。
下面我们在第二桢加入程序,由来判断是否所有的图块都拼好,拼好则跳转到胜利画面,原理很简单,我们只需要判断每一块图的坐标值是否和他相对的底图的坐标相同即可。按照上一期我们所讲的起名规律,如果图块的名字为part1则它对应的底图的名字为bg1,因此我们只要检测part1与bg1的坐标值相同,即可判断第一图块已经拼好,以此类推,如果当所有的图块都放在了正确的位置则游戏胜利。具体程序如下:
a = "1"; //设置块数初始变量
i = "0"; //设置正确个数初始变量
while (Number(a)<=16) { //开始循环
if ((getProperty("/" add a add "mc",_x)==Getproperty("/" add a add "bg",_x)) and (getProperty("/" add a add "mc",_y)==Getproperty("/" add a add "bg",_y))) { //检测图块的x坐标和y坐标是否相同
i = Number(i)+1; //坐标相同正确数增加1
if (Number(i) == 16) { //当正确数等于总个数的时候
gotoAndStop ("ok"); //跳转到标号为ok的关键桢
}
}
a = Number(a)+1;
}
然后我们在第三桢加入一句action:goto And Play (2);这样以来,程序就会不停的检测时候所有的图块都已经拼好。我们在下一桢起一个标号为:ok。然后在画面里制作一个胜利字样。下图即游戏结束时的画面。

网友评论