Egret开发《消灭方块》后记（一）

作为一个Flash AS3开发者，Egret的出现让我有眼前一亮的感觉。听了一场7yue大神的演(xi)讲(nao)后，就义无反顾地投入Egret开发了。做了一款简单玩法的休闲小游戏，游戏演示地址：sgame.sinaapp.com

游戏是类似消灭星星那种玩法，写本文目的是给想用Egret开发游戏的新手做一些引导，抛砖引玉，欢迎交流讨论，稍后会把源码贡献出来。如果你也是一个热衷于优化代码性能的开发者，欢迎跟帖讨论，第一次发文，难免有所疏漏，文中如果出现错误，欢迎指正，下面进入正题。

Egret的优点很明显，如果做过AS3开发的话，使用Egret会非常舒服，熟悉的API，熟悉的IDE（甚至可以用FlashBuilder），就连编程语言都和AS那么相似，AS3程序员真的可以拿来直接上手做产品的。优点不用多说，官方也宣传很长时间了，大家也有目共睹，下面提一些我开发过程中遇到的问题，希望Egret能改进，也给正在开发的朋友提个醒，尽量避免重蹈覆辙。

先说一下结论：

慎用Bitmap九宫格，性能差；慎用BitmapFillMode.REPEAT，原因同上；除以上两点外，Bitmap性能高于Graphics。

关于Bitmap性能研究：

《消灭方块》第一步是制作一个最基本的方块对象，我的目标是实现这样的圆角描边方块：，同时还要有多种颜色，于是构思了三种实现方案：

第一种：素材大小做到最小，画几个不同颜色的同心小圆，九宫格拉伸为圆角矩形，素材如下：

第二种：画一个通用的圆角矩形边框，内部颜色用graphic填充，机制是这样：

第三种：不做任何逻辑修饰，直接全部做成美术素材，素材大小会比较大，影响加载游戏的时间。

首先我才用的是第一种方式，做出来的素材体积小，在电脑上测试也没问题，兴冲冲用手机打开测试时傻眼了，在图像完全静止的情况下30fps...

接受不能，一点点检查代码后发现问题出在这里：

this._img.scale9Grid = new egret.Rectangle(9, 9, 1, 1);

注释这一行代码的前后效果图对比：

         

用九宫格以后静止fps30+，动起来的话20+fps，去掉九宫格以后帧数能稳定在50-60，猜测应该是egret把每个Bitmap做了9次渲染。

私以为不应该因此影响fps，九宫格缩放是非常常用的功能，对HTML5研究不深，有时间一定了解一下相关的内容，我觉得Egret在这里有很大的优化空间。

所以第一个方案目前来说是不可取了，继而改用第二个方案，性能有不错提升，fps保持在50上下。我觉得作为一个游戏程序员要非常“小气”：舍不得多用一点CPU（减少无谓的计算），舍不得每一点内存（谨慎创建对象），甚至舍不得一点带宽（减少需要加载素材的体积），从整体来说，保证游戏流畅是最终目标。第三个方案fps能保持60左右，但是资源体积会大很多，为了流畅性就只好牺牲点带宽了。

随后又测试了一下Bitmap的fillMode操作，用一个1X1像素的白点填充了分割线（BitmapFillMode.REPEAT）：

       

一条白线引发的惨案...影响fps的原因应该是和九宫格一样，一个Bitmap绘制了很多次。但是也发现了另一个问题，用BitmapFillMode.SCALE图像会颜色失真。

（未完待续。。。）