From 51b5320b6502c31c50eebca1dd1e2c6a309f7a42 Mon Sep 17 00:00:00 2001 From: ckcz123 Date: Thu, 24 Oct 2019 12:02:15 +0800 Subject: [PATCH] multiple drawTip --- _docs/api.md | 7 +++- libs/control.js | 35 +++++++++++++++++ libs/core.js | 8 +++- libs/events.js | 6 +-- libs/ui.js | 90 ++++++++++++++++++-------------------------- project/functions.js | 2 +- 6 files changed, 88 insertions(+), 60 deletions(-) diff --git a/_docs/api.md b/_docs/api.md index 6ab25607..e68ab4a3 100644 --- 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) diff --git a/libs/control.js b/libs/control.js index d1a07b25..6f0a3854 100644 --- 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); } diff --git a/libs/core.js b/libs/core.js index f204dc9f..895b0834 100644 --- 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 = { diff --git a/libs/events.js b/libs/events.js index 6da95c4b..95374ab1 100644 --- 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; } diff --git a/libs/ui.js b/libs/ui.js index fc4bb104..fb445e38 100644 --- 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}, diff --git a/project/functions.js b/project/functions.js index 65d7f6a0..eb865fb0 100644 --- 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 = [];