feat: 帧率显示

src/core/main/setting.ts

@@ -8,6 +8,7 @@ import { SoundEffect } from '../audio/sound';
 import settingsText from '@/data/settings.json';
 import { isMobile } from '@/plugin/use';
 import { fontSize } from '@/plugin/ui/statusBar';
+import { show as showFrame, hide as hideFrame } from '@/plugin/frame';
 
 export interface SettingComponentProps {
     item: MotaSettingItem;
@@ -338,6 +339,8 @@ mainSetting.on('valueChange', (key, n, o) => {
         handleActionSetting(setting, n, o);
     } else if (root === 'audio') {
         handleAudioSetting(setting, n, o);
+    } else if (root === 'debug') {
+        handleDebugSetting(setting, n, o)
     }
 });
 
@@ -414,6 +417,17 @@ function handleAudioSetting<T extends number | boolean>(
     }
 }
 
+function handleDebugSetting<T extends number | boolean>(
+    key: string,
+    n: T,
+    o: T
+) {
+    if (key === 'frame'){
+        if (n) showFrame();
+        else hideFrame() 
+    }
+}
+
 // ----- 游戏的所有设置项
 // todo: 虚拟键盘缩放，小地图楼传缩放
 mainSetting
@@ -467,6 +481,12 @@ mainSetting
         new MotaSetting()
             .register('mapScale', '小地图缩放', 100, COM.Number, [50, 1000, 50])
             .setDisplayFunc('mapScale', value => `${value}%`)
+    )
+    .register(
+        'debug', 
+        '调试设置', 
+        new MotaSetting()
+            .register('frame', '帧率显示', false, COM.Boolean)
     );
 
 const loading = Mota.require('var', 'loading');
@@ -490,7 +510,8 @@ loading.once('coreInit', () => {
         'ui.mapScale': storage.getValue(
             'ui.mapScale',
             isMobile ? 300 : Math.floor(window.innerWidth / 600) * 50
-        )
+        ),
+        'debug.frame': !!storage.getValue('debug.frame', false),
     });
 });
 

src/core/plugin.ts

@@ -26,6 +26,7 @@ import * as use from '@/plugin/use';
 import * as gameCanvas from '@/plugin/fx/gameCanvas';
 import * as smooth from '@/plugin/fx/smoothView';
 import * as shader from './fx/shader';
+import * as frame from '@/plugin/frame';
 
 Mota.Plugin.register('shadow_r', shadow, shadow.init);
 Mota.Plugin.register('gameShadow_r', gameShadow, gameShadow.init);
@@ -36,3 +37,4 @@ Mota.Plugin.register('use_r', use);
 Mota.Plugin.register('gameCanvas_r', gameCanvas);
 Mota.Plugin.register('smooth_r', smooth, smooth.init);
 Mota.Plugin.register('shader_r', shader);
+Mota.Plugin.register('frame_r', frame, frame.init);

src/plugin/frame.ts

@@ -0,0 +1,43 @@
+import { Ticker } from 'mutate-animate';
+
+const ticker = new Ticker();
+
+const span = document.createElement('span');
+span.style.fontSize = '16px';
+span.style.position = 'fixed';
+span.style.right = '0';
+span.style.top = '0';
+span.style.fontFamily = 'Arial';
+span.style.color = 'lightgreen';
+span.style.padding = '5px';
+
+let showing = false;
+
+export function init() {
+    const settings = Mota.require('var', 'mainSetting');
+    const setting = settings.getSetting('debug.frame');
+    /** 记录前5帧的时间戳 */
+    let lasttimes = [0, 0, 0, 0, 0];
+    ticker.add(time => {
+        if (!setting?.value) return;
+        lasttimes.shift();
+        lasttimes.push(time);
+        span.innerText = (1000 / ((lasttimes[4] - lasttimes[0]) / 4)).toFixed(
+            1
+        );
+    });
+}
+
+export function show() {
+    showing = true;
+    document.body.appendChild(span);
+}
+
+export function hide() {
+    showing = false;
+    span.remove();
+}
+
+export function isShowing() {
+    return showing;
+}