javascript - 优化html5 Canvas 游戏

标签 javascript html optimization canvas

现在我正在制作的游戏中有两个游戏循环。循环遍历屏幕上对象数组的绘制循环和执行游戏逻辑的逻辑循环。我的逻辑循环比绘制循环多运行了大约 10 帧。我之所以这样设置,是因为执行游戏逻辑可能需要更长的时间,而且我不希望它干扰绘图循环。

我的逻辑循环是这样设置的:

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 会导致循环在尚未完成时重叠。 是否可以进行任何优化以真正提高速度?特别是优化游戏循环。

我听说过一些 javascript 引擎可以同时在屏幕上显示数千个对象。我无法想象他们是怎么做到的,我的最多只能在一台非常旧的计算机上在屏幕上显示 100 个对象,而在一台库存合理的计算机上最多可以显示 700 个对象。而且在我弄清楚如何进行像素完美碰撞检测和物理之前,没有大量的游戏代码在后台运行。

我的过程是在每个绘制循环中在 Canvas 上绘制一个背景色 fillRect,然后遍历所有对象并绘制它们的绘制代码。此外,它不会尝试将对象绘制到 View 之外。

这是我的第一份带薪工作,我真的很想给人留下深刻印象。另外,我可以在完成游戏后保留引擎的所有权。

非常感谢

最佳答案

  • 如果您对 Sprite 坐标使用 float 值,请尝试将它们转换为整数。这将使您失去亚像素渲染,但您将获得很多速度。
  • 不要使用宽度奇数的图片。始终使用宽度作为 2 的幂。
  • 这在某些情况下很难实现,但如果您的游戏适合,请不要清除屏幕并重绘每一帧的所有内容。相反,绘制更改的部分。
  • 如果您必须清除 Canvas ,请不要绘制空白矩形。尝试使用相同的尺寸再次设置 Canvas 宽度/高度。这应该比绘制矩形更快地重置像素。

我可以建议的其他方法不依赖于 HTML5 Canvas ,而是一般主题,例如使用位移位、反向循环和尽可能使用运算符而不是模数、预计算等。

关于javascript - 优化html5 Canvas 游戏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7681993/

相关文章:

optimization - SIMD 指令降低 CPU 频率

javascript - contenteditable 中的自动链接 URL

javascript - 如何将 Google 标签管理器与 React Native 应用程序集成?

javascript - 为什么我的 onclick""不起作用?

html - 没有绝对位置的可滚动 div

c++ - 使用 g++ 制作静态库的优化和标志

javascript - pageAction 上的 chrome 'setBadgeText'

javascript - 使用 Highlight.js 插件时如何动态应用样式?

html - 一行中的三个 div,水平居中的另一列中的最后一个 - Flexbox 或 Grid

python - 如何提高这段代码的性能?