我应该如何并行使用 requestAnimationFrame 和 setTimeout 来制作更好的游戏循环？

Posted 2023-03-10

【中文标题】我应该如何并行使用 requestAnimationFrame 和 setTimeout 来制作更好的游戏循环？

【英文标题】：How should I use requestAnimationFrame and setTimeout in parallel to make a better game loop?

【发布时间】：2015-04-24 19:57:49

【问题描述】：

我的目标是创建一个高效的游戏循环，使用requestAnimationFrame 更新显示画布，使用setTimeout 更新游戏逻辑。我的问题是我应该将所有绘图操作放在requestAnimationFrame 循环中还是只将更新html画布的主要绘图操作放在里面？

我所说的“所有绘图操作”是指所有的缓冲。例如，我会将所有精灵绘制到缓冲区，然后将缓冲区绘制到主画布。一方面，如果我将所有缓冲都放入requestAnimationFrame，我不会在每次逻辑更新上浪费cpu 绘图，另一方面，绘图是cpu 繁重，可能导致requestAniomationFrame 等到所有这些操作完成完成...将逻辑更新与绘图分开的目的是使requestAnimationFrame 不会因非绘图处理而陷入困境。

有人对这种创建游戏循环的方法有任何经验吗？不要说“把它全部放在requestAnimationFrame”，因为这会减慢渲染速度。我相信将逻辑与绘图分开是要走的路。这是我所说的一个例子：

/* The drawing loop. */
function render(time_stamp_)//First parameter of RAF callback is timestamp.
    window.requestAnimationFrame(render);

    /* Draw all my sprites in the render function? */
    /* Or should I move this to the logic loop? */
    for (var i=sprites.length-1;i>-1;i--)
        sprites[i].drawTo(buffer);
    

    /* Update the on screen canvas. */
    display.drawImage(buffer.canvas,0,0,100,100,0,0,100,100);


/* The logic loop. */
function update()
    window.setTimeout(update,20);

    /* Update all my sprites. */
    for (var i=sprites.length-1;i>-1;i--)
        sprites[i].update();
    

谢谢！

编辑：

我决定使用网络工作者将游戏逻辑与绘图完全分开，据我了解，这必须在 DOM 加载的主脚本中进行。

【问题讨论】：

如果 update 运行缓慢，它仍然会阻止 RAF。异步代码并不意味着它是多线程的。如果您遇到性能问题，请考虑使用工作人员。

我听说过工人，你知道有什么好的文件吗？它们是多线程 javascript 的一种方式吗？

一个好的 webworker 教程是这样的：html5rocks.com/en/tutorials/workers/basics 确保在不支持它们（或不是多核）的系统中你有一个后备！

嗨@Frank，你能找到解决办法吗？可以分享你的发现吗？

【参考方案1】：

所以，我从来没有找到一个很好的方法来分离逻辑和绘图，因为 JavaScript 使用单线程。无论我做什么，draw 函数的执行都可能会妨碍逻辑，反之亦然。我所做的是找到一种方法以尽可能最及时的方式执行它们，同时确保不断更新逻辑并使用 requestAnimation Frame 优化绘图。如果设备太慢而无法以所需的帧速率绘制，则该系统设置为插入动画以弥补跳过的帧。无论如何，这是我的代码。

