diff --git a/_server/editor_file.js b/_server/editor_file.js index e0ce6877..dc57e030 100644 --- a/_server/editor_file.js +++ b/_server/editor_file.js @@ -248,6 +248,32 @@ editor_file = function (editor, callback) { else tempcallback(null); } + editor_file.registerAutotile = function (filename, callback) { + var idnum = 140; + while (editor.core.maps.blocksInfo[idnum]) idnum++; + + var iconActions = []; + var mapActions = []; + + iconActions.push(["add", "['autotile']['" + filename + "']", 0]); + mapActions.push(["add", "['" + idnum + "']", {'cls': 'autotile', 'id': filename, 'noPass': true}]); + + var templist = []; + var tempcallback = function (err) { + templist.push(err); + if (templist.length == 2) { + if (templist[0] != null || templist[1] != null || templist[2] != null) + callback((templist[0] || '') + '\n' + (templist[1] || '') + '\n' + (templist[2] || '')); + //这里如果一个成功一个失败会出严重bug + else + callback(null); + } + } + + saveSetting('icons', iconActions, tempcallback); + saveSetting('maps', mapActions, tempcallback); + } + editor_file.changeIdAndIdnum = function (id, idnum, info, callback) { if (!isset(callback)) { printe('未设置callback'); diff --git a/_server/editor_mode.js b/_server/editor_mode.js index 9bbf0c0b..1b0e71f2 100644 --- a/_server/editor_mode.js +++ b/_server/editor_mode.js @@ -512,12 +512,26 @@ editor_mode = function (editor) { var selectAppend = document.getElementById('selectAppend'); var selectAppend_str = []; - ["terrains", "animates", "enemys", "enemy48", "items", "npcs", "npc48"].forEach(function (image) { + ["terrains", "animates", "enemys", "enemy48", "items", "npcs", "npc48", "autotile"].forEach(function (image) { selectAppend_str.push(["\n'].join('')); }); selectAppend.innerHTML = selectAppend_str.join(''); selectAppend.onchange = function () { + var value = selectAppend.value; + + if (value == 'autotile') { + editor_mode.appendPic.imageName = 'autotile'; + for (var jj=0;jj<4;jj++) appendPicSelection.children[jj].style = 'display:none'; + if (editor_mode.appendPic.img) { + sprite.style.width = (sprite.width = editor_mode.appendPic.img.width) / ratio + 'px'; + sprite.style.height = (sprite.height = editor_mode.appendPic.img.height) / ratio + 'px'; + sprite.getContext('2d').clearRect(0, 0, sprite.width, sprite.height); + sprite.getContext('2d').drawImage(editor_mode.appendPic.img, 0, 0); + } + return; + } + var ysize = selectAppend.value.indexOf('48') === -1 ? 32 : 48; editor_mode.appendPic.imageName = value; var img = core.material.images[value]; @@ -545,14 +559,14 @@ editor_mode = function (editor) { var loadImage = function (content, callback) { var image = new Image(); try { + image.onload = function () { + callback(image); + } image.src = content; if (image.complete) { callback(image); return; } - image.onload = function () { - callback(image); - } } catch (e) { printe(e); @@ -563,11 +577,20 @@ editor_mode = function (editor) { editor_mode.appendPic.img = image; editor_mode.appendPic.width = image.width; editor_mode.appendPic.height = image.height; - var ysize = selectAppend.value.indexOf('48') === -1 ? 32 : 48; - for (var ii = 0; ii < 3; ii++) { - var newsprite = appendPicCanvas.children[ii]; - newsprite.style.width = (newsprite.width = Math.floor(image.width / 32) * 32) / ratio + 'px'; - newsprite.style.height = (newsprite.height = Math.floor(image.height / ysize) * ysize) / ratio + 'px'; + + if (selectAppend.value == 'autotile') { + sprite.style.width = (sprite.width = image.width) / ratio + 'px'; + sprite.style.height = (sprite.height = image.height) / ratio + 'px'; + sprite.getContext('2d').clearRect(0, 0, sprite.width, sprite.height); + sprite.getContext('2d').drawImage(image, 0, 0); + } + else { + var ysize = selectAppend.value.indexOf('48') === -1 ? 32 : 48; + for (var ii = 0; ii < 3; ii++) { + var newsprite = appendPicCanvas.children[ii]; + newsprite.style.width = (newsprite.width = Math.floor(image.width / 32) * 32) / ratio + 'px'; + newsprite.style.height = (newsprite.height = Math.floor(image.height / ysize) * ysize) / ratio + 'px'; + } } //画灰白相间的格子 @@ -631,6 +654,54 @@ editor_mode = function (editor) { var appendConfirm = document.getElementById('appendConfirm'); appendConfirm.onclick = function () { + + var confirmAutotile = function () { + if (sprite.width != 96 || sprite.height != 128) { + printe("不合法的Autotile图片！"); + return; + } + var imgbase64 = sprite.toDataURL().split(',')[1]; + + // Step 1: List文件名 + fs.readdir('./project/images', function (err, data) { + if (err) { + printe(err); + throw(err); + } + + // Step 2: 选择Autotile文件名 + var filename; + for (var i=1;;++i) { + filename = 'autotile'+i; + if (data.indexOf(filename+".png")==-1) break; + } + + // Step 3: 写入文件 + fs.writeFile('./project/images/'+filename+".png", imgbase64, 'base64', function (err, data) { + if (err) { + printe(err); + throw(err); + } + // Step 4: 自动注册 + editor_file.registerAutotile(filename, function (err) { + if (err) { + printe(err); + throw(err); + } + printe('自动元件'+filename+'注册成功,请F5刷新编辑器'); + }) + + }) + + }) + + } + + if (selectAppend.value == 'autotile') { + confirmAutotile(); + return; + } + var ysize = selectAppend.value.indexOf('48') === -1 ? 32 : 48; var sprited = sprite.getContext('2d'); //sprited.drawImage(img, 0, 0); diff --git a/docs/personalization.md b/docs/personalization.md index 78ab906f..1b79432e 100644 --- a/docs/personalization.md +++ b/docs/personalization.md @@ -27,7 +27,7 @@ HTML5魔塔是使用画布（canvas）来绘制，存在若干个图层，它们 所有素材的图片都在`images`目录下。 - `animates.png` 为所有动画效果。主要是星空熔岩，开门，毒网，传送门之类的效果。为四帧。 -- `autotile.png` 为Autotile块。 +- `autotile*.png` 为Autotile块。 - `enemys.png` 为所有怪物的图片。 - `enemy48.png` 为所有48x32怪物的图片。 - `heros.png` 为勇士行走图。 @@ -151,18 +151,25 @@ ID必须由数字字母下划线组成，数字在1000以内，且均不能和 素材注册完毕后，即可在游戏中正常使用，也可以被地图生成器所识别（需要重开地图生成器）。 -#### Autotile的注册 +#### Autotile自动元件的注册 但是，通过上面这种方式，我们是没办法新增并注册Autotile的。 除了替换样板现有的几个外，如果我们还需要新添加Autotile，则： +1. 下拉框切到“追加素材”，导入文件到画板，然后导入一张Autotile自动元件图片。 +2. 下拉框选择autotile，然后点“追加” +3. 看到成功的提示后刷新编辑器即可。 + +