使用 Dart 更新 HTML Canvas答案

【问题标题】：Using Dart to update HTML Canvas使用 Dart 更新 HTML Canvas
【发布时间】：2014-02-15 17:46:11
【问题描述】：

我应该如何更新我在 HTML 中创建的画布使用 Dart 以便我正在创建的游戏运行在 'x' 帧数？

【问题讨论】：

【解决方案1】：

控制游戏的帧率：

使用requestAnimationFrame（在window 库中）。
测量两次通话之间的时间。
如果实际帧速率太高则丢弃帧。
如果自上一帧以来经过的时间过长，请考虑仅经过一帧。如果游戏被标记出来/应用程序被操作系统设置为空闲，就会发生这种情况。

requestAnimationFrame(callback) 将在浏览器准备好绘制时立即触发回调。
因此，它将触发屏幕的所有全 fps 速率（前提是您的绘图/计算不会花费太多时间）。回调接受一个时间参数，取决于浏览器，它是高分辨率（Dart VM、Chrome js）或低分辨率（FF、Sf）的当前时间。

您对帧速率的唯一选择是使帧速率低于或等于屏幕的帧速率。
因此，如果你想要一个 25Hz 的屏幕，而你在一个 50Hz 的屏幕上，那么通过将一帧丢到两帧上，你就会达到 25Hz。很好。
但是，如果您在 60Hz 的屏幕上要求 25Hz，30 fps 仍然太高，所以大多数时候您会得到 15 fps。
（也许一个好主意不会将 fps 限制为常数，而是计算所需 fps 所需的比率（>=100Hz 屏幕的 1/2 或 1/3 甚至 1/4 或更多）。

无论如何，这里有一个游戏循环，它将控制游戏的 fps（具有恒定限制），并处理游戏时间，即游戏经过的时间（如果用户退出，这将与实时不同，这停止 requestAnimationFrame 以及计时器。）：

class Game {

   num gameTime = 0 ; // actual time elapsed within game since game started.

   num minFrameTime = 20 ; // limit to 50 fps. 

   num maxFrameTime = 200 ; // consider game was tabbed out after 200ms

   num get currentFrameRate => (_lastdt == 0) ? -1 : 1000 / _lastdt ;  

   void launchAnimation() {
        window.requestAnimationFrame(_getAnimateTime);     
    }

   void _animate(num animateCallTime) {
       window.requestAnimationFrame(_animate); // keep animating.
       // ---- time handling
       num dt = animateCallTime - _lastAnimateTime ; // time elapsed since last frame.
       if (dt<minFrameTime) return; // frame rate too high, drop this frame.
       if (dt>maxFrameTime) dt = minFrameTime ; // consider just one frame elapsed if game tabbed out.
       gameTime += dt ;
       _lastdt = dt ;
       _lastAnimateTime = animateCallTime ;
       // ---- actual animation 
       // draw :  must be done first (we're on sync with screen)

       // update
   }

   void _getAnimateTime(num animateCallTime) { 
       _lastAnimateTime = animateCallTime ; // now we have start time with right resolution
       window.requestAnimationFrame(_animate); // start animating
   }

   num _lastAnimateTime = 0;

   num _lastdt = 0; // last valid frame duration.
 }

Rq ：我建议将桌面限制为 60 fps，移动设备限制为 30 fps。
Rq2：上面的代码实际上是我使用的游戏循环的精简版本，它大约大 3 倍，以解决动画循环的“所有”问题（所有......或者至少是我看到的那些：- ) )。

【讨论】：