var engine = 
        /* FUNCTIONS. */
        /* Starts the engine. */
        /* interval_ is the number of milliseconds to wait between updating the logic. */
        start : function(interval_) 
            /* The accumulated_time is how much time has passed between the last logic update and the most recent call to render. */
            var accumulated_time = interval_;
            /* The current time is the current time of the most recent call to render. */
            var current_time = undefined;
            /* The amount of time between the second most recent call to render and the most recent call to render. */
            var elapsed_time = undefined;
            /* You need a reference to this in order to keep track of timeout and requestAnimationFrame ids inside the loop. */
            var handle = this;
            /* The last time render was called, as in the time that the second most recent call to render was made. */
            var last_time = Date.now();

            /* Here are the functions to be looped. */
            /* They loop by setting up callbacks to themselves inside their own execution, thus creating a string of endless callbacks unless intentionally stopped. */
            /* Each function is defined and called immediately using those fancy parenthesis. This keeps the functions totally private. Any scope above them won't know they exist! */
            /* You want to call the logic function first so the drawing function will have something to work with. */
            (function logic() 
                /* Set up the next callback to logic to perpetuate the loop! */
                handle.timeout = window.setTimeout(logic, interval_);

                /* This is all pretty much just used to add onto the accumulated time since the last update. */
                current_time = Date.now();
                /* Really, I don't even need an elapsed time variable. I could just add the computation right onto accumulated time and save some allocation. */
                elapsed_time = current_time - last_time;
                last_time = current_time;

                accumulated_time += elapsed_time;

                /* Now you want to update once for every time interval_ can fit into accumulated_time. */
                while (accumulated_time >= interval_) 
                    /* Update the logic!!!!!!!!!!!!!!!! */
                    red_square.update();

                    accumulated_time -= interval_;
                
            )();

            /* The reason for keeping the logic and drawing loops separate even though they're executing in the same thread asynchronously is because of the nature of timer based updates in an asynchronously updating environment. */
            /* You don't want to waste any time when it comes to updating; any "naps" taken by the processor should be at the very end of a cycle after everything has already been processed. */
            /* So, say your logic is wrapped in your RAF loop: it's only going to run whenever RAF says it's ready to draw. */
            /* If you want your logic to run as consistently as possible on a set interval, it's best to keep it separate, because even if it has to wait for the RAF or input events to be processed, it still might naturally happen before or after those events, and we don't want to force it to occur at an earlier or later time if we don't have to. */
            /* Ultimately, keeping these separate will allow them to execute in a more efficient manner rather than waiting when they don't have to. */
            /* And since logic is way faster to update than drawing, drawing won't have to wait that long for updates to finish, should they happen before RAF. */

            /* time_stamp_ is an argument accepted by the callback function of RAF. It records a high resolution time stamp of when the function was first executed. */
            (function render(time_stamp_) 
                /* Set up the next callback to RAF to perpetuate the loop! */
                handle.animation_frame = window.requestAnimationFrame(render);

                /* You don't want to render if your accumulated time is greater than interval_. */
                /* This is dropping a frame when your refresh rate is faster than your logic can update. */
                /* But it's dropped for a good reason. If interval > accumulated_time, then no new updates have occurred recently, so you'd just be redrawing the same old scene, anyway. */
                if (accumulated_time < interval_) 
                    buffer.clearRect(0, 0, buffer.canvas.width, buffer.canvas.height);

                    /* accumulated_time/interval_ is the time step. */
                    /* It should always be less than 1. */
                    red_square.draw(accumulated_time / interval_);

                    html.output.innerHTML = "Number of warps: " + red_square.number_of_warps;

                    /* Always do this last. */
                    /* This updates the actual display canvas. */
                    display.clearRect(0, 0, display.canvas.width, display.canvas.height);
                    display.drawImage(buffer.canvas, 0, 0, buffer.canvas.width, buffer.canvas.height, 0, 0, display.canvas.width, display.canvas.height);
                
            )();
        ,
        /* Stops the engine by killing the timeout and the RAF. */
        stop : function() 
            window.cancelAnimationFrame(this.animation_frame);
            window.clearTimeout(this.timeout);
            this.animation_frame = this.timeout = undefined;
        ,
        /* VARIABLES. */
        animation_frame : undefined,
        timeout : undefined
    ;

这是直接从我的一个项目中提取的，因此其中有一些变量在代码的其他地方定义。 red_square 是这些变量之一。如果您想查看完整示例，请查看我的 github 页面！ userpoth.github.io 另外，附带说明一下，我尝试使用网络工作者来分离逻辑，这是一个悲惨的失败。当你有很多数学要做并且很少有对象要在线程之间传递时，Web Worker 非常棒，但是它们不能进行绘图并且它们在大数据传输方面很慢，至少在游戏逻辑的上下文中是这样。

【参考方案2】：

据我了解你的问题，重点是

我想尽可能频繁地刷新屏幕 我不想在每次屏幕刷新时都执行一些昂贵的操作。当然，那意味着还有其他的东西要刷新，如果没有，前面的点就没用了 我没有，也不能有一个标志，表明需要之前的操作。请注意，这是明智的做法，其他选项只是在无法做到的情况下的替代选择

在您的代码中，您已决定每秒执行 20 次此操作。

在这种情况下，我会设置一个时间戳来指示此操作何时完成。

在requestAnimationFrame代码中，测试这个时间戳是否老化超过1/20s，然后执行代码。

【讨论】：

不幸的是，我无法避免使用单线程的问题。无论我把 CPU 密集型逻辑放在哪里，它仍然会在 requestAnimationFrame 之前或之后异步执行。充其量我将能够更频繁地使用requestAnimationFrame，但我不会有任何新的逻辑更新来渲染，所以即使没有第二个线程尝试也是没有意义的。如果我要真正将逻辑与绘图分开，我认为我将不得不更多地研究 Web Workers 和 Transferable Objects。