multiple drawTip

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

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

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 = {

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 || "钥匙"));
+                core.drawTip("你没有" + ((core.material.items[key] || {}).name || "钥匙"), null, true);
-            else core.drawTip("无法开启此门");
+            else core.drawTip("无法开启此门", null, true);
             core.clearContinueAutomaticRoute();
             return false;
         }

libs/ui.js

@@ -458,66 +458,50 @@ ui.prototype.clearUI = function () {
 }
 
 ////// 左上角绘制一段提示 //////
-ui.prototype.drawTip = function (text, id) {
+ui.prototype.drawTip = function (text, id, clear) {
-    var textX, textY, width, height;
+    if (clear) this.clearTip();
-    clearInterval(core.interval.tipAnimate);
+    var one = {
-    core.setFont('data', "16px Arial");
+        text: text,
-    core.setTextAlign('data', 'left');
+        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;
         }
-        else id = info;
+        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;
         }
-    if (!id) {
-        textX = 16;
-        textY = 18;
-        width = textX + core.calWidth('data', text) + 16;
-        height = 42;
     }
-    else {
+    core.animateFrame.tips.list.push(one);
-        textX = 44;
-        textY = 18;
-        width = textX + core.calWidth('data', text) + 8;
-        height = 42;
-    }
-    this._drawTip_animate(text, id, textX, textY, width, height);
 }
 
-ui.prototype._drawTip_animate = function (text, info, textX, textY, width, height) {
+ui.prototype._drawTip_drawOne = function (one, offset) {
-    var alpha = 0, hide = false;
+    core.setAlpha('data', one.opacity);
-    core.interval.tipAnimate = window.setInterval(function () {
+    core.fillRect('data', 5, offset+ 5, one.width, 42, '#000000');
-        if (hide) alpha -= 0.1;
+    if (one.image)
-        else alpha += 0.1;
+        core.drawImage('data', one.image, one.posX * 32, one.posY * one.height, 32, 32, 10, offset + 10, 32, 32);
-        core.clearMap('data', 5, 5, core.ui.PIXEL, height);
+    core.fillText('data', one.text, one.textX, offset + 33, '#FFFFFF');
-        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);
+ui.prototype.clearTip = function () {
-                clearInterval(core.interval.tipAnimate);
+    core.animateFrame.tips.list = [];
-                return;
+    core.animateFrame.tips.offset = 0;
-            }
+    core.animateFrame.tips.lastSize = 0;
-            else {
-                if (!core.timeout.tipTimeout) {
-                    core.timeout.tipTimeout = window.setTimeout(function () {
-                        hide = true;
-                        core.timeout.tipTimeout = null;
-                    }, 750);
-                }
-                alpha = 0.6;
-            }
-        }
-    }, 30);
 }
 
 ////// 地图中间绘制一段文字 //////
@@ -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},

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 = [];