写了个位图缓存优化渲染方案

由于项目中需要用到大量角色同屏幕的功能，需要提高flash player的渲染性能。下午做了个渲染性能测试，并完善了去年写的位图优化代码库。

画面大小2880*2880
500个矢量人物动画MC（嵌套2层），循环播放
都不把屏幕外的区域removeChild
统一是用Flashplayer sa 10.0 debug版测试

1.不优化，直接addChild
fps=4,CPU占满,内存18M~29M
2.增加了cacheAsBitmap
FPS=1,cpu占满，内存156~196M，内存不断波动

3.屏蔽鼠标+cacheAsBitmap
FPS=1,cpu占满，内存156~196M
4.屏蔽鼠标，无位图缓存
fps=4，CPU占满,21M~30M

5.使用我去年写的位图显示对象，但没有进行同一个对象的内存重用，导致每次new出来的时候都从源MC实例draw一次内容，脚本执行慢，且内存占用多，一会优化个可重用的再测。
    fps=13,cpu占满,内存476M
6.使用我去年写的位图显示对象，且设置所有角色都在1个屏幕内（场景依然是2880*2880）
    fps=15,cpu占满,内存476M
7.使用我去年写的位图显示对象，且设置所有角色都在1个屏幕内（场景依然是2880*2880），角色数量减少到100
    fps=23,cpu占满,内存186~187M

1,2说明：官方的cacheAsBitmap太耗费内存，而且是play的时候不断创建位图缓存的。
3,4对比1,2说明：屏蔽鼠标在这种未监听且东西多到十分卡的情况下意义不大。
5,6说明: 位图修改的区域越小，fps越高，消耗的内存一样大(整个bitmap)
6,7说明：直接位图操作不会因为同屏幕显示对象数量多而影响效率，与像素复制操作的次数有关

PS: 刚换了10.1 debug SA版，性能降低了1/4

8.增加内存缓存（清除冗余位图）的单帧Image，且绘图区域变小（800*600）
fps=30,cpu42%左右，内存8M~10M

9.新版位图引擎（加入内存资源池），1500个MC，区域800*600
fps=30,cpu42%左右，内存10M~12M

最终效果：

1500个MC在同屏幕内播放，额定帧频30。

Document Class :

package  
{
	import org.mousebomb.Math.MousebombMath;
	import org.mousebomb.bmpdisplay.Animation;
	import org.mousebomb.bmpdisplay.BmdObject;
	import org.mousebomb.bmpdisplay.BmdResourcePool;
	import org.mousebomb.bmpdisplay.BmpDisplayObject;
	import org.mousebomb.bmpdisplay.Image;
	import org.mousebomb.utils.SystemStatus;

	import flash.display.Sprite;
	import flash.display.StageAlign;

	/**
	 * @author Mousebomb (mousebomb@gmail.com)
	 * @date 2010-6-21
	 */
	public class BmdEngineMC extends Sprite 
	{
		/**
		 * BMD化的测试
		 */

		private var bmdStage : BmpDisplayObject;
		private var bmdRoot : Image;		 

		public function BmdEngineMC()
		{
			bmdRoot = new Image(800, 600);
			bmdStage = new BmpDisplayObject(bmdRoot);
			//创建位图序列
			var src : MovieClip = new RoleD();
			BmdResourcePool.getInstance().regResource("roleD", src);
			addChild(bmdStage);
				
			for (var i : int = 0;i < 1500;i++)
			{
				var bmdChild : BmdObject = BmdResourcePool.getInstance().getNewResource("roleD");
				(bmdChild as Animation).play();
				bmdChild.x = MousebombMath.randomFromRange(20, 600);
				bmdChild.y = MousebombMath.randomFromRange(20, 550);
				bmdRoot.addChild(bmdChild);
			}
			//开始渲染
			bmdStage.renderEnterFrame = true;
			this.stage.align = StageAlign.TOP_LEFT;
			addChild(SystemStatus.getInstance());
		}
	}
}

package

