jianghe2nd/mota-js
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

Merge pull request #284 from ckcz123/v2.0

Browse Source 
V2.0
This commit is contained in:
Zhang Chen 2018-12-20 15:40:47 +08:00 committed by GitHub
commit bf4ef95f24
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 244 additions and 178 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
_server/blockly/MotaAction.g4
View File

@ -1960,7 +1960,7 @@ ActionParser.prototype.parseAction = function() {
if (!/^\w+\.png$/.test(data.background))
data.background=setTextfunc(data.background);
this.next = MotaActionBlocks['setText_s'].xmlText([
data.position,data.offset,data.title,data.text,data.background,data.bold,data.titlefont,data.textfont,data.time||0,this.next]);
data.position,data.offset,data.title,data.text,data.background,data.bold,data.titlefont,data.textfont,data.time,this.next]);
break;
case "tip":
this.next = MotaActionBlocks['tip_s'].xmlText([

2
_server/editor.js
View File

@ -324,7 +324,7 @@ editor.prototype.updateMap = function () {
ctx.lineWidth = OFFSET;
ctx.strokeRect(x * 32 + OFFSET, y * 32 + OFFSET, 32 - OFFSET * 2, 32 - OFFSET * 2);
ctx.font = "30px Verdana";
ctx.textAlign = 'center'
ctx.textAlign = 'center';
ctx.fillStyle = 'red';
ctx.fillText("?", x * 32 + 16, y * 32 + 27);
return;

21
docs/api.md
View File

@ -516,15 +516,32 @@ core.ui.setAlpha(name, font) / core.ui.setOpacity(name, font)
尽量不要对系统画布使用setOpacity（因为会对已经绘制的内容产生影响），自定义创建的画布则不受此限制。
core.ui.setFillStyle(name, style) / core.ui.setStrokeStype(name, style)
core.ui.setFillStyle(name, style) / core.ui.setStrokeStyle(name, style)
设置一个画布的填充样式/描边样式。
core.ui.setTextAlign(name, align)
设置一个画布的文字对齐模式。
core.ui.calWidth(name, text, font)
计算一段文字在画布上的绘制宽度
font可选，如果存在则会先设置该画布上的字体。
core.ui.drawImage(name, image, x, y, w, h, x1, y1, w1, h1)
在一个画布上绘制图片。
name为画布名，可以是系统画布之一，也可以是任意自定义动态创建的画布名。
image为要绘制的图片，可以是一个全塔属性中定义的图片名（会从images中去获取），图片本身，或者一个画布。
后面的8个坐标参数与canvas的drawImage的八个参数完全相同。
请查看 http://www.w3school.com.cn/html5/canvas_drawimage.asp 了解更多。
core.ui.createCanvas(name, x, y, width, height, zIndex)
动态创建一个画布。name为要创建的画布名，如果已存在则会直接取用当前存在的。
x,y为创建的画布相对窗口左上角的像素坐标，width,height为创建的长宽。
zIndex为创建的纵向高度（关系到画布之间的覆盖），z值高的将覆盖z值低的；系统画布的z值可在个性化中查看。
创建一个画布后，可以通过 core.dymCanvas[name] 进行调用。
返回创建的画布的context，也可以通过core.dymCanvas[name]调用。
core.ui.findCanvas(name)

2
docs/personalization.md
View File

@ -34,7 +34,7 @@ HTML5魔塔是使用画布（canvas）来绘制，存在若干个图层，它们
例如：`core.createCanvas('test', 10, 20, 100, 200, 74)` 创建了一个名为test的画布，其左上角相对窗口的像素坐标为(10,20)，宽100高200，纵向高度74（在动画层和天气层之间）。
可以通过 `core.dymCanvas[name]` 来获得该画布的context；例如 `core.dymCanvas.test` 就是我们上面创建的画布的context，然后进行操作。
该函数会返回画布的context，也可以通过 `core.dymCanvas[name]` 来获得；例如 `core.dymCanvas.test` 就是我们上面创建的画布的context，然后进行操作。
也可以简单的使用`core.fillText()`, `core.fillRect()`, `core.strokeRect()`等等对画布进行任意绘制。

2
libs/actions.js
View File

@ -2686,7 +2686,7 @@ actions.prototype.loadPaint = function () {
var value = core.paint[core.status.floorId];
if (core.isset(value)) value = LZString.decompress(value).split(",");
core.utils.decodeCanvas(value, 32*core.bigmap.width, 32*core.bigmap.height);
core.canvas.paint.drawImage(core.bigmap.tempCanvas.canvas, 0, 0);
core.drawImage('paint', core.bigmap.tempCanvas.canvas, 0, 0);
core.drawTip("读取绘图文件成功");
})

27
libs/control.js
View File

@ -84,7 +84,7 @@ control.prototype.setRequestAnimationFrame = function () {
cv.clearRect(block.x * 32, block.y * 32, 32, 32);
if (core.isset(block.name)) {
if (block.name == 'bg') {
core.canvas.bg.drawImage(core.material.images.terrains, 0, blockIcon * 32, 32, 32, block.x * 32, block.y * 32, 32, 32);
core.drawImage('bg', core.material.images.terrains, 0, blockIcon * 32, 32, 32, block.x * 32, block.y * 32, 32, 32);
}
core.drawAutotile(cv, core.status.autotileAnimateObjs[block.name+"map"], block, 32, 0, 0, core.status.autotileAnimateObjs.status);
}
@ -575,10 +575,9 @@ control.prototype.setAutomaticRoute = function (destX, destY, stepPostfix) {
sx = Math.min(sx, t.x * 32); dx = Math.max(dx, t.x * 32);
sy = Math.min(sy, t.y * 32); dy = Math.max(dy, t.y * 32);
});
core.createCanvas('route', sx-core.bigmap.offsetX, sy-core.bigmap.offsetY, dx-sx+32, dy-sy+32, 95);
core.status.automaticRoute.offsetX = sx;
core.status.automaticRoute.offsetY = sy;
var ctx = core.dymCanvas['route'];
var ctx = core.createCanvas('route', sx-core.bigmap.offsetX, sy-core.bigmap.offsetY, dx-sx+32, dy-sy+32, 95);
ctx.fillStyle = '#bfbfbf';
ctx.strokeStyle = '#bfbfbf';
ctx.lineWidth = 8;
@ -601,13 +600,13 @@ control.prototype.setAutomaticRoute = function (destX, destY, stepPostfix) {
var step = 0, currStep = null;
moveStep.forEach(function (t) {
var dir = t.direction;
if (currStep == null || currStep == dir) {
step++; currStep = dir;
}
if (currStep == null || currStep == dir)
step++;
else {
core.status.automaticRoute.autoStepRoutes.push({'direction': currStep, 'step': step});
step = 1; currStep = dir;
step = 1;
}
currStep = dir;
});
core.status.automaticRoute.autoStepRoutes.push({'direction': currStep, 'step': step});
@ -740,7 +739,6 @@ control.prototype.setHeroMoveInterval = function (direction, x, y, callback) {
////// 实际每一步的行走过程 //////
control.prototype.moveAction = function (callback) {
if (core.interval.openDoorAnimate!=null) return; // 开门判断
if (core.status.heroMoving>0) return;
var direction = core.getHeroLoc('direction');
var x = core.getHeroLoc('x');
@ -965,7 +963,7 @@ control.prototype.jumpHero = function (ex, ey, time, callback) {
core.bigmap.offsetX = core.clamp(nowx - 32*6, 0, 32*core.bigmap.width-416);
core.bigmap.offsetY = core.clamp(nowy - 32*6, 0, 32*core.bigmap.height-416);
core.control.updateViewport();
core.canvas.hero.drawImage(core.material.images.hero, heroIcon[status] * 32, heroIcon.loc * height, 32, height,
core.drawImage('hero', core.material.images.hero, heroIcon[status] * 32, heroIcon.loc * height, 32, height,
nowx - core.bigmap.offsetX, nowy + 32-height - core.bigmap.offsetY, 32, height);
}
else {
@ -1057,7 +1055,7 @@ control.prototype.drawHero = function (direction, x, y, status, offset) {
core.clearAutomaticRouteNode(x+dx, y+dy);
core.canvas.hero.clearRect(x * 32 - core.bigmap.offsetX - 32, y * 32 - core.bigmap.offsetY - 32, 96, 96);
core.clearMap('hero', x * 32 - core.bigmap.offsetX - 32, y * 32 - core.bigmap.offsetY - 32, 96, 96);
var heroIconArr = core.material.icons.hero;
var drawObjs = [];
@ -1076,7 +1074,7 @@ control.prototype.drawHero = function (direction, x, y, status, offset) {
if (core.isset(core.status.hero.followers)) {
var index=1;
core.status.hero.followers.forEach(function (t) {
core.canvas.hero.clearRect(32*t.x-core.bigmap.offsetX-32, 32*t.y-core.bigmap.offsetY-32, 96, 96);
core.clearMap('hero', 32*t.x-core.bigmap.offsetX-32, 32*t.y-core.bigmap.offsetY-32, 96, 96);
if (core.isset(core.material.images.images[t.img])) {
drawObjs.push({
"img": core.material.images.images[t.img],
@ -1096,7 +1094,7 @@ control.prototype.drawHero = function (direction, x, y, status, offset) {
});
drawObjs.forEach(function (block) {
core.canvas.hero.drawImage(block.img, block.heroIcon[block.status]*32,
core.drawImage('hero', block.img, block.heroIcon[block.status]*32,
block.heroIcon.loc * block.height, 32, block.height,
block.posx, block.posy+32-block.height, 32, block.height);
});
@ -2018,9 +2016,12 @@ control.prototype.load = function (need) {
// 游戏开始前读档
if (!core.isPlaying()) {
core.dom.startPanel.style.display = 'none';
core.clearStatus();
core.clearMap('all');
core.deleteAllCanvas();
core.status.event = {'id': 'load', 'data': null};
core.status.lockControl = true;
core.dom.startPanel.style.display = 'none';
core.ui.drawSLPanel(10*page+offset);
return;
}

25
libs/core.js
View File

@ -24,7 +24,6 @@ function core() {
this.interval = {
'heroMoveInterval': null,
"tipAnimate": null,
'openDoorAnimate': null,
'onDownInterval': null,
}
this.animateFrame = {
@ -357,7 +356,6 @@ core.prototype.init = function (coreData, callback) {
core.initStatus.maps = core.maps.initMaps(core.floorIds);
core.setRequestAnimationFrame();
core.showStartAnimate();
if (main.mode=='play')
core.events.initGame();
@ -365,6 +363,8 @@ core.prototype.init = function (coreData, callback) {
if (core.isset(functions_d6ad677b_427a_4623_b50f_a445a3b0ef8a.plugins))
core.plugin = new functions_d6ad677b_427a_4623_b50f_a445a3b0ef8a.plugins.plugin();
core.showStartAnimate();
if (core.isset(callback)) callback();
});
@ -710,9 +710,24 @@ core.prototype.setStrokeStyle = function (name, style) {
core.ui.setStrokeStyle(name, style);
}
////// 设置某个canvas的对齐 //////
core.prototype.setTextAlign = function (name, align) {
core.ui.setTextAlign(name, align);
}
////// 计算某段文字的宽度 //////
core.prototype.calWidth = function (name, text, font) {
return core.ui.calWidth(name, text, font);
}
////// 绘制一张图片 //////
core.prototype.drawImage = function (name, image, x, y, w, h, x1, y1, w1, h1) {
core.ui.drawImage(name, image, x, y, w, h, x1, y1, w1, h1);
}
////// canvas创建 //////
core.prototype.createCanvas = function (name, x, y, width, height, z) {
core.ui.createCanvas(name, x, y, width, height, z);
return core.ui.createCanvas(name, x, y, width, height, z);
}
////// canvas查找 //////
@ -722,12 +737,12 @@ core.prototype.findCanvas = function (name) {
////// canvas重定位 //////
core.prototype.relocateCanvas = function (name, x, y) {
core.ui.relocateCanvas(name, x, y);
return core.ui.relocateCanvas(name, x, y);
}
////// canvas重置 //////
core.prototype.resizeCanvas = function (name, width, height) {
core.ui.resizeCanvas(name, width, height);
return core.ui.resizeCanvas(name, width, height);
}
////// canvas删除 //////

27
libs/events.js
View File

@ -838,6 +838,7 @@ events.prototype.doAction = function() {
var floorId=data.floorId || core.status.floorId;
if (floorId==core.status.floorId)
core.openDoor(null, x, y, false, function() {
core.lockControl();
core.events.doAction();
})
else {
@ -845,8 +846,6 @@ events.prototype.doAction = function() {
this.doAction();
}
break;
this.doAction();
break;
}
case "openShop": // 打开一个全局商店
if (core.status.replay.replaying) { // 正在播放录像，简单将visited置为true
@ -1260,7 +1259,7 @@ events.prototype.getItem = function (itemId, itemNum, itemX, itemY, callback) {
if (itemNum > 1) text += "x" + itemNum;
if (itemCls === 'items') text += core.items.getItemEffectTip(itemId);
core.drawTip(text, core.material.icons.items[itemId]);
core.canvas.event.clearRect(itemX * 32, itemY * 32, 32, 32);
core.clearMap('event', itemX * 32, itemY * 32, 32, 32);
core.updateStatusBar();
this.eventdata.afterGetItem(itemId, itemX, itemY, callback);
@ -1268,9 +1267,6 @@ events.prototype.getItem = function (itemId, itemNum, itemX, itemY, callback) {
////// 开门 //////
events.prototype.openDoor = function (id, x, y, needKey, callback) {
if (core.interval.openDoorAnimate!=null) return;
if (!core.isset(id)) id = core.getBlockId(x, y);
// 是否存在门
@ -1284,7 +1280,6 @@ events.prototype.openDoor = function (id, x, y, needKey, callback) {
if (core.status.automaticRoute.moveStepBeforeStop.length>=1)core.status.automaticRoute.moveStepBeforeStop[0].step-=core.status.automaticRoute.movedStep;
}
core.stopAutomaticRoute();
var speed = id.endsWith("Wall")?70:30;
if (needKey && id.endsWith("Door")) {
@ -1304,20 +1299,24 @@ events.prototype.openDoor = function (id, x, y, needKey, callback) {
core.playSound("door.mp3");
var state = 0;
var door = core.material.icons.animates[id];
core.lockControl();
core.stopHero();
core.stopAutomaticRoute();
core.status.replay.animate=true;
core.removeGlobalAnimate(x,y);
core.interval.openDoorAnimate = window.setInterval(function () {
var animate = window.setInterval(function () {
state++;
if (state == 4) {
clearInterval(core.interval.openDoorAnimate);
core.interval.openDoorAnimate=null;
clearInterval(animate);
core.removeBlock(x, y);
core.unLockControl();
core.status.replay.animate=false;
core.events.afterOpenDoor(id,x,y,callback);
return;
}
core.canvas.event.clearRect(32 * x, 32 * y, 32, 32);
core.canvas.event.drawImage(core.material.images.animates, 32 * state, 32 * door, 32, 32, 32 * x, 32 * y, 32, 32);
core.clearMap('event', 32 * x, 32 * y, 32, 32);
core.drawImage('event', core.material.images.animates, 32 * state, 32 * door, 32, 32, 32 * x, 32 * y, 32, 32);
}, speed / core.status.replay.speed)
}
@ -1534,9 +1533,9 @@ events.prototype.showImage = function (code, image, x, y, dw, dh, opacityVal, ti
var zIndex = code + 100;
time = time || 0;
var name = "image"+ zIndex;
core.createCanvas(name, x, y, image.width * dw, image.height * dh, zIndex);
var ctx = core.createCanvas(name, x, y, image.width * dw, image.height * dh, zIndex);
core.dymCanvas[name].drawImage(image, 0, 0, image.width * dw, image.height * dh);
ctx.drawImage(image, 0, 0, image.width * dw, image.height * dh);
if (time == 0)
core.setOpacity(name, opacityVal);
else {

50
libs/maps.js
View File

@ -379,17 +379,17 @@ maps.prototype.drawBlock = function (block, animate, dx, dy) {
if (block.name == 'bg') {
var groundId = (core.status.maps||core.floors)[core.status.floorId].defaultGround || "ground";
var blockIcon = core.material.icons.terrains[groundId];
core.canvas.bg.drawImage(core.material.images.terrains, 0, blockIcon * 32, 32, 32, block.x * 32, block.y * 32, 32, 32);
core.drawImage('bg', core.material.images.terrains, 0, blockIcon * 32, 32, 32, block.x * 32, block.y * 32, 32, 32);
}
core.canvas[block.name].drawImage(image, x * 32, y * 32, 32, 32, block.x * 32, block.y * 32, 32, 32);
return;
}
core.canvas.event.clearRect(block.x * 32 + dx, block.y * 32 + dy, 32, 32);
core.canvas.event.drawImage(image, x * 32, y * height + height-32, 32, 32, block.x * 32 + dx, block.y * 32 + dy, 32, 32);
core.clearMap('event', block.x * 32 + dx, block.y * 32 + dy, 32, 32);
core.drawImage('event', image, x * 32, y * height + height-32, 32, 32, block.x * 32 + dx, block.y * 32 + dy, 32, 32);
if (height>32) {
core.canvas.event2.clearRect(block.x * 32 + dx, block.y * 32 + 32 - height + dy, 32, height-32)
core.canvas.event2.drawImage(image, x * 32, y * height, 32, height-32, block.x * 32 + dx, block.y*32 + 32 - height + dy, 32, height-32);
core.clearMap('event2', block.x * 32 + dx, block.y * 32 + 32 - height + dy, 32, height-32)
core.drawImage('event2', image, x * 32, y * height, 32, height-32, block.x * 32 + dx, block.y*32 + 32 - height + dy, 32, height-32);
}
}
@ -485,7 +485,7 @@ maps.prototype.drawMap = function (floorId, callback) {
var blockIcon = core.material.icons.terrains[groundId];
for (var x = 0; x < width; x++) {
for (var y = 0; y < height; y++) {
core.canvas.bg.drawImage(core.material.images.terrains, 0, blockIcon * 32, 32, 32, x * 32, y * 32, 32, 32);
core.drawImage('bg', core.material.images.terrains, 0, blockIcon * 32, 32, 32, x * 32, y * 32, 32, 32);
}
}
@ -507,24 +507,24 @@ maps.prototype.drawMap = function (floorId, callback) {
if (/.*\.gif/i.test(p) && main.mode=='play') {
core.dom.gif.innerHTML = "";
var gif = new Image();
gif.src = core.material.images.images[p].src;
gif.src = image.src;
gif.style.position = 'absolute';
gif.style.left = (32*dx*core.domStyle.scale)+"px";
gif.style.top = (32*dy*core.domStyle.scale)+"px";
gif.style.width = core.material.images.images[p].width*core.domStyle.scale+"px";
gif.style.height = core.material.images.images[p].height*core.domStyle.scale+"px";
gif.style.width = image.width*core.domStyle.scale+"px";
gif.style.height = image.height*core.domStyle.scale+"px";
core.dom.gif.appendChild(gif);
}
else {
core.canvas.bg.drawImage(image, 32*dx, 32*dy, image.width, image.height);
core.drawImage('bg', image, 32*dx, 32*dy, image.width, image.height);
}
}
else if (t[3]==1)
core.canvas.fg.drawImage(image, 32*dx, 32*dy, image.width, image.height);
core.drawImage('fg', image, 32*dx, 32*dy, image.width, image.height);
else if (t[3]==2) {
core.canvas.fg.drawImage(image, 0, 0, image.width, image.height-32,
core.drawImage('fg', image, 0, 0, image.width, image.height-32,
32*dx, 32*dy, image.width, image.height-32);
core.canvas.bg.drawImage(image, 0, image.height-32, image.width, 32,
core.drawImage('bg', image, 0, image.height-32, image.width, 32,
32*dx, 32*dy + image.height - 32, image.width, 32);
}
}
@ -829,16 +829,16 @@ maps.prototype.__initBlockCanvas = function (block, height, x, y) {
}
if (damage != null) {
damageCanvas = "blockDamage"+x+"_"+y;
core.createCanvas(damageCanvas, 0, 0, 32, 32, 65);
core.dymCanvas[damageCanvas].textAlign = 'left';
core.dymCanvas[damageCanvas].font = "bold 11px Arial";
core.fillBoldText(core.dymCanvas[damageCanvas], damage, damageColor, 1, 31);
var ctx = core.createCanvas(damageCanvas, 0, 0, 32, 32, 65);
ctx.textAlign = 'left';
ctx.font = "bold 11px Arial";
core.fillBoldText(ctx, damage, damageColor, 1, 31);
if (core.flags.displayCritical) {
var critical = core.enemys.nextCriticals(block.event.id);
if (critical.length>0) critical=critical[0];
critical = core.formatBigNumber(critical[0], true);
if (critical == '???') critical = '?';
core.fillBoldText(core.dymCanvas[damageCanvas], critical, '#FFFFFF', 1, 21);
core.fillBoldText(ctx, critical, '#FFFFFF', 1, 21);
}
}
return {
@ -1145,11 +1145,11 @@ maps.prototype.hideBlock = function (x, y, floorId) {
// 删除动画，清除地图
if (floorId==core.status.floorId) {
core.removeGlobalAnimate(x, y);
core.canvas.event.clearRect(x * 32, y * 32, 32, 32);
core.clearMap('event', x * 32, y * 32, 32, 32);
var height = 32;
if (core.isset(block.block.event)) height=block.block.event.height||32;
if (height>32)
core.canvas.event2.clearRect(x * 32, y * 32 +32-height, 32, height-32);
core.clearMap('event2', x * 32, y * 32 +32-height, 32, height-32);
}
block.disable = true;
@ -1169,11 +1169,11 @@ maps.prototype.removeBlock = function (x, y, floorId) {
// 删除动画，清除地图
if (floorId==core.status.floorId) {
core.removeGlobalAnimate(x, y);
core.canvas.event.clearRect(x * 32, y * 32, 32, 32);
core.clearMap('event', x * 32, y * 32, 32, 32);
var height = 32;
if (core.isset(block.block.event)) height=block.block.event.height||32;
if (height>32)
core.canvas.event2.clearRect(x * 32, y * 32 +32-height, 32, height-32);
core.clearMap('event2', x * 32, y * 32 +32-height, 32, height-32);
}
// 删除Index
@ -1314,7 +1314,7 @@ maps.prototype.drawBoxAnimate = function () {
obj.status = ((obj.status||0)+1)%obj.animate;
core.clearMap('ui', obj.bgx, obj.bgy, obj.bgWidth, obj.bgHeight);
core.fillRect('ui', obj.bgx, obj.bgy, obj.bgWidth, obj.bgHeight, core.material.groundPattern);
core.canvas.ui.drawImage(obj.image, obj.status * 32, obj.pos,
core.drawImage('ui', obj.image, obj.status * 32, obj.pos,
32, obj.height, obj.x, obj.y, 32, obj.height);
}
}
@ -1333,7 +1333,7 @@ maps.prototype.drawAnimateFrame = function (animate, centerX, centerY, index) {
var cx = centerX+t.x, cy=centerY+t.y;
if (!t.mirror && !t.angle) {
core.canvas.animate.drawImage(image, cx-realWidth/2 - core.bigmap.offsetX, cy-realHeight/2 - core.bigmap.offsetY, realWidth, realHeight);
core.drawImage('animate', image, cx-realWidth/2 - core.bigmap.offsetX, cy-realHeight/2 - core.bigmap.offsetY, realWidth, realHeight);
}
else {
core.saveCanvas('animate');
@ -1342,7 +1342,7 @@ maps.prototype.drawAnimateFrame = function (animate, centerX, centerY, index) {
core.canvas.animate.rotate(-t.angle*Math.PI/180);
if (t.mirror)
core.canvas.animate.scale(-1,1);
core.canvas.animate.drawImage(image, -realWidth/2 - core.bigmap.offsetX, -realHeight/2 - core.bigmap.offsetY, realWidth, realHeight);
core.drawImage('animate', image, -realWidth/2 - core.bigmap.offsetX, -realHeight/2 - core.bigmap.offsetY, realWidth, realHeight);
core.loadCanvas('animate');
}
core.setAlpha('animate', 1);

252
libs/ui.js
View File

@ -174,6 +174,42 @@ ui.prototype.setStrokeStyle = function (name, style) {
if (ctx) ctx.strokeStyle = style;
}
////// 设置某个canvas的对齐 //////
ui.prototype.setTextAlign = function (name, align) {
var ctx = this.getContextByName(name);
if (ctx) ctx.textAlign = align;
}
////// 计算某段文字的宽度 //////
ui.prototype.calWidth = function (name, text, font) {
var ctx = this.getContextByName(name);
if (ctx) {
if (core.isset(font)) ctx.font = font;
return ctx.measureText(text).width;
}
return 0;
}
////// 绘制一张图片 //////
ui.prototype.drawImage = function (name, image, x, y, w, h, x1, y1, w1, h1) {
var ctx = this.getContextByName(name);
if (!ctx) return;
if (typeof image == 'string') {
image = core.material.images.images[image];
if (!core.isset(image)) return;
}
// 只能接受2, 4, 8个参数
if (core.isset(x) && core.isset(y) && core.isset(w) && core.isset(h) && core.isset(x1) && core.isset(y1) && core.isset(w1) && core.isset(h1)) {
ctx.drawImage(image, x, y, w, h, x1, y1, w1, h1);
}
else if (core.isset(x) && core.isset(y) && core.isset(w) && core.isset(h)) {
ctx.drawImage(image, x, y, w, h);
}
else if (core.isset(x) && core.isset(y)) {
ctx.drawImage(image, x, y);
}
}
///////////////// UI绘制
@ -203,17 +239,17 @@ ui.prototype.drawTip = function (text, itemIcon) {
var textX, textY, width, height, hide = false, alpha = 0;
clearInterval(core.interval.tipAnimate);
core.setFont('data', "16px Arial");
core.canvas.data.textAlign = 'left';
core.setTextAlign('data', 'left');
if (!core.isset(itemIcon)) {
textX = 16;
textY = 18;
width = textX + core.canvas.data.measureText(text).width + 16;
width = textX + core.calWidth('data', text) + 16;
height = 42;
}
else {
textX = 44;
textY = 18;
width = textX + core.canvas.data.measureText(text).width + 8;
width = textX + core.calWidth('data', text) + 8;
height = 42;
}
core.interval.tipAnimate = window.setInterval(function () {
@ -227,7 +263,7 @@ ui.prototype.drawTip = function (text, itemIcon) {
core.setAlpha('data', alpha);
core.fillRect('data', 5, 5, width, height, '#000');
if (core.isset(itemIcon)) {
core.canvas.data.drawImage(core.material.images.items, 0, itemIcon * 32, 32, 32, 10, 8, 32, 32);
core.drawImage('data', core.material.images.items, 0, itemIcon * 32, 32, 32, 10, 8, 32, 32);
}
core.fillText('data', text, textX + 5, textY + 15, '#fff');
core.setAlpha('data', 1);
@ -367,15 +403,8 @@ ui.prototype.getTitleAndIcon = function (content) {
// 绘制选择光标
ui.prototype.drawWindowSelector = function(background,x,y,w,h) {
w = Math.round(w), h = Math.round(h);
if (core.isset(core.dymCanvas.selector)) {
core.relocateCanvas("selector", x, y);
core.resizeCanvas("selector", w, h);
}
else {
core.ui.createCanvas("selector", x, y, w, h, 165);
}
var dstImage = core.ui.createCanvas("selector", x, y, w, h, 165);
core.setOpacity("selector", 0.8);
var dstImage = core.dymCanvas.selector;
// back
dstImage.drawImage(background, 130, 66, 28, 28, 2, 2,w-4,h-4);
// corner
@ -393,7 +422,8 @@ ui.prototype.drawWindowSelector = function(background,x,y,w,h) {
// 绘制皮肤
ui.prototype.drawWindowSkin = function(background,canvas,x,y,w,h,direction,px,py) {
// 仿RM窗口皮肤 ↓
var dstImage = core.canvas[canvas];
var dstImage = core.getContextByName(canvas);
if (!dstImage) return;
var dx = 0, dy = 0;
// 绘制背景
dstImage.drawImage(background, 0, 0, 128, 128, x+2, y+2, w-4, h-4);
@ -436,7 +466,7 @@ ui.prototype.calTextBoxWidth = function (canvas, content, min_width, max_width)
// 如果不存在手动换行，则二分自动换行
if (allLines.length == 1) {
var w = core.canvas[canvas].measureText(allLines[0]).width;
var w = core.calWidth(canvas, allLines[0]);
if (w<min_width*2.3) return core.clamp(w / 1.4, min_width, max_width);
if (w<max_width*2.2) return core.clamp(w / 2.4, min_width, max_width);
return core.clamp(w / 3.4, min_width, max_width);
@ -457,7 +487,7 @@ ui.prototype.calTextBoxWidth = function (canvas, content, min_width, max_width)
else {
var w = 0;
allLines.forEach(function (t) {
w = Math.max(w, core.canvas[canvas].measureText(t).width);
w = Math.max(w, core.calWidth(canvas, t));
});
return core.clamp(w, min_width, max_width);
}
@ -545,9 +575,9 @@ ui.prototype.drawTextBox = function(content, showAll) {
if (!core.isset(img)) return "";
// 绘制
if (ss.length==3)
core.canvas.ui.drawImage(img, parseFloat(ss[1]), parseFloat(ss[2]));
core.drawImage('ui', img, parseFloat(ss[1]), parseFloat(ss[2]));
else
core.canvas.ui.drawImage(img, 0, 0, img.width, img.height, parseFloat(ss[1]), parseFloat(ss[2]), parseFloat(ss[3]), parseFloat(ss[4]));
core.drawImage('ui', img, 0, 0, img.width, img.height, parseFloat(ss[1]), parseFloat(ss[2]), parseFloat(ss[3]), parseFloat(ss[4]));
return "";
});
@ -565,6 +595,8 @@ ui.prototype.drawTextBox = function(content, showAll) {
// 对话框效果：改为动态计算
if (core.isset(px) && core.isset(py)) {
var min_width = 220 - leftSpace, max_width = validWidth;
// 无行走图或头像，则可以适当缩小min_width
if (leftSpace == 20) min_width = 160;
core.setFont('ui', font);
validWidth = this.calTextBoxWidth('ui', realContent, min_width, max_width);
width = validWidth + leftSpace + rightSpace;
@ -643,7 +675,7 @@ ui.prototype.drawTextBox = function(content, showAll) {
core.setAlpha('ui', 1);
}
// 名称
core.canvas.ui.textAlign = "left";
core.setTextAlign('ui', 'left');
var content_top = top + 15 + textfont;
if (core.isset(id)) {
@ -661,7 +693,7 @@ ui.prototype.drawTextBox = function(content, showAll) {
core.clearMap('ui', left + 15, top + 40, 32, heroHeight);
core.fillRect('ui', left + 15, top + 40, 32, heroHeight, core.material.groundPattern);
var heroIcon = core.material.icons.hero['down'];
core.canvas.ui.drawImage(core.material.images.hero, heroIcon.stop * 32, heroIcon.loc * heroHeight, 32, heroHeight, left+15, top+40, 32, heroHeight);
core.drawImage('ui', core.material.images.hero, heroIcon.stop * 32, heroIcon.loc * heroHeight, 32, heroHeight, left+15, top+40, 32, heroHeight);
}
else {
core.fillText('ui', name, content_left, top + 8 + titlefont, null, 'bold '+titlefont+'px '+globalFont);
@ -681,7 +713,7 @@ ui.prototype.drawTextBox = function(content, showAll) {
}
}
if (core.isset(image) && !core.isset(icon)) {
core.canvas.ui.drawImage(image, 0, 0, image.width, image.height, left+10, top+10, 70, 70);
core.drawImage('ui', image, 0, 0, image.width, image.height, left+10, top+10, 70, 70);
}
var offsetx = content_left, offsety = content_top;
@ -722,7 +754,7 @@ ui.prototype.drawTextBox = function(content, showAll) {
return drawNext();
}
// 检查是不是自动换行
var charwidth = core.canvas.ui.measureText(ch).width;
var charwidth = core.calWidth('ui', ch);
if (offsetx + charwidth > content_left + validWidth) {
index--;
offsetx = content_left;
@ -790,7 +822,7 @@ ui.prototype.drawScrollText = function (content, time, callback) {
core.clearMap('ui');
var per_pixel = 1, per_time = time * per_pixel / (416+height);
var currH = 416;
core.canvas.ui.drawImage(tempCanvas.canvas, 0, currH);
core.drawImage('ui', tempCanvas.canvas, 0, currH);
var animate = setInterval(function () {
core.clearMap('ui');
currH -= per_pixel;
@ -800,7 +832,7 @@ ui.prototype.drawScrollText = function (content, time, callback) {
if (core.isset(callback)) callback();
return;
}
core.canvas.ui.drawImage(tempCanvas.canvas, 0, currH);
core.drawImage('ui', tempCanvas.canvas, 0, currH);
}, per_time);
core.animateFrame.asyncId[animate] = true;
@ -833,7 +865,7 @@ ui.prototype.drawChoices = function(content, choices) {
var globalFont = core.status.globalAttribute.font;
core.setFont('ui', "bold 17px "+globalFont);
for (var i = 0; i < choices.length; i++) {
width = Math.max(width, core.canvas.ui.measureText(core.replaceText(choices[i].text || choices[i])).width + 30);
width = Math.max(width, core.calWidth('ui', core.replaceText(choices[i].text || choices[i]))+30);
}
var left=parseInt((416 - width) / 2); // 左边界
@ -884,7 +916,7 @@ ui.prototype.drawChoices = function(content, choices) {
var content_top = top + 35;
if (core.isset(id)) {
core.canvas.ui.textAlign = "center";
core.setTextAlign('ui', 'center');
content_top = top+55;
var title_offset = left+width/2;
@ -900,7 +932,7 @@ ui.prototype.drawChoices = function(content, choices) {
core.clearMap('ui', left + 15, top + 30, 32, heroHeight);
core.fillRect('ui', left + 15, top + 30, 32, heroHeight, core.material.groundPattern);
var heroIcon = core.material.icons.hero['down'];
core.canvas.ui.drawImage(core.material.images.hero, heroIcon.stop * 32, heroIcon.loc *heroHeight, 32, heroHeight, left+15, top+30, 32, heroHeight);
core.drawImage('ui', core.material.images.hero, heroIcon.stop * 32, heroIcon.loc *heroHeight, 32, heroHeight, left+15, top+30, 32, heroHeight);
}
else {
core.fillText('ui', name, title_offset, top + 27, titleColor, 'bold 19px '+globalFont);
@ -918,7 +950,7 @@ ui.prototype.drawChoices = function(content, choices) {
}
}
core.canvas.ui.textAlign = "left";
core.setTextAlign('ui', 'left');
for (var i=0;i<contents.length;i++) {
core.fillText('ui', contents[i], content_left, content_top, textColor, 'bold 15px '+globalFont);
content_top+=20;
@ -926,7 +958,7 @@ ui.prototype.drawChoices = function(content, choices) {
}
// 选项
core.canvas.ui.textAlign = "center";
core.setTextAlign('ui', 'center');
for (var i = 0; i < choices.length; i++) {
core.setFillStyle('ui', choices[i].color || textColor);
core.fillText('ui', core.replaceText(choices[i].text || choices[i]), 208, choice_top + 32 * i, null, "bold 17px "+globalFont);
@ -936,7 +968,7 @@ ui.prototype.drawChoices = function(content, choices) {
if (!core.isset(core.status.event.selection)) core.status.event.selection=0;
while (core.status.event.selection<0) core.status.event.selection+=choices.length;
while (core.status.event.selection>=choices.length) core.status.event.selection-=choices.length;
var len = core.canvas.ui.measureText(core.replaceText(choices[core.status.event.selection].text || choices[core.status.event.selection])).width;
var len = core.calWidth('ui', core.replaceText(choices[core.status.event.selection].text || choices[core.status.event.selection]));
if (isWindowSkin)
this.drawWindowSelector(background, 208-len/2-5, choice_top + 32 * core.status.event.selection - 20, len+10, 28);
else
@ -976,7 +1008,7 @@ ui.prototype.drawConfirmBox = function (text, yesCallback, noCallback) {
var lines = contents.length;
var max_length = 0;
for (var i in contents) {
max_length = Math.max(max_length, core.canvas.ui.measureText(contents[i]).width);
max_length = Math.max(max_length, core.calWidth('ui', contents[i]));
}
var left = Math.min(208 - 40 - parseInt(max_length / 2), 100);
@ -994,7 +1026,7 @@ ui.prototype.drawConfirmBox = function (text, yesCallback, noCallback) {
}
core.setAlpha('ui', 1);
core.canvas.ui.textAlign = "center";
core.setTextAlign('ui', 'center');
for (var i in contents) {
core.fillText('ui', contents[i], 208, top + 50 + i*30, textColor);
}
@ -1002,7 +1034,7 @@ ui.prototype.drawConfirmBox = function (text, yesCallback, noCallback) {
core.fillText('ui', "确定", 208 - 38, bottom - 35, null, "bold 17px "+globalFont);
core.fillText('ui', "取消", 208 + 38, bottom - 35);
var len=core.canvas.ui.measureText("确定").width;
var len=core.calWidth('ui', "确定");
var strokeLeft = 208 + (76*core.status.event.selection-38) - parseInt(len/2) - 5;
@ -1161,7 +1193,7 @@ ui.prototype.drawBattleAnimate = function(monsterId, callback) {
core.strokeRect('ui', left + right - margin - boxWidth - 1 , top+margin-1, boxWidth+2, monsterHeight+boxWidth-32+2);
// 名称
core.canvas.ui.textAlign='center';
core.setTextAlign('ui', 'center');
core.fillText('ui', core.status.hero.name, left+margin+boxWidth/2, top+margin+heroHeight+40, '#FFD700', 'bold 22px '+globalFont);
core.fillText('ui', "怪物", left+right-margin-boxWidth/2, top+margin+monsterHeight+40);
for (var i=0, j=0; i<specialTexts.length;i++) {
@ -1174,7 +1206,7 @@ ui.prototype.drawBattleAnimate = function(monsterId, callback) {
core.clearMap('ui', left + margin, top + margin, boxWidth, heroHeight+boxWidth-32);
core.fillRect('ui', left + margin, top + margin, boxWidth, heroHeight+boxWidth-32, core.material.groundPattern);
var heroIcon = core.material.icons.hero['down'];
core.canvas.ui.drawImage(core.material.images.hero, heroIcon.stop * 32, heroIcon.loc *heroHeight, 32, heroHeight, left+margin+(boxWidth-32)/2, top+margin+(boxWidth-32)/2, 32, heroHeight);
core.drawImage('ui', core.material.images.hero, heroIcon.stop * 32, heroIcon.loc *heroHeight, 32, heroHeight, left+margin+(boxWidth-32)/2, top+margin+(boxWidth-32)/2, 32, heroHeight);
// 怪物的
core.status.boxAnimateObjs = [];
core.status.boxAnimateObjs.push({
@ -1192,80 +1224,80 @@ ui.prototype.drawBattleAnimate = function(monsterId, callback) {
var right_start = right_end-lineWidth;
// 勇士的线
core.canvas.ui.textAlign='left';
core.setTextAlign('ui', 'left');
var textTop = top+margin+10;
core.fillText('ui', "生命值", left_start, textTop, '#DDDDDD', '16px '+globalFont);
core.drawLine('ui', left_start, textTop+8, left_end, textTop+8, '#FFFFFF', 2);
core.canvas.data.textAlign='right';
core.setTextAlign('data', 'right');
core.fillText('data', hero_hp, left_end, textTop+26, '#DDDDDD', 'bold 16px '+globalFont);
textTop+=lineHeight;
core.canvas.ui.textAlign='left';
core.setTextAlign('ui', 'left');
core.fillText('ui', "攻击", left_start, textTop, '#DDDDDD', '16px '+globalFont);
core.drawLine('ui', left_start, textTop+8, left_end, textTop+8, '#FFFFFF', 2);
core.canvas.ui.textAlign='right';
core.setTextAlign('ui', 'right');
core.fillText('ui', hero_atk, left_end, textTop+26, '#DDDDDD', 'bold 16px '+globalFont);
textTop+=lineHeight;
core.canvas.ui.textAlign='left';
core.setTextAlign('ui', 'left');
core.fillText('ui', "防御", left_start, textTop, '#DDDDDD', '16px '+globalFont);
core.drawLine('ui', left_start, textTop+8, left_end, textTop+8, '#FFFFFF', 2);
core.canvas.ui.textAlign='right';
core.setTextAlign('ui', 'right');
core.fillText('ui', hero_def, left_end, textTop+26, '#DDDDDD', 'bold 16px '+globalFont);
if (core.flags.enableMDef) {
textTop += lineHeight;
core.canvas.ui.textAlign='left';
core.setTextAlign('ui', 'left');
core.fillText('ui', "护盾", left_start, textTop, '#DDDDDD', '16px '+globalFont);
core.drawLine('ui', left_start, textTop + 8, left_end, textTop + 8, '#FFFFFF', 2);
core.canvas.data.textAlign='right';
core.setTextAlign('data', 'right');
core.fillText('data', hero_mdef, left_end, textTop+26, '#DDDDDD', 'bold 16px '+globalFont);
}
// 怪物的线
core.canvas.ui.textAlign='right';
core.setTextAlign('ui', 'right');
var textTop = top+margin+10;
core.fillText('ui', "生命值", right_end, textTop, '#DDDDDD', '16px '+globalFont);
core.drawLine('ui', right_start, textTop+8, right_end, textTop+8, '#FFFFFF', 2);
core.canvas.data.textAlign='left';
core.setTextAlign('data', 'left');
core.fillText('data', mon_hp, right_start, textTop+26, '#DDDDDD', 'bold 16px '+globalFont);
textTop+=lineHeight;
core.canvas.ui.textAlign='right';
core.setTextAlign('ui', 'right');
core.fillText('ui', "攻击", right_end, textTop, '#DDDDDD', '16px '+globalFont);
core.drawLine('ui', right_start, textTop+8, right_end, textTop+8, '#FFFFFF', 2);
core.canvas.ui.textAlign='left';
core.setTextAlign('ui', 'left');
core.fillText('ui', mon_atk, right_start, textTop+26, '#DDDDDD', 'bold 16px '+globalFont);
textTop+=lineHeight;
core.canvas.ui.textAlign='right';
core.setTextAlign('ui', 'right');
core.fillText('ui', "防御", right_end, textTop, '#DDDDDD', '16px '+globalFont);
core.drawLine('ui', right_start, textTop+8, right_end, textTop+8, '#FFFFFF', 2);
core.canvas.ui.textAlign='left';
core.setTextAlign('ui', 'left');
core.fillText('ui', mon_def, right_start, textTop+26, '#DDDDDD', 'bold 16px '+globalFont);
if (core.flags.enableMoney) {
textTop += lineHeight;
core.canvas.ui.textAlign = 'right';
core.setTextAlign('ui', 'right');
core.fillText('ui', "金币", right_end, textTop, '#DDDDDD', '16px '+globalFont);
core.drawLine('ui', right_start, textTop + 8, right_end, textTop + 8, '#FFFFFF', 2);
core.canvas.ui.textAlign = 'left';
core.setTextAlign('ui', 'left');
core.fillText('ui', mon_money, right_start, textTop + 26, '#DDDDDD', 'bold 16px '+globalFont);
}
if (core.flags.enableExperience) {
textTop += lineHeight;
core.canvas.ui.textAlign='right';
core.setTextAlign('ui', 'right');
core.fillText('ui', "经验", right_end, textTop, '#DDDDDD', '16px '+globalFont);
core.drawLine('ui', right_start, textTop + 8, right_end, textTop + 8, '#FFFFFF', 2);
core.canvas.ui.textAlign='left';
core.setTextAlign('ui', 'left');
core.fillText('ui', mon_exp, right_start, textTop+26, '#DDDDDD', 'bold 16px '+globalFont);
}
core.canvas.ui.textAlign='left';
core.setTextAlign('ui', 'left');
core.fillText("ui", "V", left_end+8, 208-15, "#FFFFFF", "italic bold 40px "+globalFont);
core.canvas.ui.textAlign='right';
core.setTextAlign('ui', 'right');
core.fillText("ui", "S", right_start-8, 208+15, "#FFFFFF", "italic bold 40px "+globalFont);
var battleInterval = setInterval(function() {
@ -1286,7 +1318,7 @@ ui.prototype.drawBattleAnimate = function(monsterId, callback) {
// 更新怪物伤害
core.clearMap('data', right_start, top+margin+10, lineWidth, 40);
core.canvas.data.textAlign='left';
core.setTextAlign('data', 'left');
core.fillText('data', mon_hp, right_start, top+margin+10+26, '#DDDDDD', 'bold 16px '+globalFont);
// 反击
@ -1299,7 +1331,7 @@ ui.prototype.drawBattleAnimate = function(monsterId, callback) {
}
// 更新勇士数据
core.clearMap('data', left_start, top+margin+10, lineWidth, 40);
core.canvas.data.textAlign='right';
core.setTextAlign('data', 'right');
core.fillText('data', hero_hp, left_end, top+margin+10+26, '#DDDDDD', 'bold 16px '+globalFont);
if (core.flags.enableMDef) {
@ -1328,7 +1360,7 @@ ui.prototype.drawBattleAnimate = function(monsterId, callback) {
}
// 更新勇士数据
core.clearMap('data', left_start, top+margin+10, lineWidth, 40);
core.canvas.data.textAlign='right';
core.setTextAlign('data', 'right');
core.fillText('data', hero_hp, left_end, top+margin+10+26, '#DDDDDD', 'bold 16px '+globalFont);
if (core.flags.enableMDef) {
@ -1379,8 +1411,7 @@ ui.prototype.drawWaiting = function(text) {
var textColor = core.arrayToRGBA(core.status.textAttribute.text);
var globalFont = core.status.globalAttribute.font;
core.setFont('ui', "bold 19px "+globalFont);
var text_length = core.canvas.ui.measureText(text).width;
var text_length = core.calWidth('ui', text, "bold 19px "+globalFont);
var right = Math.max(text_length+50, 220);
var left = 208-parseInt(right/2), top = 208 - 32 - 16, bottom = 416 - 2 * top;
@ -1396,7 +1427,7 @@ ui.prototype.drawWaiting = function(text) {
}
core.setAlpha('ui', 1);
core.canvas.ui.textAlign = "center";
core.setTextAlign('ui', 'center');
core.fillText('ui', text, 208, top + 56, textColor);
}
@ -1458,15 +1489,14 @@ ui.prototype.drawPagination = function (page, totalPage, top) {
if (!core.isset(top)) top=12;
var globalFont = (core.status.globalAttribute||core.initStatus.globalAttribute).font;
core.setFont('ui', 'bold 15px '+globalFont);
core.setFillStyle('ui', '#DDDDDD');
var length = core.canvas.ui.measureText(page + " / " + page).width;
var length = core.calWidth('ui', page + " / " + page, 'bold 15px '+globalFont);
core.canvas.ui.textAlign = 'left';
core.setTextAlign('ui', 'left');
core.fillText('ui', page + " / " + totalPage, parseInt((416 - length) / 2), top*32+19);
core.canvas.ui.textAlign = 'center';
core.setTextAlign('ui', 'center');
if (page > 1)
core.fillText('ui', '上一页', 208 - 80, top*32+19);
if (page < totalPage)
@ -1510,14 +1540,14 @@ ui.prototype.drawBook = function (index) {
core.fillRect('ui', 0, 0, 416, 416);
core.setAlpha('ui', 1);
core.canvas.ui.textAlign = 'left';
core.setTextAlign('ui', 'left');
var globalFont = core.status.globalAttribute.font;
core.setFont('ui', 'bold 15px '+globalFont);
if (enemys.length == 0) {
core.fillText('ui', "本层无怪物", 83, 222, '#999999', "bold 50px "+globalFont);
// 退出
core.canvas.ui.textAlign = 'center';
core.setTextAlign('ui', 'center');
core.fillText('ui', '返回游戏', 370, 403,'#DDDDDD', 'bold 15px '+globalFont);
return;
}
@ -1552,7 +1582,7 @@ ui.prototype.drawBook = function (index) {
});
// 数据
core.canvas.ui.textAlign = "center";
core.setTextAlign('ui', 'center');
if (enemy.specialText=='') {
core.fillText('ui', enemy.name, 115, 62 * i + 47, '#DDDDDD', 'bold 17px '+globalFont);
@ -1561,7 +1591,7 @@ ui.prototype.drawBook = function (index) {
core.fillText('ui', enemy.name, 115, 62 * i + 40, '#DDDDDD', 'bold 17px '+globalFont);
core.fillText('ui', enemy.specialText, 115, 62 * i + 62, '#FF6A6A', 'bold 15px '+globalFont);
}
core.canvas.ui.textAlign = "left";
core.setTextAlign('ui', 'left');
core.fillText('ui', '生命', 165, 62 * i + 32, '#DDDDDD', '13px '+globalFont);
core.fillText('ui', core.formatBigNumber(enemy.hp||0), 195, 62 * i + 32, '#DDDDDD', 'bold 13px '+globalFont);
core.fillText('ui', '攻击', 255, 62 * i + 32, '#DDDDDD', '13px '+globalFont);
@ -1579,7 +1609,7 @@ ui.prototype.drawBook = function (index) {
// 加点
if (core.flags.enableAddPoint) {
core.canvas.ui.textAlign = "left";
core.setTextAlign('ui', 'left');
core.fillText('ui', '加点', expOffset, 62 * i + 50, '#DDDDDD', '13px '+globalFont);
core.fillText('ui', core.formatBigNumber(enemy.point||0), expOffset + 30, 62 * i + 50, '#DDDDDD', 'bold 13px '+globalFont);
expOffset = 255;
@ -1587,7 +1617,7 @@ ui.prototype.drawBook = function (index) {
}
if (core.flags.enableExperience && line_cnt<2) {
core.canvas.ui.textAlign = "left";
core.setTextAlign('ui', 'left');
core.fillText('ui', '经验', expOffset, 62 * i + 50, '#DDDDDD', '13px '+globalFont);
core.fillText('ui', core.formatBigNumber(enemy.experience||0), expOffset + 30, 62 * i + 50, '#DDDDDD', 'bold 13px '+globalFont);
line_cnt++;
@ -1597,7 +1627,7 @@ ui.prototype.drawBook = function (index) {
if (line_cnt==1) damageOffset=326;
if (line_cnt==2) damageOffset=361;
core.canvas.ui.textAlign = "center";
core.setTextAlign('ui', 'center');
var damage = enemy.damage;
var color = '#FFFF00';
@ -1621,7 +1651,7 @@ ui.prototype.drawBook = function (index) {
damage += "[b]";
core.fillText('ui', damage, damageOffset, 62 * i + 50, color, 'bold 13px '+globalFont);
core.canvas.ui.textAlign = "left";
core.setTextAlign('ui', 'left');
core.fillText('ui', '临界', 165, 62 * i + 68, '#DDDDDD', '13px '+globalFont);
core.fillText('ui', core.formatBigNumber(enemy.critical||0), 195, 62 * i + 68, '#DDDDDD', 'bold 13px '+globalFont);
@ -1637,7 +1667,7 @@ ui.prototype.drawBook = function (index) {
}
core.drawBoxAnimate();
this.drawPagination(page, totalPage, 12);
core.canvas.ui.textAlign = 'center';
core.setTextAlign('ui', 'center');
// 退出
core.fillText('ui', '返回游戏', 370, 403,'#DDDDDD', 'bold 15px '+globalFont);
}
@ -1751,7 +1781,7 @@ ui.prototype.drawBookDetail = function (index) {
core.strokeRect('data', left - 1, top - 1, right + 1, bottom + 1, core.status.globalAttribute.borderColor, 2);
// 名称
core.canvas.data.textAlign = "left";
core.setTextAlign('data', 'left');
core.fillText('data', enemy.name, content_left, top + 30, '#FFD700', 'bold 22px '+globalFont);
var content_top = top + 57;
@ -1762,7 +1792,7 @@ ui.prototype.drawBookDetail = function (index) {
if (index>=0) {
var x1 = text.substring(0, index+1);
core.fillText('data', x1, content_left, content_top, '#FF6A6A', 'bold 16px '+globalFont);
var len=core.canvas.data.measureText(x1).width;
var len=core.calWidth('data', x1);
core.fillText('data', text.substring(index+1), content_left+len, content_top, '#FFFFFF', '16px '+globalFont);
}
else {
@ -1788,7 +1818,7 @@ ui.prototype.drawFly = function(page) {
core.setAlpha('ui', 0.85);
core.fillRect('ui', 0, 0, 416, 416, '#000000');
core.setAlpha('ui', 1);
core.canvas.ui.textAlign = 'center';
core.setTextAlign('ui', 'center');
var globalFont = core.status.globalAttribute.font
core.fillText('ui', '楼层跳跃', 208, 60, '#FFFFFF', "bold 28px "+globalFont);
core.fillText('ui', '返回游戏', 208, 403, '#FFFFFF', "bold 15px "+globalFont)
@ -1824,7 +1854,7 @@ ui.prototype.drawMaps = function (index, x, y) {
core.strokeRect('ui', 416-62, 66, 60, 284);
core.strokeRect('ui', 66, 66, 284, 92);
core.strokeRect('ui', 66, 32*8+2, 284, 92);
core.canvas.ui.textAlign = 'center';
core.setTextAlign('ui', 'center');
core.fillText('ui', "上移地图 [W]", 208, 38, '#FFD700', '20px Arial');
core.fillText('ui', "下移地图 [S]", 208, 390);
@ -1890,16 +1920,16 @@ ui.prototype.drawMaps = function (index, x, y) {
var value = core.paint[floorId];
if (core.isset(value)) value = LZString.decompress(value).split(",");
core.utils.decodeCanvas(value, 32*mw, 32*mh);
core.canvas.ui.drawImage(core.bigmap.tempCanvas.canvas, offsetX*32, offsetY*32, 416, 416, 0, 0, 416, 416);
core.drawImage('ui', core.bigmap.tempCanvas.canvas, offsetX*32, offsetY*32, 416, 416, 0, 0, 416, 416);
}
core.clearMap('data');
core.canvas.data.textAlign = 'left';
core.setTextAlign('data', 'left');
core.setFont('data', '16px Arial');
var text = core.status.maps[floorId].title;
if (!all && (mw>13 || mh>13)) text+=" ["+(x-6)+","+(y-6)+"]";
var textX = 16, textY = 18, width = textX + core.canvas.data.measureText(text).width + 16, height = 42;
var textX = 16, textY = 18, width = textX + core.calWidth('data', text) + 16, height = 42;
core.fillRect('data', 5, 5, width, height, 'rgba(0,0,0,0.4)');
core.fillText('data', text, textX + 5, textY + 15, 'rgba(255,255,255,0.6)');
}
@ -1980,12 +2010,12 @@ ui.prototype.drawToolbox = function(index) {
core.canvas.ui.fill();
// 文字
core.canvas.ui.textAlign = 'right';
core.setTextAlign('ui', 'right');
var globalFont = core.status.globalAttribute.font;
core.fillText('ui', "消耗道具", 411, 124-ydelta, '#333333', "bold 16px "+globalFont);
core.fillText('ui', "永久道具", 411, 284-ydelta);
core.canvas.ui.textAlign = 'left';
core.setTextAlign('ui', 'left');
// 描述
if (core.isset(selectId)) {
var item=core.material.items[selectId];
@ -2010,7 +2040,7 @@ ui.prototype.drawToolbox = function(index) {
}
}
core.canvas.ui.textAlign = 'right';
core.setTextAlign('ui', 'right');
var images = core.material.images.items;
// 消耗道具
@ -2019,7 +2049,7 @@ ui.prototype.drawToolbox = function(index) {
if (!core.isset(tool)) break;
var yoffset = 144 + Math.floor(i/6)*54 + 5 - ydelta;
var icon=core.material.icons.items[tool];
core.canvas.ui.drawImage(images, 0, icon*32, 32, 32, 16*(4*(i%6)+1)+5, yoffset, 32, 32)
core.drawImage('ui', images, 0, icon*32, 32, 32, 16*(4*(i%6)+1)+5, yoffset, 32, 32)
// 个数
core.fillText('ui', core.itemCount(tool), 16*(4*(i%6)+1)+40, yoffset+33, '#FFFFFF', "bold 14px "+globalFont);
if (selectId == tool)
@ -2032,7 +2062,7 @@ ui.prototype.drawToolbox = function(index) {
if (!core.isset(constant)) break;
var yoffset = 304+Math.floor(i/6)*54+5-ydelta;
var icon=core.material.icons.items[constant];
core.canvas.ui.drawImage(images, 0, icon*32, 32, 32, 16*(4*(i%6)+1)+5, yoffset, 32, 32)
core.drawImage('ui', images, 0, icon*32, 32, 32, 16*(4*(i%6)+1)+5, yoffset, 32, 32)
if (selectId == constant)
core.strokeRect('ui', 16*(4*(i%6)+1)+1, yoffset-4, 40, 40, '#FFD700');
}
@ -2041,7 +2071,7 @@ ui.prototype.drawToolbox = function(index) {
this.drawPagination(toolsPage, toolsTotalPage, 7);
this.drawPagination(constantsPage, constantsTotalPage, 12);
core.canvas.ui.textAlign = 'center';
core.setTextAlign('ui', 'center');
// 装备栏
// if (core.flags.equipment)
@ -2123,12 +2153,12 @@ ui.prototype.drawEquipbox = function(index) {
core.canvas.ui.fill();
// 文字
core.canvas.ui.textAlign = 'right';
core.setTextAlign('ui', 'right');
var globalFont = core.status.globalAttribute.font;
core.fillText('ui', "当前装备", 411, 124-ydelta, '#333333', "bold 16px "+globalFont);
core.fillText('ui', "拥有装备", 411, 284-ydelta);
core.canvas.ui.textAlign = 'left';
core.setTextAlign('ui', 'left');
// 描述
if (core.isset(selectId)) {
@ -2174,9 +2204,9 @@ ui.prototype.drawEquipbox = function(index) {
}
var content = title + ' ' + nowValue + '->';
core.fillText('ui', content, drawOffset, 89, '#CCCCCC', 'bold 14px '+globalFont);
drawOffset += core.canvas.ui.measureText(content).width;
drawOffset += core.calWidth('ui', content);
core.fillText('ui', newValue, drawOffset, 89, color);
drawOffset += core.canvas.ui.measureText(newValue).width + 15;
drawOffset += core.calWidth('ui', newValue) + 15;
})
}
}
@ -2186,7 +2216,7 @@ ui.prototype.drawEquipbox = function(index) {
}
}
core.canvas.ui.textAlign = 'right';
core.setTextAlign('ui', 'right');
var images = core.material.images.items;
// 当前装备
@ -2194,7 +2224,7 @@ ui.prototype.drawEquipbox = function(index) {
var equipId = equipEquipment[i] || null;
if (core.isset(equipId)) {
var icon = core.material.icons.items[equipId];
core.canvas.ui.drawImage(images, 0, icon*32, 32, 32, 16*(8*(i%3)+5)+5, 144+Math.floor(i/3)*54+5-ydelta, 32, 32);
core.drawImage('ui', images, 0, icon*32, 32, 32, 16*(8*(i%3)+5)+5, 144+Math.floor(i/3)*54+5-ydelta, 32, 32);
}
core.fillText('ui', allEquips[i]||"未知", 16*(8*(i%3)+1)+40, 144+Math.floor(i/3)*54+32-ydelta, '#FFFFFF', "bold 16px "+globalFont);
core.strokeRect('ui', 16*(8*(i%3)+5)+1, 144+Math.floor(i/3)*54+1-ydelta, 40, 40, index==i?'#FFD700':"#FFFFFF");
@ -2205,7 +2235,7 @@ ui.prototype.drawEquipbox = function(index) {
var ownEquip=ownEquipment[12*(page-1)+i];
if (!core.isset(ownEquip)) continue;
var icon=core.material.icons.items[ownEquip];
core.canvas.ui.drawImage(images, 0, icon*32, 32, 32, 16*(4*(i%6)+1)+5, 304+Math.floor(i/6)*54+5-ydelta, 32, 32)
core.drawImage('ui', images, 0, icon*32, 32, 32, 16*(4*(i%6)+1)+5, 304+Math.floor(i/6)*54+5-ydelta, 32, 32)
// 个数
if (core.itemCount(ownEquip)>1)
core.fillText('ui', core.itemCount(ownEquip), 16*(4*(i%6)+1)+40, 304+Math.floor(i/6)*54+38-ydelta, '#FFFFFF', "bold 14px "+globalFont);
@ -2215,7 +2245,7 @@ ui.prototype.drawEquipbox = function(index) {
this.drawPagination(page, totalPage, 12);
// 道具栏
core.canvas.ui.textAlign = 'center';
core.setTextAlign('ui', 'center');
core.fillText('ui', '[道具栏]', 370, 25,'#DDDDDD', 'bold 15px '+globalFont);
// 退出按钮
core.fillText('ui', '返回游戏', 370, 403,'#DDDDDD', 'bold 15px '+globalFont);
@ -2254,7 +2284,7 @@ ui.prototype.drawSLPanel = function(index, refresh) {
core.setAlpha('ui', 1);
core.ui.drawPagination(page+1, max_page, 12);
core.canvas.ui.textAlign = 'center';
core.setTextAlign('ui', 'center');
// 退出
core.fillText('ui', '返回游戏', 370, 403,'#DDDDDD', 'bold 15px '+globalFont);
@ -2431,6 +2461,9 @@ ui.prototype.drawThumbnail = function(floorId, canvas, blocks, x, y, size, cente
if (core.status.event.id=='viewMaps' && (core.status.event.data||{}).damage)
core.control.updateDamage(floorId, tempCanvas);
var ctx = core.getContextByName(canvas);
if (ctx == null) return;
// draw to canvas
core.clearMap(canvas, x, y, size, size);
if (!core.isset(centerX)) centerX=parseInt(mw/2);
@ -2443,20 +2476,20 @@ ui.prototype.drawThumbnail = function(floorId, canvas, blocks, x, y, size, cente
var side = (416 - realWidth) / 2;
core.fillRect(canvas, 0, 0, side, realHeight, '#000000');
core.fillRect(canvas, 416-side, 0, side, realHeight);
core.canvas[canvas].drawImage(tempCanvas.canvas, 0, 0, tempWidth, tempHeight, side, 0, realWidth, realHeight);
ctx.drawImage(tempCanvas.canvas, 0, 0, tempWidth, tempHeight, side, 0, realWidth, realHeight);
}
else {
var realWidth = 416, realHeight = realWidth * tempHeight / tempWidth;
var side = (416 - realHeight) / 2;
core.fillRect(canvas, 0, 0, realWidth, side, '#000000');
core.fillRect(canvas, 0, 416-side, realWidth, side);
core.canvas[canvas].drawImage(tempCanvas.canvas, 0, 0, tempWidth, tempHeight, 0, side, realWidth, realHeight);
ctx.drawImage(tempCanvas.canvas, 0, 0, tempWidth, tempHeight, 0, side, realWidth, realHeight);
}
}
else {
var offsetX = core.clamp(centerX-6, 0, mw-13), offsetY = core.clamp(centerY-6, 0, mh-13);
// offsetX~offsetX+12; offsetY~offsetY+12
core.canvas[canvas].drawImage(tempCanvas.canvas, offsetX*32, offsetY*32, 416, 416, x, y, size, size);
ctx.drawImage(tempCanvas.canvas, offsetX*32, offsetY*32, 416, 416, x, y, size, size);
}
}
@ -2470,7 +2503,7 @@ ui.prototype.drawKeyBoard = function () {
core.fillRect('ui', left, top, right, bottom, core.material.groundPattern);
core.strokeRect('ui', left - 1, top - 1, right + 1, bottom + 1, '#FFFFFF', 2);
core.canvas.ui.textAlign = "center";
core.setTextAlign('ui', 'center');
var globalFont = core.status.globalAttribute.font;
core.fillText('ui', "虚拟键盘", 208, top+35, "#FFD700", "bold 22px "+globalFont);
@ -2495,7 +2528,7 @@ ui.prototype.drawKeyBoard = function () {
offset+=32;
});
core.canvas.ui.textAlign = 'center';
core.setTextAlign('ui', 'center');
core.fillText("ui", "返回游戏", 416-80, offset-3, '#FFFFFF', 'bold 15px '+globalFont);
}
@ -2724,7 +2757,7 @@ ui.prototype.drawPaint = function () {
var value = core.paint[core.status.floorId];
if (core.isset(value)) value = LZString.decompress(value).split(",");
core.utils.decodeCanvas(value, 32*core.bigmap.width, 32*core.bigmap.height);
core.dymCanvas.paint.drawImage(core.bigmap.tempCanvas.canvas, 0, 0);
core.drawImage('paint', core.bigmap.tempCanvas.canvas, 0, 0);
core.setLineWidth('paint', 3);
core.setStrokeStyle('paint', '#FF0000');
@ -2779,7 +2812,7 @@ ui.prototype.createCanvas = function (name, x, y, width, height, z) {
this.relocateCanvas(name, x, y);
this.resizeCanvas(name, width, height);
core.dymCanvas[name].canvas.style.zIndex = z;
return;
return core.dymCanvas[name];
}
var newCanvas = document.createElement("canvas");
newCanvas.id = name;
@ -2801,6 +2834,7 @@ ui.prototype.createCanvas = function (name, x, y, width, height, z) {
}
});
core.dom.gameDraw.appendChild(newCanvas);
return core.dymCanvas[name];
}
////// canvas查找 //////
@ -2815,9 +2849,8 @@ ui.prototype.findCanvas = function (name) {
////// canvas重定位 //////
ui.prototype.relocateCanvas = function (name, x, y) {
if (!core.isset(name)) return;
var index = core.findCanvas(name);
if (index < 0) return;
var index = this.findCanvas(name);
if (index<0) return null;
if (core.isset(x)) {
core.dymCanvas[name].canvas.style.left = x * core.domStyle.scale + 'px';
core.dymCanvas._list[index].style.left = x;
@ -2826,11 +2859,12 @@ ui.prototype.relocateCanvas = function (name, x, y) {
core.dymCanvas[name].canvas.style.top = y * core.domStyle.scale + 'px';
core.dymCanvas._list[index].style.top = y;
}
return core.dymCanvas[name];
}
////// canvas重置 //////
ui.prototype.resizeCanvas = function (name, width, height) {
if (!core.isset(name)) return;
if (this.findCanvas(name)<0) return null;
var dstCanvas = core.dymCanvas[name].canvas;
if (core.isset(width)) {
dstCanvas.width = width;
@ -2840,12 +2874,12 @@ ui.prototype.resizeCanvas = function (name, width, height) {
dstCanvas.height = height;
dstCanvas.style.height = height * core.domStyle.scale + 'px';
}
return core.dymCanvas[name];
}
////// canvas删除 //////
ui.prototype.deleteCanvas = function (name) {
if (!core.isset(name)) return;
var index = core.findCanvas(name);
if (index == -1) return;
var index = this.findCanvas(name);
if (index<0) return null;
core.dom.gameDraw.removeChild(core.dymCanvas[name].canvas);
delete core.dymCanvas[name];
core.dymCanvas._list.splice(index,1);

2
libs/utils.js
View File

@ -84,7 +84,7 @@ utils.prototype.splitLines = function(canvas, text, maxLength, font) {
}
else {
var toAdd = text.substring(last, i+1);
var width = core.canvas[canvas].measureText(toAdd).width;
var width = core.calWidth(canvas, toAdd);
if (core.isset(maxLength) && width>maxLength) {
contents.push(text.substring(last, i));
last=i;

2
project/data.js
View File

@ -118,7 +118,7 @@ var data_a1e2fb4a_e986_4524_b0da_9b7ba7c0874d =
],
"dw": 100,
"dh": 100,
"opacity": 100,
"opacity": 1,
"time": 0
},
{

8
project/functions.js
View File

@ -688,7 +688,7 @@ var functions_d6ad677b_427a_4623_b50f_a445a3b0ef8a =
case 83: // S：存档
core.save(true);
break;
case 68: // D：独挡
case 68: // D：读档
core.load(true);
break;
case 69: // E：打开光标
@ -903,9 +903,9 @@ var functions_d6ad677b_427a_4623_b50f_a445a3b0ef8a =
if (core.flags.enableLevelUp && core.status.hero.lv<core.firstData.levelUp.length) {
var need = core.calValue(core.firstData.levelUp[core.status.hero.lv].need);
if (core.flags.levelUpLeftMode)
core.statusBar.up.innerHTML = (need - core.getStatus('experience')) || " ";
core.statusBar.up.innerHTML = core.formatBigNumber(need - core.getStatus('experience')) || " ";
else
core.statusBar.up.innerHTML = need || " ";
core.statusBar.up.innerHTML = core.formatBigNumber(need) || " ";
}
else core.statusBar.up.innerHTML = " ";
@ -1180,7 +1180,7 @@ var functions_d6ad677b_427a_4623_b50f_a445a3b0ef8a =
var text_start = left + 24;
// 名称
core.canvas.ui.textAlign = "left";
core.setTextAlign('ui', 'left');
var globalFont = (core.status.globalAttribute||core.initStatus.globalAttribute).font;
core.fillText('ui', "HTML5 魔塔样板", text_start, top+35, "#FFD700", "bold 22px "+globalFont);
core.fillText('ui', "版本： "+core.firstData.version, text_start, top + 80, "#FFFFFF", "bold 17px "+globalFont);