feat: 小贴士

src/core/main/init/ui.ts

@@ -35,7 +35,8 @@ fixedUi.register(
     new GameUi('toolbar', UI.Toolbar),
     new GameUi('load', UI.Load),
     new GameUi('danmaku', UI.Danmaku),
-    new GameUi('danmakuEditor', UI.DanmakuEditor)
+    new GameUi('danmakuEditor', UI.DanmakuEditor),
+    new GameUi('tips', UI.Tips)
 );
 fixedUi.showAll();
 

src/core/main/setting.ts

@@ -409,6 +409,12 @@ function handleUiSetting<T extends number | boolean>(key: string, n: T, o: T) {
         } else {
             fixedUi.closeByName('danmaku');
         }
+    } else if (key === 'tips') {
+        if (n && core.isPlaying()) {
+            fixedUi.open('tips');
+        } else {
+            fixedUi.closeByName('tips')
+        }
     }
 }
 
@@ -480,6 +486,7 @@ mainSetting
             .setDisplayFunc('bookScale', value => `${value}%`)
             .register('danmaku', '显示弹幕', true, COM.Boolean)
             .register('danmakuSpeed', '弹幕速度', 60, COM.Number, [10, 1000, 5])
+            .register('tips', '小贴士', true,  COM.Boolean)
     );
 
 const loading = Mota.require('var', 'loading');
@@ -519,6 +526,7 @@ loading.once('coreInit', () => {
             'ui.danmakuSpeed', 
             Math.floor(window.innerWidth / 30) * 5
         ),
+        'ui.tips': storage.getValue('ui.tips', true)
     });
 });
 
@@ -557,9 +565,10 @@ mainSetting
     .setDescription('ui.bookScale', `怪物手册界面中每个怪物框体的高度缩放，最小值限定为 20% 屏幕高度`)
     .setDescription('ui.danmaku', '是否显示弹幕')
     .setDescription('ui.danmakuSpeed', '弹幕速度，刷新或开关弹幕显示后起效')
+    .setDescription('ui.tips', `是否在游戏画面右上角常亮显示小贴士`)
     .setDescription('screen.fontSizeStatus', `修改状态栏的字体大小`)
     .setDescription('screen.blur', '打开任意ui界面时是否有背景虚化效果，移动端打开后可能会有掉帧或者发热现象。关闭ui后生效')
