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

Merge branch 'v2.7' into v2.x

Browse Source
This commit is contained in:
ckcz123 2020-06-09 20:29:00 +08:00
commit d93af5ea52
5 changed files with 147 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
_server/editor.js
View File

@ -481,7 +481,8 @@ editor.prototype.updateLastUsedMap = function () {
ctx.lineWidth = 4;
for (var i = 0; i < lastUsed.length; ++i) {
try {
var x = i % core.__SIZE__, y = parseInt(i / core.__SIZE__);
var per_row = core.__SIZE__ - 1;
var x = i % per_row, y = parseInt(i / per_row);
var info = lastUsed[i];
if (!info || !info.images) continue;
if (info.isTile && core.material.images.tilesets[info.images]) {
@ -573,9 +574,42 @@ editor.prototype.drawInitData = function (icons) {
var iconImages = document.getElementById('iconImages');
iconImages.style.width = (iconImages.width = fullWidth) / ratio + 'px';
iconImages.style.height = (iconImages.height = fullHeight) / ratio + 'px';
var drawImage = function (image, x, y) {
document.body.ondrop = function (e) {
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();
return false;
}
document.body.ondragover = function (e) {
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();
return false;
}
var drawImage = function (image, x, y, cls) {
image.style.left = x + 'px';
image.style.top = y + 'px';
image.ondrop = (function (cls) { return function (e) {
e.stopPropagation();
e.preventDefault();
if (!cls) return false;
var files = e.dataTransfer.files;
if (files.length >= 1) {
var file = files[0];
if (file.type == 'image/png') {
editor.uifunctions.dragImageToAppend(file, cls);
} else {
printe('只支持png图片的快速追加！');
}
}
return false;
}; })(cls);
image.ondragover = function(e) {
e.stopPropagation();
e.preventDefault();
e.dataTransfer.dropEffect = 'copy';
return false;
}
iconImages.appendChild(image);
}
@ -600,12 +634,12 @@ editor.prototype.drawInitData = function (icons) {
var subimgs = core.splitImage(images[img], 32, editor.uivalues.foldPerCol * 32);
var frames = images[img].width / 32;
for (var i = 0; i < subimgs.length; i+=frames) {
drawImage(subimgs[i], nowx, i==0?2*32:0);
drawImage(subimgs[i], nowx, i==0?2*32:0, img);
nowx += 32;
}
}
else {
drawImage(images[img], nowx, 32*2);
drawImage(images[img], nowx, 32*2, img);
nowx += images[img].width;
}
continue;
@ -615,7 +649,7 @@ editor.prototype.drawInitData = function (icons) {
var tempx = editor.uivalues.folded ? 32 : 96;
for (var im in autotiles) {
var subimgs = core.splitImage(autotiles[im], tempx, autotiles[im].height);
drawImage(subimgs[0], nowx, nowy);
drawImage(subimgs[0], nowx, nowy, img);
nowy += autotiles[im].height;
}
nowx += tempx;
@ -627,12 +661,12 @@ editor.prototype.drawInitData = function (icons) {
var subimgs = core.splitImage(images[img], 32, editor.uivalues.foldPerCol * per_height);
var frames = images[img].width / 32;
for (var i = 0; i < subimgs.length; i+=frames) {
drawImage(subimgs[i], nowx, 0);
drawImage(subimgs[i], nowx, 0, img);
nowx += 32;
}
}
else {
drawImage(images[img], nowx, 0);
drawImage(images[img], nowx, 0, img);
nowx += images[img].width;
}
}

181
_server/editor_datapanel.js
View File

@ -628,17 +628,16 @@ editor_datapanel_wrapper = function (editor) {
editor.uifunctions.fixCtx_func = function () {
editor.uifunctions.appendPic_func = function () {
// --- fix ctx
[editor.dom.appendSourceCtx, editor.dom.appendSpriteCtx].forEach(function (ctx) {
ctx.mozImageSmoothingEnabled = false;
ctx.webkitImageSmoothingEnabled = false;
ctx.msImageSmoothingEnabled = false;
ctx.imageSmoothingEnabled = false;
})
}
editor.uifunctions.selectAppend_func = function () {
// --- selectAppend
var selectAppend_str = [];
["terrains", "animates", "enemys", "enemy48", "items", "npcs", "npc48", "autotile"].forEach(function (image) {
selectAppend_str.push(["<option value='", image, "'>", image, '</option>\n'].join(''));
@ -681,10 +680,8 @@ editor_datapanel_wrapper = function (editor) {
editor.dom.appendSpriteCtx.drawImage(img, 0, 0);
}
editor.dom.selectAppend.onchange();
}
editor.uifunctions.selectFileBtn_func = function () {
// --- selectFileBtn
var autoAdjust = function (image, callback) {
var changed = false;
@ -769,74 +766,75 @@ editor_datapanel_wrapper = function (editor) {
}
}
editor.dom.selectFileBtn.onclick = function () {
var loadImage = function (content, callback) {
var image = new Image();
try {
image.onload = function () {
callback(image);
}
image.src = content;
}
catch (e) {
printe(e);
var loadImage = function (content, callback) {
var image = new Image();
try {
image.onload = function () {
callback(image);
}
image.src = content;
}
catch (e) {
printe(e);
}
core.readFile(function (content) {
loadImage(content, function (image) {
autoAdjust(image, function (image) {
editor_mode.appendPic.img = image;
editor_mode.appendPic.width = image.width;
editor_mode.appendPic.height = image.height;
if (editor.dom.selectAppend.value == 'autotile') {
for (var ii = 0; ii < 3; ii++) {
var newsprite = editor.dom.appendPicCanvas.children[ii];
newsprite.style.width = (newsprite.width = image.width) / editor.uivalues.ratio + 'px';
newsprite.style.height = (newsprite.height = image.height) / editor.uivalues.ratio + 'px';
}
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;
for (var ii = 0; ii < 3; ii++) {
var newsprite = editor.dom.appendPicCanvas.children[ii];
newsprite.style.width = (newsprite.width = Math.floor(image.width / 32) * 32) / editor.uivalues.ratio + 'px';
newsprite.style.height = (newsprite.height = Math.floor(image.height / ysize) * ysize) / editor.uivalues.ratio + 'px';
}
}
//画灰白相间的格子
var bgc = editor.dom.appendBgCtx;
var colorA = ["#f8f8f8", "#cccccc"];
var colorIndex;
var sratio = 4;
for (var ii = 0; ii < image.width / 32 * sratio; ii++) {
colorIndex = 1 - ii % 2;
for (var jj = 0; jj < image.height / 32 * sratio; jj++) {
bgc.fillStyle = colorA[colorIndex];
colorIndex = 1 - colorIndex;
bgc.fillRect(ii * 32 / sratio, jj * 32 / sratio, 32 / sratio, 32 / sratio);
}
}
//把导入的图片画出
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();
});
});
}, null, 'image/*', 'img');
return;
}
}
var afterReadFile = function (content, callback) {
loadImage(content, function (image) {
autoAdjust(image, function (image) {
editor_mode.appendPic.img = image;
editor_mode.appendPic.width = image.width;
editor_mode.appendPic.height = image.height;
editor.uifunctions.changeColorInput_func = function () {
if (editor.dom.selectAppend.value == 'autotile') {
for (var ii = 0; ii < 3; ii++) {
var newsprite = editor.dom.appendPicCanvas.children[ii];
newsprite.style.width = (newsprite.width = image.width) / editor.uivalues.ratio + 'px';
newsprite.style.height = (newsprite.height = image.height) / editor.uivalues.ratio + 'px';
}
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;
for (var ii = 0; ii < 3; ii++) {
var newsprite = editor.dom.appendPicCanvas.children[ii];
newsprite.style.width = (newsprite.width = Math.floor(image.width / 32) * 32) / editor.uivalues.ratio + 'px';
newsprite.style.height = (newsprite.height = Math.floor(image.height / ysize) * ysize) / editor.uivalues.ratio + 'px';
}
}
//画灰白相间的格子
var bgc = editor.dom.appendBgCtx;
var colorA = ["#f8f8f8", "#cccccc"];
var colorIndex;
var sratio = 4;
for (var ii = 0; ii < image.width / 32 * sratio; ii++) {
colorIndex = 1 - ii % 2;
for (var jj = 0; jj < image.height / 32 * sratio; jj++) {
bgc.fillStyle = colorA[colorIndex];
colorIndex = 1 - colorIndex;
bgc.fillRect(ii * 32 / sratio, jj * 32 / sratio, 32 / sratio, 32 / sratio);
}
}
//把导入的图片画出
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();
if (callback) callback();
});
});
}
editor.dom.selectFileBtn.onclick = function () {
core.readFile(afterReadFile, null, 'image/*', 'img');
}
// --- changeColorInput
var changeColorInput = document.getElementById('changeColorInput')
changeColorInput.oninput = function () {
var delta = (~~changeColorInput.value) * 30;
@ -862,12 +860,8 @@ editor_datapanel_wrapper = function (editor) {
editor.dom.appendSourceCtx.clearRect(0, 0, imgData.width, imgData.height);
editor.dom.appendSourceCtx.putImageData(nimgData, 0, 0);
}
}
editor.uifunctions.picClick_func = function () {
// --- picClick
var eToLoc = function (e) {
var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop
@ -900,12 +894,9 @@ editor_datapanel_wrapper = function (editor) {
'height:', pos.ysize - 6, 'px;'
].join('');
}
}
editor.uifunctions.appendConfirm_func = function () {
// appendConfirm
var appendRegister = document.getElementById('appendRegister');
var appendConfirm = document.getElementById('appendConfirm');
appendConfirm.onclick = function () {
@ -997,16 +988,21 @@ editor_datapanel_wrapper = function (editor) {
var quickAppendConfirm = document.getElementById('quickAppendConfirm');
quickAppendConfirm.onclick = function () {
var value = editor.dom.selectAppend.value;
if (value != 'enemys' && value != 'enemy48' && value != 'npcs' && value != 'npc48')
if (value != 'items' && value != 'enemys' && value != 'enemy48' && value != 'npcs' && value != 'npc48')
return printe("只有怪物或NPC才能快速导入！");
var ysize = value.endsWith('48') ? 48 : 32;
if (editor.dom.appendSourceCtx.canvas.width != 128 || editor.dom.appendSourceCtx.canvas.height != 4 * ysize)
return printe("只有 4*4 的素材图片才可以快速导入！");
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";
var appendSize = value == 'items' ? 15 : 3;
editor.dom.appendSprite.style.height = (editor.dom.appendSprite.height = (editor.dom.appendSprite.height + appendSize * ysize)) + "px";
editor.dom.appendSpriteCtx.putImageData(dt, 0, 0);
if (editor.dom.appendSprite.width == 64) { // 两帧
if (editor.dom.appendSprite.width == 32) { // 1帧：道具
for (var i = 0; i < 16; ++i) {
editor.dom.appendSpriteCtx.drawImage(editor.dom.appendSourceCtx.canvas, 32 * (i % 4), 32 * parseInt(i / 4), 32, 32, 0, editor.dom.appendSprite.height - (16 - i) * ysize, 32, 32);
}
} else 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.appendSpriteCtx.drawImage(editor.dom.appendSourceCtx.canvas, 0, 0, 128, 4 * ysize, 0, editor.dom.appendSprite.height - 4 * ysize, 128, 4 * ysize);
@ -1039,6 +1035,27 @@ editor_datapanel_wrapper = function (editor) {
});
}
editor.uifunctions.dragImageToAppend = function (file, cls) {
editor.mode.change('appendpic');
editor.dom.selectAppend.value = cls;
editor.dom.selectAppend.onchange();
var reader = new FileReader();
reader.onload = function () {
afterReadFile(reader.result, function() {
if (cls == 'terrains') return;
if (confirm('你确定要快速追加么？')) {
if (cls == 'autotile') {
appendConfirm.onclick();
} else {
quickAppendConfirm.onclick();
}
}
});
}
reader.readAsDataURL(file);
}
}
///////////////////////////////////////////////////////////////////////

6
_server/editor_listen.js
View File

@ -162,13 +162,15 @@ editor_listen_wrapper = function (editor) {
editor.uifunctions.changeFloorId_func()
editor.uifunctions.changeFloorSize_func()
editor.uifunctions.fixCtx_func()
// editor.uifunctions.fixCtx_func()
editor.uifunctions.appendPic_func();
/*
editor.uifunctions.selectAppend_func()
editor.uifunctions.selectFileBtn_func()
editor.uifunctions.changeColorInput_func()
editor.uifunctions.picClick_func()
editor.uifunctions.appendConfirm_func()
*/
editor.dom.editModeSelect.onchange = editor.mode.editModeSelect_onchange

3
_server/editor_mappanel.js
View File

@ -852,7 +852,8 @@ editor_mappanel_wrapper = function (editor) {
var px = scrollLeft + e.clientX - editor.dom.mid2.offsetLeft - editor.dom.lastUsedDiv.offsetLeft + editor.dom.lastUsedDiv.scrollLeft,
py = scrollTop + e.clientY - editor.dom.mid2.offsetTop - editor.dom.lastUsedDiv.offsetTop + editor.dom.lastUsedDiv.scrollTop;
var x = parseInt(px / 32), y = parseInt(py / 32);
var index = x + core.__SIZE__ * y;
if (x == core.__SIZE__ - 1) return false;
var index = x + (core.__SIZE__ - 1) * y;
if (index >= editor.uivalues.lastUsed.length) return;
var lastUsed = editor.uivalues.lastUsed.sort(function (a, b) {
if ((a.istop || 0) != (b.istop || 0)) return (b.istop || 0) - (a.istop || 0);

1
editor.html
View File

@ -76,6 +76,7 @@
<input id="quickAppendConfirm" type="button" value="快速追加"/>
<span style="font-size: 13px">&nbsp;&nbsp;自动注册</span><input id="appendRegister" type="checkbox" checked/>
</p>
<p><small>从V2.7.1开始，你可以直接将素材图片拖到对应的素材区，将自动追加并注册。同时，4x4的道具素材已支持快速追加一次16个。</small></p>
<p>
色相:<input id='changeColorInput' type="range" min="0" max="12" step="1" value="0" list="huelists" style="width: 60%;margin-left: 3%;vertical-align: middle">
<datalist id="huelists" style="display: none">