multiple drawTip

2019-10-24 12:02:15 +08:00 · 2019-10-24 12:02:15 +08:00 · 51b5320b65
commit 51b5320b65
parent 005440fc36
6 changed files with 88 additions and 60 deletions
--- a/_docs/api.md
+++ b/_docs/api.md
@ -1719,11 +1719,16 @@ core.clearUI()
 重置UI窗口。此函数将清掉所有的UI帧动画和光标，清空UI画布，并将alpha设为1。


-core.drawTip(text, id)
+core.drawTip(text, id, clear)
 在左上角以气泡的形式绘制一段提示。
 text为文字内容，仅支持${}的表达式计算，不支持换行和变色。
 id可选，为同时绘制的图标ID，如果不为null则会同时绘制该图标（仅对32x32的素材有效）。
 也可以使用状态栏的图标ID，例如lv, hp, up, save, settings等。
+如果clear为true，则会清空当前所有正在显示的提示。
+
+
+core.clearTip()
+清空当前所有正在显示的提示。


 core.drawText(content, callback)
--- a/libs/control.js
+++ b/libs/control.js
@ -22,6 +22,7 @@ control.prototype._init = function () {
    this.registerAnimationFrame("animate", true, this._animationFrame_animate);
    this.registerAnimationFrame("heroMoving", true, this._animationFrame_heroMoving);
    this.registerAnimationFrame("weather", true, this._animationFrame_weather);
+    this.registerAnimationFrame("tips", true, this._animateFrame_tips);
    this.registerAnimationFrame("parallelDo", false, this._animationFrame_parallelDo);
    this.registerAnimationFrame("checkConsoleOpened", true, this._animationFrame_checkConsoleOpened);
    // --- 注册系统的replay
@ -278,6 +279,40 @@ control.prototype._animationFrame_weather_fog = function () {
    }
 }

+control.prototype._animateFrame_tips = function (timestamp) {
+    var tips = core.animateFrame.tips;
+    if (timestamp - tips.time <= 30) return;
+    var delta = timestamp - tips.time;
+    tips.time = timestamp;
+    if (tips.list.length == 0) return;
+
+    var currentOffset = Math.max(tips.offset - 5, 0), firstOffset = null;
+    var currList = [];
+    core.setFont('data', "16px Arial");
+    core.setTextAlign('data', 'left');
+    core.clearMap('data', 0, 0, this.PIXEL, tips.lastSize * 50);
+    tips.lastLength = tips.list.length;
+
+    while (tips.list.length > 0) {
+        var one = tips.list.shift();
+        core.ui._drawTip_drawOne(one, currentOffset);
+        if (one.stage == 1) {
+            one.opacity += 0.05;
+            if (one.opacity >= 0.7) one.stage = 2;
+        } else if (one.stage == 2) {
+            one.time += delta;
+            if (one.time >= 2000) one.stage = 3;
+        } else one.opacity -= 0.05;
+        if (one.opacity > 0) {
+            currList.push(one);
+            if (firstOffset == null) firstOffset = currentOffset;
+        }
+        currentOffset += 50;
+    }
+    tips.list = currList;
+    tips.offset = firstOffset || 0;
+}
+
 control.prototype._animationFrame_parallelDo = function (timestamp) {
    core.control.controldata.parallelDo(timestamp);
 }
