【A8笔记3.1】从AnimSprite到序列图制作(1)

来源：http://bbs.9ria.com/thread-84622-1-1.html 

 

 

说明：
直接用IE打开swf，是没有启用硬件加速的，可以将swf放在其它发布过的文件夹中，并将名字改为发布的swf的名字，再打开发布的html；
也可以下载fp11非官方独立播放器，用这个播放则会启用硬件加速，我的这个帖子里有下载和使用方法说明：【分享】fp11非官方独立播放器及其与Flash的配合使用


1. 认识AnimSprite

如果说Sprite3D是3D场景中的Sprite，那么AnimSprite的效果相当于3D场景中的MovieClip。

AnimSprite继承自Sprite3D，它同样拥有Sprite3D最大的一个特性：始终正对着摄像机。
当然它并不是在Sprite3D基础上增加了时间轴，来看下它的工作原理：
Sprite3D拥有1个材质，而AnimSprite拥有一套材质。如果你把这套材质转为位图放到时间轴上，1帧1个材质，那么将形成一个逐帧动画。
AnimSprite在同一时间只能显示1个材质，我们可以通过属性frame来控制它切换到其它材质，当你不断的frame++，就形成了一个连贯的动画。

2. AnimSprite的优点

1. 灵活使用AnimSprite可以让你的作品更具动感。
在【A8笔记2】Sprite3D与百变星空中，我们讨论了可以通过使用Sprite3D来创建一棵树，达到减少面数的目的。但这棵树是没有动画的，如果你需要创建一个比较活泼生动的场景，Sprite3D就显得有些捉襟见肘。
这时可以使用AnimSprite，将树左右摇摆的动作分解成一套序列图，作为AnimSprite的材质，从而让树动起来。甚至你可以通过代码控制它什么时候左摆、什么时候右摆。

2. 与此同时，你还不必担心效率问题，AnimSprite的执行效率跟Sprite3D相差无几，就算你创建的不是一棵树，而是一片森林，也丝毫没有问题。我们来做个试验：把草稚京必杀技的动作分解为序列图，作为AnimSprite的材质，比较创建1个AnimSprite和1000个AnimSprite的执行效率：
（注：帧频已设置为20）

下载 (14.71 KB)

2011-5-26 22:46

1个草稚京.swf (1005.33 KB)

下载次数: 42

2011-5-26 22:47

下载 (37.05 KB)

2011-5-26 22:46

1000个草稚京.swf (1005.44 KB)

下载次数: 53

2011-5-26 22:47

可以看到，不管是1个AnimSprite还是1000个AnimSprite，帧频基本没掉，AnimSprite的执行效率的确是非常高的。

3. 有的时候，AnimSprite甚至是必不可少的。如果你在开发 游戏，AnimSprite绝对会成为一把利器，让你的游戏在低消耗下取得更加酷炫的效果。
比如，你的游戏里有这么一个场景：怪兽袭击了村庄，到处都是燃烧的房子。你不可能去创建那么多个火焰燃烧的三维动画模型，因为那样的话，燃烧的不仅是房子，还有你的CPU。而AnimSprite可以很好的完成这项工作，并且让你不必去制作那些复杂的三维模型：它只需要一张平面图。
又比如，角色的技能 特效，某些环境特效（如电闪雷鸣、万里雪飘…）等，都可以使用AnimSprite来完成。

这里说个题外话，或许有的朋友会问，上面图片中的AnimSprite不是透明的，能不能透明呢？之前的版本可以（前提是你的图片是PNG透明图片），但8.5.0不行，官方的AnimSprite例子看起来好像是透明的，实际不是，如果你把视窗的背景颜色改为其它颜色，你会发现那个爆炸的AnimSprite是有黑色底色的。
事实上，不仅仅是AnimSprite，在8.5.0中所有关于的透明度的设置都将失效（如果你尝试改变视窗背景的透明度，会发现是毫无作用的），而Object3D则更是直接，连alpha属性都没了。
不只是alpha，在8.5.0中很多重要的功能都被暂时取消了，如filters、debug等。还有clipping也没了，一个模型只有整个移到view外才不进行渲染，一部分在外面的话还是渲染整个模型；更纠结的，背面看不到的也给渲染了，这就造成了同一个模型在8.5中的面数比在7.7中多了近1倍。不过大家不用担心，8.5.0只是测试版本，这些问题在新版本中将会得到修正。

3. 使用AnimSprite

先来了解AnimSprite类：
AnimSprite(width:Number, height:Number, mate rials:Vector = null, loop:Boolean = false, frame:int = 0)
    - width/height : 果断不解析 =_=
    - materials : AnimSprite的材质集合
    - loop : 是否循环播放
    - frame : 开始播放第几个材质
它的三个属性就是构造函数的后面三个参数。
AnimSprite本身的使用没有什么难点，重点在于如何通过代码将一张序列图的 BitmapDate分割为多个小的 BitmapData，从而创建出多个材质。
BitmapData的copyPixels方法，可以复制BitmapData特定矩形框范围内的像素，我们可以指定矩形框的不同位置和大小，来实现序列图的分割。

