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

图片切分

Browse Source
This commit is contained in:
ckcz123 2021-08-13 11:50:14 +08:00
parent 279eafd07c
commit e25c82c0a6
9 changed files with 118 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
_server/MotaAction.g4
View File

@ -731,7 +731,7 @@ nameMapImage
tooltip : 映射图片
default : ['背景图', 'bg.jpg']
allImages : ['EvalString_1']
material : ["./project/images/", "EvalString_1"]
material : ["./project/images/:images", "EvalString_1"]
helpUrl : /_docs/#/instruction
return ',"'+EvalString_0+'":"'+EvalString_1+'"';
*/;
@ -765,6 +765,44 @@ nameMapEmpty
return ' \n';
*/;
splitImages_m
: '图片切分（你可以将一张png格式的大图切分为若干小图）' BGNL? splitImagesList+ BEND
/* splitImages_m
tooltip: 图片裁剪
helpUrl : /_docs/#/instruction
var code = '[\n'+splitImagesList_0+']\n';
return code;
*/;
splitImagesList
: splitImagesOne
| splitImagesEmpty;
splitImagesOne
: '图片切分项' '图片名' EvalString '每个小图宽度' Int '高度' Int '生成小图的前缀' EvalString BEND
/* splitImagesOne
tooltip : 图片裁剪项
helpUrl : /_docs/#/instruction
default : ['hero.png', 32, 32, 'hero_']
material : ["./project/images/:images", "EvalString_0"]
allImages : ['EvalString_0']
var code = '{"name": "'+EvalString_0+'", "width": '+Int_0+', "height": '+Int_1+', "prefix": "'+EvalString_1+'"},\n';
return code;
*/;
splitImagesEmpty
: Newline
/* splitImagesEmpty
var code = ' \n';
return code;
*/;
//为了避免关键字冲突,全部加了_s
//动作
action
@ -1689,7 +1727,7 @@ helpUrl : /_docs/#/instruction
colour : this.dataColor
default : ["hero.png", false]
allImages : ['EvalString_0']
material : ["./project/images/", "EvalString_0"]
material : ["./project/images/:images", "EvalString_0"]
EvalString_0 = EvalString_0 && (', "name": "'+EvalString_0+'"');
Bool_0 = Bool_0 ? (', "noDraw": true') : '';
var code = '{"type": "setHeroIcon"'+EvalString_0+Bool_0+'},\n';
@ -1979,7 +2017,7 @@ tooltip : follow: 跟随勇士
helpUrl : /_docs/#/instruction
default : ["npc.png"]
allImages : ['EvalString_0']
material : ["./project/images/", "EvalString_0"]
material : ["./project/images/:images", "EvalString_0"]
colour : this.dataColor
var code = '{"type": "follow", "name": "'+EvalString_0+'"},\n';
return code;
@ -1994,7 +2032,7 @@ tooltip : unfollow: 取消跟随
helpUrl : /_docs/#/instruction
default : [""]
allImages : ['EvalString_0']
material : ["./project/images/", "EvalString_0"]
material : ["./project/images/:images", "EvalString_0"]
colour : this.dataColor
EvalString_0 = EvalString_0 ? (', "name": "' + EvalString_0 + '"') : "";
var code = '{"type": "unfollow"' + EvalString_0 + '},\n';
@ -2101,7 +2139,7 @@ tooltip : showImage：显示图片
helpUrl : /_docs/#/instruction
default : [1,"bg.jpg","null","0","0",1,0,false]
allImages : ['EvalString_0']
menu : [['选择图片','editor_blockly.selectMaterial(block, ["./project/images/", "EvalString_0"])']]
menu : [['选择图片','editor_blockly.selectMaterial(block, ["./project/images/:images", "EvalString_0"])']]
previewBlock : true
if (Reverse_List_0 && Reverse_List_0 != 'null') {
Reverse_List_0 = ', "reverse": "' + Reverse_List_0 + '"';
@ -2122,7 +2160,7 @@ tooltip : showImage_1：显示图片
helpUrl : /_docs/#/instruction
default : [1,"bg.jpg","null","0","0","","",1,"0","0","","",0,false]
allImages : ['EvalString_0']
menu : [['选择图片','editor_blockly.selectMaterial(block, ["./project/images/", "EvalString_0"])']]
menu : [['选择图片','editor_blockly.selectMaterial(block, ["./project/images/:images", "EvalString_0"])']]
previewBlock : true
if (Reverse_List_0 && Reverse_List_0 != 'null') {
Reverse_List_0 = ', "reverse": "' + Reverse_List_0 + '"';

9
_server/MotaActionParser.js
View File

@ -117,6 +117,15 @@ ActionParser.prototype.parse = function (obj,type) {
if(!obj) obj={};
return MotaActionBlocks['faceIds_m'].xmlText([obj.down||"", obj.left||"", obj.right||"", obj.up||""]);
case 'splitImages':
if(!obj) obj=[];
var text_choices = null;
for(var ii=obj.length-1,choice;choice=obj[ii];ii--) {
text_choices=MotaActionBlocks['splitImagesOne'].xmlText([
choice.name, choice.width, choice.height, choice.prefix, text_choices]);
}
return MotaActionBlocks['splitImages_m'].xmlText([text_choices]);
case 'mainStyle':
if(!obj) obj={};
return MotaActionBlocks['mainStyle_m'].xmlText([

6
_server/css/editor.css
View File

@ -617,15 +617,15 @@ table.row {
}
.etable tr > :nth-child(1) {
width: 22%
width: 24%
}
.etable tr > :nth-child(2) {
width: 20%
width: 19%
}
.etable tr > :nth-child(3) {
width: 33%;
width: 32%;
}
.etable tr > :nth-child(4) {

3
_server/editor_blocklyconfig.js
View File

@ -91,6 +91,9 @@ editor_blocklyconfig=(function(){
MotaActionFunctions.actionParser.parse({
"背景音乐": "bgm.mp3", "确定": "confirm.mp3", "攻击": "attack.mp3", "背景图": "bg.jpg", "领域": "zone", "文件名": "file.jpg"
}, 'nameMap'),
MotaActionFunctions.actionParser.parse([
{"name": "hero.png", "width": 32, "height": 32, "prefix": "hero_"},
], 'splitImages'),
],
'显示文字':[
MotaActionBlocks['text_0_s'].xmlText(),

31
_server/editor_ui.js
View File

@ -789,6 +789,10 @@ editor_ui_wrapper = function (editor) {
// ------ 素材选择框 ------ //
uievent.selectMaterial = function (value, title, directory, transform, callback) {
var one = directory.split(':');
if (one.length > 1) directory = one[0];
var appendedImages = one[1] == 'images' ? core.material.images.images : {};
fs.readdir(directory, function (err, data) {
if (err) {
printe(directory + '不存在！');
@ -800,6 +804,10 @@ editor_ui_wrapper = function (editor) {
}
value = value || [];
data = (transform ? data.map(transform) : data).filter(function (one) {return one;}).sort();
var data2 = Object.keys(appendedImages);
data2 = (transform ? data2.map(transform) : data2).filter(function (one) {
return one && data.indexOf(one) < 0;
}).sort();
uievent.isOpen = true;
uievent.elements.div.style.display = 'block';
@ -857,6 +865,16 @@ editor_ui_wrapper = function (editor) {
}
html += '<br/>';
});
data2.forEach(function (one) {
var checked = value.indexOf(one) >= 0? 'checked' : '';
var disabled = _isTileset && value.indexOf(one) >= 0 ? 'disabled' : '';
html += `<input type="checkbox" key="${one}" class="materialCheckbox" ${checked} ${disabled}/> ${one}`;
// 预览图片
if (one.endsWith('.png') || one.endsWith('.jpg') || one.endsWith('.jpeg') || one.endsWith('.gif')) {
html += "<button onclick='editor.uievent._previewMaterialImage2(this)' style='margin-left: 10px'>预览</button>";
html += '<br style="display:none" key="'+one+'"/><br/>';
}
})
html += "</p>";
html += "<p style='margin-left: 10px'><small>如果文件未在此列表显示，请检查文件名是否合法（只能由数字字母下划线横线和点组成），后缀名是否正确。</small></p>";
uievent.elements.extraBody.innerHTML = html;
@ -884,6 +902,19 @@ editor_ui_wrapper = function (editor) {
}
}
uievent._previewMaterialImage2 = function (button) {
var br = button.nextElementSibling;
if (br.style.display == 'none') {
button.innerText = '折叠';
br.style.display = 'block';
br.parentElement.insertBefore(core.material.images.images[br.getAttribute('key')], br.nextElementSibling);
} else {
button.innerText = '预览';
br.style.display = 'none';
br.parentElement.removeChild(core.material.images.images[br.getAttribute('key')]);
}
}
uievent._previewMaterialAudio = function (button) {
var span = button.nextElementSibling.nextElementSibling;
var br = span.nextElementSibling;

4
_server/table/comment.js
View File

@ -145,7 +145,7 @@ var comment_c456ea59_6018_45ef_8bcc_211a24c627dc = {
"bigImage": {
"_leaf": true,
"_type": "material",
"_directory": "./project/images/",
"_directory": "./project/images/:images",
"_transform": (function (one) {
if (one.endsWith('.png')) return one;
return null;
@ -401,7 +401,7 @@ var comment_c456ea59_6018_45ef_8bcc_211a24c627dc = {
"bigImage": {
"_leaf": true,
"_type": "material",
"_directory": "./project/images/",
"_directory": "./project/images/:images",
"_transform": (function (one) {
if (one.endsWith('.png')) return one;
return null;

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

@ -38,6 +38,13 @@ var data_comment_c456ea59_6018_45ef_8bcc_211a24c627dc = {
"_docs": "使用图片",
"_data": "在此存放所有可能使用的图片（tilesets除外） \n图片可以被作为背景图（的一部分），也可以直接用自定义事件进行显示。 \n 图片名不能使用中文，不能带空格或特殊字符；可以直接改名拼音就好 \n 建议对于较大的图片，在网上使用在线的“图片压缩工具(http://compresspng.com/zh/)”来进行压缩，以节省流量 \n 依次向后添加",
},
"splitImages": {
"_leaf": true,
"_type": "event",
"_event": "splitImages",
"_docs": "图片切分",
"_data": "可以在这里对使用到的图片进行按照一定宽高切分，生成若干新的小图供使用"
},
"tilesets": {
"_leaf": true,
"_type": "material",

17
libs/core.js
View File

@ -472,6 +472,23 @@ core.prototype._afterLoadResources = function (callback) {
// 初始化地图
core.initStatus.maps = core.maps._initMaps();
core.control._setRequestAnimationFrame();
// 图片裁剪
(main.splitImages || []).forEach(function (one) {
var name = core.getMappedName(one.name);
if (!core.material.images.images[name]) {
console.warn('找不到图片：' + name + '，无法裁剪');
return;
}
if (!name.endsWith('.png')) {
console.warn('无法裁剪非png格式图片：' + name);
return;
}
var arr = core.splitImage(core.material.images.images[name], one.width, one.height);
for (var i = 0; i < arr.length; ++i) {
core.material.images.images[(one.prefix||"") + i + '.png'] = arr[i];
}
});
if (core.plugin._afterLoadResources)
core.plugin._afterLoadResources();
core.showStartAnimate();

10
project/plugins.js
View File

@ -11,14 +11,8 @@ var plugins_bb40132b_638b_4a9f_b028_d3fe47acc8d1 =
this._afterLoadResources = function () {
// 本函数将在所有资源加载完毕后，游戏开启前被执行
// 可以在这个函数里面对资源进行一些操作，比如切分图片等。
// 这是一个将assets.png拆分成若干个32x32像素的小图片并保存的样例。
// var arr = core.splitImage("assets.png", 32, 32);
// for (var i = 0; i < arr.length; i++) {
// core.material.images.images["asset"+i+".png"] = arr[i];
// }
// 可以在这个函数里面对资源进行一些操作。
// 若需要进行切分图片，可以使用 core.splitImage() 函数，或直接在全塔属性-图片切分中操作
}
// 可以在任何地方（如afterXXX或自定义脚本事件）调用函数，方法为 core.plugin.xxx();