修复追加素材的bug

This commit is contained in:
ckcz123 2020-05-16 09:35:05 +08:00
parent 7b9bcf0487
commit 86bcd55c9e
8 changed files with 64 additions and 61 deletions

View File

@ -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'),

View File

@ -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) {

View File

@ -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);

View File

@ -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 }`;

View File

@ -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": "勇士行走图"
},

View File

@ -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",

View File

@ -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){

View File

@ -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",