Defold: semi-fixed timestep for HTML5

engine_template.html

<!-- TODO: Support more than 60hz, i.e. 75hz, 144hz monitors -->
<script type="text/javascript">
    (function () {
        var oldRAF = window.requestAnimationFrame;
        var dummyFunc = function () {};
        var prevFrameTime = 0;
        var accumulator = 0;
        var FPS = ("{{display.update_frequency}}" | 0);
        var VSYNC = "{{display.vsync}}" == "true";
        if (!FPS || !VSYNC) {
            console.log("Semi-fixed timestep requires display.vsync = 1, display.update_frequency > 0");
            return;
        } else {
            console.log("Semi-fixed timestep is ON.");
        }
        var FIXED_DT = 1000 / FPS;
        var disableRender = false;
        var enableRender = function () {
            GLFW.params[0x00020003] = false;
        };
        Module.__fixedUpdateSupportFunc = function () {
            if (disableRender) {
                GLFW.params[0x00020003] = true;
            }
        };
        window.requestAnimationFrame = function (callback) {
            oldRAF(function () {
                if (!prevFrameTime) prevFrameTime = new Date().getTime() - FIXED_DT;
                var frameTime = new Date().getTime();

                var dt = frameTime - prevFrameTime;
                prevFrameTime = frameTime;

                if (dt > FIXED_DT * 4) dt = FIXED_DT * 4;
                accumulator += dt;

                var prevFunc = window.requestAnimationFrame;
                window.requestAnimationFrame = dummyFunc;

                while (accumulator >= FIXED_DT + FIXED_DT) {
                    accumulator -= FIXED_DT;
                    disableRender = true;
                    callback();
                    enableRender();
                }

                accumulator -= FIXED_DT;
                // TODO: Support more than 60hz, i.e. 75hz, 144hz monitors
                if (accumulator < 0) accumulator = 0;
                disableRender = false;
                window.requestAnimationFrame = prevFunc;
                callback();
            });
        };
    })();
</script>