欢迎光临散文网 会员登陆 & 注册

Cocos Creator 实现毫秒计时

2022-05-21 12:19 作者:Nimanggi  | 我要投稿

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




问题:

     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);

            }

        });

    },


2. 在计时每次刷新的时刻对画面进行更新。

// 更新计时显示

    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 实现毫秒计时的评论 (共 条)

分享到微博请遵守国家法律