html5 restore,HTML5 Canvas save()和restore()性能

动画和游戏性能提示.

避免保存还原

使用setTransform可以消除保存和恢复的需要.

保存恢复的原因有很多,这会降低速度,这取决于当前的GPU&& 2D上下文状态.如果将当前填充和/或笔触样式设置为较大的图案,或者您具有复杂的字体/渐变,或者您正在使用过滤器(如果可用),则保存和恢复过程可能比渲染图像花费更长的时间.

在为动画和游戏写作时,性能就是一切,对我而言,它是关于精灵计数的.我可以在每帧(第60秒)绘制的精灵越多,我可以添加的FX越多,环境越详细,游戏越好.

我将状态保持开放状态,即我没有详细跟踪当前的2D上下文状态.这样我就不必使用保存和恢复.

ctx.setTransform而不是ctx.transform

因为变换函数变换,旋转,缩放,平移乘以当前变换,所以很少使用它们,因为我不知道变换状态是什么.

为了处理未知,我使用完全替换当前转换矩阵的setTransform.这也允许我在一次调用中设置比例和转换,而无需知道当前状态.

ctx.setTransform(scaleX,0,0,scaleY,posX,posY); // scale and translate in one call

我还可以添加旋转,但是javascript代码可以找到x,y轴向量(setTransform中的前4个数字)比旋转慢.

精灵并渲染它们

下面是一个扩展的精灵功能.它从精灵表中绘制一个精灵,精灵有x& y比例,位置和中心,因为我总是使用alpha,所以也设置alpha

// image is the image. Must have an array of sprites

// image.sprites = [{x:0,y:0,w:10,h:10},{x:20,y:0,w:30,h:40},....]

// where the position and size of each sprite is kept

// spriteInd is the index of the sprite

// x,y position on sprite center

// cx,cy location of sprite center (I also have that in the sprite list for some situations)

// sx,sy x and y scales

// r rotation in radians

// a alpha value

function drawSprite(image, spriteInd, x, y, cx, cy, sx, sy, r, a){

var spr = image.sprites[spriteInd];

var w = spr.w;

var h = spr.h;

ctx.setTransform(sx,0,0,sy,x,y); // set scale and position

ctx.rotate(r);

ctx.globalAlpha = a;

ctx.drawImage(image,spr.x,spr.y,w,h,-cx,-cy,w,h); // render the subimage

}

在一台普通的机器上,您可以使用该功能以全帧速率渲染1000个精灵.在Firefox(写作时)我得到2000的功能(精灵是从1024乘2048精灵表随机选择的精灵)最大精灵大小256 * 256

但是我有超过15个这样的功能,每个功能都具有最小的功能来完成我想要的功能.如果它从未旋转或缩放(即用于UI)那么

function drawSprite(image, spriteInd, x, y, a){

var spr = image.sprites[spriteInd];

var w = spr.w;

var h = spr.h;

ctx.setTransform(1,0,0,1,x,y); // set scale and position

ctx.globalAlpha = a;

ctx.drawImage(image,spr.x,spr.y,w,h,0,0,w,h); // render the subimage

}

或者最简单的玩精灵,粒子,子弹等

function drawSprite(image, spriteInd, x, y,s,r,a){

var spr = image.sprites[spriteInd];

var w = spr.w;

var h = spr.h;

ctx.setTransform(s,0,0,s,x,y); // set scale and position

ctx.rotate(r);

ctx.globalAlpha = a;

ctx.drawImage(image,spr.x,spr.y,w,h,-w/2,-h/2,w,h); // render the subimage

}

如果是背景图片

function drawSprite(image){

var s = Math.max(image.width / canvasWidth, image.height / canvasHeight); // canvasWidth and height are globals

ctx.setTransform(s,0,0,s,0,0); // set scale and position

ctx.globalAlpha = 1;

ctx.drawImage(image,0,0); // render the subimage

}

通常可以对比赛场进行缩放,平移和旋转.为此我保持一个闭包变换状态(上面的所有全局变量都关闭变量和渲染对象的一部分)

// all coords are relative to the global transfrom

function drawGlobalSprite(image, spriteInd, x, y, cx, cy, sx, sy, r, a){

var spr = image.sprites[spriteInd];

var w = spr.w;

var h = spr.h;

// m1 to m6 are the global transform

ctx.setTransform(m1,m2,m3,m4,m5,m6); // set playfield

ctx.transform(sx,0,0,sy,x,y); // set scale and position

ctx.rotate(r);

ctx.globalAlpha = a * globalAlpha; (a real global alpha)

ctx.drawImage(image,spr.x,spr.y,w,h,-cx,-cy,w,h); // render the subimage

}

以上所有内容都与实际游戏精灵渲染速度一样快.

一般提示

永远不要使用任何矢量类型渲染方法(除非你有空闲的帧时间),如fill,stroke,filltext,arc,rect,moveTo,lineTo,因为它们是瞬间减速.如果需要渲染文本,请创建一个屏幕外画布,渲染一次,然后显示为精灵或图像.

图像大小和GPU RAM

创建内容时,请始终使用图像大小的电源规则. GPU处理的图像尺寸为2的幂(2,4,8,16,32,64,128 ……),因此宽度和高度必须是2的幂.即1024×512或2048×128是良好的尺寸.

当您不使用这些尺寸时,2D上下文并不关心,它的作用是扩展图像以适应最接近的功率.因此,如果我有一个300乘300的图像以适应GPU上的图像,则必须将图像扩展到最接近的功率,即512 x 512.因此,实际内存占用量比您能够的像素大2.5倍显示.当GPU耗尽本地内存时,它将开始从主板RAM切换内存,当发生这种情况时,您的帧速率将降至不可用.

确保您对图像进行大小调整以便不浪费RAM意味着您可以在进入RAM墙之前将更多内容打包到游戏中(对于较小的设备来说并不多).

GC是theef的主要框架

最后一个优化是确保GC(垃圾收集器)几乎无所事事.在主循环中,避免使用new(重用和对象而不是取消引用它并创建另一个),避免从数组推送和弹出(保持长度不落)保持单独的活动项计数.创建自定义迭代器并推送项目上下文感知的函数(知道数组项是否处于活动状态).当您按下时不要推送新项目,除非没有非活动项目,当项目变为非活动状态时,将其保留在数组中并在以后需要时使用它.

我称之为快速堆栈的简单策略超出了本答案的范围,但可以使用ZERO GC负载处理1000个瞬态(短期)游戏对象.一些更好的游戏引擎使用类似的approch(池阵列提供非活动项池).

GC应小于游戏活动的5％,否则您需要找到不必要的创建和解除引用的位置.