[转载]缓存显示对象

HTML5作为新兴领域越来越热。然而在移动设备硬件性能弱于PC的背景下,对性能的需求显得更为重要,而HTML5性能优化前与优化后有着极大的差别,如何优化才能提高性能,对此熟知的人很少。本文以LayaAir引擎为例,通过代码示例详细阐述如何利用引擎对HTML5作出性能的极致优化。

CreateJS库是一款HTML5游戏开发的引擎,是一套可以构建丰富交互体验的HTML5游戏的开源工具包,旨在降低HTML5项目的开发难度和成本,让开发者以熟悉的方式打造更具现代感的网络交互体验。

如果 Flash
中的设计尺寸增大,无论创建的是应用程序还是复杂的脚本动画,都需要考虑性能和优化。如果内容保持为静态(如矩形
Shape 实例),则 Flash Player 和 AIR
不会优化内容。因此,更改矩形的位置时,Flash Player 或 AIR 会重绘整个
Shape 实例。

主题包括:

掌握了CreateJS可以更方便的完成HTML5的游戏开发。

可以通过缓存指定的显示对象来提高 SWF
文件的性能。显示对象是一个“表面”,实际上是位图版本的实例矢量数据,而矢量数据是
SWF 文件中不需要进行太多更改的一种数据。因此,打开缓存的实例不会随 SWF
文件的播放而不断地重绘,这样便可快速呈示 SWF 文件。

  • 代码执行基本原理
  • 基准测试
  • 内存优化
  • 图形渲染性能
  • 减少CPU使用量
  • 其他优化策略

CreateJS提供了EaselJS、TweenJS、SoundJS和PreLoadJS四款工具:

注:
可以更新矢量数据,这时将重新创建表面。因此,缓存在表面中的矢量数据不需要在整个
SWF 文件中保持一样。

第1节:代码执行基本原理

LayaAir引擎支持AS3、TypeScript、JavaScript三种语言开发,然而无论是采用哪种开发语言,最终执行的都是JavaScript代码。所有看到的画面都是通过引擎绘制出来的,更新频率取决于开发者指定的FPS,例如指定帧频率为60FPS,则运行时每个帧的执行时间为六十分之一秒,所以帧速越高,视觉上感觉越流畅,60帧是满帧。

由于实际运行环境是在浏览器中,因此性能还取决于JavaScript解释器的效率,指定的FPS帧速在低性能解释器中可能不会达到,所以这部分不是开发者能够决定的,开发者能作的是尽可能通过优化,在低端设备或低性能浏览器中,提升FPS帧速。

LayaAir引擎在每帧都会重绘,在性能优化时,除了关注每帧执行逻辑代码带来的CPU消耗,还需要注意每帧调用绘图指令的数量以及GPU的纹理提交次数。

EaselJS:简化处理HTML5画布
TweenJS:用来帮助调整HTML5和Javascript属性
SoundJS:用来简化处理HTML5 audio
PreLoadJS:帮助管理和协调加载中的一些资源

将显示对象的cacheAsBitmap属性设置为true会使显示对象缓存其自身的位图表示形式。Flash
Player 或 AIR
为该实例创建一个表面对象,该对象是一个缓存的位图,而不是矢量数据。如果要更改显示对象的边框,则重新创建表面而不是调整其大小。表面可以嵌套在其他表
面之内。子表面会将其位图复制到它的父表面上。

第2节:基准测试

LayaAir引擎内置的性能统计工具可用于基准测试,实时检测当前性能。开发者可以使用laya.utils.Stat类,通过Stat.show()
显示统计面板。具体编写代码如下例所示:

Stat.show(0,0); //AS3的面板调用写法       
Laya.Stat.show(0,0); //TS与JS的面板调用写法

Canvas渲染的统计信息:

图片 1

WebGL渲染的统计信息:

图片 2

统计参数的意义:

FPS:

每秒呈现的帧数(数字越高越好)。
使用canvas渲染时,描述字段显示为FPS(Canvas),使用WebGL渲染时,描述字段显示为FPS(WebGL)。

Sprite:

渲染节点数量(数字越低越好)。
Sprite统计所有渲染节点(包括容器),这个数字的大小会影响引擎节点遍历,数据组织和渲染的次数。

DrawCall:

DrawCall在canvas和WebGL渲染下代表不同的意义(越少越好)。
Canvas下表示每帧的绘制次数,包括图片、文字、矢量图。尽量限制在100之下。
WebGL下表示渲染提交批次,每次准备数据并通知GPU渲染绘制的过程称为1次DrawCall,在每1次DrawCall中除了在通知GPU的渲染上比较耗时之外,切换材质与shader也是非常耗时的操作。
DrawCall的次数是决定性能的重要指标,尽量限制在100之下。

