网页游戏位图处理笔记之一

flash的图片展示有两个方式，矢量图 and 位图。

废话少说，矢量图无失真，做社区游戏表现很Q，表现力也很强，因为是实时绘制，所以不会失真， 同时也消耗着CPU，但就这

一个缺点，就不是网页游戏能够接受的，起码不会大规模的应用矢量图。      

除了社区游戏外，大型网页游戏的素材主力还是位图。所以对位图的各种处理影响着整个游戏的感受（其实adobe对矢量图亲和力

强一些，囧）。

首先普及一下位图的基本知识：

位图图形也称为光栅图形，由排列为矩形网张形式的小方块组成。

    位图的单位就是像素。在使用RGB颜色模型的位图图像中，每个像素中由三个字节组成：红、绿和蓝。每个字节包含一个0至255

之间的值。

    位图图像的品质由图像分辨率和颜色深度位值共同确定。分辨率与图像中包含的像素数有关。像素数越大，分辨率越高。颜色深度

与像素可包含的信息量有关。

 

我以往在项目中经常处理的位图格式，其实就三种，jpg，png，gif

稍微值得补充的就是png图像允许使用一位透明度，就是png是4个通道的，处理传统的三个红绿蓝外，还有一个alpha通道。你可以在256色调色板中指定一种透明的颜色，所以PNG图像最多可以有256级透明度。

 

  其实总结一下就是ARGB颜色，依次为alpha透明度，red红，green绿，blue蓝。

 

那么在ActionScript 3中处理位图的利器有什么呢，有两个重要的类Bitmap和BitmapData类

 

先了解一下BitmapData，包含位图的像素数据，该数据可以包括四个通道的所有数据。我个人认为BitmapData在内存中的存在应

该是一个以32位整数为单位的区域，而每个32位整数存储着一个像素的数据。利用BitmapData 类的方法，可得到非位图显示对象的滤镜

无法得到的效果。所以动态处理BitmapData得到的效果，除了处理和创建阶段外，你不必担心它对fp每帧的开销。

对于Bitmap，其实就是将像素数据呈现出来（位图图像的显示对象），你可以直接用现有的像素数据直接得到一个Bitmap，官方说

可以使用矢量渲染器作为填充位图形状，我感觉也是在先复制那一刻矢量的数据，转换成像素数据进而来得到Bitmap。值得注意的是有两点，就是官方提到的两点：

第一：

1、不能将拉伸、旋转或倾斜效果应用于 Bitmap 对象。

2、不能将颜色转换应用于 Bitmap 对象。

3、不能将混合模式应用于 Bitmap 对象。

4、不能通过蒙版或 setMask() 方法进行剪裁。

5、图像本身不能是遮罩。

6、目标坐标必须位于一个整像素边界上。 

对于前三点很好理解吧，拉伸，颜色混合等等对像素数据的操作压根就跟原始的像素数据不掺和，而是另外封装

起一个操作效果数据记录。而构建一个Bitmap 所用的是原始的像素数据。而遮罩起作用的只是遮罩本身的范围而已，控制的是

可视范围，也不会影响原始像素数据。至于最后一点因为最小数据单位是像素，你不能复制一半像素吧。

 

       在游戏中使用图片为了节省带宽，尽量把位图弄到最小为止。有几个办法讨论一下。

图片的有损压缩，压缩软件比较多，我用过一款叫Image Optimizer 的压缩软件比较不错，总之压缩比例自己在画面展现力和图片大小间

均衡把握。

       另外对于透明度的图可以自己写个AIR程序，把图片中有效像素的矩形范围缩到最小，去掉多余的透明部分，从而减小图片体积。另

外可以把图片的透明部分让美工处理成黑色（或其他不与图片内容混淆的颜色），然后在游戏用到时把黑色转为透明，这样省带宽但增加

了cpu的临时消耗。其实这是以前有人用到的方法了，比较笨，Flash CS对png的压缩效率很高，可以直接存储在swf内。

     对于位图格式的选择，如果外观要求不是非常丰富，用png8就行，比JPG节省一定空间。png8是256色的，大部分UI还是能够满足表

现的，不足之处就是在透明和不透明的像素处，如果是非正交的话会出现锯齿。另外对于有丰富表现力的jpg图，且需要压缩处理的话还是

用jpg吧。