在flash中用webp图像

显示不完整请移步作者官方博客：http://www.sineysoft.com/blog/post/124.html

webp是google的发布的新的互联网图片格式,与传统的jpg,png图片相比,在不明显损失图片质量的情况下,拥有更大的图片压缩比, 同时支持alpha通道图片,与flash自带的透明图像压缩方法(通道分离+jpg图片压缩)相比也有更大压缩比,所以在flash游戏中如果采用webp格式将会显著降低资源尺寸,加速下载, 可惜的是flash player没有直接提供对webp的支持,想到可以用alchemy移植webp的代码.

开始在google搜索,找到一个blog,干了同样的事情,可是下载回来发现它提供的swc不支持带alpha通道的图片格式,真是见鬼了,这不是google提供的代码吗?难道他还有删减? 不死心,于是自己download webp源码移植到alchemy, 才发现各种问题, 怪不得人家不支持, 首先是alchemy不支持__asm__的内联汇编,修改为c代码后,发现自己生成的库也不支持alpha通道图片,还是不死心,代码内加入各种log,跟踪到底是哪里出的问题,最后发现是alchemy不支持uint64的位移操作,所有<<,>>这样的操作都返回0, 这可要命了, 没有办法手写c代码替换n多位移操作,总算可以编译通过,解码带有alpha通道的图片了,够折腾的.

最终生成的 webpswc.swc 在这里

完整支持webp各种格式, 包括带alpha通道的webp格式.

 

测试代码如下:

package 
{ 
    
    import flash.display.*; 
    import flash.display.Bitmap; 
    import flash.display.BitmapData; 
    import flash.display.Sprite; 
    import flash.geom.*; 
    import flash.utils.*; 
    import flash.utils.ByteArray; 
    import flash.net.*; 
    import flash.events.*; 
    import sineysoft.WebpSwc;

    public class webptest extends Sprite 
    { 
        [Embed(source="img.webp", mimeType="application/octet-stream")] 
        private const WebPImageClass:Class; 
        
        [Embed(source="monster.webp", mimeType="application/octet-stream")] 
        private const MonterClass:Class; 
        
        
        public function webptest() 
        {        
            stage.scaleMode = StageScaleMode.NO_SCALE; 
            stage.align = StageAlign.TOP_LEFT; 
            init(); 
        } 
        
        private function init():void 
        { 
            
            var now:int = getTimer(); 
            var ba:ByteArray = new WebPImageClass() as ByteArray; 
            var bitmapData:BitmapData = WebpSwc.decode( ba ); 
            trace(getTimer()-now); 
            
            addChild(new Bitmap(bitmapData as BitmapData)); 
            
            now = getTimer(); 
            ba = new MonterClass() as ByteArray; 
            bitmapData = WebpSwc.decode( ba ); 
            trace(getTimer()-now); 
            
            addChild(new Bitmap(bitmapData as BitmapData)); 
            
        } 
    } 
}

 

 

数据对比

格式	----	对应webp尺寸, 标准webp输出质量 80
monster.png( png8 格式,带alpha通道 ) 44452 bytes		23814 bytes  需要chrome浏览器才可以预览
img.jpg (photoshop 输出质量 8) 232407 bytes    点击查看原图		91238 bytes    需要chrome浏览器才可以预览
monster.swf(采用swf压缩,jpg 压缩质量80)  28492 bytes		23814 bytes 需要chrome浏览器才可以预览

 

 

最终的测试swf如下:

点击查看

Swc library:

最终生成的 webpswc.swc 在这里

 

不足之处

用alchemy移植的webp解码速度还是不能和原生c代码相比,甚至可以用不堪忍受来形容,原生的c代码解码webp仅需要1-4ms左右,而alchemy版本需要100-1000ms之间,这样的解码速度肯定不能直接用在游戏资源下载,否则一次解码就让客户端卡住,但不不是完全没有优化方案.

优化方法1, 采用分帧解码, 等有空了可以修改下现有的swc库,支持分帧解码.

优化方法2,采用flash 11.5提供的worker,完全后台解码,充分利用多核计算,但这个优化方法应该效果不错,可惜对flash版本有要求.

Decode time:

 

Compress compare:

如果哪天flash原生支持webp应该是个不错的消息.