--- a/libs/core.js
+++ b/libs/core.js
@ -19,14 +19,12 @@ function core() {
        'icons': {},
    }
    this.timeout = {
-        'tipTimeout': null,
        'turnHeroTimeout': null,
        'onDownTimeout': null,
        'sleepTimeout': null,
    }
    this.interval = {
        'heroMoveInterval': null,
-        "tipAnimate": null,
        'onDownInterval': null,
    }
    this.animateFrame = {
@ -47,6 +45,12 @@ function core() {
            'data': null,
            'fog': null,
        },
+        "tips": {
+            'time': 0,
+            'offset': 0,
+            'list': [],
+            'lastSize': 0,
+        },
        "asyncId": {}
    }
    this.musicStatus = {
--- a/libs/events.js
+++ b/libs/events.js
@ -341,7 +341,7 @@ events.prototype.battle = function (id, x, y, force, callback) {
    if (!id) return core.clearContinueAutomaticRoute(callback);
    // 非强制战斗
    if (!core.enemys.canBattle(id, x, y) && !force && !core.status.event.id) {
-        core.drawTip("你打不过此怪物！");
+        core.drawTip("你打不过此怪物！", null, true);
        return core.clearContinueAutomaticRoute(callback);
    }
    // 自动存档
@ -401,8 +401,8 @@ events.prototype._openDoor_check = function (id, x, y, needKey) {
        var key = id.replace("Door", "Key");
        if (!core.hasItem(key)) {
            if (key != "specialKey")
-                core.drawTip("你没有" + ((core.material.items[key] || {}).name || "钥匙"));
-            else core.drawTip("无法开启此门");
+                core.drawTip("你没有" + ((core.material.items[key] || {}).name || "钥匙"), null, true);
+            else core.drawTip("无法开启此门", null, true);
            core.clearContinueAutomaticRoute();
            return false;
        }
--- a/libs/ui.js
+++ b/libs/ui.js
@ -458,66 +458,50 @@ ui.prototype.clearUI = function () {
 }

 ////// 左上角绘制一段提示 //////
-ui.prototype.drawTip = function (text, id) {
-    var textX, textY, width, height;
-    clearInterval(core.interval.tipAnimate);
-    core.setFont('data', "16px Arial");
-    core.setTextAlign('data', 'left');
+ui.prototype.drawTip = function (text, id, clear) {
+    if (clear) this.clearTip();
+    var one = {
+        text: text,
+        textX: 21,
+        width: 26 + core.calWidth('data', text, "16px Arial"),
+        opacity: 0.1,
+        stage: 1,
+        time: 0
+    };
    if (id != null) {
        var info = core.getBlockInfo(id);
-        if (info == null || !info.image || info.height != 32) {
+        if (info == null || !info.image) {
            // 检查状态栏图标
            if (core.statusBar.icons[id] instanceof Image) {
-                id = {image: core.statusBar.icons[id], posX: 0, posY: 0};
+                id = {image: core.statusBar.icons[id], posX: 0, posY: 0, height: 32};
            }
-            else id = null;
+            else info = null;
+        }
+        if (info != null) {
+            one.image = info.image;
+            one.posX = info.posX;
+            one.posY = info.posY;
+            one.height = info.height;
+            one.textX += 24;
+            one.width += 24;
        }
-        else id = info;
    }
-    if (!id) {
-        textX = 16;
-        textY = 18;
-        width = textX + core.calWidth('data', text) + 16;
-        height = 42;
-    }
-    else {
-        textX = 44;
-        textY = 18;
-        width = textX + core.calWidth('data', text) + 8;
-        height = 42;
-    }
-    this._drawTip_animate(text, id, textX, textY, width, height);
+    core.animateFrame.tips.list.push(one);
 }

-ui.prototype._drawTip_animate = function (text, info, textX, textY, width, height) {
-    var alpha = 0, hide = false;
-    core.interval.tipAnimate = window.setInterval(function () {
-        if (hide) alpha -= 0.1;
-        else alpha += 0.1;
-        core.clearMap('data', 5, 5, core.ui.PIXEL, height);
-        core.setAlpha('data', alpha);
-        core.fillRect('data', 5, 5, width, height, '#000');
-        if (info)
-            core.drawImage('data', info.image, info.posX * 32, info.posY * 32, 32, 32, 10, 8, 32, 32);
-        core.fillText('data', text, textX + 5, textY + 15, '#fff');
-        core.setAlpha('data', 1);
-        if (alpha > 0.6 || alpha < 0) {
-            if (hide) {
-                core.clearMap('data', 5, 5, core.ui.PIXEL, height);
-                clearInterval(core.interval.tipAnimate);
-                return;
-            }
-            else {
-                if (!core.timeout.tipTimeout) {
-                    core.timeout.tipTimeout = window.setTimeout(function () {
-                        hide = true;
-                        core.timeout.tipTimeout = null;
-                    }, 750);
-                }
-                alpha = 0.6;
-            }
-        }
-    }, 30);
+ui.prototype._drawTip_drawOne = function (one, offset) {
+    core.setAlpha('data', one.opacity);
+    core.fillRect('data', 5, offset+ 5, one.width, 42, '#000000');
+    if (one.image)
+        core.drawImage('data', one.image, one.posX * 32, one.posY * one.height, 32, 32, 10, offset + 10, 32, 32);
+    core.fillText('data', one.text, one.textX, offset + 33, '#FFFFFF');
+    core.setAlpha('data', 1);
+}
+
+ui.prototype.clearTip = function () {
+    core.animateFrame.tips.list = [];
+    core.animateFrame.tips.offset = 0;
+    core.animateFrame.tips.lastSize = 0;
 }

 ////// 地图中间绘制一段文字 //////
@ -1807,7 +1791,7 @@ ui.prototype.drawBookDetail = function (index) {
    if (!enemy) return;
    var content = info[1].join("\n");
    core.status.event.id = 'book-detail';
-    clearInterval(core.interval.tipAnimate);
+    core.clearTip();
    core.clearMap('data');

    var left = 10, width = this.PIXEL - 2 * left, right = left + width;
@ -2049,7 +2033,7 @@ ui.prototype.drawMaps = function (index, x, y) {
    core.status.event.id = 'viewMaps';
    this.clearUI();
    if (index == null) return this._drawMaps_drawHint();
-    clearTimeout(core.interval.tipAnimate);
+    core.clearTip();
    core.status.checkBlock.cache = {};
    var data = this._drawMaps_buildData(index, x, y);
    core.drawThumbnail(data.floorId, null, {damage: data.damage},
--- a/project/functions.js
+++ b/project/functions.js
@ -306,7 +306,7 @@ var functions_d6ad677b_427a_4623_b50f_a445a3b0ef8a =
 	var hint = "打败 " + enemy.name;
 	if (core.flags.enableMoney) hint += "，金币+" + money;
 	if (core.flags.enableExperience) hint += "，经验+" + experience;
-	core.drawTip(hint);
+	core.drawTip(hint, enemy.id);

 	// 事件的处理
 	var todo = [];