From 86bcd55c9e5861fb407369880ed2367b54ae3800 Mon Sep 17 00:00:00 2001 From: ckcz123 Date: Sat, 16 May 2020 09:35:05 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E8=BF=BD=E5=8A=A0=E7=B4=A0?= =?UTF-8?q?=E6=9D=90=E7=9A=84bug?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- _server/editor.js | 12 ++--- _server/editor_datapanel.js | 88 +++++++++++++++++------------------ _server/editor_mode.js | 5 +- _server/editor_table.js | 2 +- _server/table/data.comment.js | 10 ++-- libs/core.js | 2 +- main.js | 2 +- project/data.js | 4 +- 8 files changed, 64 insertions(+), 61 deletions(-) diff --git a/_server/editor.js b/_server/editor.js index e1560d21..56487191 100644 --- a/_server/editor.js +++ b/_server/editor.js @@ -40,12 +40,12 @@ function editor() { layerMod3:document.getElementById('layerMod3'), viewportButtons:document.getElementById('viewportButtons'), appendPicCanvas : document.getElementById('appendPicCanvas'), - bg : document.getElementById('appendPicCanvas').children[0], - source : document.getElementById('appendPicCanvas').children[1], - picClick : document.getElementById('appendPicCanvas').children[2], - sprite : document.getElementById('appendPicCanvas').children[3], - sourceCtx:document.getElementById('appendPicCanvas').children[1].getContext('2d'), - spriteCtx:document.getElementById('appendPicCanvas').children[3].getContext('2d'), + appendBgCtx : document.getElementById('appendPicCanvas').children[0].getContext('2d'), + appendSource : document.getElementById('appendPicCanvas').children[1], + appendPicClick : document.getElementById('appendPicCanvas').children[2], + appendSprite : document.getElementById('appendPicCanvas').children[3], + appendSourceCtx:document.getElementById('appendPicCanvas').children[1].getContext('2d'), + appendSpriteCtx:document.getElementById('appendPicCanvas').children[3].getContext('2d'), appendPicSelection : document.getElementById('appendPicSelection'), selectAppend : document.getElementById('selectAppend'), selectFileBtn :document.getElementById('selectFileBtn'), diff --git a/_server/editor_datapanel.js b/_server/editor_datapanel.js index 827c57ff..b0f6a9bd 100644 --- a/_server/editor_datapanel.js +++ b/_server/editor_datapanel.js @@ -621,7 +621,7 @@ editor_datapanel_wrapper = function (editor) { editor.uifunctions.fixCtx_func = function () { - [editor.dom.sourceCtx, editor.dom.spriteCtx].forEach(function (ctx) { + [editor.dom.appendSourceCtx, editor.dom.appendSpriteCtx].forEach(function (ctx) { ctx.mozImageSmoothingEnabled = false; ctx.webkitImageSmoothingEnabled = false; ctx.msImageSmoothingEnabled = false; @@ -644,10 +644,10 @@ editor_datapanel_wrapper = function (editor) { editor_mode.appendPic.imageName = 'autotile'; for (var jj = 0; jj < 4; jj++) editor.dom.appendPicSelection.children[jj].style = 'display:none'; if (editor_mode.appendPic.img) { - editor.dom.sprite.style.width = (editor.dom.sprite.width = editor_mode.appendPic.img.width) / editor.uivalues.ratio + 'px'; - editor.dom.sprite.style.height = (editor.dom.sprite.height = editor_mode.appendPic.img.height) / editor.uivalues.ratio + 'px'; - editor.dom.spriteCtx.clearRect(0, 0, editor.dom.sprite.width, editor.dom.sprite.height); - editor.dom.spriteCtx.drawImage(editor_mode.appendPic.img, 0, 0); + editor.dom.appendSprite.style.width = (editor.dom.appendSprite.width = editor_mode.appendPic.img.width) / editor.uivalues.ratio + 'px'; + editor.dom.appendSprite.style.height = (editor.dom.appendSprite.height = editor_mode.appendPic.img.height) / editor.uivalues.ratio + 'px'; + editor.dom.appendSpriteCtx.clearRect(0, 0, editor.dom.appendSprite.width, editor.dom.appendSprite.height); + editor.dom.appendSpriteCtx.drawImage(editor_mode.appendPic.img, 0, 0); } return; } @@ -668,9 +668,9 @@ editor_datapanel_wrapper = function (editor) { for (var jj = num; jj < 4; jj++) { editor.dom.appendPicSelection.children[jj].style = 'display:none'; } - editor.dom.sprite.style.width = (editor.dom.sprite.width = img.width) / editor.uivalues.ratio + 'px'; - editor.dom.sprite.style.height = (editor.dom.sprite.height = img.height + ysize) / editor.uivalues.ratio + 'px'; - editor.dom.spriteCtx.drawImage(img, 0, 0); + editor.dom.appendSprite.style.width = (editor.dom.appendSprite.width = img.width) / editor.uivalues.ratio + 'px'; + editor.dom.appendSprite.style.height = (editor.dom.appendSprite.height = img.height + ysize) / editor.uivalues.ratio + 'px'; + editor.dom.appendSpriteCtx.drawImage(img, 0, 0); } editor.dom.selectAppend.onchange(); } @@ -787,8 +787,8 @@ editor_datapanel_wrapper = function (editor) { newsprite.style.width = (newsprite.width = image.width) / editor.uivalues.ratio + 'px'; newsprite.style.height = (newsprite.height = image.height) / editor.uivalues.ratio + 'px'; } - editor.dom.spriteCtx.clearRect(0, 0, editor.dom.sprite.width, editor.dom.sprite.height); - editor.dom.spriteCtx.drawImage(image, 0, 0); + editor.dom.appendSpriteCtx.clearRect(0, 0, editor.dom.appendSprite.width, editor.dom.appendSprite.height); + editor.dom.appendSpriteCtx.drawImage(image, 0, 0); } else { var ysize = editor.dom.selectAppend.value.endsWith('48') ? 48 : 32; @@ -800,7 +800,7 @@ editor_datapanel_wrapper = function (editor) { } //画灰白相间的格子 - var bgc = editor.dom.bgCtx; + var bgc = editor.dom.appendBgCtx; var colorA = ["#f8f8f8", "#cccccc"]; var colorIndex; var sratio = 4; @@ -814,8 +814,8 @@ editor_datapanel_wrapper = function (editor) { } //把导入的图片画出 - editor.dom.sourceCtx.drawImage(image, 0, 0); - editor_mode.appendPic.sourceImageData = editor.dom.sourceCtx.getImageData(0, 0, image.width, image.height); + editor.dom.appendSourceCtx.drawImage(image, 0, 0); + editor_mode.appendPic.sourceImageData = editor.dom.appendSourceCtx.getImageData(0, 0, image.width, image.height); //重置临时变量 editor.dom.selectAppend.onchange(); @@ -851,8 +851,8 @@ editor_datapanel_wrapper = function (editor) { editor.util.setPixel(nimgData, x, y, convert(editor.util.getPixel(imgData, x, y), delta)) } } - editor.dom.sourceCtx.clearRect(0, 0, imgData.width, imgData.height); - editor.dom.sourceCtx.putImageData(nimgData, 0, 0); + editor.dom.appendSourceCtx.clearRect(0, 0, imgData.width, imgData.height); + editor.dom.appendSourceCtx.putImageData(nimgData, 0, 0); } } @@ -877,7 +877,7 @@ editor_datapanel_wrapper = function (editor) { return pos; } - editor.dom.picClick.onclick = function (e) { + editor.dom.appendPicClick.onclick = function (e) { var loc = eToLoc(e); var pos = locToPos(loc); //console.log(e,loc,pos); @@ -907,12 +907,12 @@ editor_datapanel_wrapper = function (editor) { printe("不合法的Autotile图片！"); return; } - var imgData = editor.dom.sourceCtx.getImageData(0, 0, image.width, image.height); - editor.dom.spriteCtx.putImageData(imgData, 0, 0); - var imgbase64 = editor.dom.sprite.toDataURL().split(',')[1]; + var imgData = editor.dom.appendSourceCtx.getImageData(0, 0, image.width, image.height); + editor.dom.appendSpriteCtx.putImageData(imgData, 0, 0); + var imgbase64 = editor.dom.appendSprite.toDataURL().split(',')[1]; // Step 1: List文件名 - fs.readdir('./project/images', function (err, data) { + fs.readdir('./project/autotiles', function (err, data) { if (err) { printe(err); throw (err); @@ -926,7 +926,7 @@ editor_datapanel_wrapper = function (editor) { } // Step 3: 写入文件 - fs.writeFile('./project/images/' + filename + ".png", imgbase64, 'base64', function (err, data) { + fs.writeFile('./project/autotiles/' + filename + ".png", imgbase64, 'base64', function (err, data) { if (err) { printe(err); throw (err); @@ -953,23 +953,23 @@ editor_datapanel_wrapper = function (editor) { var ysize = editor.dom.selectAppend.value.endsWith('48') ? 48 : 32; for (var ii = 0, v; v = editor_mode.appendPic.selectPos[ii]; ii++) { - // var imgData = editor.dom.sourceCtx.getImageData(v.x * 32, v.y * ysize, 32, ysize); - // editor.dom.spriteCtx.putImageData(imgData, ii * 32, editor.dom.sprite.height - ysize); - // editor.dom.spriteCtx.drawImage(editor_mode.appendPic.img, v.x * 32, v.y * ysize, 32, ysize, ii * 32, height, 32, ysize) + // var imgData = editor.dom.appendSourceCtx.getImageData(v.x * 32, v.y * ysize, 32, ysize); + // editor.dom.appendSpriteCtx.putImageData(imgData, ii * 32, editor.dom.appendSprite.height - ysize); + // editor.dom.appendSpriteCtx.drawImage(editor_mode.appendPic.img, v.x * 32, v.y * ysize, 32, ysize, ii * 32, height, 32, ysize) - editor.dom.spriteCtx.drawImage(editor.dom.sourceCtx.canvas, v.x * 32, v.y * ysize, 32, ysize, 32 * ii, editor.dom.sprite.height - ysize, 32, ysize); + editor.dom.appendSpriteCtx.drawImage(editor.dom.appendSourceCtx.canvas, v.x * 32, v.y * ysize, 32, ysize, 32 * ii, editor.dom.appendSprite.height - ysize, 32, ysize); } - var dt = editor.dom.spriteCtx.getImageData(0, 0, editor.dom.sprite.width, editor.dom.sprite.height); - var imgbase64 = editor.dom.sprite.toDataURL('image/png'); + var dt = editor.dom.appendSpriteCtx.getImageData(0, 0, editor.dom.appendSprite.width, editor.dom.appendSprite.height); + var imgbase64 = editor.dom.appendSprite.toDataURL('image/png'); var imgName = editor_mode.appendPic.imageName; - fs.writeFile('./project/images/' + imgName + '.png', imgbase64.split(',')[1], 'base64', function (err, data) { + fs.writeFile('./project/materials/' + imgName + '.png', imgbase64.split(',')[1], 'base64', function (err, data) { if (err) { printe(err); throw (err) } - var currHeight = editor.dom.sprite.height; - editor.dom.sprite.style.height = (editor.dom.sprite.height = (currHeight + ysize)) + "px"; - editor.dom.spriteCtx.putImageData(dt, 0, 0); + var currHeight = editor.dom.appendSprite.height; + editor.dom.appendSprite.style.height = (editor.dom.appendSprite.height = (currHeight + ysize)) + "px"; + editor.dom.appendSpriteCtx.putImageData(dt, 0, 0); core.material.images[imgName].src = imgbase64; editor.widthsX[imgName][3] = currHeight; if (appendRegister && appendRegister.checked) { @@ -992,29 +992,29 @@ editor_datapanel_wrapper = function (editor) { if (value != 'enemys' && value != 'enemy48' && value != 'npcs' && value != 'npc48') return printe("只有怪物或NPC才能快速导入！"); var ysize = value.endsWith('48') ? 48 : 32; - if (editor.dom.sourceCtx.canvas.width != 128 || editor.dom.sourceCtx.canvas.height != 4 * ysize) + if (editor.dom.appendSourceCtx.canvas.width != 128 || editor.dom.appendSourceCtx.canvas.height != 4 * ysize) return printe("只有 4*4 的素材图片才可以快速导入！"); - var dt = editor.dom.spriteCtx.getImageData(0, 0, editor.dom.sprite.width, editor.dom.sprite.height); - editor.dom.sprite.style.height = (editor.dom.sprite.height = (editor.dom.sprite.height + 3 * ysize)) + "px"; - editor.dom.spriteCtx.putImageData(dt, 0, 0); - if (editor.dom.sprite.width == 64) { // 两帧 - editor.dom.spriteCtx.drawImage(editor.dom.sourceCtx.canvas, 32, 0, 64, 4 * ysize, 0, editor.dom.sprite.height - 4 * ysize, 64, 4 * ysize); + var dt = editor.dom.appendSpriteCtx.getImageData(0, 0, editor.dom.appendSprite.width, editor.dom.appendSprite.height); + editor.dom.appendSprite.style.height = (editor.dom.appendSprite.height = (editor.dom.appendSprite.height + 3 * ysize)) + "px"; + editor.dom.appendSpriteCtx.putImageData(dt, 0, 0); + if (editor.dom.appendSprite.width == 64) { // 两帧 + editor.dom.appendSpriteCtx.drawImage(editor.dom.appendSourceCtx.canvas, 32, 0, 64, 4 * ysize, 0, editor.dom.appendSprite.height - 4 * ysize, 64, 4 * ysize); } else { // 四帧 - editor.dom.spriteCtx.drawImage(editor.dom.sourceCtx.canvas, 0, 0, 128, 4 * ysize, 0, editor.dom.sprite.height - 4 * ysize, 128, 4 * ysize); + editor.dom.appendSpriteCtx.drawImage(editor.dom.appendSourceCtx.canvas, 0, 0, 128, 4 * ysize, 0, editor.dom.appendSprite.height - 4 * ysize, 128, 4 * ysize); } - dt = editor.dom.spriteCtx.getImageData(0, 0, editor.dom.sprite.width, editor.dom.sprite.height); - var imgbase64 = editor.dom.sprite.toDataURL('image/png'); + dt = editor.dom.appendSpriteCtx.getImageData(0, 0, editor.dom.appendSprite.width, editor.dom.appendSprite.height); + var imgbase64 = editor.dom.appendSprite.toDataURL('image/png'); var imgName = editor_mode.appendPic.imageName; - fs.writeFile('./project/images/' + imgName + '.png', imgbase64.split(',')[1], 'base64', function (err, data) { + fs.writeFile('./project/materials/' + imgName + '.png', imgbase64.split(',')[1], 'base64', function (err, data) { if (err) { printe(err); throw (err) } - var currHeight = editor.dom.sprite.height; - editor.dom.sprite.style.height = (editor.dom.sprite.height = (currHeight + ysize)) + "px"; - editor.dom.spriteCtx.putImageData(dt, 0, 0); + var currHeight = editor.dom.appendSprite.height; + editor.dom.appendSprite.style.height = (editor.dom.appendSprite.height = (currHeight + ysize)) + "px"; + editor.dom.appendSpriteCtx.putImageData(dt, 0, 0); core.material.images[imgName].src = imgbase64; editor.widthsX[imgName][3] = currHeight; if (appendRegister && appendRegister.checked) { diff --git a/_server/editor_mode.js b/_server/editor_mode.js index 4bf207ad..3339d993 100644 --- a/_server/editor_mode.js +++ b/_server/editor_mode.js @@ -169,9 +169,10 @@ editor_mode = function (editor) { return true } - editor_mode.prototype.checkImages = function (thiseval) { + editor_mode.prototype.checkImages = function (thiseval, directory) { + if (!directory) return true; if (!editor_mode.checkUnique(thiseval)) return false; - fs.readdir('project/images', function (err, data) { + fs.readdir(directory, function (err, data) { if (err) { printe(err); throw Error(err); diff --git a/_server/editor_table.js b/_server/editor_table.js index 4a404428..1788515b 100644 --- a/_server/editor_table.js +++ b/_server/editor_table.js @@ -362,7 +362,7 @@ editor_table_wrapper = function (editor) { var tokenstyle = document.createElement("style"); document.body.appendChild(tokenstyle); - tokenPoolRender = function() { + var tokenPoolRender = function() { var content = ""; Object.keys(tokenPool).forEach(function(k) { content += /* CSS */`[data-field|=${k}]{ display: none }`; diff --git a/_server/table/data.comment.js b/_server/table/data.comment.js index 48c722f9..238b7c62 100644 --- a/_server/table/data.comment.js +++ b/_server/table/data.comment.js @@ -20,7 +20,7 @@ var data_comment_c456ea59_6018_45ef_8bcc_211a24c627dc = { "images": { "_leaf": true, "_type": "material", - "_range": "editor.mode.checkImages(thiseval)", + "_range": "editor.mode.checkImages(thiseval, './project/images/')", "_directory": "./project/images/", "_transform": (function (one) { if (one.endsWith('.png') || one.endsWith('.jpg') || one.endsWith('.jpeg') || end.endsWith('.gif')) @@ -33,8 +33,8 @@ var data_comment_c456ea59_6018_45ef_8bcc_211a24c627dc = { "tilesets": { "_leaf": true, "_type": "material", - "_range": "editor.mode.checkImages(thiseval)", - "_directory": "./project/images/", + "_range": "editor.mode.checkImages(thiseval, './project/tilesets/')", + "_directory": "./project/tilesets/", "_transform": (function (one) { if (one.endsWith('.png')) return one; @@ -248,7 +248,9 @@ var data_comment_c456ea59_6018_45ef_8bcc_211a24c627dc = { "_leaf": true, "_type": "select", "_select": { - "values": [null].concat(Object.keys(editor.core.material.images)) + "values": [null].concat(Object.keys(editor.core.material.images.images).filter(function (name) { + return name.endsWith('.png'); + })) }, "_data": "勇士行走图" }, diff --git a/libs/core.js b/libs/core.js index 6b5d45ec..d853edbc 100644 --- a/libs/core.js +++ b/libs/core.js @@ -192,7 +192,7 @@ function core() { 'equipName': main.equipName || [], "statusLeftBackground": main.statusLeftBackground || "url(project/materials/ground.png) repeat", "statusTopBackground": main.statusTopBackground || "url(project/materials/ground.png) repeat", - "toolsBackground": main.toolsBackground || "url(project/images/materials.png) repeat", + "toolsBackground": main.toolsBackground || "url(project/materials/ground.png) repeat", "borderColor": main.borderColor || "white", "statusBarColor": main.statusBarColor || "white", "hardLabelColor": main.hardLabelColor || "red", diff --git a/main.js b/main.js index 89864d06..be30e993 100644 --- a/main.js +++ b/main.js @@ -200,7 +200,7 @@ main.prototype.init = function (mode, callback) { var mainData = data_a1e2fb4a_e986_4524_b0da_9b7ba7c0874d.main; for(var ii in mainData)main[ii]=mainData[ii]; - main.dom.startBackground.src="project/images/"+main.startBackground; + main.dom.startBackground.src = main.startBackground; main.dom.startLogo.style=main.startLogoStyle; main.dom.startButtonGroup.style = main.startButtonsStyle; main.levelChoose.forEach(function(value){ diff --git a/project/data.js b/project/data.js index 6cf996f6..fad424a9 100644 --- a/project/data.js +++ b/project/data.js @@ -40,7 +40,7 @@ var data_a1e2fb4a_e986_4524_b0da_9b7ba7c0874d = "背景图.jpg": "bg.jpg", "背景音乐.mp3": "bgm.mp3" }, - "startBackground": "bg.jpg", + "startBackground": "project/images/bg.jpg", "startLogoStyle": "color: black", "levelChoose": [ [ @@ -65,7 +65,7 @@ var data_a1e2fb4a_e986_4524_b0da_9b7ba7c0874d = "盾牌" ], "startBgm": null, - "statusLeftBackground": null, + "statusLeftBackground": "url(project/materials/ground.png) repeat", "statusTopBackground": "url(project/materials/ground.png) repeat", "toolsBackground": "url(project/materials/ground.png) repeat", "borderColor": "#CCCCCC",