美文网首页
Cocos Creator 实现毫秒计时

Cocos Creator 实现毫秒计时

作者: Nimanggi | 来源:发表于2020-06-23 15:00 被阅读0次

起因:做一个小游戏需要用到毫秒级的计时,画面上也需要在每一帧都更新毫秒级的计时显示,如下图:

screenshot_20200623_145404.png

问题:
1. 使用 schedule 精度不足。
2. 单纯的按update显示帧去刷新,计时的滚动效果又不好。

解决:

  1. 自己使用setInterval实现一个计时方法,在需要开启计时的场合调用。
    // 计时
    tick() {
        var lastUpdateTime = Date.now();
        var elapsedTime = 0;
        var updateFrequency = 1; //ms
        setInterval(() => {
            var currentTime = Date.now();
            var deltaTime = currentTime - lastUpdateTime;
            elapsedTime += deltaTime;
            if (elapsedTime >= updateFrequency) {
                elapsedTime -= updateFrequency;
                lastUpdateTime = currentTime;
                // 更新计时显示
                this.updateTimerDisplay(elapsedTime);
            }
        });
    },
  1. 在计时每次刷新的时刻对画面进行更新。
// 更新计时显示
    updateTimerDisplay(elapsedTime) {

        // cc.log("elapsedTime = " + elapsedTime);

        this.time = elapsedTime;
        this.timerLabel.string = this.getFormatTime(this.time);
    },

    // 获取格式化后的时间
    getFormatTime(time) {
        // return Math.floor(time * 1000) / 1000 + "\""
        return (time / 1000).toFixed(3) + "\""
    },

补充:

  1. 使用 toFixed 方法可以直接在保留小数时补0.
  2. 由于字体宽度的问题,可以考虑 将显示计时 Label 的Anchor为(0, 0), Horizontal Align 设为 LEFT。

相关文章

网友评论

      本文标题:Cocos Creator 实现毫秒计时

      本文链接:https://www.haomeiwen.com/subject/zqkhfktx.html