素材列表选择

This commit is contained in:
ckcz123 2020-05-15 14:17:59 +08:00
parent 8484ff65b7
commit 7811169a6f
7 changed files with 130 additions and 20 deletions

View File

@ -18,7 +18,7 @@ editor_mode = function (editor) {
this._ids = {}
this.dom = {}
this.actionList = [];
this.mode = '';
this.mode = 'tower'; // 初始默认显示全塔属性
this.info = {};
this.appendPic = {};
this.doubleClickMode = 'change';
@ -176,6 +176,7 @@ editor_mode = function (editor) {
printe(err);
throw Error(err);
}
var notExist = null;
thiseval.map(function (v) {
var name = v.indexOf('.') < 0 ? (v+'.png') : v;
if (data.indexOf(name) < 0) notExist = name;

View File

@ -192,6 +192,7 @@ editor_table_wrapper = function (editor) {
// 当cobj的参数为函数时,代入args算出值
for (var key in cobj) {
if (key === '_data') continue;
if (key === '_transform' || key == '_onconfirm') cobj[key] = cobj[key].toString();
if (cobj[key] instanceof Function) cobj[key] = cobj[key](args);
}
pvobj[ii] = vobj = args.vobj;
@ -363,8 +364,10 @@ editor_table_wrapper = function (editor) {
var tr = button.parentNode.parentNode;
var guid = tr.getAttribute('id');
var cobj = JSON.parse(tr.children[1].getAttribute('cobj'));
var input = tr.children[2].children[0].children[0];
if (cobj._type === 'event') editor_blockly.import(guid, { type: cobj._event });
if (cobj._type === 'textarea') editor_multi.import(guid, { lint: cobj._lint, string: cobj._string });
if (cobj._type === 'material') editor.table.selectMaterial(input, cobj);
}
/**
@ -378,6 +381,7 @@ editor_table_wrapper = function (editor) {
if (editor_mode.doubleClickMode === 'change') {
if (cobj._type === 'event') editor_blockly.import(guid, { type: cobj._event });
if (cobj._type === 'textarea') editor_multi.import(guid, { lint: cobj._lint, string: cobj._string });
if (cobj._type === 'material') editor.table.selectMaterial(input, cobj);
} else if (editor_mode.doubleClickMode === 'add') {
editor_mode.doubleClickMode = 'change';
editor.table.addfunc(guid, obj, commentObj, thisTr, input, field, cobj, modeNode)
@ -387,6 +391,17 @@ editor_table_wrapper = function (editor) {
}
}
editor_table.prototype.selectMaterial = function (input, cobj) {
editor.uievent.selectMaterial(input.value, cobj._docs || cobj._data || '请选择素材', cobj._directory, function (one) {
if (!/^[-A-Za-z0-9_.]+$/.test(one)) return null;
if (cobj._transform) return eval("("+cobj._transform+")(one)");
return one;
}, function (data) {
input.value = JSON.stringify(cobj._onconfirm ? eval("("+cobj._onconfirm+")(JSON.parse(input.value), data)") : data);
input.onchange();
})
}
/**
* 删除表格项
*/

View File

@ -468,16 +468,7 @@ editor_ui_wrapper = function (editor) {
uievent.elements.canvas = document.getElementById('uievent');
uievent.elements.usedFlags = document.getElementById('uieventUsedFlags');
uievent.elements.usedFlagList = document.getElementById('uieventUsedFlagList');
uievent.confirm = function () {
var callback = uievent.values.callback, floorId = uievent.values.floorId,
x = uievent.values.x, y = uievent.values.y;
uievent.close();
if (callback) {
callback(floorId, x, y);
}
}
uievent.elements.yes.onclick = uievent.confirm;
uievent.elements.materialList = document.getElementById('uieventMaterialList');
uievent.close = function () {
uievent.isOpen = false;
@ -534,7 +525,6 @@ editor_ui_wrapper = function (editor) {
uievent.selectPoint = function (floorId, x, y, hideFloor, callback) {
uievent.values.hideFloor = hideFloor;
uievent.values.callback = callback;
uievent.values.size = editor.isMobile ? window.innerWidth / core.__SIZE__ : 32;
uievent.elements.selectPointBox.style.width = (uievent.values.size - 6) + "px";
uievent.elements.selectPointBox.style.height = (uievent.values.size - 6) + "px";
@ -552,6 +542,13 @@ editor_ui_wrapper = function (editor) {
uievent.elements.usedFlags.style.display = 'none';
uievent.elements.usedFlagList.style.display = 'none';
uievent.elements.body.style.overflow = "hidden";
uievent.elements.yes.onclick = function () {
var floorId = uievent.values.floorId, x = uievent.values.x, y = uievent.values.y;
uievent.close();
if (callback) {
callback(floorId, x, y);
}
}
// Append children
var floors = "";
@ -745,6 +742,60 @@ editor_ui_wrapper = function (editor) {
return list;
}
// ------ 素材选择框 ------ //
uievent.selectMaterial = function (value, title, directory, transform, callback) {
fs.readdir(directory, function (err, data) {
if (err) {
printe(directory + '不存在!');
throw (directory + '不存在!');
}
if (!(data instanceof Array)) {
printe('没有可显示的内容')
return;
}
value = value || [];
data = (transform ? data.map(transform) : data).filter(function (one) {return one;}).sort();
uievent.isOpen = true;
uievent.elements.div.style.display = 'block';
uievent.mode = 'selectMaterial';
uievent.elements.selectPoint.style.display = 'none';
uievent.elements.yes.style.display = 'block';
uievent.elements.title.innerText = title;
uievent.elements.selectBackground.style.display = 'none';
uievent.elements.selectFloor.style.display = 'none';
uievent.elements.selectPointBox.style.display = 'none';
uievent.elements.canvas.style.display = 'none';
uievent.elements.usedFlags.style.display = 'none';
uievent.elements.usedFlagList.style.display = 'none';
uievent.elements.materialList.style.display = 'block';
uievent.elements.body.style.overflow = "auto";
uievent.elements.yes.onclick = function () {
var list = Array.from(document.getElementsByClassName('materialCheckbox')).filter(function (one) {
return one.checked;
}).map(function (one) {return one.getAttribute('key'); });
uievent.close();
if (callback) callback(list);
}
// 显示每一项内容
var html = "<p style='margin-left: 10px; line-height: 25px'>";
html += "<button onclick='editor.uievent._selectAll(true)'>全选</button><button style='margin-left: 10px' onclick='editor.uievent._selectAll(false)'>全不选</button><br/>";
data.forEach(function (one) {
html += `<input type="checkbox" key="${one}" class="materialCheckbox" ${value.indexOf(one) >= 0? 'checked' : ''} /> ${one}<br/>`;
});
html += "</p>";
uievent.elements.materialList.innerHTML = html;
});
}
uievent._selectAll = function (checked) {
Array.from(document.getElementsByClassName('materialCheckbox')).forEach(function (one) {
one.checked = checked;
})
}
editor.constructor.prototype.uievent=uievent;
}

View File

@ -19,36 +19,75 @@ var data_comment_c456ea59_6018_45ef_8bcc_211a24c627dc = {
},
"images": {
"_leaf": true,
"_type": "textarea",
"_type": "material",
"_range": "editor.mode.checkImages(thiseval)",
"_directory": "./project/images/",
"_transform": function (one) {
if (one.endsWith('.png') || one.endsWith('.jpg') || one.endsWith('.jpeg') || end.endsWith('.gif'))
return one;
return null;
},
"_docs": "本塔使用图片",
"_data": "在此存放所有可能使用的图片tilesets除外 \n图片可以被作为背景图的一部分也可以直接用自定义事件进行显示。 \n 图片名不能使用中文,不能带空格或特殊字符;可以直接改名拼音就好 \n 建议对于较大的图片,在网上使用在线的“图片压缩工具(http://compresspng.com/zh/)”来进行压缩,以节省流量 \n 依次向后添加"
"_data": "在此存放所有可能使用的图片tilesets除外 \n图片可以被作为背景图的一部分也可以直接用自定义事件进行显示。 \n 图片名不能使用中文,不能带空格或特殊字符;可以直接改名拼音就好 \n 建议对于较大的图片,在网上使用在线的“图片压缩工具(http://compresspng.com/zh/)”来进行压缩,以节省流量 \n 依次向后添加",
},
"tilesets": {
"_leaf": true,
"_type": "textarea",
"_type": "material",
"_range": "editor.mode.checkImages(thiseval)",
"_directory": "./project/images/",
"_transform": function (one) {
if (one.endsWith('.png'))
return one;
return null;
},
"_onconfirm": function (previous, current) {
// 额外素材是有序的,因此根据之前的内容进行排序,然后在之后追加新的
previous = previous || [];
return current.sort(function (a, b) {
var i = previous.indexOf(a);
var j = previous.indexOf(b);
if (i >= 0 && j >= 0) return i - j;
return j >= 0 ? 1 : -1;
});
},
"_docs": "本塔额外素材",
"_data": "在此存放额外素材的图片名, \n可以自定导入任意张素材图片无需PS无需注册即可直接在游戏中使用 \n 形式如[\"1.png\", \"2.png\"] ,将需要的素材图片放在images目录下 \n 素材的宽高必须都是32的倍数且图片上的总图块数不超过1000即最多有1000个32*32的图块在该图片上"
},
"animates": {
"_leaf": true,
"_type": "textarea",
"_type": "material",
"_range": "editor.mode.checkUnique(thiseval)",
"_directory": "./project/animates/",
"_transform": function (one) {
if (one.endsWith(".animate")) return one.substring(0, one.lastIndexOf('.'));
return null;
},
"_docs": "本塔使用动画",
"_data": "在此存放所有可能使用的动画必须是animate格式在这里不写后缀名 \n动画必须放在animates目录下文件名不能使用中文不能带空格或特殊字符 \n \"jianji\", \"thunder\" 根据需求自行添加"
},
"bgms": {
"_leaf": true,
"_type": "textarea",
"_type": "material",
"_range": "editor.mode.checkUnique(thiseval)",
"_directory": "./project/sounds/",
"_transform": function (one) {
if (one.endsWith('.mp3') || one.endsWith('.wmv') || one.endsWith('.ogg') || end.endsWith('.wav'))
return one;
return null;
},
"_docs": "本塔使用音乐",
"_data": "在此存放所有的bgm和文件名一致。 \n音频名不能使用中文不能带空格或特殊字符可以直接改名拼音就好"
},
"sounds": {
"_leaf": true,
"_type": "textarea",
"_type": "material",
"_range": "editor.mode.checkUnique(thiseval)",
"_directory": "./project/sounds/",
"_transform": function (one) {
if (one.endsWith('.mp3') || one.endsWith('.wmv') || one.endsWith('.ogg') || end.endsWith('.wav'))
return one;
return null;
},
"_docs": "本塔使用音效",
"_data": "在此存放所有的SE和文件名一致 \n音频名不能使用中文不能带空格或特殊字符可以直接改名拼音就好"
},

View File

@ -565,6 +565,7 @@
<canvas class='gameCanvas' id='uievent' width='416' height='416'></canvas>
<div id="selectPointBox"></div>
<div id="uieventUsedFlagList" style="display: none"></div>
<div id="uieventMaterialList" style="display: none"></div>
</div>
<div id="selectPoint">
<select id="selectPointFloor"></select>

View File

@ -546,7 +546,8 @@
<div id='uieventBody'>
<canvas class='gameCanvas' id='uievent' width='416' height='416'></canvas>
<div id="selectPointBox"></div>
<div id="uieventUsedFlagList" style="display: none"></div>
<div id="uieventUsedFlagList" style="display: none; margin-top: -10px"></div>
<div id="uieventMaterialList" style="display: none; margin-top: -10px"></div>
</div>
<div id="selectPoint">
<select id="selectPointFloor"></select>

View File

@ -46,7 +46,9 @@
圆角边框
像素高分辨率问题
(已完成!) 道具效果优化,删除部分道具相关的开关
素材列表选择
(已完成!) 素材列表选择
油漆桶,动态更改地图大小
地图拉框选择复制剪切删除
-------------