另一个种拼图游戏制作详解
点击次数：38 次 发布日期：2008-11-21 23:34:34 作者：源代码网
|
源代码网推荐
最近一直致力于研究不使用任何其他软件将图片在FLASH MX里面进行任意的分割。
主要用途：
1、制作拼图游戏。
2、制作图片动画效果。
经过一段时间的研究，总结了一些体会特别在这里和大家一起分享。利用遮照或动态遮照可以很好的进行图片的分割，目前正在制作图片分割组件，完成后一定奉献给大家，希望各位多多提出宝贵的意见。
让我们先来看看效果：  [全屏欣赏]
定义场景的大小为：700*600
一、制作基本的MC
1、新建一个名为IMAGE的MC，放入将要被切割的图片（图片大小最好和场景大小一样）。 2、新建一个名为PZZLE的MC，绘制一个需要被切分成什么样形状的图形。如图：
3、新建一个名为PUZZLE PIECE的MC，将PZZLE和IMAGE两个MC放入。如图：
提醒：注意点的要对齐，即PZZLE的中心点和IMAGE的最左上角点与PUZZLE PIECE的中心对齐。
4、设置让PZZLE遮照IMAGE。
5、将该PUZZLE PIECE设置输入EXPORT标志为：PIECE 二、在主场景第1帧设置AS如下：
//初始化变量
var xx = 6;
var yy = 5;
var startX = 100;
var startY = 100;
//获取被分割图片大小和
var xy = xx*yy;
attachMovie("Piece", "P", 222);//捆绑库中输出名为PIECE的MC
var wi = P.Image._width;
var hi = P.Image._height;
P.removeMovieClip();
bg_mc.swapDepths(xy+2);
myname.swapDepths(xy+3);
_root.setMask(bg_mc);//这是增加的一个MC，用来遮照整个场景。
//获取分量
var xs = wi/(xx-1);
var ys = hi/(yy-1);
//定义拖动事件
piece_event = function(){//定义一个类
this.onPress = function(){
this.swapDepths(xy+1);
startDrag(this);
}
this.onRelease = function(){
if(this._parent._xmouse>startX && this._parent._xmouse<startX+wi && this._parent._ymouse>startY && this._parent._ymouse<startY+hi){
this._x = Math.round((this._x-startX)/xs)*xs+startX;
this._y = Math.round((this._y-startY)/ys)*ys+startY;
}
stopDrag();
}
//注册该类给piece对象
piece_event.prototype = new MovieClip();//将类继承MovieClip的属性和方法
Object.registerClass("Piece", piece_event);//注册类给输出标识为PIECE的MC
这样使每一个PIECE的MC都具有piece_event类的属性和方法
//复制图片，设置每个被分割图片位置
for(i=0; i<xy; i++){
var x = (i%xx)*xs;
var y = Math.floor(i/xx)*ys;
var p = attachMovie("Piece", "Piece"+i, i+1, {_x:startX+x, _y:startY+y});
p.Image._x-=x;
p.Image._y-=y;
p.Pzzle._xscale = xs;
p.Pzzle._yscale = ys;
}
三、总结：
1、利用动态复制可以实现动态的图片切割，对于制作拼图游戏是一种思路，这样
可以减少对图片的前期处理。
2、但对于大图片的复制会影响游戏的执行效率，建议运用在小的图片上。
3、关于类的运用在游戏中是很常见的，这样可以优化代码，提高工作效率。
源代码网供稿. |