Canvas:

三个数值 —— 每帧重绘的画布数量 / 缓存类型为“normal”类型的画布数量 /
缓存类型为“bitmap”类型的画布数量”。
CurMem:仅限WebGL渲染,表示内存与显存占用(越低越好)。
Shader:仅限WebGL渲染,表示每帧Shader提交次数。

无论是Canvas模式还是WebGL模式,我们都需要重点关注DrawCall,Sprite,Canvas这三个参数,然后针对性地进行优化。(参见“图形渲染性能”)

 可以在官网的下载页面进行下载JS文件,或者使用直接官方的CDN
链接

DisplayObject
类的opaqueBackground属性和scrollRect属性与使用cacheAsBitmap属性的位图缓存有关。尽管这三个属性彼此互相独立,但当对象缓存为位图时,opaqueBackground和scrollRect属性的作用最佳;只有将cacheAsBitmap设置为true时,才能看到opaqueBackground和scrollRect属性带来的性能优势。

第3节:内存优化

对象池

对象池,涉及到不断重复使用对象。在初始化应用程序期间创建一定数量的对象并将其存储在一个池中。对一个对象完成操作后,将该对象放回到池中,在需要新对象时可以对其进行检索。
由于实例化对象成本很高,使用对象池重用对象可减少实例化对象的需求。还可以减少垃圾回收器运行的机会,从而提高程序的运行速度。

以下代码演示使用

Laya.utils.Pool:

ar SPRITE_SIGN = 'spriteSign';
var sprites = [];
function initialize()
{
    for (var i = 0; i < 1000; i++)
    {
        var sp = Pool.getItemByClass(SPRITE_SIGN, Sprite)
        sprites.push(sp);
        Laya.stage.addChild(sp);
    }
}
initialize();

在initialize中创建大小为1000的对象池。

以下代码在当单击鼠标时,将删除显示列表中的所有显示对象,并在以后的其他任务中重复使用这些对象:

Laya.stage.on("click", this, function()
{
    var sp;
    for(var i = 0, len = sprites.length; i < len; i++)
    {
        sp = sprites.pop();
        Pool.recover(SPRITE_SIGN, sp);
        Laya.stage.removeChild(sp);
    }
});

调用Pool.recover后,指定的对象会被回收至池内。

使用Handler.create

在开发过程中,会经常使用Handler来完成异步回调。Handler.create使用了内置对象池管理,因此在使用Handler对象时应使用Handler.create来创建回调处理器。以下代码使用Handler.create创建加载的回调处理器:

Laya.loader.load(urls, Handler.create(this, onAssetLoaded));

在上面的代码中,回调被执行后Handler将会被对象池收回。此时,考虑如下代码会发生什么事:

Laya.loader.load(urls, Handler.create(this, onAssetLoaded), Handler.create(this, onLoading));

在上面的代码中,使用Handler.create返回的处理器处理progress事件。此时的回调执行一次之后就被对象池回收,于是progress事件只触发了一次,此时需要将四个名为once的参数设置为false:

Laya.loader.load(urls, Handler.create(this, onAssetLoaded), Handler.create(this, onLoading, null, false));

释放内存

JavaScript运行时无法启动垃圾回收器。要确保一个对象能够被回收,请删除对该对象的所有引用。Sprite提供的destory会帮助设置内部引用为null。

例如,以下代码确保对象能够被作为垃圾回收:

var sp = new Sprite();
sp.destroy();

当对象设置为null,不会立即将其从内存中删除。只有系统认为内存足够低时,垃圾回收器才会运行。内存分配(而不是对象删除)会触发垃圾回收。

垃圾回收期间可能占用大量CPU并影响性能。通过重用对象,尝试限制使用垃圾回收。此外,尽可能将引用设置为null,以便垃圾回收器用较少时间来查找对象。有时(比如两个对象相互引用),无法同时设置两个引用为null,垃圾回收器将扫描无法被访问到的对象,并将其清除,这会比引用计数更消耗性能。

资源卸载

游戏运行时总会加载许多资源,这些资源在使用完成后应及时卸载,否则一直残留在内存中。

下例演示加载资源后对比资源卸载前和卸载后的资源状态:

var assets = [];
assets.push("res/apes/monkey0.png");
assets.push("res/apes/monkey1.png");
assets.push("res/apes/monkey2.png");
assets.push("res/apes/monkey3.png");

