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

Bigmap v2 implementation

Browse Source
This commit is contained in:
ckcz123 2020-06-30 22:02:28 +08:00
parent 835d34e6c3
commit dbf328512a
6 changed files with 107 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
_server/CodeMirror/defs.js
View File

@ -1875,6 +1875,18 @@ var terndefs_f6783a0a_522d_417e_8407_94c67b692e50 = [
"!type": "number", "!type": "number",
"!doc": "大地图视角纵向基准格" "!doc": "大地图视角纵向基准格"
}, },
"v2": {
"!type": "bool",
"!doc": "是否是新版大地图绘制方式"
},
"threshold": {
"!type": "number",
"!doc": "新版大地图绘制方式的界限"
},
"scale": {
"!type": "number",
"!doc": "缩略图的比例放缩"
},
"tempCanvas": { "tempCanvas": {
"!type": "CanvasRenderingContext2D", "!type": "CanvasRenderingContext2D",
"!doc": "临时画布" "!doc": "临时画布"

13
_server/editor.js
View File

@ -223,19 +223,6 @@ editor.prototype.init = function (callback) {
for (var one in canvases) { for (var one in canvases) {
canvases[one].width = canvases[one].height = core.__PIXELS__; 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)); core.resetGame(core.firstData.hero, null, core.firstData.floorId, core.clone(core.initStatus.maps));
var lastFloorId = editor.config.get('editorLastFloorId', core.status.floorId); var lastFloorId = editor.config.get('editorLastFloorId', core.status.floorId);
if (core.floorIds.indexOf(lastFloorId) < 0) lastFloorId = core.status.floorId; if (core.floorIds.indexOf(lastFloorId) < 0) lastFloorId = core.status.floorId;

47
libs/control.js
View File

@ -915,8 +915,13 @@ control.prototype.addGameCanvasTranslate = function (x, y) {
if (id=='ui' || id=='data') continue; // UI层和data层不移动 if (id=='ui' || id=='data') continue; // UI层和data层不移动
var offsetX = x, offsetY = y; var offsetX = x, offsetY = y;
if (core.bigmap.canvas.indexOf(id)>=0) { if (core.bigmap.canvas.indexOf(id)>=0) {
offsetX -= core.bigmap.offsetX; if (core.bigmap.v2) {
offsetY -= core.bigmap.offsetY; 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); core.control.setGameCanvasTranslate(id, offsetX, offsetY);
} }
@ -925,18 +930,23 @@ control.prototype.addGameCanvasTranslate = function (x, y) {
////// 更新视野范围 ////// ////// 更新视野范围 //////
control.prototype.updateViewport = function() { control.prototype.updateViewport = function() {
// 当前是否应该重绘？ // 当前是否应该重绘？
if (core.bigmap.offsetX >= core.bigmap.posX * 32 + 32 if (core.bigmap.v2) {
|| core.bigmap.offsetX <= core.bigmap.posX * 32 - 32 if (core.bigmap.offsetX >= core.bigmap.posX * 32 + 32
|| core.bigmap.offsetY >= core.bigmap.posY * 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.offsetY <= core.bigmap.posY * 32 - 32) {
core.bigmap.posY = parseInt(core.bigmap.offsetY / 32); core.bigmap.posX = parseInt(core.bigmap.offsetX / 32);
// redraw core.bigmap.posY = parseInt(core.bigmap.offsetY / 32);
core.redrawMap(); 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.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); 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.right = 0;
core.dom.gameDraw.style.border = obj.border; core.dom.gameDraw.style.border = obj.border;
// resize bigmap // resize bigmap
var csize = core.__PIXELS__ + 64; core.resizeMap();
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";
}
});
// resize dynamic canvas // resize dynamic canvas
for (var name in core.dymCanvas) { for (var name in core.dymCanvas) {
var ctx = core.dymCanvas[name], canvas = ctx.canvas; var ctx = core.dymCanvas[name], canvas = ctx.canvas;

3
libs/core.js
View File

@ -97,6 +97,9 @@ function core() {
posY: 0, posY: 0,
width: this.__SIZE__, // map width and height width: this.__SIZE__, // map width and height
height: this.__SIZE__, height: this.__SIZE__,
v2: false,
threshold: 512,
scale: 1.0,
tempCanvas: null, // A temp canvas for drawing tempCanvas: null, // A temp canvas for drawing
} }
this.saves = { this.saves = {

92
libs/maps.js
View File

@ -379,6 +379,23 @@ maps.prototype.resizeMap = function (floorId) {
if (!floorId) return; if (!floorId) return;
core.bigmap.width = core.floors[floorId].width; core.bigmap.width = core.floors[floorId].width;
core.bigmap.height = core.floors[floorId].height; 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 (core.bigmap.v2) {
if (x < posX - 1 || y < posY - 1 || x > posX + core.__SIZE__ || y > posY + core.__SIZE__ + 1) { // +1 for 48 height var posX = core.bigmap.posX, posY = core.bigmap.posY;
return; 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); 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) { maps.prototype._drawMap_drawBlockInfo = function (ctx, block, blockInfo, arr, onMap) {
if (blockInfo == null) return; if (blockInfo == null) return;
if (onMap) { if (onMap && core.bigmap.v2) {
// 判定是否绘制 // 判定是否绘制
var posX = core.bigmap.posX, posY = core.bigmap.posY; 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 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单独处理 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); if (onMap) this.addGlobalAnimate(block);
return; return;
} }
@ -882,8 +907,11 @@ maps.prototype._drawBg_drawBackground = function (floorId, ctx, onMap) {
var groundId = (core.status.maps || core.floors)[floorId].defaultGround || "ground"; var groundId = (core.status.maps || core.floors)[floorId].defaultGround || "ground";
var groundInfo = core.getBlockInfo(groundId); var groundInfo = core.getBlockInfo(groundId);
if (groundInfo != null) { if (groundInfo != null) {
for (var i = onMap ? -1 : 0; i < (onMap ? core.__SIZE__ + 1 : core.floors[floorId].width); i++) { var start = onMap && core.bigmap.v2 ? -1 : 0;
for (var j = onMap ? -1 : 0; j < (onMap ? core.__SIZE__ + 1 : core.floors[floorId].height); j++) { 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); 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); eventArr = this.getMapArray(floorId);
} }
var startX = onMap ? Math.max(0, core.bigmap.posX - 1) : 0; var startX = onMap && core.bigmap.v2 ? Math.max(0, core.bigmap.posX - 1) : 0;
var endX = onMap ? Math.min(width, core.bigmap.posX + core.__SIZE__ + 1) : width; var endX = onMap && core.bigmap.v2 ? Math.min(width, core.bigmap.posX + core.__SIZE__ + 1) : width;
var startY = onMap ? Math.max(0, core.bigmap.posY - 1) : 0; var startY = onMap && core.bigmap.v2 ? 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 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 x = startX; x < endX; x++) {
for (var y = startY; y < endY; y++) { 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 sx = (one.sx || 0) + (currStatus || 0) % (one.frame || 1) * width;
var sy = one.sy || 0; var sy = one.sy || 0;
var x = one.x || 0, y = one.y || 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 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) { || y > 32 * core.bigmap.posX + core.__PIXELS__ + 32 || y + height < 32 * core.bigmap.posY - 32) {
return; return;
@ -1040,7 +1068,7 @@ maps.prototype._drawFloorImage = function (ctx, name, one, image, currStatus, on
////// 绘制Autotile ////// ////// 绘制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 xx = block.x, yy = block.y;
var autotile = core.material.images['autotile'][block.event.id]; var autotile = core.material.images['autotile'][block.event.id];
status = status || 0; 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); 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]){ 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; done[0] = true;
} }
if(iG[0][-1] + iG[1][-1] + iG[1][0] + iG[0][0] == 3 && !iG[1][-1]){ 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; done[1] = true;
} }
if(iG[0][0] + iG[1][0] + iG[1][1] + iG[0][1] == 3 && !iG[1][1]){ 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; done[3] = true;
} }
if(iG[0-1][0] + iG[0][0] + iG[0][1] + iG[-1][1] == 3 && !iG[-1][1]){ 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; done[2] = true;
} }
var _id = iG[0][-1] + 2 * iG[-1][0] + 4 * iG[0][1] + 8 * iG[1][0]; 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],], 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, 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],], [[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) { maps.prototype._drawAutotileAnimate = function (block, animate) {
var x = block.x, y = block.y; var x = block.x, y = block.y;
// ------ 界面外的动画不绘制 // ------ 界面外的动画不绘制
if (32 * x < core.bigmap.offsetX - 64 || 32 * x > core.bigmap.offsetX + core.__PIXELS__ + 32 if (core.bigmap.v2) {
|| 32 * y < core.bigmap.offsetY - 64 || 32 * y > core.bigmap.offsetY + core.__PIXELS__ + 32 + 16) { var posX = core.bigmap.posX, posY = core.bigmap.posY;
return; 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; 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) {
if (block.name == 'bg') if (block.name == 'bg')
core.drawImage('bg', core.material.groundCanvas.canvas, 32 * x, 32 * y); 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); this._drawAutotile(cv, core.status.autotileAnimateObjs[block.name+"map"], block, 32, 0, 0, animate, true);
} }
else { 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);
} }
} }

3
runtime.d.ts vendored
View File

@ -2752,6 +2752,9 @@ type core = {
posY: number posY: number
width: number // map width and height width: number // map width and height
height: number height: number
v2: boolean
threshold: number
scale: number
tempCanvas: CanvasRenderingContext2D // A temp canvas for drawing tempCanvas: CanvasRenderingContext2D // A temp canvas for drawing
} }
saves: { saves: {