在Flash游戏开发过程中,我们会用到大量的png图片资源。它的好处大家都知道,具有alpha通道,可以背景透明,因此它也成为flash游戏图片格式的首选。但是它的缺点就是较大的复杂图形的png的尺寸往往比较大,现在提供一个方法来瘦身大尺寸的png图片。

为了方便演示,先看下面一张png图片,这张图片的大小为60k。

然后大家看下面一张jpg图片,它的背景是黑色,上半部分就是我们上面的png图片,而下半部分则是把这个png图片的填充为纯白色的效果,而这张jpg图片因为没有透明图层,因此大小要比上面的png图片小很多,只有30k。(要制作这样的图片很简单:把png导入ps中,修改高度为2倍,增加一个纯黑色的背景层,再选中png图层选区,填充一个纯白色的图层并移动到图片的底部就ok了。)

那么我们怎么把这张jpg图片实现png图片的透明效果呢?这里我们就要用到BitmapData类了。假设我们已经将上面的jpg图片加载到我们的flash中来的BitmapData为jpgBmpData,那么下面的代码就可以实现png透明效果:

 
  1. var bmp:BitmapData = new BitmapData(jpgBmpData.width, jpgBmpData.height / 2); 
  2. //复制图片的真实像素区域 
  3. bmp.copyPixels(jpgBmpData, new Rectangle(00, bmp.width, bmp.height), new Point()); 
  4. //复制图片的下半区域的红色通道到新图的alpha通道里来实现透明 
  5. bmp.copyChannel(jpgBmpData, new Rectangle(0, bmp.height, bmp.width, bmp.height), new Point(), BitmapDataChannel.RED, BitmapDataChannel.ALPHA); 
  6. //清除原始图片内存 
  7. jpgBmpData.dispose(); 
  8. jpgBmpData = null
  9. //得到透明图片后就可以任意处理了 
  10. var logo:Bitmap = new Bitmap(bmp); 
  11. addChild(logo); 

至此大功告成了,flash中的效果截图如下:

最后要注意的是,并不是所有png图片都适合这种方式,要在速度和性能之间取得平衡才是最佳方案。

补充说明:一些朋友反映文中的演示png图片如果压缩成png8或者在flash中导出再使用就已经能得到20k左右压缩结果。是的,确实如此。当初看了一些植物大战僵尸的素材就随便选了这张简单的图来做演示,并没有考虑那么多。而事实上,明白的人应该知道,此文旨在演示一种方法,而且这种方法在传统游戏中也有使用。如果认为这种方法对你没有实用价值,那非常抱歉。