美文网首页
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