Laya.loader.load(assets, Handler.create(this, onAssetsLoaded));

function onAssetsLoaded()
{
    for(var i = 0, len = assets.length; i < len; ++i)
    {
        var asset = assets[i];
        console.log(Laya.loader.getRes(asset));
        Laya.loader.clearRes(asset);
        console.log(Laya.loader.getRes(asset));
    }
}

关于滤镜、遮罩

尝试尽量减少使用滤镜效果。将滤镜(BlurFilter和GlowFilter)应用于显示对象时,运行时将在内存中创建两张位图。其中每个位图的大小与显示对象相同。将第一个位图创建为显示对象的栅格化版本,然后用于生成应用滤镜的另一个位图:

图片 3

应用滤镜时内存中的两个位图

当修改滤镜的某个属性或者显示对象时,内存中的两个位图都将更新以创建生成的位图,这两个位图可能会占用大量内存。此外,此过程涉及CPU计算,动态更新时将会降低性能(参见“图形渲染性能
– 关于cacheAs)。

ColorFiter在Canvas渲染下需要计算每个像素点,而在WebGL下的GPU消耗可以忽略不计。

最佳的做法是,尽可能使用图像创作工具创建的位图来模拟滤镜。避免在运行时中创建动态位图,可以帮助减少CPU或GPU负载。特别是一张应用了滤镜并且不会在修改的图像。

 

何时启用缓存

对显示对象启用缓存可创建表面,表面具有助于更快地呈示复杂的矢量动画等优点。有几种情形需要启用缓存。可能您总是希望通过启用缓存来提高
SWF
文件的性能;但是,某些情况下启用缓存并不能提高性能,甚至还会降低性能。本部分介绍在哪些情况下应使用缓存,以及何时使用常规显示对象。

缓存数据的总体性能取决于实例的矢量数据的复杂程度、要更改的数据量,以及是否设置了opaqueBackground属性。如果要更改的范围较小,则使用表面和使用矢量数据的差异微乎其微。在部署应用程序之前您可能需要实际测试一下这两种情况。

第4节:图形渲染性能

优化Sprite

1.尽量减少不必要的层次嵌套,减少Sprite数量。
2.非可见区域的对象尽量从显示列表移除或者设置visible=false。
3.对于容器内有大量静态内容或者不经常变化的内容(比如按钮),可以对整个容器设置cacheAs属性,能大量减少Sprite的数量,显著提高性能。如果有动态内容,最好和静态内容分开,以便只缓存静态内容。
4.Panel内,会针对panel区域外的直接子对象(子对象的子对象判断不了)进行不渲染处理,超出panel区域的子对象是不产生消耗的。

优化DrawCall

1.对复杂静态内容设置cacheAs,能大量减少DrawCall,使用好cacheAs是游戏优化的关键。
2.尽量保证同图集的图片渲染顺序是挨着的,如果不同图集交叉渲染,会增加DrawCall数量。
3.尽量保证同一个面板中的所有资源用一个图集,这样能减少提交批次。

优化Canvas

在对Canvas优化时,我们需要注意,在以下场合不要使用cacheAs:

1.对象非常简单,比如一个字或者一个图片,设置cacheAs=bitmap不但不提高性能,反而会损失性能。
2.容器内有经常变化的内容,比如容器内有一个动画或者倒计时,如果再对这个容器设置cacheAs=bitmap,会损失性能。

可以通过查看Canvas统计信息的第一个值,判断是否一直在刷新Canvas缓存。

关于cacheAs

设置cacheAs可将显示对象缓存为静态图像,当cacheAs时,子对象发生变化,会自动重新缓存,同时也可以手动调用reCache方法更新缓存。
建议把不经常变化的复杂内容,缓存为静态图像,能极大提高渲染性能,cacheAs有”none”,”normal”和”bitmap”三个值可选。

  1. 默认为”none”,不做任何缓存。
    2.当值为”normal”时,canvas下进行画布缓存,webgl模式下进行命令缓存。
    3.当值为”bitmap”时,canvas下进行依然是画布缓存,webGL模式下使用renderTarget缓存。这里需要注意的是,webGL下renderTarget缓存模式有2048大小限制,超出2048会额外增加内存开销。另外,不断重绘时开销也比较大,但是会减少drawcall,渲染性能最高。
    webGL下命令缓存模式只会减少节点遍历及命令组织,不会减少drawcall,性能中等。