{

import org.mousebomb.Math.MousebombMath;

import org.mousebomb.bmpdisplay.Animation;

import org.mousebomb.bmpdisplay.BmdObject;

import org.mousebomb.bmpdisplay.BmdResourcePool;

import org.mousebomb.bmpdisplay.BmpDisplayObject;

import org.mousebomb.bmpdisplay.Image;

import org.mousebomb.utils.SystemStatus;

import flash.display.Sprite;

import flash.display.StageAlign;

/**

* @author Mousebomb (mousebomb@gmail.com)

* @date 2010-6-21

public class BmdEngineMC extends Sprite

{

/**

* BMD化的测试

private var bmdStage : BmpDisplayObject;

private var bmdRoot : Image;

public function BmdEngineMC()

{

bmdRoot = new Image(800, 600);

bmdStage = new BmpDisplayObject(bmdRoot);

//创建位图序列

var src : MovieClip = new RoleD();

BmdResourcePool.getInstance().regResource("roleD", src);

addChild(bmdStage);

for (var i : int = 0;i < 1500;i++)

{

var bmdChild : BmdObject = BmdResourcePool.getInstance().getNewResource("roleD");

(bmdChild as Animation).play();

bmdChild.x = MousebombMath.randomFromRange(20, 600);

bmdChild.y = MousebombMath.randomFromRange(20, 550);

bmdRoot.addChild(bmdChild);

}

//开始渲染

bmdStage.renderEnterFrame = true;

this.stage.align = StageAlign.TOP_LEFT;

addChild(SystemStatus.getInstance());

}

哇哈哈，项目需要的大量角色渲染有戏咧。

18 Comments

半支烟 | 六月 23rd, 2010

能说下具体思路或者贴下实例代码么？我最近被这个问题困扰
鼠标炸弹 | 六月 23rd, 2010

这个说来话长了，最近还在优化，等今年新项目中实践并继续完善好之后会共享出来的。
核心思路就是把所有显示对象截成位图保存到资源池，到用的时候从里面获取一个副本，一样的BitmapData可以重用。每次渲染的时候操作BitmapData，逐级拷贝像素，组成一帧画面，输出到一个Bitmap上。
优化的几个注意点：
1.减少渲染次数，不要每帧渲染，只要按周期检测是否需要重绘（显示在此屏幕内的对象的位置、大小、帧号发生变化），子级会常常通知重绘，但使用计数器积累到周期再重绘，减少渲染次数。
2.减少渲染面积，每个子对象区域尽量小。当发生显示对象的视图变化时仅对需要变化的区域进行绘制（参考Flashplayer的重绘机制，求出最小包边区域，用动态四叉树建立索引检索出需要参与重绘的对象，用来重绘）
半支烟 | 六月 23rd, 2010

呵呵没想到你这么快就回复了多谢我们现在的项目也是这样的一个思路不过同屏人物100的话感觉对游戏就会有影响了如果有打斗动作再做碰撞检测的话效果就…….
半支烟 | 六月 23rd, 2010

对了你的空间买的是哪家的？什么价格？我正想搞个独立的BLOG呢
鼠标炸弹 | 六月 23rd, 2010

@半支烟, 朋友提供的，我寄人篱下而已。
鼠标炸弹 | 六月 23rd, 2010

@半支烟, 想办法优化优化吧，如果100就卡的话，那就跟用Flashplayer的矢量渲染引擎差不多了，意义不大。
我这个现在还不成熟，自己用一段时间先，等稳定了会公开的。
jim | 七月 3rd, 2010

您好，我看cpu还是占满了，我的是AMD 2.3Ghz的。
还有请问下，使用位图的话，鼠标流该怎么处理呢
鼠标炸弹 | 七月 3rd, 2010

重绘的话CPU还是会消耗很大的，只不过比矢量渲染大幅度提升了，要CPU降低需要进一步降低重绘次数和范围。鼠标流是无法使用的，只能使用替代方式，比如监听舞台的鼠标事件，映射到位图内的坐标，判定是否产生了对应的鼠标事件。开源位图引擎PixelBlitz（http://code.google.com/p/pixelblitz/source/checkout）有实现部分鼠标事件，你可以直接用。
iifla | 七月 13th, 2010

佩服，希望尽快完善，优化。
Jing | 十一月 18th, 2010

最近自己也在写一个位图引擎，效率和作者的暂时没法比啊，我的FPS30帧，同屏超过400个动画就卡了，╮(╯▽╰)╭….不过看了你给别人的回复，又有了一些新的思路
owner | 三月 1st, 2011

请问现在方便放出来了吗？呵呵
学习一下~~
给我几个组件包 | 三月 30th, 2012

import org.mousebomb.Math.MousebombMath;
import org.mousebomb.bmpdisplay.Animation;
你好，能不能把这几个包发给我啊。邮箱1259537238@qq.com import org.mousebomb.bmpdisplay.BmdObject;
import org.mousebomb.bmpdisplay.BmdResourcePool;
import org.mousebomb.bmpdisplay.BmpDisplayObject;
import org.mousebomb.bmpdisplay.Image;
import org.mousebomb.utils.SystemStatus;
鼠标炸弹 | 三月 30th, 2012

就像我博客中其他文章所写的，其中引用的我自己的类可以从这里获得：
git: https://github.com/mousebomb/mousebomb_as3lib
svn: http://code.google.com/p/mousebomb-as3lib/
Chen | 四月 11th, 2012

学习了，非常感谢。
鼠标炸弹 | 四月 11th, 2012

@Chen, 这个方案我自己已经不使用了，现在FP11中有更高性能的方案了。可以去查查nd2d和国内的agal2d。
kk | 一月 12th, 2013

很有兴趣了解一下这个方案的实现，不知道大神能否赐教，可以的话希望能详谈
鼠标炸弹 | 一月 16th, 2013

这个已经很老了，现在过时了，没必要讨论。另外，我现在忙于iOS开发了：）