Cocos Creator 實(shí)現(xiàn)毫秒計(jì)時(shí)
起因:做一個(gè)小游戲需要用到毫秒級(jí)的計(jì)時(shí),畫面上也需要在每一幀都更新毫秒級(jí)的計(jì)時(shí)顯示,如下圖:

問題:
? ? ?1. 使用 schedule 精度不足。
? ? ?2. 單純的按update顯示幀去刷新,計(jì)時(shí)的滾動(dòng)效果又不好。
解決:
1. 自己使用setInterval實(shí)現(xiàn)一個(gè)計(jì)時(shí)方法,在需要開啟計(jì)時(shí)的場(chǎng)合調(diào)用。
? ?// 計(jì)時(shí)
? ?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;
? ? ? ? ? ? ? ?// 更新計(jì)時(shí)顯示
? ? ? ? ? ? ? ?this.updateTimerDisplay(elapsedTime);
? ? ? ? ? ?}
? ? ? ?});
? ?},
2. 在計(jì)時(shí)每次刷新的時(shí)刻對(duì)畫面進(jìn)行更新。
// 更新計(jì)時(shí)顯示
? ?updateTimerDisplay(elapsedTime) {
? ? ? ?// cc.log("elapsedTime = " + elapsedTime);
? ? ? ?this.time = elapsedTime;
? ? ? ?this.timerLabel.string = this.getFormatTime(this.time);
? ?},
? ?// 獲取格式化后的時(shí)間
? ?getFormatTime(time) {
? ? ? ?// return Math.floor(time * 1000) / 1000 + "\""
? ? ? ?return (time / 1000).toFixed(3) + "\""
? ?},
補(bǔ)充:
1. 使用 toFixed 方法可以直接在保留小數(shù)時(shí)補(bǔ)0.
2. 由于字體寬度的問題,可以考慮 將顯示計(jì)時(shí) Label 的Anchor為(0, 0), Horizontal Align 設(shè)為 LEFT。
標(biāo)簽: