Update canvas fg -> damage
This commit is contained in:
ckcz123
parent
3d188025ca
commit
97aa203d94
@ -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'，则为清空所有画布；否则只清空对应的画布。
|
||||
|
||||
|
||||
|
||||
@ -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：色调层；用来控制当前楼层的画面色调
|
||||
|
||||
@ -117,6 +117,7 @@
|
||||
<canvas class='gameCanvas' id='hero' width='416' height='416'></canvas>
|
||||
<canvas class='gameCanvas' id='event2' width='416' height='416'></canvas>
|
||||
<canvas class='gameCanvas' id='fg' width='416' height='416'></canvas>
|
||||
<canvas class='gameCanvas' id='damage' width='416' height='416'></canvas>
|
||||
<canvas class='gameCanvas' id='animate' width='416' height='416'></canvas>
|
||||
<canvas class='gameCanvas' id='weather' width='416' height='416'></canvas>
|
||||
<canvas class='gameCanvas' id='route' width='416' height='416'></canvas>
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;x<core.bigmap.width;x++) {
|
||||
for (var y=0;y<core.bigmap.height;y++) {
|
||||
var damage = core.status.checkBlock.damage[x+core.bigmap.width*y];
|
||||
if (damage>0) {
|
||||
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();
|
||||
}
|
||||
|
||||
////// 屏幕分辨率改变后重新自适应 //////
|
||||
|
||||
@ -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();
|
||||
}
|
||||
|
||||
////// 测试是否拥有某个特殊属性 //////
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user