设置cacheAs后,还可以设置staticCache=true以阻止自动更新缓存,同时可以手动调用reCache方法更新缓存。

cacheAs主要通过两方面提升性能。一是减少节点遍历和顶点计算;二是减少drawCall。善用cacheAs将是引擎优化性能的利器。

下例绘制10000个文本:

Laya.init(550, 400, Laya.WebGL);
Laya.Stat.show();

var textBox = new Laya.Sprite();

var text;
for (var i = 0; i < 10000; i++)
{
    text = new Laya.Text();
    text.text = (Math.random() * 100).toFixed(0);
    text.color = "#CCCCCC";

    text.x = Math.random() * 550;
    text.y = Math.random() * 400;

    textBox.addChild(text);
}

Laya.stage.addChild(textBox);

下面是笔者电脑上的运行时截图,FPS稳定于52上下。

图片 4

当我们对文字所在的容器设置为cacheAs之后,如下面的例子所示,性能获得较大的提升,FPS达到到了60帧。

// …省略其他代码… var textBox = new Laya.Sprite();
textBox.cacheAs = "bitmap"; // …省略其他代码…

图片 5

文字描边

在运行时,设置了描边的文本比没有描边的文本多调用一次绘图指令。此时,文本对CPU的使用量和文本的数量成正比。因此,尽量使用替代方案来完成同样的需求。

对于几乎不变动的文本内容,可以使用cacheAs降低性能消耗,参见“图形渲染性能
– 关于cacheAs”。

对于内容经常变动,但是使用的字符数量较少的文本域,可以选择使用位图字体。

跳过文本排版,直接渲染

大多数情况下,很多文本都不需要复杂的排版,仅仅简单地显示一行字。为了迎合这一需求,Text提供的名为changeText的方法可以直接跳过排版。

var text = new Text();
text.text = "text";
Laya.stage.addChild(text);
//后面只是更新文字内容,使用changeText能提高性能
text.changeText("text changed.");

Text.changeText会直接修改绘图指令中该文本绘制的最后一条指令,这种前面的绘图指令依旧存在的行为会导致changeText只使用于以下情况:

文本始终只有一行。

文本的样式始终不变(颜色、粗细、斜体、对齐等等)。

即使如此,实际编程中依旧会经常使用到这样的需要。

EaselJS
库给画布提供了保留图形模式,其中包括一个完整的分层显示列表、一个核心的交互模型以及一个让2D图形在画布上更容易实现的助手类。

何时使用位图缓存

在以下典型情形中启用位图缓存您可能会看到明显的好处。

  • 复杂背景图像:包含矢量数据的详细的复杂背景图像的应用程序(可能是应用了跟踪位图命令的图像,也可能是在
    Adobe Illustrator®
    中创建的插图)。您可能会在背景上设计动画人物,这会降低动画的速度,因为背景需要持续地重新生成矢量数据。要提高性能,可以将背景显示对象的opaqueBackground属性设置为true。背景将呈示为位图,可以迅速地重新绘制,以便更快地播放动画。

  • 滚动文本字段:应用程序在滚动文本字段中显示大量的文本。可以将文本字段放置在您设置为可滚动的具有滚动框(使用scrollRect属性)的显示对象中。这可以使指定的实例进行快速像素滚动。当用户滚动显示对象实例时,Flash
    Player 或 AIR
    会通过将滚动的像素向上移来生成新的看得见的区域,而不是重新生成整个文本字段。

  • 窗口排列秩序:应用程序具有秩序复杂的重叠窗口。每个窗口都可以打开或关闭(例如,Web
    浏览器窗口)。如果将每个窗口标记为一个表面(将cacheAsBitmap属性设置为true),则各个窗口将隔离开来进行缓存。用户可以拖动窗口使其互相重叠,每个窗口无需重新生成矢量内容。

  • Alpha 通道遮罩:当使用 Alpha
    通道遮罩时,必须将cacheAsBitmap属性设置为true。

所有这些情况下,启用位图缓存后都通过优化矢量图来提高应用程序的响应能力和互动性。

此外,只要对显示对象应用滤镜,cacheAsBitmap就会自动设置为true,即使将其明确设置为false也是如此。如果清除了显示对象的所有滤镜,则cacheAsBitmap属性会返回最后设置的值。

第5节:减少CPU使用量

减少动态属性查找

JavaScript中任何对象都是动态的,你可以任意地添加属性。然而,在大量的属性里查找某属性可能很耗时。如果需要频繁使用某个属性值,可以使用局部变量来保存它:

function foo()
{
    var prop = target.prop;
    // 使用prop
    process1(prop);
    process2(prop);
    process3(prop);
}

计时器

LayaAir提供两种计时器循环来执行代码块。

  1. Laya.timer.frameLoop执行频率依赖于帧频率,可通过Stat.FPS查看当前帧频。
  2. Laya.timer.loop执行频率依赖于参数指定时间。

当一个对象的生命周期结束时,记得清除其内部的Timer:

Laya.timer.frameLoop(1, this, animateFrameRateBased);
Laya.stage.on("click", this, dispose);
function dispose() 
{
    Laya.timer.clear(this, animateFrameRateBased);
}

获取显示对象边界的做法

在相对布局中,很经常需要正确地获取显示对象的边界。获取显示对象的边界也有多种做法,而其间差异很有必要知道。

1.使用getBounds/ getGraphicBounds。、

var sp = new Sprite();
sp.graphics.drawRect(0, 0, 100, 100, "#FF0000");
var bounds = sp.getGraphicBounds();
Laya.stage.addChild(sp);

getBounds可以满足多数多数需求,但由于其需要计算边界,不适合频繁调用。

2.设置容器的autoSize为true。

var sp = new Sprite();
sp.autoSize = true;
sp.graphics.drawRect(0, 0, 100, 100, "#FF0000");
Laya.stage.addChild(sp);

上述代码可以在运行时正确获取宽高。autoSize在获取宽高并且显示列表的状态发生改变时会重新计算(autoSize通过getBoudns计算宽高)。所以对拥有大量子对象的容器应用autoSize是不可取的。如果设置了size,autoSize将不起效。

使用loadImage后获取宽高:

var sp = new Sprite();
sp.loadImage("res/apes/monkey2.png", 0, 0, 0, 0, Handler.create(this, function()
{
    console.log(sp.width, sp.height);
}));
Laya.stage.addChild(sp);

loadImage在加载完成的回调函数触发之后才可以正确获取宽高。

3.直接调用size设置:

Laya.loader.load("res/apes/monkey2.png", Handler.create(this, function()
{
    var texture = Laya.loader.getRes("res/apes/monkey2.png");
    var sp = new Sprite();
    sp.graphics.drawTexture(texture, 0, 0);
    sp.size(texture.width, texture.height);
    Laya.stage.addChild(sp);
}));

使用Graphics.drawTexture并不会自动设置容器的宽高,但是可以使用Texture的宽高赋予容器。毋庸置疑,这是最高效的方式。

注:getGraphicsBounds用于获取矢量绘图宽高。

根据活动状态改变帧频

帧频有三种模式,Stage.FRAME_SLOW维持FPS在30;Stage.FRAME_FAST维持FPS在60;Stage.FRAME_MOUSE则选择性维持FPS在30或60帧。

有时并不需要让游戏以60FPS的速率执行,因为30FPS已经能够满足多数情况下人类视觉的响应,但是鼠标交互时,30FPS可能会造成画面的不连贯,于是Stage.FRAME_MOUSE应运而生。

下例展示以Stage.FRAME_SLOW的帧率,在画布上移动鼠标,使圆球跟随鼠标移动:

Laya.init(Browser.width, Browser.height);
Stat.show();
Laya.stage.frameRate = Stage.FRAME_SLOW;

var sp = new Sprite();
sp.graphics.drawCircle(0, 0, 20, "#990000");
Laya.stage.addChild(sp);

Laya.stage.on(Event.MOUSE_MOVE, this, function()
{
    sp.pos(Laya.stage.mouseX, Laya.stage.mouseY);
});

图片 6

此时FPS显示30,并且在鼠标移动时,可以感觉到圆球位置的更新不连贯。设置Stage.frameRate为Stage.FRAME_MOUSE:

Laya.stage.frameRate = Stage.FRAME_MOUSE;

图片 7

此时在鼠标移动后FPS会显示60,并且画面流畅度提升。在鼠标静止2秒不动后,FPS又会恢复到30帧。

使用callLater

callLater使代码块延迟至本帧渲染前执行。如果当前的操作频繁改变某对象的状态,此时可以考虑使用callLater,以减少重复计算。

考虑一个图形,对它设置任何改变外观的属性都将导致图形重绘:

var rotation = 0,
    scale = 1,
    position = 0;

function setRotation(value)
{
    this.rotation = value;
    update();
}

function setScale(value)
{
    this.scale = value;
    update();
}

function setPosition(value)
{
    this.position = value;
    update();
}

function update()
{
    console.log('rotation: ' + this.rotation + 'tscale: ' + this.scale + 'tposition: ' + position);
}

