带有游戏循环的 JavaScript 平滑动画

Question

我已将我的游戏循环简化为一个在屏幕上移动的盒子，Click Here .不知为何，箱子移动起来似乎不太顺畅。我做了一个video of it here .

游戏循环是这样调用的:

var game = function( ) {
    var now = Date.now( );
    var delta = now - then;

    update( delta / 1000 );
    draw( );

    then = now;
};

setInterval( game, 1000 / 50 );

我已经尝试将 draw 调用从主游戏循环中分离出来，并将它们放在 requestAnimationFrame 中，但问题仍然存在。我看了一堆似乎运行顺利的教程。我什至尝试过使用 fixed time-step game loop ，但这只会让我的游戏运行得快得无法控制。

我如何改进上述逻辑，也许可以利用 requestAnimationFrame 并为 update 调用维护 deltaTime。

Answer 1

我相信在使用 Canvas 时，您的位置变量应该是整数值，因为它们代表像素，而浮点值没有意义。如果您打开控制台并输入 sceneManager.currentScene.GameplayLayer.ball.position.x 然后您会得到一个非常长的小数点。我认为对 OP 的评论表明有时球移动 2px 而不是 1px 可能是对的。当您更新您的位置时，您最终会得到一个浮点值。

我相信它有时向上舍入到下一个最高像素位置，有时向下舍入。我会尝试像这样取地板或天花板:

this.position.x += Math.floor(this.speed * 100 * deltaTime * Math.cos(directionInRadians));
this.position.y += Math.floor(this.speed * 100 * deltaTime * Math.sin(directionInRadians));

我会进行这两项更改并查看其行为方式。

编辑:由于您编辑了问题以简化逻辑。我可以建议尝试一些方法，那就是使用我创建的这个我一直使用的 Clock 对象。它给了我流畅的动画，而且相当简单。它基于 clock that Three.JS uses所以你可能也想检查一下。即使您想使用自己的代码，您至少可以尝试这个现成的解决方案，看看它是否能给您相同的结果。它似乎对我来说工作得很好。此外，您尝试使用垫片，因此您在游戏函数中的调用应该是 requestAnimFrame(game);?

var Clock = function () {

    /** Member startTime will remain fixed at its integer
        millisecond value returned by Date.now(). Will always
        be equal to the time the clock was started */
    this.startTime = Date.now();

    /** Member ms is updated by tick() to a integer value reprsenting 
        the number of milliseconds between the epoch (January 1, 1970)
        and the current date and time of the system. */
    this.ms = this.startTime;
    this.last = this.startTime;  /** millis at last call to tick() */
    this.time = 0;               /** ms in floating point seconds not millis */

    /** Member dt is updated by tick() to an integer value representing
        the number of milliseconds since the last call to tick(). */
    this.dt = 0;
    this.delta = 0; /** dt in floating point seconds not millis */

    /** Member fps is updated by tick() to a floating point value representing
        frames per second, updated and averaged approximately once per second */
    this.fps = 0.0;

    /** Member frameCount is updated to an integer value representing the
        total number of calls to tick() since the clock was created. */
    this.frameCount = 0;

    /** The frameCounter member is a flag you can turn off if you don't need to
        calculate the frameCount or do the average FPS calculation every second */
    this.frameCounter = true;

    /** Private globals needed to calculcate/average fps over eachs second */
    var timeToUpdate = 0;
    var framesToUpdate = 0;

    /************************************************************************************
        The tick() method updates ALL the Clock members, which should only
        be read from and never written to manually. It is recommended that
        tick() is called from a callback loop using requestAnimationFrame

        Learn more: http://paulirish.com/2011/requestanimationframe-for-smart-animating/
    *************************************************************************************/
    this.tick = function () {
        /** This is a new frame with it's very own unique number */

        if (this.frameCounter) this.frameCount++;

        /** Set the private currentTime variable */
        this.ms = Date.now();

        /** Update time delta and immediately set last time to
            be as accurate as possible in our timings. */
        this.dt = this.ms - this.last;
        this.last = this.ms;

        /** Calculate floating-point delta and increment time member */
        this.delta = 0.001 * this.dt;
        this.time += this.delta;

        /** Calculate private temp variables for fps calculation */
        if (this.frameCounter) {
            timeToUpdate += this.dt;
            framesToUpdate++;
            if (timeToUpdate > 1000) {
                this.fps = Math.round((framesToUpdate * 1000) / timeToUpdate);
                framesToUpdate = 0;
                timeToUpdate = 0;
            }
        }
    }
}

如果您使用这个对象，那么您需要做的就是在您的初始化函数中创建一个新的时钟对象，就像这样 clock = new Clock();。然后在每个动画调用中调用 clock.tick()。然后，您可以访问成员 clock.delta 和 clock.time，这将为您提供增量和时间作为以秒为单位的浮点值。 clock.dt 和 clock.ms 将为您提供与以毫秒为单位的整数相同的值。您还可以使用 clock.fps 访问 fps 或通过设置 clock.frameCounter = false 来禁用它。