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

修复追加素材的bug

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
_server/editor.js
View File

@ -40,12 +40,12 @@ function editor() {
layerMod3:document.getElementById('layerMod3'), layerMod3:document.getElementById('layerMod3'),
viewportButtons:document.getElementById('viewportButtons'), viewportButtons:document.getElementById('viewportButtons'),
appendPicCanvas : document.getElementById('appendPicCanvas'), appendPicCanvas : document.getElementById('appendPicCanvas'),
bg : document.getElementById('appendPicCanvas').children[0], appendBgCtx : document.getElementById('appendPicCanvas').children[0].getContext('2d'),
source : document.getElementById('appendPicCanvas').children[1], appendSource : document.getElementById('appendPicCanvas').children[1],
picClick : document.getElementById('appendPicCanvas').children[2], appendPicClick : document.getElementById('appendPicCanvas').children[2],
sprite : document.getElementById('appendPicCanvas').children[3], appendSprite : document.getElementById('appendPicCanvas').children[3],
sourceCtx:document.getElementById('appendPicCanvas').children[1].getContext('2d'), appendSourceCtx:document.getElementById('appendPicCanvas').children[1].getContext('2d'),
spriteCtx:document.getElementById('appendPicCanvas').children[3].getContext('2d'), appendSpriteCtx:document.getElementById('appendPicCanvas').children[3].getContext('2d'),
appendPicSelection : document.getElementById('appendPicSelection'), appendPicSelection : document.getElementById('appendPicSelection'),
selectAppend : document.getElementById('selectAppend'), selectAppend : document.getElementById('selectAppend'),
selectFileBtn :document.getElementById('selectFileBtn'), selectFileBtn :document.getElementById('selectFileBtn'),

88
_server/editor_datapanel.js
View File

@ -621,7 +621,7 @@ editor_datapanel_wrapper = function (editor) {
editor.uifunctions.fixCtx_func = function () { 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.mozImageSmoothingEnabled = false;
ctx.webkitImageSmoothingEnabled = false; ctx.webkitImageSmoothingEnabled = false;
ctx.msImageSmoothingEnabled = false; ctx.msImageSmoothingEnabled = false;
@ -644,10 +644,10 @@ editor_datapanel_wrapper = function (editor) {
editor_mode.appendPic.imageName = 'autotile'; editor_mode.appendPic.imageName = 'autotile';
for (var jj = 0; jj < 4; jj++) editor.dom.appendPicSelection.children[jj].style = 'display:none'; for (var jj = 0; jj < 4; jj++) editor.dom.appendPicSelection.children[jj].style = 'display:none';
if (editor_mode.appendPic.img) { 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.appendSprite.style.width = (editor.dom.appendSprite.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.appendSprite.style.height = (editor.dom.appendSprite.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.appendSpriteCtx.clearRect(0, 0, editor.dom.appendSprite.width, editor.dom.appendSprite.height);
editor.dom.spriteCtx.drawImage(editor_mode.appendPic.img, 0, 0); editor.dom.appendSpriteCtx.drawImage(editor_mode.appendPic.img, 0, 0);
} }
return; return;
} }
@ -668,9 +668,9 @@ editor_datapanel_wrapper = function (editor) {
for (var jj = num; jj < 4; jj++) { for (var jj = num; jj < 4; jj++) {
editor.dom.appendPicSelection.children[jj].style = 'display:none'; 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.appendSprite.style.width = (editor.dom.appendSprite.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.appendSprite.style.height = (editor.dom.appendSprite.height = img.height + ysize) / editor.uivalues.ratio + 'px';
editor.dom.spriteCtx.drawImage(img, 0, 0); editor.dom.appendSpriteCtx.drawImage(img, 0, 0);
} }
editor.dom.selectAppend.onchange(); 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.width = (newsprite.width = image.width) / editor.uivalues.ratio + 'px';
newsprite.style.height = (newsprite.height = image.height) / 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.appendSpriteCtx.clearRect(0, 0, editor.dom.appendSprite.width, editor.dom.appendSprite.height);
editor.dom.spriteCtx.drawImage(image, 0, 0); editor.dom.appendSpriteCtx.drawImage(image, 0, 0);
} }
else { else {
var ysize = editor.dom.selectAppend.value.endsWith('48') ? 48 : 32; 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 colorA = ["#f8f8f8", "#cccccc"];
var colorIndex; var colorIndex;
var sratio = 4; var sratio = 4;
@ -814,8 +814,8 @@ editor_datapanel_wrapper = function (editor) {
} }
//把导入的图片画出 //把导入的图片画出
editor.dom.sourceCtx.drawImage(image, 0, 0); editor.dom.appendSourceCtx.drawImage(image, 0, 0);
editor_mode.appendPic.sourceImageData = editor.dom.sourceCtx.getImageData(0, 0, image.width, image.height); editor_mode.appendPic.sourceImageData = editor.dom.appendSourceCtx.getImageData(0, 0, image.width, image.height);
//重置临时变量 //重置临时变量
editor.dom.selectAppend.onchange(); 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.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.appendSourceCtx.clearRect(0, 0, imgData.width, imgData.height);
editor.dom.sourceCtx.putImageData(nimgData, 0, 0); editor.dom.appendSourceCtx.putImageData(nimgData, 0, 0);
} }
} }
@ -877,7 +877,7 @@ editor_datapanel_wrapper = function (editor) {
return pos; return pos;
} }
editor.dom.picClick.onclick = function (e) { editor.dom.appendPicClick.onclick = function (e) {
var loc = eToLoc(e); var loc = eToLoc(e);
var pos = locToPos(loc); var pos = locToPos(loc);
//console.log(e,loc,pos); //console.log(e,loc,pos);
@ -907,12 +907,12 @@ editor_datapanel_wrapper = function (editor) {
printe("不合法的Autotile图片！"); printe("不合法的Autotile图片！");
return; return;
} }
var imgData = editor.dom.sourceCtx.getImageData(0, 0, image.width, image.height); var imgData = editor.dom.appendSourceCtx.getImageData(0, 0, image.width, image.height);
editor.dom.spriteCtx.putImageData(imgData, 0, 0); editor.dom.appendSpriteCtx.putImageData(imgData, 0, 0);
var imgbase64 = editor.dom.sprite.toDataURL().split(',')[1]; var imgbase64 = editor.dom.appendSprite.toDataURL().split(',')[1];
// Step 1: List文件名 // Step 1: List文件名
fs.readdir('./project/images', function (err, data) { fs.readdir('./project/autotiles', function (err, data) {
if (err) { if (err) {
printe(err); printe(err);
throw (err); throw (err);
@ -926,7 +926,7 @@ editor_datapanel_wrapper = function (editor) {
} }
// Step 3: 写入文件 // 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) { if (err) {
printe(err); printe(err);
throw (err); throw (err);
@ -953,23 +953,23 @@ editor_datapanel_wrapper = function (editor) {
var ysize = editor.dom.selectAppend.value.endsWith('48') ? 48 : 32; var ysize = editor.dom.selectAppend.value.endsWith('48') ? 48 : 32;
for (var ii = 0, v; v = editor_mode.appendPic.selectPos[ii]; ii++) { 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); // var imgData = editor.dom.appendSourceCtx.getImageData(v.x * 32, v.y * ysize, 32, ysize);
// editor.dom.spriteCtx.putImageData(imgData, ii * 32, editor.dom.sprite.height - ysize); // editor.dom.appendSpriteCtx.putImageData(imgData, ii * 32, editor.dom.appendSprite.height - ysize);
// editor.dom.spriteCtx.drawImage(editor_mode.appendPic.img, v.x * 32, v.y * ysize, 32, ysize, ii * 32, height, 32, 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 dt = editor.dom.appendSpriteCtx.getImageData(0, 0, editor.dom.appendSprite.width, editor.dom.appendSprite.height);
var imgbase64 = editor.dom.sprite.toDataURL('image/png'); var imgbase64 = editor.dom.appendSprite.toDataURL('image/png');
var imgName = editor_mode.appendPic.imageName; 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) { if (err) {
printe(err); printe(err);
throw (err) throw (err)
} }
var currHeight = editor.dom.sprite.height; var currHeight = editor.dom.appendSprite.height;
editor.dom.sprite.style.height = (editor.dom.sprite.height = (currHeight + ysize)) + "px"; editor.dom.appendSprite.style.height = (editor.dom.appendSprite.height = (currHeight + ysize)) + "px";
editor.dom.spriteCtx.putImageData(dt, 0, 0); editor.dom.appendSpriteCtx.putImageData(dt, 0, 0);
core.material.images[imgName].src = imgbase64; core.material.images[imgName].src = imgbase64;
editor.widthsX[imgName][3] = currHeight; editor.widthsX[imgName][3] = currHeight;
if (appendRegister && appendRegister.checked) { if (appendRegister && appendRegister.checked) {
@ -992,29 +992,29 @@ editor_datapanel_wrapper = function (editor) {
if (value != 'enemys' && value != 'enemy48' && value != 'npcs' && value != 'npc48') if (value != 'enemys' && value != 'enemy48' && value != 'npcs' && value != 'npc48')
return printe("只有怪物或NPC才能快速导入！"); return printe("只有怪物或NPC才能快速导入！");
var ysize = value.endsWith('48') ? 48 : 32; 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 的素材图片才可以快速导入！"); return printe("只有 4*4 的素材图片才可以快速导入！");
var dt = editor.dom.spriteCtx.getImageData(0, 0, editor.dom.sprite.width, editor.dom.sprite.height); var dt = editor.dom.appendSpriteCtx.getImageData(0, 0, editor.dom.appendSprite.width, editor.dom.appendSprite.height);
editor.dom.sprite.style.height = (editor.dom.sprite.height = (editor.dom.sprite.height + 3 * ysize)) + "px"; editor.dom.appendSprite.style.height = (editor.dom.appendSprite.height = (editor.dom.appendSprite.height + 3 * ysize)) + "px";
editor.dom.spriteCtx.putImageData(dt, 0, 0); editor.dom.appendSpriteCtx.putImageData(dt, 0, 0);
if (editor.dom.sprite.width == 64) { // 两帧 if (editor.dom.appendSprite.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); editor.dom.appendSpriteCtx.drawImage(editor.dom.appendSourceCtx.canvas, 32, 0, 64, 4 * ysize, 0, editor.dom.appendSprite.height - 4 * ysize, 64, 4 * ysize);
} else { // 四帧 } 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); dt = editor.dom.appendSpriteCtx.getImageData(0, 0, editor.dom.appendSprite.width, editor.dom.appendSprite.height);
var imgbase64 = editor.dom.sprite.toDataURL('image/png'); var imgbase64 = editor.dom.appendSprite.toDataURL('image/png');
var imgName = editor_mode.appendPic.imageName; 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) { if (err) {
printe(err); printe(err);
throw (err) throw (err)
} }
var currHeight = editor.dom.sprite.height; var currHeight = editor.dom.appendSprite.height;
editor.dom.sprite.style.height = (editor.dom.sprite.height = (currHeight + ysize)) + "px"; editor.dom.appendSprite.style.height = (editor.dom.appendSprite.height = (currHeight + ysize)) + "px";
editor.dom.spriteCtx.putImageData(dt, 0, 0); editor.dom.appendSpriteCtx.putImageData(dt, 0, 0);
core.material.images[imgName].src = imgbase64; core.material.images[imgName].src = imgbase64;
editor.widthsX[imgName][3] = currHeight; editor.widthsX[imgName][3] = currHeight;
if (appendRegister && appendRegister.checked) { if (appendRegister && appendRegister.checked) {

5
_server/editor_mode.js
View File

@ -169,9 +169,10 @@ editor_mode = function (editor) {
return true 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; if (!editor_mode.checkUnique(thiseval)) return false;
fs.readdir('project/images', function (err, data) { fs.readdir(directory, function (err, data) {
if (err) { if (err) {
printe(err); printe(err);
throw Error(err); throw Error(err);

2
_server/editor_table.js
View File

@ -362,7 +362,7 @@ editor_table_wrapper = function (editor) {
var tokenstyle = document.createElement("style"); var tokenstyle = document.createElement("style");
document.body.appendChild(tokenstyle); document.body.appendChild(tokenstyle);
tokenPoolRender = function() { var tokenPoolRender = function() {
var content = ""; var content = "";
Object.keys(tokenPool).forEach(function(k) { Object.keys(tokenPool).forEach(function(k) {
content += /* CSS */`[data-field|=${k}]{ display: none }`; content += /* CSS */`[data-field|=${k}]{ display: none }`;

10
_server/table/data.comment.js
View File

@ -20,7 +20,7 @@ var data_comment_c456ea59_6018_45ef_8bcc_211a24c627dc = {
"images": { "images": {
"_leaf": true, "_leaf": true,
"_type": "material", "_type": "material",
"_range": "editor.mode.checkImages(thiseval)", "_range": "editor.mode.checkImages(thiseval, './project/images/')",
"_directory": "./project/images/", "_directory": "./project/images/",
"_transform": (function (one) { "_transform": (function (one) {
if (one.endsWith('.png') || one.endsWith('.jpg') || one.endsWith('.jpeg') || end.endsWith('.gif')) 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": { "tilesets": {
"_leaf": true, "_leaf": true,
"_type": "material", "_type": "material",
"_range": "editor.mode.checkImages(thiseval)", "_range": "editor.mode.checkImages(thiseval, './project/tilesets/')",
"_directory": "./project/images/", "_directory": "./project/tilesets/",
"_transform": (function (one) { "_transform": (function (one) {
if (one.endsWith('.png')) if (one.endsWith('.png'))
return one; return one;
@ -248,7 +248,9 @@ var data_comment_c456ea59_6018_45ef_8bcc_211a24c627dc = {
"_leaf": true, "_leaf": true,
"_type": "select", "_type": "select",
"_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": "勇士行走图" "_data": "勇士行走图"
}, },

2
libs/core.js
View File

@ -192,7 +192,7 @@ function core() {
'equipName': main.equipName || [], 'equipName': main.equipName || [],
"statusLeftBackground": main.statusLeftBackground || "url(project/materials/ground.png) repeat", "statusLeftBackground": main.statusLeftBackground || "url(project/materials/ground.png) repeat",
"statusTopBackground": main.statusTopBackground || "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", "borderColor": main.borderColor || "white",
"statusBarColor": main.statusBarColor || "white", "statusBarColor": main.statusBarColor || "white",
"hardLabelColor": main.hardLabelColor || "red", "hardLabelColor": main.hardLabelColor || "red",

2
main.js
View File

@ -200,7 +200,7 @@ main.prototype.init = function (mode, callback) {
var mainData = data_a1e2fb4a_e986_4524_b0da_9b7ba7c0874d.main; var mainData = data_a1e2fb4a_e986_4524_b0da_9b7ba7c0874d.main;
for(var ii in mainData)main[ii]=mainData[ii]; 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.startLogo.style=main.startLogoStyle;
main.dom.startButtonGroup.style = main.startButtonsStyle; main.dom.startButtonGroup.style = main.startButtonsStyle;
main.levelChoose.forEach(function(value){ main.levelChoose.forEach(function(value){

4
project/data.js
View File

@ -40,7 +40,7 @@ var data_a1e2fb4a_e986_4524_b0da_9b7ba7c0874d =
"背景图.jpg": "bg.jpg", "背景图.jpg": "bg.jpg",
"背景音乐.mp3": "bgm.mp3" "背景音乐.mp3": "bgm.mp3"
}, },
"startBackground": "bg.jpg", "startBackground": "project/images/bg.jpg",
"startLogoStyle": "color: black", "startLogoStyle": "color: black",
"levelChoose": [ "levelChoose": [
[ [
@ -65,7 +65,7 @@ var data_a1e2fb4a_e986_4524_b0da_9b7ba7c0874d =
"盾牌" "盾牌"
], ],
"startBgm": null, "startBgm": null,
"statusLeftBackground": null, "statusLeftBackground": "url(project/materials/ground.png) repeat",
"statusTopBackground": "url(project/materials/ground.png) repeat", "statusTopBackground": "url(project/materials/ground.png) repeat",
"toolsBackground": "url(project/materials/ground.png) repeat", "toolsBackground": "url(project/materials/ground.png) repeat",
"borderColor": "#CCCCCC", "borderColor": "#CCCCCC",