调用以下代码更改状态:

setRotation(90); setScale(2); setPosition(30);

控制台的打印结果是

rotation: 90 scale: 1 position: 0
rotation: 90 scale: 2 position: 0
rotation: 90 scale: 2 position: 30

update被调用了三次,并且最后的结果是正确的,但是前面两次调用都是不需要的。

尝试将三处update改为:

Laya.timer.callLater(this, update);

此时,update只会调用一次,并且是我们想要的结果。

图片/图集加载

在完成图片/图集的加载之后,引擎就会开始处理图片资源。如果加载的是一张图集,会处理每张子图片。如果一次性处理大量的图片,这个过程可能会造成长时间的卡顿。

在游戏的资源加载中,可以将资源按照关卡、场景等分类加载。在同一时间处理的图片越少,当时的游戏响应速度也会更快。在资源使用完成后,也可以予以卸载,释放内存。

 

何时避免使用位图缓存

在错误的环境中使用此功能可能会给 SWF
文件带来负面影响。使用位图缓存时,请记住下面的准则:

  • 不要过度使用表面(启用了缓存的显示对象)。每个表面使用的内存都比常规显示对象多,这意味着只在需要提高呈示性能时才启用表面。

    缓存的位图使用的内存比常规显示对象多很多。例如,如果舞台上 Sprite
    实例的大小为 250 x 250 个像素,缓存它可能会使用 250 KB
    内存;如果它是常规(未缓存的)Sprite 实例,则使用 1 KB 内存。

  • 避免放大缓存的表面。如果过度使用位图缓存,尤其是在缩小内容时,将使用大量内存(请参阅上一段落)。

  • 将表面用于通常为静态(非动画)的显示对象实例。可以拖放或移动实例,但实例的内容不能为动画或更改太多。(动画或变化的内容更可能包含在
    包含动画的 MovieClip 实例或 Video
    实例中。)例如,如果旋转或转换实例,实例将在表面和矢量数据之间进行变化,这种情况难于处理,并会对
    SWF 文件产生负面影响。

  • 如果将表面与矢量数据混在一起,将增加 Flash Player 和
    AIR(有时还包括计算机)的工作量。应尽量将表面归为一组 —
    例如,创建窗口应用程序时。

  • 请不要缓存图形更改频繁的对象。每一次缩放、倾斜、旋转显示对象,更改
    alpha
    或颜色转换,移动子显示对象,或使用图形属性绘图时,位图缓存都会重绘。如果每一帧都发生这种情况,运行时必须将对象绘制为位图,然后将该位图复制到舞台

    与仅将未缓存对象绘制到舞台相比,这会导致额外的工作量。缓存和更新频率之间的性能权衡取决于显示对象的复杂性和大小,并且只能通过测试具体内容来确定。

第6节:其他优化策略

1.减少粒子使用数量,在移动平台Canvas模式下,尽量不用粒子;

2.在Canvas模式下,尽量减少旋转,缩放,alpha等属性的使用,这些属性会对性能产生消耗。(在WebGL模式可以使用);

3.不要在timeloop里面创建对象及复杂计算;

4.尽量减少对容器的autoSize的使用,减少getBounds()的使用,因为这些调用会产生较多计算;

5.尽量少用try catch的使用,被try catch的函数执行会变得非常慢;

开始

启用位图缓存

要为显示对象启用位图缓存,请将它的cacheAsBitmap属性设置为true:

mySprite.cacheAsBitmap = true;

将cacheAsBitmap属性设置为true后,您可能会注意到,显示对象的像素会自动与整个坐标对齐。测试
SWF
文件时,您还会注意到,在复杂矢量图像上执行的任何动画的呈示速度都快得多。

即便是将cacheAsBitmap设置为true,如果出现以下一种或多种情形,也将不创建表面(缓存的位图):

  • 位图高度或宽度超过 2880 像素。

  • 位图分配不成功(由于内存不足而出现的错误)。

最开始我们需要创建一个Stage对象来包装一个画布(Canvas)元素,并且添加一个DisplayObject对象实例作为子类。EaselJS支持:

*
使用 Bitmap 创建图像

* 使用 Shape 和
 Graphics 创建矢量图形

*
使用 SpriteSheet 和 Sprite 创建动态的位图

*
使用 Text 创建简单的文本

*
使用 Container 创建保存其他显示对象的容器

所有的显示对象都可以作为子类被添加到舞台(stage)上,或者直接在画布(canvas)上绘制出来。

 