这里有一点需要注意，使用copyPixels方法获取的矩形范围的宽高可以不同，但必须是2的n次方。否则会报错：
ArgumentError: Error #3682: Texture size not a power of two.

下面我们来看下几种不同排列方式的序列图的分割方法。

1. 序列图为一行
所有的画面排列成一行，这也是官方例子的情况。

1. [Embed(source = "explosion.png")] const EmbedTexture:Class;
   
2. var materials:Vector.<Material> = new Vector.<Material>();
   
3. var phases:BitmapData = new EmbedTexture().bitmapData;
   
4. for (var i:int = 0; i < phases.width; i += 128) {
   
5.     var bmp:BitmapData = new BitmapData(128, 128, true, 0);
   
6.     bmp.copyPixels(phases, new Rectangle(i, 0, 128, 128), new Point());
   
7.     materials.push(new TextureMaterial(new BitmapTextureResource(bmp)));
   
8. }

复制代码

2. 序列图为多行
但有的时候，画面比较多，如有100个画面，排成一行不仅制作起来麻烦，查看也麻烦，这时如果制作成10*10的矩形排列，将会方便很多，如下图就是一个5*7矩形排列的序列图，每个画面的尺寸为128*128：

下载 (78.47 KB)

2011-5-26 17:33

1. [Embed(source = "炎.jpg")] const YanTexture:Class;
   
2. var materials:Vector.<Material> = new Vector.<Material>();
   
3. var phases:BitmapData  = new YanTexture().bitmapData;
   
4. for (var i:int = 0; i < 128 * 7; i += 128) {
   
5.   for (var j:int = 0; j < 128 * 5; j += 128) {
   
6.      var bmp:BitmapData = new BitmapData(128, 128, true, 0x0);
   
7.      bmp.copyPixels(phases, new Rectangle(j, i, 128, 128), new Point());
   
8.      materials.push(new TextureMaterial(new BitmapTextureResource(bmp)));
   
9.   }
   
10. }

复制代码

效果：
炎.swf (250.25 KB)

下载次数: 63

2011-5-26 17:48

3. 多个序列图
有时画面实在太多了，可能有几百上千个画面，第二点的做法也不给力啊。AnimSpirte的materials是个数组，可以不断添加材质进去。我们可以按照第二点的做法做成多张序列图，分多次将所有画面加入materials中。
如下面这个电丝的特效，有130个画面，每个画面的尺寸为128*128，我们把它分为4张5*5和1张5*6总共5个序列图：

下载 (24.46 KB)

2011-5-26 18:00

下载 (37.43 KB)

2011-5-26 18:01

下载 (32.71 KB)

2011-5-26 18:01

下载 (32.23 KB)

2011-5-26 18:01

下载 (48.76 KB)

2011-5-26 18:01

1. [Embed(source = "电丝/电丝1.jpg")] const Ds1Texture:Class;
   
2. [Embed(source = "电丝/电丝2.jpg")] const Ds2Texture:Class;
   
3. [Embed(source = "电丝/电丝3.jpg")] const Ds3Texture:Class;
   
4. [Embed(source = "电丝/电丝4.jpg")] const Ds4Texture:Class;
   
5. [Embed(source = "电丝/电丝5.jpg")] const Ds5Texture:Class;
   
6. 
   
7. var materials:Vector.<Material> = new Vector.<Material>();
   
8. var phases:BitmapData;
   
9. 
   
10. phases = new Ds1Texture().bitmapData;
    
11. materialsPush(phases, 128, 128, 5, 5);
    
12.    
    
13. phases = new Ds2Texture().bitmapData;
    
14. materialsPush(phases, 128, 128, 5, 5);
    
15.    
    
16. phases = new Ds3Texture().bitmapData;
    
17. materialsPush(phases, 128, 128, 5, 5);
    
18.    
    
19. phases = new Ds4Texture().bitmapData;
    
20. materialsPush(phases, 128, 128, 5, 5);
    
21.    
    
22. phases = new Ds5Texture().bitmapData;
    
23. materialsPush(phases, 128, 128, 5, 6);
    
24. 
    
25. function materialsPush(phases:BitmapData, width:Number, height:Number, xnum:int, ynum:int):void {
    
26.   for (var i:int = 0; i < height * ynum; i += height) {
    
27.     for (var j:int = 0; j < width * xnum; j += width) {
    
28.      var bmp:BitmapData = new BitmapData(width, height, true, 0x0);
    
29.      bmp.copyPixels(phases, new Rectangle(j, i, width, height), new Point());
    
30.      materials.push(new TextureMaterial(new BitmapTextureResource(bmp)));
    
31.     }
    
32.   }
    
33. }

复制代码

效果：
电丝.swf (442.13 KB)

下载次数: 112

2011-5-26 18:05

源文件：
Alternativa3DExamples.rar (572.34 KB)

下载次数: 77

2011-5-26 22:48