Register Autotile
This commit is contained in:
oc
parent
92a24f1797
commit
1e53063785
@ -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');
|
||||
|
||||
@ -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(["<option value='", image, "'>", image, '</option>\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);
|
||||
|
||||
@ -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. 看到成功的提示后刷新编辑器即可。
|
||||
|
||||
<!--
|
||||
|
||||
1. 将新的Autotile图片复制到images目录下。文件名必须是字母数字和下划线组成。
|
||||
2. 进入icons.js，在autotile分类下进行添加该文件的名称，索引简单的写0。
|
||||
3. 指定一个数字，在maps.js中类似进行添加。
|
||||
|
||||
!> Autotile的ID和文件名应确保完全相同！
|
||||
|
||||
-->
|
||||
<!--
|
||||
#### 新添加自定义地形（路面、墙壁等）
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user