用户交互

当使用鼠标或者触摸交互时,除了DOM
元素,所有的显示对象都可以调度事件。EaselJS
支持悬停、按压、释放事件,以及一个容易使用的拖放模块。点击 MouseEvent 可以获得更多信息。

 

实例

1. 使用 Bitmap 创建图像

首先,我们需要引用 EaselJS 文件:

<script src="js/easeljs-0.8.2.min.js"></script>

接着,我们需要在HTML文档中创建一个 canvas 元素:

<canvas id="imageView" width="560" height="410">您的浏览器版本过低,请更换更高版本的浏览器</canvas>

然后,我就可以在 Javascript 代码中创建图像:

// 通过画布ID 创建一个 Stage 实例
var stage = new createjs.Stage("imageView");
// 创建一个 Bitmap 实例
var theBitmap = new createjs.Bitmap("imgs/testImg.jpg");
// 设置画布大小等于图片实际大小
stage.canvas.width = theBitmap.image.naturalWidth;
stage.canvas.height = theBitmap.image.naturalHeight;
// 把Bitmap 实例添加到 stage 的显示列表中
stage.addChild(theBitmap);
// 更新 stage 渲染画面
stage.update();

这样,图像就创建成功了,源码见 easeljs-image.html

 

2.使用 Shape 和  Graphics 创建矢量图形

和上面一样,我们需要添加对
EaselJS的引用以及在HTML文档中,创建canvas元素。然后就是我们自定义的js文件代码:

//Create a stage by getting a reference to the canvas
var stage = new createjs.Stage("circleView");
//Create a Shape DisplayObject.
var circle = new createjs.Shape();
circle.graphics.beginFill("DeepSkyBlue").drawCircle(0,0,40);
//Set position of Shape instance.
circle.x = circle.y = 50;
//Add Shape instance to stage display list.
stage.addChild(circle);
//Update stage will render next frame
stage.update();

这样我们就创建了一个深天蓝色,圆心为(50.50),半径为40像素的圆形(源码见
easeljs-shape-circle.html):

图片 8

渲染前的画布如下(宽高为100像素):

图片 9

 

我们还可以添加简单的交互事件:

stage.addEventListener("click",handleClick);
function handleClick() {
    // Click happened;
    console.log("The mouse is clicked.");
}
stage.addEventListener("mousedown",handlePress);
function handlePress() {
    // A mouse press happened.
    // Listen for mouse move while the mouse is down:
    console.log("The mouse is pressed.");
    stage.addEventListener("mousemove",handleMove);
}
function handleMove() {
    // Check out the DragAndDrop example in GitHub for more
    console.log("The mouse is moved.");
}

当我们点击圆的事件,控制台会显示:

The mouse is pressed.
The mouse is clicked.

 

我们还可以通过 tick 事件进行图形的移动等动画效果(源码见 easeljs-shape-circle-move.js):

// Update stage will render next frame
createjs.Ticker.addEventListener("tick",handleTick);
//添加一个Ticker类帮助避免多次调用update方法
function handleTick() {
    var maxX =  stage.canvas.width - 50;
    var maxY =  stage.canvas.height - 50;
    //Will cause the circle to wrap back
    if(circle.x < maxX && circle.y == 50){
        // Circle will move 10 units to the right.
        circle.x +=10;
    }else if(circle.x == maxX && circle.y <maxY){
        circle.y +=10;
    }else if(circle.x > 50 && circle.y == maxY){
        circle.x -=10;
    }else if(circle.x<= 50){
        circle.y -=10;
    }
    stage.update();
}

效果:

图片 10

 

3.使用 SpriteSheet 和 Sprite 创建动态的位图

 同样,先对 EaselJS 进行引用,然后创建 canvas HTML元素:

<canvas id="view" width="80" height="80"></canvas>

需要使用到的图片:

图片 11

接下来在 JS 文件中对资源进行引用加载:

