AS3的深度管理及排序

 

说到深度管理，不由得想起了那万恶的AS2年代-_-! 至少本人觉得在AS2中的深度管理很是混乱，不仅有断层还会有冲突……总之麻烦多多。而在AS3中，一切都是这么的清晰与明朗，深度值断层不见了、有冲突的时候会自动调整，而我们只是记住以下几个语句的用法而已。

1
2
3
4
5
6
7
8
9
10
11
12
13
14

numChildren : int
//返回此对象的子项数目。
getChildAt(index:int):DisplayObject
//返回位于指定索引处的子显示对象实例。
getChildIndex(child:DisplayObject):int
//返回 DisplayObject 的 child 实例的索引位置。
setChildIndex(child:DisplayObject, index:int):void
//更改现有子项在显示对象容器中的位置。
swapChildren(child1:DisplayObject, child2:DisplayObject):void
//交换两个指定子对象的 Z 轴顺序（从前到后顺序）。
swapChildrenAt(index1:int, index2:int):void
//在子级列表中两个指定的索引位置，交换子对象的 Z 轴顺序（前后顺序）。
removeChildAt(index:int):DisplayObject
//从 DisplayObjectContainer 的子列表中指定的 index 位置删除子 DisplayObject。

那么接下来我们来看一个简单的小例子吧，这里我就不罗列代码了，只把主要的写一下，关键是思路跟思想嘛，源码附在后面。有四个圆，可以点击与拖动，实现每点击其中一个圆，就把它调到最上面来。

这个其实很简单，要调整到最上层的话，只要用setChildIndex把鼠标点击对象的深度值设为（容器.numChildren-1）就可以啦。setChildIndex常用有以下几种：

1
2
3
4
5
6
7
8

置顶：
容器.setChildIndex(对象A,容器.numChildren-1);
置底：
容器.setChildIndex(对象A,0);
插入对象B的前面：
容器.setChildIndex(对象A,容器.getChildIndex(对象B));
插入对象B的后面：
容器.setChildIndex(对象A,容器.getChildIndex(对象B)-1);

是不是太简单点了呢？那我们再加深一点点吧，我们把上例中的圆换成立方块，再点击拖动下看看……

在这里我们想要达到一种空间立体的效果的话，就要对这些方块进行深度的排序，也就是说要让我们视觉上看起来靠前的物体挡住后面的物体。解决方法应该是多种多样的，在这里本民工只说说自己的解决方案了。简单说来，物体的前后顺序可以通过Y轴坐标的大小来区分，Y轴坐标值大的深度值就越大，在拖动后用一个数据记录下每个对象以及该对象的Y值，再把该数组以Y值的大小排序，最后setChildIndex一遍就可以了。

1
2
3
4
5
6
7
8
9
10
11
12

//以下代码是放在MOUSE_UP的事件里。
var obj_box:Array=new Array;//新建立数组。
for (var i=0; i<block_box.numChildren; i++) {
var aa:Object={objs:block_box.getChildAt(i),depth_y:block_box.getChildAt(i).y};
obj_box.push(aa);
//这里可以说是一个简单的JSON应用，把对象以及Y值添加到数组里。
}
*****************************************************************************
for (i=0; i<block_box.numChildren; i++) {
block_box.setChildIndex(obj_box.sortOn("depth_y",Array.NUMERIC)[i].objs,i);
//重新排序后再指定索引位置。其中sortOn是按指定的属性来排序。
}

最后再加个吸附功能吧，看看效果咯。

源码是临时写的，比较简单，都写在时间轴上咯。

点击下载源文件：depth.rar

相关文章

  • 简明的拼图游戏教程
  • AS3中JSON的基本应用实例
  • AS3+ASP+ACCESS的FLASH留言版教程（二）
  • AS3+ASP+ACCESS的FLASH留言版教程（一）
  • 一个拼图游戏的DEMO
  • 一个仿FLASH自带的取色器
 

