diff --git a/docs/api.md b/docs/api.md index 1da8bef5..c7ced584 100644 --- a/docs/api.md +++ b/docs/api.md @@ -162,7 +162,7 @@ core.trigger(x, y) [异步] core.clearMap(mapName) 清空某个画布图层。 -mapName可为'bg', 'event', 'fg', 'event2', 'hero', 'animate', 'weather', 'ui', 'data', 'all'之一。 +mapName可为'bg', 'event', 'hero', 'event2', 'fg', 'damage', 'animate', 'weather', 'ui', 'data', 'all'之一。 如果mapName为'all'，则为清空所有画布；否则只清空对应的画布。 diff --git a/docs/personalization.md b/docs/personalization.md index ae7dfd47..97dcbdbf 100644 --- a/docs/personalization.md +++ b/docs/personalization.md @@ -10,11 +10,12 @@ HTML5魔塔是使用画布（canvas）来绘制，存在若干个图层，它们 所有图层从低往高依次如下： -- bg：背景层；绘制地面素材，或者作为背景的图片素材 +- bg：背景层；绘制背景图层素材bgmap，和背景贴图 - event：事件层；所有事件（道具、墙壁、NPC、怪物等）都绘制在这一层进行处理 - hero：勇士层；主要用来绘制勇士 -- event2：事件2层；本层主要用来绘制48x32的图片素材的上半部分（避免和勇士错位），也可以用来绘制该层的前景图片素材 -- fg：显伤层；主要用来绘制怪物显伤和领域显伤 +- event2：事件2层；本层主要用来绘制48x32的图片素材的上半部分（避免和勇士错位） +- fg：前景层；绘制前景图层素材fgmap，和前景贴图 +- damage：显伤层；主要用来绘制怪物显伤和领域显伤 - animate：动画层；主要用来绘制动画。showImage事件绘制的图片也是在这一层。 - weather：天气层；主要用来绘制天气（雨/雪） - curtain：色调层；用来控制当前楼层的画面色调 diff --git a/index.html b/index.html index 9e394221..c97c9a8e 100644 --- a/index.html +++ b/index.html @@ -117,6 +117,7 @@ + diff --git a/libs/actions.js b/libs/actions.js index 01619092..de4ca739 100644 --- a/libs/actions.js +++ b/libs/actions.js @@ -1574,19 +1574,19 @@ actions.prototype.clickSwitchs = function (x,y) { break; case 3: core.flags.displayEnemyDamage=!core.flags.displayEnemyDamage; - core.updateFg(); + core.updateDamage(); core.setLocalStorage('enemyDamage', core.flags.displayEnemyDamage); core.ui.drawSwitchs(); break; case 4: core.flags.displayCritical=!core.flags.displayCritical; - core.updateFg(); + core.updateDamage(); core.setLocalStorage('critical', core.flags.displayCritical); core.ui.drawSwitchs(); break; case 5: core.flags.displayExtraDamage=!core.flags.displayExtraDamage; - core.updateFg(); + core.updateDamage(); core.setLocalStorage('extraDamage', core.flags.displayExtraDamage); core.ui.drawSwitchs(); break; diff --git a/libs/control.js b/libs/control.js index ff75214c..bd1db38c 100644 --- a/libs/control.js +++ b/libs/control.js @@ -1437,7 +1437,7 @@ control.prototype.snipe = function (snipes) { var animateCurrent = 0; var animateTime = 0; - core.canvas.fg.textAlign = 'left'; + core.canvas.damage.textAlign = 'left'; var animate=window.setInterval(function() { @@ -1455,22 +1455,22 @@ control.prototype.snipe = function (snipes) { var nowX = 32*x+dx, nowY = 32*y+dy; // 清空上一次 - core.clearMap('fg', nowX-2*scan[direction].x, nowY-2*scan[direction].y, 32, 32); + core.clearMap('damage', nowX-2*scan[direction].x, nowY-2*scan[direction].y, 32, 32); core.canvas.event.clearRect(nowX-2*scan[direction].x, nowY-2*scan[direction].y, 32, 32); core.canvas.event2.clearRect(nowX-2*scan[direction].x, nowY-2*scan[direction].y-32, 32, 32) core.drawBlock(snipe.block, animateCurrent, dx, dy); if (core.hasItem('book')) { - // drawFG - core.setFillStyle('fg', '#000000'); - core.canvas.fg.fillText(snipe.damage, nowX + 2, nowY + 30); - core.canvas.fg.fillText(snipe.damage, nowX, nowY + 30); - core.canvas.fg.fillText(snipe.damage, nowX + 2, nowY + 32); - core.canvas.fg.fillText(snipe.damage, nowX, nowY + 32); + // drawDamage + core.setFillStyle('damage', '#000000'); + core.canvas.damage.fillText(snipe.damage, nowX + 2, nowY + 30); + core.canvas.damage.fillText(snipe.damage, nowX, nowY + 30); + core.canvas.damage.fillText(snipe.damage, nowX + 2, nowY + 32); + core.canvas.damage.fillText(snipe.damage, nowX, nowY + 32); - core.setFillStyle('fg', snipe.color); - core.canvas.fg.fillText(snipe.damage, nowX + 1, nowY + 31); + core.setFillStyle('damage', snipe.color); + core.canvas.damage.fillText(snipe.damage, nowX + 1, nowY + 31); } }) @@ -1589,18 +1589,18 @@ control.prototype.setFg = function(color, time, callback) { } ////// 更新全地图显伤 ////// -control.prototype.updateFg = function () { +control.prototype.updateDamage = function () { if (!core.isset(core.status.thisMap) || !core.isset(core.status.thisMap.blocks)) return; // 更新显伤 var mapBlocks = core.status.thisMap.blocks; - core.clearMap('fg'); + core.clearMap('damage'); // 没有怪物手册 if (!core.hasItem('book')) return; - core.setFont('fg', "bold 11px Arial"); + core.setFont('damage', "bold 11px Arial"); var hero_hp = core.status.hero.hp; if (core.flags.displayEnemyDamage || core.flags.displayCritical) { - core.canvas.fg.textAlign = 'left'; + core.canvas.damage.textAlign = 'left'; for (var b = 0; b < mapBlocks.length; b++) { var x = mapBlocks[b].x, y = mapBlocks[b].y; if (core.isset(mapBlocks[b].event) && mapBlocks[b].event.cls.indexOf('enemy')==0 @@ -1637,14 +1637,14 @@ control.prototype.updateFg = function () { damage += "+"; } - core.setFillStyle('fg', '#000000'); - core.canvas.fg.fillText(damage, 32 * x + 2, 32 * (y + 1) - 2); - core.canvas.fg.fillText(damage, 32 * x, 32 * (y + 1) - 2); - core.canvas.fg.fillText(damage, 32 * x + 2, 32 * (y + 1)); - core.canvas.fg.fillText(damage, 32 * x, 32 * (y + 1)); + core.setFillStyle('damage', '#000000'); + core.canvas.damage.fillText(damage, 32 * x + 2, 32 * (y + 1) - 2); + core.canvas.damage.fillText(damage, 32 * x, 32 * (y + 1) - 2); + core.canvas.damage.fillText(damage, 32 * x + 2, 32 * (y + 1)); + core.canvas.damage.fillText(damage, 32 * x, 32 * (y + 1)); - core.setFillStyle('fg', color); - core.canvas.fg.fillText(damage, 32 * x + 1, 32 * (y + 1) - 1); + core.setFillStyle('damage', color); + core.canvas.damage.fillText(damage, 32 * x + 1, 32 * (y + 1) - 1); } // 临界显伤 @@ -1653,13 +1653,13 @@ control.prototype.updateFg = function () { if (critical.length>0) critical=critical[0]; critical = core.formatBigNumber(critical[0]); if (critical == '???') critical = '?'; - core.setFillStyle('fg', '#000000'); - core.canvas.fg.fillText(critical, 32 * x + 2, 32 * (y + 1) - 2 - 10); - core.canvas.fg.fillText(critical, 32 * x, 32 * (y + 1) - 2 - 10); - core.canvas.fg.fillText(critical, 32 * x + 2, 32 * (y + 1) - 10); - core.canvas.fg.fillText(critical, 32 * x, 32 * (y + 1) - 10); - core.setFillStyle('fg', '#FFFFFF'); - core.canvas.fg.fillText(critical, 32 * x + 1, 32 * (y + 1) - 1 - 10); + core.setFillStyle('damage', '#000000'); + core.canvas.damage.fillText(critical, 32 * x + 2, 32 * (y + 1) - 2 - 10); + core.canvas.damage.fillText(critical, 32 * x, 32 * (y + 1) - 2 - 10); + core.canvas.damage.fillText(critical, 32 * x + 2, 32 * (y + 1) - 10); + core.canvas.damage.fillText(critical, 32 * x, 32 * (y + 1) - 10); + core.setFillStyle('damage', '#FFFFFF'); + core.canvas.damage.fillText(critical, 32 * x + 1, 32 * (y + 1) - 1 - 10); } } @@ -1667,20 +1667,20 @@ control.prototype.updateFg = function () { } // 如果是领域&夹击 if (core.flags.displayExtraDamage) { - core.canvas.fg.textAlign = 'center'; + core.canvas.damage.textAlign = 'center'; for (var x=0;x0) { damage = core.formatBigNumber(damage); - core.setFillStyle('fg', '#000000'); - core.canvas.fg.fillText(damage, 32 * x + 17, 32 * (y + 1) - 13); - core.canvas.fg.fillText(damage, 32 * x + 15, 32 * (y + 1) - 15); - core.canvas.fg.fillText(damage, 32 * x + 17, 32 * (y + 1) - 15); - core.canvas.fg.fillText(damage, 32 * x + 15, 32 * (y + 1) - 13); + core.setFillStyle('damage', '#000000'); + core.canvas.damage.fillText(damage, 32 * x + 17, 32 * (y + 1) - 13); + core.canvas.damage.fillText(damage, 32 * x + 15, 32 * (y + 1) - 15); + core.canvas.damage.fillText(damage, 32 * x + 17, 32 * (y + 1) - 15); + core.canvas.damage.fillText(damage, 32 * x + 15, 32 * (y + 1) - 13); - core.setFillStyle('fg', '#FF7F00'); - core.canvas.fg.fillText(damage, 32 * x + 16, 32 * (y + 1) - 14); + core.setFillStyle('damage', '#FF7F00'); + core.canvas.damage.fillText(damage, 32 * x + 16, 32 * (y + 1) - 14); } } } @@ -2740,7 +2740,7 @@ control.prototype.updateStatusBar = function () { core.statusBar.image.settings.src = core.statusBar.icons.settings.src; } - core.updateFg(); + core.updateDamage(); } ////// 屏幕分辨率改变后重新自适应 ////// diff --git a/libs/core.js b/libs/core.js index ee47c077..0f010eec 100644 --- a/libs/core.js +++ b/libs/core.js @@ -73,7 +73,7 @@ function core() { scale: 1.0, } this.bigmap = { - canvas: ["bg", "event", "event2", "fg", "route"], + canvas: ["bg", "event", "event2", "fg", "damage", "route"], offsetX: 0, // in pixel offsetY: 0, width: 13, // map width and height @@ -799,8 +799,8 @@ core.prototype.setFg = function(color, time, callback) { } ////// 更新全地图显伤 ////// -core.prototype.updateFg = function () { - core.control.updateFg(); +core.prototype.updateDamage = function () { + core.control.updateDamage(); } ////// 测试是否拥有某个特殊属性 ////// diff --git a/styles.css b/styles.css index c64fdb36..bae823ee 100644 --- a/styles.css +++ b/styles.css @@ -280,6 +280,10 @@ span#poison, span#weak, span#curse, span#pickaxe, span#bomb, span#fly { z-index: 60; } +#damage { + z-index: 65; +} + #animate { z-index: 70; }