var stage = new createjs.Stage("view");
container = new createjs.Container();
var data = {
    // 源图像的数组。图像可以是一个html image实例,或URI图片。前者是建议控制堆载预压
    images:["imgs/easeljs-preloadjs-animation/moveGuy.png"],
    // 定义单个帧。有两个支持格式的帧数据:当所有的帧大小是一样的(在一个网格), 使用对象的width, height, regX, regY 统计特性。
    // width & height 所需和指定的帧的尺寸
    // regX & regY 指示帧的注册点或“原点”
    // spacing 表示帧之间的间隔
    // margin 指定图像边缘的边缘
    // count 允许您指定在spritesheet帧的总数;如果省略,这将根据源图像的尺寸和结构计算。帧将被分配的指标,根据他们的位置在源图像(左至右,顶部至底部)。
    frames:{width:80,height:80, count:16, regX: 0, regY:0, spacing:0, margin:0},
    // 一个定义序列的帧的对象,以发挥命名动画。每个属性对应一个同名动画。
    // 每个动画必须指定播放的帧,还可以包括相关的播放速度(如2 将播放速度的两倍,0.5半)和下一个动画序列的名称。
    animations:{
        run:[0,3]
    }
}
var spriteSheet = new createjs.SpriteSheet(data)
var instance = new createjs.Sprite(spriteSheet,"run")

container.addChild(instance);
stage.addChild(container);
createjs.Ticker.setFPS(5); //设置帧
createjs.Ticker.addEventListener("tick",stage);
stage.update();

这样,简单走路的效果就出来了(源码见 easeljs-sprite-01.html):

图片 12

 

如果想通过按钮控制动画的变换的话使用 gotoAndPlay(action)
方法调用对应的动画效果就行了。

我们修改HTML文档代码如下:

<canvas id="view" width="80" height="80"></canvas>
<div class="buttons">
    <input id="goStraight" value="Go Straight" type="button" />
    <input id="goLeft" value="Go Left"  type="button"/>
    <input id="goRight" value="Go Right"  type="button"/>
    <input id="goBack" value="Go Back"  type="button"/>
</div>

然后修改JS代码如下:

var stage = new createjs.Stage("view");
container = new createjs.Container();
var data = {
    images:["imgs/easeljs-preloadjs-animation/moveGuy.png"],
    frames:{width:80,height:80, count:16, regX: 0, regY:0, spacing:0, margin:0},
    animations:{
        stand:0,
        run1:[0,3],
        run2:[4,7],
        run3:[8,11],
        run4:[12,15]
    }
}
var spriteSheet = new createjs.SpriteSheet(data)
var instance = new createjs.Sprite(spriteSheet,"run1")

container.addChild(instance);
stage.addChild(container);
createjs.Ticker.setFPS(5);
createjs.Ticker.addEventListener("tick",stage);
stage.update();

document.getElementById('goStraight').onclick =  function goStraight() {
    instance.gotoAndPlay("run1");
}
document.getElementById('goLeft').onclick =  function goLeft() {
    instance.gotoAndPlay("run2");
}
document.getElementById('goRight').onclick =  function goRight() {
    instance.gotoAndPlay("run3");
}
document.getElementById('goBack').onclick =  function goBack() {
    instance.gotoAndPlay("run4");
}

效果就出来了(源码见 easeljs-sprite-02.html):

图片 13

 

4.使用 Text 创建简单的文本

这个就比较简单了,直接看代码:

<canvas id="View" width="300" height="80"></canvas>
<script>
    var stage = new createjs.Stage("View");
    var theText = new createjs.Text("Hello,EaselJS!","normal 32px microsoft yahei","#222222");
    stage.addChild(theText);
    stage.update();
</script>

这里有设置背景色为粉红:

#View { background-color: #fddfdf;}

显示效果为:

图片 14

 

5.使用 Container 创建保存其他显示对象的容器

其实这个在前面已经用过了。不过还是单独写个例子,这个比较简单:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用 Container 创建保存其他显示对象的容器</title>
    <script src="js/base/easeljs-0.8.2.min.js"></script>
</head>
<body>
<canvas id="view" width="300" height="300"></canvas>
<script>
    var stage = new createjs.Stage("view");
    container = new createjs.Container();
    //先来绘制个正方形
    var square = new createjs.Shape();
    square.graphics.beginFill("#ff0000").drawRect(0,0,300,300);
    container.addChild(square);
    //先来绘制个正方形
    var square2 = new createjs.Shape();
    square2.graphics.beginFill("orange").drawRect(50,50,200,200);
    container.addChild(square2);
    //然后我们来绘制个圆形
    var circle = new createjs.Shape();
    circle.graphics.beginFill("blue").drawCircle(150,150,100);
    container.addChild(circle);
    //最后我们再绘制个圆形
    var circle2 = new createjs.Shape();
    circle2.graphics.beginFill("white").drawCircle(150,150,50);
    container.addChild(circle2);

    stage.addChild(container);
    stage.update();
</script>
</body>
</html>

效果如下:

图片 15

 

相关源码地址:Demo4CreateJS

发表评论

电子邮件地址不会被公开。 必填项已用*标注