-    .setDescription('fx.portalParticle', '是否启用苍蓝之殿的传送门粒子特效，启用后可能对性能及设备发热有所影响');
+    .setDescription('fx.portalParticle', '是否启用苍蓝之殿的传送门粒子特效，启用后可能对性能及设备发热有所影响')
 
 function setFontSize() {
     const absoluteSize = storage.getValue(

src/core/render/index.ts

@@ -13,6 +13,7 @@ import { FloorViewport } from './preset/viewport';
 import { Container } from './container';
 import { PopText } from '@/plugin/fx/pop';
 import { FloorChange } from '@/plugin/fallback';
+import tips from '@/data/tips.json';
 
 let main: MotaRenderer;
 
@@ -78,37 +79,3 @@ Mota.require('var', 'hook').on('reset', () => {
 Mota.require('var', 'hook').on('restart', () => {
     main.hide();
 });
-
-const tips = [
-    '按下C可以查看鼠标位置怪物临界',
-    '按下E可以查看鼠标位置怪物属性',
-    '将鼠标移动到光环怪上以查看其产生的光环',
-    '字体太大？试试在背包的系统设置里面调整字体大小吧！',
-    '字体太小？试试在背包的系统设置里面调整字体大小吧！',
-    '按键不合心意？试试在背包的系统设置里面自定义快捷键',
-    '拖动状态栏左上角可以移动状态栏哦！',
-    '拖动状态栏右下角可以缩放状态栏哦！',
-    '按下M键，鼠标位置的怪物的信息就会被你看光啦！',
-    '咱就是说，要不要试一下工具栏的最后一个按钮？',
-    '要不要试试工具栏倒数第二个按钮呢？',
-    '想自定义工具栏？去背包的系统设置看看吧！',
-    '冷知识：临界界面可以拖动滚动条来查看减伤情况',
-    '可以用滚轮或者双指缩放小地图！',
-    '楼传的最左侧一栏可以选择区域！',
-    '冷知识：装备栏左栏最上面可以修改装备排序',
-    '冷冷冷知识：装备栏左栏最上面右侧可以更改顺序或倒序',
-    '第一章使用跳跃技能可是要扣血的！要注意！',
-    '按H查看本游戏的百科全书',
-    '给别人炫耀一下自己的成就点吧！虽然不能记榜（',
-    '抱团属性会在怪物右上角显示加成数量！',
-    '乾坤挪移属性绘制怪物左上角显示“乾”字！',
-    '电脑端可以试试按F11全屏游玩！',
-    '手机端要不试试横屏玩？',
-    '不在楼梯边也可以使用楼传！',
-    '技能树的右下角可以切换章节！',
-    '开启自动切换技能就会自动帮你选择最优技能了！',
-    '魔塔不仅有撤回，还有恢复，按W或6就可以了！',
-    '觉得卡顿？可以去试着设置里面关闭一些特性！',
-    '从第二章开始，怪物负伤量不会超过其生命的1/4',
-    '生命回复不会超过防御的十分之一'
-];

src/data/tips.json

@@ -0,0 +1,34 @@
+[
+    "按下C可以查看鼠标位置怪物临界",
+    "按下E可以查看鼠标位置怪物的详细属性",
+    "将鼠标移动到光环怪上以查看其产生的光环",
+    "字体太大？试试在背包的系统设置里面调整字体大小吧！",
+    "字体太小？试试在背包的系统设置里面调整字体大小吧！",
+    "按键不合心意？试试在背包的系统设置里面自定义快捷键",
+    "拖动状态栏左上角可以移动状态栏哦！",
+    "拖动状态栏右下角可以缩放状态栏哦！",
+    "按下M键，鼠标位置的怪物的信息就会被你看光啦！",
+    "咱就是说，要不要试一下工具栏的最后一个按钮？",
+    "要不要试试工具栏倒数第二个按钮呢？",
+    "想自定义工具栏？去背包的系统设置看看吧！",
+    "冷知识：临界界面可以拖动滚动条来查看减伤情况",
+    "可以用滚轮或者双指缩放小地图！",
+    "楼传的最左侧一栏可以选择区域！",
+    "冷知识：装备栏左栏最上面可以修改装备排序",
+    "冷冷冷知识：装备栏左栏最上面右侧可以更改顺序或倒序",
+    "第一章使用跳跃技能可是要扣血的！要注意！",
+    "按H查看本游戏的百科全书",
+    "给别人炫耀一下自己的成就点吧！虽然不能记榜（",
+    "抱团属性会在怪物右上角显示加成数量！",
+    "乾坤挪移属性绘制怪物左上角显示“乾”字！",
+    "电脑端可以试试按F11全屏游玩！",
+    "手机端要不试试横屏玩？",
+    "不在楼梯边也可以使用楼传！",
+    "技能树的右下角可以切换章节！",
+    "开启自动切换技能就会自动帮你选择最优技能了！",
+    "魔塔不仅有撤回，还有恢复，按W或6就可以了！",
+    "觉得卡顿？可以去试着设置里面关闭一些特性！",
+    "从第二章开始，怪物负伤害量不会超过其生命的1/4",
+    "生命回复不会超过防御的十分之一",
+    "不想看小贴士？设置里面可以关掉！"
+]

src/plugin/game/ui.ts

@@ -1,7 +1,8 @@
 // @ts-nocheck
 
 export function init() {
-    const { mainUi, fixedUi } = Mota.requireAll('var');
+    const { mainUi, fixedUi, mainSetting } = Mota.requireAll('var');
+    const CustomToolbar = Mota.require('class', 'CustomToolbar');
 
     ui.prototype.drawBook = function () {
         if (!core.isReplaying()) return mainUi.open('book');
@@ -35,18 +36,21 @@ export function init() {
     // todo: 多个状态栏分离与控制
     control.prototype.showStatusBar = function () {
         if (main.mode == 'editor') return;
-        const CustomToolbar = Mota.require('class', 'CustomToolbar');
         const defaultsTool = CustomToolbar.get('@defaults');
         core.removeFlag('hideStatusBar');
         if (!fixedUi.hasName('statusBar')) {
             fixedUi.open('statusBar');
         }
         defaultsTool?.show();
+        if (mainSetting.getValue('ui.tips')) {
+            if (!fixedUi.hasName('tips')) {
+                fixedUi.open('tips');
+            }
+        }
     };
 
     control.prototype.hideStatusBar = function (showToolbox) {
         if (main.mode == 'editor') return;
-        const CustomToolbar = Mota.require('class', 'CustomToolbar');
         const defaultsTool = CustomToolbar.get('@defaults');
 
         // 如果原本就是隐藏的，则先显示
@@ -56,6 +60,7 @@ export function init() {
         if (!showToolbox) {
             defaultsTool?.closeAll();
         }
+        fixedUi.closeByName('tips');
 
         core.setFlag('hideStatusBar', true);
         core.setFlag('showToolbox', showToolbox || null);

src/ui/index.ts

@@ -23,3 +23,4 @@ export { default as ToolEditor } from './toolEditor.vue';
 export { default as Load } from './load.vue';
 export { default as Danmaku } from './danmaku.vue';
 export { default as DanmakuEditor } from './danmakuEditor.vue';
+export { default as Tips } from './tips.vue';

src/ui/tips.vue

@@ -0,0 +1,46 @@
+<template>
+    <span ref="span" class="tip">{{ nowTip }}</span>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, onUnmounted, ref } from 'vue';
+import tips from '@/data/tips.json';
+
+const span = ref<HTMLSpanElement>();
+const nowTip = ref<string>();
+
+function changeTip() {
+    const tip = tips[Math.floor(Math.random() * tips.length)];
+    if (!tip) return;
+    nowTip.value = '小贴士：' + tip;
+}
+
+const interval = window.setInterval(changeTip, 30_000);
+
+function resize() {
+    const game = core.dom.gameDraw;
+    const right = window.innerWidth - (game.offsetLeft + game.offsetWidth);
+    const bottom = window.innerHeight - game.offsetTop;
+    if (!span.value) return;
+    span.value.style.right = `${right}px`;
+    span.value.style.bottom = `${bottom + 6}px`;
+}
+
+onMounted(() => {
+    window.addEventListener('resize', resize);
+    resize();
+    changeTip();
+});
+
+onUnmounted(() => {
+    window.removeEventListener('resize', resize);
+    window.clearInterval(interval);
+});
+</script>
+
+<style lang="less" scoped>
+.tip {
+    position: fixed;
+    font: 150% 'normal';
+}
+</style>