优化html5画布游戏 [英] Optimizing html5 canvas game

问题描述

现在我在游戏中有两个游戏循环。一个循环通过屏幕上的对象数组和一个逻辑循环的游戏逻辑的绘制循环。我有逻辑循环运行大约10帧比绘制循环。我有这样的设置像这样，因为做游戏逻辑可能需要更长的时间，我不想干扰绘制循环。

Right now I've got two game loops in a game I'm making. A draw loop that loops through an array of objects on screen and a logic loop that does game logic. I have the logic loop running about 10 more frames than the draw loop. I have this set up like this because doing game logic may take longer and I don't want it to interfere with the draw loop.

我有逻辑循环设置像这样：

I have the logic loop set up like this:

vs.logicloop = function(){
    vs.Gameloop();
    //do the updating of object scripts
    if(vs.windowActive){
        var l = vs.scenegraph.length;
        var i = 0;
        while(i < l){
            vs.scenegraph[i].logicScript();
            i++;
        }
    }
    //restart loop
    setTimeout(vs.logicloop, 1000/(vs.fps+10));
};

，绘制循环如下：

vs.drawloop = function(){
    //clear the screen
    vsd.clr();
    //goes through everything in the scene
    //graph and draws it and runs each object's
    //personal draw code
    if(vs.windowActive){
        var l = vs.scenegraph.length;
        var i = 0;
        while(i < l){
            vs.ctx.save();
            vs.scenegraph[i].update();
            vs.scenegraph[i].draw();
            vs.scenegraph[i].drawScript();
            vs.ctx.restore();
            i++;
        }
    }
    //restart loop
    setTimeout(vs.drawloop, 1000/vs.fps);
};

我使用setTimeout，因为我听说setInterval会导致循环重叠，如果一个没有完成然而。 有没有任何优化，我可以做，真的得到一些速度？特别是优化游戏循环。

I'm using setTimeout because I heard that setInterval will cause loops to overlap if one isn't finished yet. Are there any optimizations I can do to really get some speed? Especially optimizing the game loops.

我听说过一些javascript引擎，一次在屏幕上获取数千个对象。我不能想象他们是如何做到这一点，我最多可以在一台非常老的计算机上的屏幕上达到100个对象，在一台合理储存的计算机上可以得到大约700个对象。这是没有很多游戏代码在后台运行，在我已经制定出如何做像素完美的碰撞检测和物理之前。

I've heard of some javascript engines getting thousands of objects on screen at once. I can't imagine how they do that, at most mine can get up to 100 objects on screen on a very old computer and about 700 on a reasonably stocked computer. And that's without a lot of game code running in the background and before I've worked out how to do pixel perfect collision detection and physics.

我的过程是在画布上绘制一个背景颜色fillRect每个绘制循环，然后循环遍历所有的对象和绘制他们的绘制代码。

My process is to draw a background color fillRect over the canvas every draw loop, then looping through all the objects and drawing their draw code. Also it doesn't try to draw objects out of view.

这是我第一个付薪的工作，我真的很想留下深刻的印象。

This is my first paying job, and I really want to impress. Plus I can keep ownership of the engine once I'm done with the game.

非常感谢

推荐答案

• 如果您对sprite坐标使用浮点值，请尝试将其转换为整数。这将花费你失去子像素渲染，但你会获得很多速度。


• 不要使用奇数宽度的图像。总是使用宽度作为2的幂。


• 这在一些情况下很难实现，但如果你的游戏是合适的，不要清除屏幕和重绘每一帧的一切。


• 如果您必须清除画布，请不要绘制空白矩形。请尝试使用相同的大小再次设置画布宽度/高度。


• if you use floating values for sprite coordinates, try converting them to integers. that will cost you losing subpixel rendering but you will gain a lot of speed.
• don't use images with odd widths. always use widths as powers of 2.
• this one is hard to implement in some cases but if your game is suitable, don't clear screen and redraw everything each frame. instead, draw changed parts.
• if you have to clear the canvas, don't draw a blank rectangle. try setting the canvas width/height again with the same size. that should reset the pixels faster than rectangle drawing.

其他方法我可以建议不是HTML5画布依赖，但一般主题喜欢使用位移位，反向循环和运算符而不是模数（如果可能），预计算等。

rest of the methods i can suggest are not HTML5 canvas dependent but general subjects like using bit shiftings, inverse loops, and operator instead of modulo when possible, precalculations etc.

这篇关于优化html5画布游戏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！