AS3的深度管理及排序

 

说到深度管理，不由得想起了那万恶的AS2年代-_-! 至少本人觉得在AS2中的深度管理很是混乱，不仅有断层还会有冲突……总之麻烦多多。而在AS3中，一切都是这么的清晰与明朗，深度值断层不见了、有冲突的时候会自动调整，而我们只是记住以下几个语句的用法而已。

1
2
3
4
5
6
7
8
9
10
11
12
13
14

numChildren : int
//返回此对象的子项数目。
getChildAt(index:int):DisplayObject
//返回位于指定索引处的子显示对象实例。
getChildIndex(child:DisplayObject):int
//返回 DisplayObject 的 child 实例的索引位置。
setChildIndex(child:DisplayObject, index:int):void
//更改现有子项在显示对象容器中的位置。
swapChildren(child1:DisplayObject, child2:DisplayObject):void
//交换两个指定子对象的 Z 轴顺序（从前到后顺序）。
swapChildrenAt(index1:int, index2:int):void
//在子级列表中两个指定的索引位置，交换子对象的 Z 轴顺序（前后顺序）。
removeChildAt(index:int):DisplayObject
//从 DisplayObjectContainer 的子列表中指定的 index 位置删除子 DisplayObject。

那么接下来我们来看一个简单的小例子吧，这里我就不罗列代码了，只把主要的写一下，关键是思路跟思想嘛，源码附在后面。有四个圆，可以点击与拖动，实现每点击其中一个圆，就把它调到最上面来。

这个其实很简单，要调整到最上层的话，只要用setChildIndex把鼠标点击对象的深度值设为（容器.numChildren-1）就可以啦。setChildIndex常用有以下几种：

1
2
3
4
5
6
7
8

置顶：
容器.setChildIndex(对象A,容器.numChildren-1);
置底：
容器.setChildIndex(对象A,0);
插入对象B的前面：
容器.setChildIndex(对象A,容器.getChildIndex(对象B));
插入对象B的后面：
容器.setChildIndex(对象A,容器.getChildIndex(对象B)-1);

是不是太简单点了呢？那我们再加深一点点吧，我们把上例中的圆换成立方块，再点击拖动下看看……

在这里我们想要达到一种空间立体的效果的话，就要对这些方块进行深度的排序，也就是说要让我们视觉上看起来靠前的物体挡住后面的物体。解决方法应该是多种多样的，在这里本民工只说说自己的解决方案了。简单说来，物体的前后顺序可以通过Y轴坐标的大小来区分，Y轴坐标值大的深度值就越大，在拖动后用一个数据记录下每个对象以及该对象的Y值，再把该数组以Y值的大小排序，最后setChildIndex一遍就可以了。

1
2
3
4
5
6
7
8
9
10
11
12

//以下代码是放在MOUSE_UP的事件里。
var obj_box:Array=new Array;//新建立数组。
for (var i=0; i<block_box.numChildren; i++) {
var aa:Object={objs:block_box.getChildAt(i),depth_y:block_box.getChildAt(i).y};
obj_box.push(aa);
//这里可以说是一个简单的JSON应用，把对象以及Y值添加到数组里。
}
*****************************************************************************
for (i=0; i<block_box.numChildren; i++) {
block_box.setChildIndex(obj_box.sortOn("depth_y",Array.NUMERIC)[i].objs,i);
//重新排序后再指定索引位置。其中sortOn是按指定的属性来排序。
}

最后再加个吸附功能吧，看看效果咯。

源码是临时写的，比较简单，都写在时间轴上咯。

点击下载源文件：depth.rar

相关文章

  • 简明的拼图游戏教程
  • AS3中JSON的基本应用实例
  • AS3+ASP+ACCESS的FLASH留言版教程（二）
  • AS3+ASP+ACCESS的FLASH留言版教程（一）
  • 一个拼图游戏的DEMO
  • 一个仿FLASH自带的取色器