From dbf328512a067ee435f201fcca093b1411f7ae85 Mon Sep 17 00:00:00 2001 From: ckcz123 Date: Tue, 30 Jun 2020 22:02:28 +0800 Subject: [PATCH] Bigmap v2 implementation --- _server/CodeMirror/defs.js | 12 +++++ _server/editor.js | 13 ------ libs/control.js | 47 ++++++++++--------- libs/core.js | 3 ++ libs/maps.js | 92 +++++++++++++++++++++++++++----------- runtime.d.ts | 3 ++ 6 files changed, 107 insertions(+), 63 deletions(-) diff --git a/_server/CodeMirror/defs.js b/_server/CodeMirror/defs.js index 2dba66ad..cbcc2c14 100644 --- a/_server/CodeMirror/defs.js +++ b/_server/CodeMirror/defs.js @@ -1875,6 +1875,18 @@ var terndefs_f6783a0a_522d_417e_8407_94c67b692e50 = [ "!type": "number", "!doc": "大地图视角纵向基准格" }, + "v2": { + "!type": "bool", + "!doc": "是否是新版大地图绘制方式" + }, + "threshold": { + "!type": "number", + "!doc": "新版大地图绘制方式的界限" + }, + "scale": { + "!type": "number", + "!doc": "缩略图的比例放缩" + }, "tempCanvas": { "!type": "CanvasRenderingContext2D", "!doc": "临时画布" diff --git a/_server/editor.js b/_server/editor.js index efca9d6b..bbecc6d6 100644 --- a/_server/editor.js +++ b/_server/editor.js @@ -223,19 +223,6 @@ editor.prototype.init = function (callback) { for (var one in canvases) { canvases[one].width = canvases[one].height = core.__PIXELS__; } - var csize = core.__PIXELS__ + 64; - core.bigmap.canvas.forEach(function (cn) { - core.canvas[cn].canvas.setAttribute("width", csize); - core.canvas[cn].canvas.setAttribute("height", csize); - core.canvas[cn].canvas.style.width = csize * core.domStyle.scale + "px"; - core.canvas[cn].canvas.style.height = csize * core.domStyle.scale + "px"; - core.canvas[cn].translate(32, 32); - if (main.mode === 'editor' && editor.isMobile) { - core.canvas[cn].canvas.style.width = csize / core.__PIXELS__ * 96 + "vw"; - core.canvas[cn].canvas.style.height = csize / core.__PIXELS__ * 96 + "vw"; - } - }); - core.resetGame(core.firstData.hero, null, core.firstData.floorId, core.clone(core.initStatus.maps)); var lastFloorId = editor.config.get('editorLastFloorId', core.status.floorId); if (core.floorIds.indexOf(lastFloorId) < 0) lastFloorId = core.status.floorId; diff --git a/libs/control.js b/libs/control.js index 891342f7..4de07a4b 100644 --- a/libs/control.js +++ b/libs/control.js @@ -915,8 +915,13 @@ control.prototype.addGameCanvasTranslate = function (x, y) { if (id=='ui' || id=='data') continue; // UI层和data层不移动 var offsetX = x, offsetY = y; if (core.bigmap.canvas.indexOf(id)>=0) { - offsetX -= core.bigmap.offsetX; - offsetY -= core.bigmap.offsetY; + if (core.bigmap.v2) { + offsetX -= (core.bigmap.offsetX - 32 * core.bigmap.posX) + 32; + offsetY -= (core.bigmap.offsetY - 32 * core.bigmap.posY) + 32; + } else { + offsetX -= core.bigmap.offsetX; + offsetY -= core.bigmap.offsetY; + } } core.control.setGameCanvasTranslate(id, offsetX, offsetY); } @@ -925,18 +930,23 @@ control.prototype.addGameCanvasTranslate = function (x, y) { ////// 更新视野范围 ////// control.prototype.updateViewport = function() { // 当前是否应该重绘？ - if (core.bigmap.offsetX >= core.bigmap.posX * 32 + 32 - || core.bigmap.offsetX <= core.bigmap.posX * 32 - 32 - || core.bigmap.offsetY >= core.bigmap.posY * 32 + 32 - || core.bigmap.offsetY <= core.bigmap.posY * 32 - 32) { - core.bigmap.posX = parseInt(core.bigmap.offsetX / 32); - core.bigmap.posY = parseInt(core.bigmap.offsetY / 32); - // redraw - core.redrawMap(); - } + if (core.bigmap.v2) { + if (core.bigmap.offsetX >= core.bigmap.posX * 32 + 32 + || core.bigmap.offsetX <= core.bigmap.posX * 32 - 32 + || core.bigmap.offsetY >= core.bigmap.posY * 32 + 32 + || core.bigmap.offsetY <= core.bigmap.posY * 32 - 32) { + core.bigmap.posX = parseInt(core.bigmap.offsetX / 32); + core.bigmap.posY = parseInt(core.bigmap.offsetY / 32); + core.redrawMap(); + } + } else { + core.bigmap.posX = core.bigmap.posY = 0; + } + var offsetX = core.bigmap.v2 ? -(core.bigmap.offsetX - 32 * core.bigmap.posX) - 32 : -core.bigmap.offsetX; + var offsetY = core.bigmap.v2 ? -(core.bigmap.offsetY - 32 * core.bigmap.posY) - 32 : -core.bigmap.offsetY; core.bigmap.canvas.forEach(function(cn){ - core.control.setGameCanvasTranslate(cn, -(core.bigmap.offsetX - 32 * core.bigmap.posX) - 32, -(core.bigmap.offsetY - 32 * core.bigmap.posY) - 32); + core.control.setGameCanvasTranslate(cn, offsetX, offsetY); }); // ------ 路线 core.relocateCanvas('route', core.status.automaticRoute.offsetX - core.bigmap.offsetX, core.status.automaticRoute.offsetY - core.bigmap.offsetY); @@ -2867,18 +2877,7 @@ control.prototype._resize_canvas = function (obj) { core.dom.gameDraw.style.right = 0; core.dom.gameDraw.style.border = obj.border; // resize bigmap - var csize = core.__PIXELS__ + 64; - core.bigmap.canvas.forEach(function (cn) { - core.canvas[cn].canvas.setAttribute("width", csize); - core.canvas[cn].canvas.setAttribute("height", csize); - core.canvas[cn].canvas.style.width = csize * core.domStyle.scale + "px"; - core.canvas[cn].canvas.style.height = csize * core.domStyle.scale + "px"; - core.canvas[cn].translate(32, 32); - if (main.mode === 'editor' && editor.isMobile) { - core.canvas[cn].canvas.style.width = csize / core.__PIXELS__ * 96 + "vw"; - core.canvas[cn].canvas.style.height = csize / core.__PIXELS__ * 96 + "vw"; - } - }); + core.resizeMap(); // resize dynamic canvas for (var name in core.dymCanvas) { var ctx = core.dymCanvas[name], canvas = ctx.canvas; diff --git a/libs/core.js b/libs/core.js index 1066423b..8c155537 100644 --- a/libs/core.js +++ b/libs/core.js @@ -97,6 +97,9 @@ function core() { posY: 0, width: this.__SIZE__, // map width and height height: this.__SIZE__, + v2: false, + threshold: 512, + scale: 1.0, tempCanvas: null, // A temp canvas for drawing } this.saves = { diff --git a/libs/maps.js b/libs/maps.js index e9d2e33d..359515b0 100644 --- a/libs/maps.js +++ b/libs/maps.js @@ -379,6 +379,23 @@ maps.prototype.resizeMap = function (floorId) { if (!floorId) return; core.bigmap.width = core.floors[floorId].width; core.bigmap.height = core.floors[floorId].height; + core.bigmap.posX = core.bigmap.posY = 0; + + core.bigmap.v2 = core.bigmap.width * core.bigmap.height > core.bigmap.threshold; + var width = core.bigmap.v2 ? core.__PIXELS__ + 64 : core.bigmap.width * 32; + var height = core.bigmap.v2 ? core.__PIXELS__ + 64 : core.bigmap.width * 32; + + core.bigmap.canvas.forEach(function (cn) { + core.canvas[cn].canvas.setAttribute("width", width); + core.canvas[cn].canvas.setAttribute("height", height); + core.canvas[cn].canvas.style.width = width * core.domStyle.scale + "px"; + core.canvas[cn].canvas.style.height = height * core.domStyle.scale + "px"; + core.canvas[cn].translate(core.bigmap.v2 ? 32 : 0, core.bigmap.v2 ? 32 : 0); + if (main.mode === 'editor' && editor.isMobile) { + core.canvas[cn].canvas.style.width = width / core.__PIXELS__ * 96 + "vw"; + core.canvas[cn].canvas.style.height = height / core.__PIXELS__ * 96 + "vw"; + } + }); } ////// 将当前地图重新变成二维数组形式 ////// @@ -748,9 +765,17 @@ maps.prototype.drawBlock = function (block, animate) { // --- 在界面外的动画不绘制 // 判定是否绘制 - var posX = core.bigmap.posX, posY = core.bigmap.posY; - if (x < posX - 1 || y < posY - 1 || x > posX + core.__SIZE__ || y > posY + core.__SIZE__ + 1) { // +1 for 48 height - return; + if (core.bigmap.v2) { + var posX = core.bigmap.posX, posY = core.bigmap.posY; + if (x < posX - 1 || y < posY - 1 || x > posX + core.__SIZE__ || y > posY + core.__SIZE__ + 1) { // +1 for 48 height + return; + } + } else { + if (redraw && block.event.animate > 1 && + (32 * x < core.bigmap.offsetX - 64 || 32 * x > core.bigmap.offsetX + core.__PIXELS__ + 32 + || 32 * y < core.bigmap.offsetY - 64 || 32 * y > core.bigmap.offsetY + core.__PIXELS__ + 32 + 16)) { + return; + } } var blockInfo = this.getBlockInfo(block); @@ -841,7 +866,7 @@ maps.prototype._drawMap_drawAll = function (floorId) { maps.prototype._drawMap_drawBlockInfo = function (ctx, block, blockInfo, arr, onMap) { if (blockInfo == null) return; - if (onMap) { + if (onMap && core.bigmap.v2) { // 判定是否绘制 var posX = core.bigmap.posX, posY = core.bigmap.posY; if (block.x < posX - 1 || block.y < posY - 1 || block.x > posX + core.__SIZE__ || block.y > posY + core.__SIZE__ + 1) { // +1 for 48 height @@ -850,7 +875,7 @@ maps.prototype._drawMap_drawBlockInfo = function (ctx, block, blockInfo, arr, on } if (blockInfo.cls == 'autotile') { // Autotile单独处理 - this._drawAutotile(ctx, arr, block, 32, 0, 0); + this._drawAutotile(ctx, arr, block, 32, 0, 0, 0, onMap); if (onMap) this.addGlobalAnimate(block); return; } @@ -882,8 +907,11 @@ maps.prototype._drawBg_drawBackground = function (floorId, ctx, onMap) { var groundId = (core.status.maps || core.floors)[floorId].defaultGround || "ground"; var groundInfo = core.getBlockInfo(groundId); if (groundInfo != null) { - for (var i = onMap ? -1 : 0; i < (onMap ? core.__SIZE__ + 1 : core.floors[floorId].width); i++) { - for (var j = onMap ? -1 : 0; j < (onMap ? core.__SIZE__ + 1 : core.floors[floorId].height); j++) { + var start = onMap && core.bigmap.v2 ? -1 : 0; + var endX = onMap && core.bigmap.v2 ? core.__SIZE__ + 1 : core.floors[floorId].width; + var endY = onMap && core.bigmap.v2 ? core.__SIZE__ + 1 : core.floors[floorId].height; + for (var i = start; i < endX; i++) { + for (var j = start; j < endY; j++) { core.drawImage(ctx, groundInfo.image, 32 * groundInfo.posX, groundInfo.height * groundInfo.posY, 32, 32, i * 32, j * 32, 32, 32); } } @@ -935,10 +963,10 @@ maps.prototype._drawBgFgMap = function (floorId, ctx, name, onMap) { eventArr = this.getMapArray(floorId); } - var startX = onMap ? Math.max(0, core.bigmap.posX - 1) : 0; - var endX = onMap ? Math.min(width, core.bigmap.posX + core.__SIZE__ + 1) : width; - var startY = onMap ? Math.max(0, core.bigmap.posY - 1) : 0; - var endY = onMap ? Math.min(height, core.bigmap.posY + core.__SIZE__ + 2) : height; // +1 for 48 px + var startX = onMap && core.bigmap.v2 ? Math.max(0, core.bigmap.posX - 1) : 0; + var endX = onMap && core.bigmap.v2 ? Math.min(width, core.bigmap.posX + core.__SIZE__ + 1) : width; + var startY = onMap && core.bigmap.v2 ? Math.max(0, core.bigmap.posY - 1) : 0; + var endY = onMap && core.bigmap.v2 ? Math.min(height, core.bigmap.posY + core.__SIZE__ + 2) : height; // +1 for 48 px for (var x = startX; x < endX; x++) { for (var y = startY; y < endY; y++) { @@ -1013,7 +1041,7 @@ maps.prototype._drawFloorImage = function (ctx, name, one, image, currStatus, on var sx = (one.sx || 0) + (currStatus || 0) % (one.frame || 1) * width; var sy = one.sy || 0; var x = one.x || 0, y = one.y || 0; - if (onMap) { + if (onMap && core.bigmap.v2) { if (x > 32 * core.bigmap.posX + core.__PIXELS__ + 32 || x + width < 32 * core.bigmap.posX - 32 || y > 32 * core.bigmap.posX + core.__PIXELS__ + 32 || y + height < 32 * core.bigmap.posY - 32) { return; @@ -1040,7 +1068,7 @@ maps.prototype._drawFloorImage = function (ctx, name, one, image, currStatus, on ////// 绘制Autotile ////// -maps.prototype._drawAutotile = function (ctx, mapArr, block, size, left, top, status) { +maps.prototype._drawAutotile = function (ctx, mapArr, block, size, left, top, status, onMap) { var xx = block.x, yy = block.y; var autotile = core.material.images['autotile'][block.event.id]; status = status || 0; @@ -1060,27 +1088,32 @@ maps.prototype._drawAutotile = function (ctx, mapArr, block, size, left, top, st iG[_x][_y] = isGrass(xx + _x, yy + _y); })}); if(iG[-1][-1] + iG[0][-1] + iG[0][0] + iG[-1][0] == 3 && !iG[-1][-1]){ - this._drawAutotile_render(ctx, xx * size + left, yy * size + top, size, autotile, status, 16); + this._drawAutotile_render(ctx, xx * size + left, yy * size + top, size, autotile, status, 16, null, onMap); done[0] = true; } if(iG[0][-1] + iG[1][-1] + iG[1][0] + iG[0][0] == 3 && !iG[1][-1]){ - this._drawAutotile_render(ctx, xx * size + left + size/2, yy * size + top, size, autotile, status, 17); + this._drawAutotile_render(ctx, xx * size + left + size/2, yy * size + top, size, autotile, status, 17, null, onMap); done[1] = true; } if(iG[0][0] + iG[1][0] + iG[1][1] + iG[0][1] == 3 && !iG[1][1]){ - this._drawAutotile_render(ctx, xx * size + left+size/2, yy * size + top + size/2, size, autotile, status, 18); + this._drawAutotile_render(ctx, xx * size + left+size/2, yy * size + top + size/2, size, autotile, status, 18, null, onMap); done[3] = true; } if(iG[0-1][0] + iG[0][0] + iG[0][1] + iG[-1][1] == 3 && !iG[-1][1]){ - this._drawAutotile_render(ctx, xx * size + left, yy * size + top + size/2, size, autotile, status, 19); + this._drawAutotile_render(ctx, xx * size + left, yy * size + top + size/2, size, autotile, status, 19, null, onMap); done[2] = true; } var _id = iG[0][-1] + 2 * iG[-1][0] + 4 * iG[0][1] + 8 * iG[1][0]; - this._drawAutotile_render(ctx, xx * size, yy * size, size, autotile, status, _id, done); + + this._drawAutotile_render(ctx, xx * size, yy * size, size, autotile, status, _id, done, onMap); } -maps.prototype._drawAutotile_render = function(canvas, x, y, size, autotile, status, index, done) { +maps.prototype._drawAutotile_render = function(canvas, x, y, size, autotile, status, index, done, onMap) { + if (onMap) { + x -= 32 * core.bigmap.posX; + y -= 32 * core.bigmap.posY; + } var indexData = [[[96 * status, 0, 32, 32, x, y, size, size],], [[96 * status, 3 * 32, 16, 32, x, y, size / 2, size],[96 * status + 2 * 32 + 16, 3 * 32, 16, 32, x + size / 2, y, size / 2, size],], [[96 * status + 2 * 32, 32, 32, 16, x, y, size, size / 2],[96 * status + 2 * 32, 3 * 32 + 16, 32, 16, x, y + size / 2, size, size / 2],], @@ -1193,20 +1226,27 @@ maps.prototype._drawAutotile_getAutotileIndexs = function (x, y, mapArr, indexAr maps.prototype._drawAutotileAnimate = function (block, animate) { var x = block.x, y = block.y; // ------ 界面外的动画不绘制 - if (32 * x < core.bigmap.offsetX - 64 || 32 * x > core.bigmap.offsetX + core.__PIXELS__ + 32 - || 32 * y < core.bigmap.offsetY - 64 || 32 * y > core.bigmap.offsetY + core.__PIXELS__ + 32 + 16) { - return; + if (core.bigmap.v2) { + var posX = core.bigmap.posX, posY = core.bigmap.posY; + if (x < posX - 1 || y < posY - 1 || x > posX + core.__SIZE__ || y > posY + core.__SIZE__) { + return; + } + } else { + if (32 * x < core.bigmap.offsetX - 64 || 32 * x > core.bigmap.offsetX + core.__PIXELS__ + 32 + || 32 * y < core.bigmap.offsetY - 64 || 32 * y > core.bigmap.offsetY + core.__PIXELS__ + 32 + 16) { + return; + } } var cv = block.name?core.canvas[block.name]:core.canvas.event; - cv.clearRect(32 * x, 32 * y, 32, 32); + cv.clearRect(32 * x - 32 * core.bigmap.posX, 32 * y - 32 * core.bigmap.posY, 32, 32); if (block.name) { if (block.name == 'bg') - core.drawImage('bg', core.material.groundCanvas.canvas, 32 * x, 32 * y); - this._drawAutotile(cv, core.status.autotileAnimateObjs[block.name+"map"], block, 32, 0, 0, animate); + core.drawImage('bg', core.material.groundCanvas.canvas, 32 * x - 32 * core.bigmap.posX, 32 * y - 32 * core.bigmap.posY); + this._drawAutotile(cv, core.status.autotileAnimateObjs[block.name+"map"], block, 32, 0, 0, animate, true); } else { - this._drawAutotile(cv, core.status.autotileAnimateObjs.map, block, 32, 0, 0, animate); + this._drawAutotile(cv, core.status.autotileAnimateObjs.map, block, 32, 0, 0, animate, true); } } diff --git a/runtime.d.ts b/runtime.d.ts index 3379d22c..e8474b09 100644 --- a/runtime.d.ts +++ b/runtime.d.ts @@ -2752,6 +2752,9 @@ type core = { posY: number width: number // map width and height height: number + v2: boolean + threshold: number + scale: number tempCanvas: CanvasRenderingContext2D // A temp canvas for drawing } saves: {