From ef31d39bed50dc89ad8d7b453f3371d4b081c34e Mon Sep 17 00:00:00 2001 From: ckcz123 Date: Fri, 31 May 2019 20:45:53 +0800 Subject: [PATCH 01/14] setBlock selectPoint --- _server/editor_blockly.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_server/editor_blockly.js b/_server/editor_blockly.js index b236153f..d24e57cd 100644 --- a/_server/editor_blockly.js +++ b/_server/editor_blockly.js @@ -745,7 +745,7 @@ function omitedcheckUpdateFunction(event) { "closeDoor_s": ["PosString_0", "PosString_1"], "show_s": ["EvalString_0", "EvalString_1", "IdString_0"], "hide_s": ["EvalString_0", "EvalString_1", "IdString_0"], - "setBlock_s": ["PosString_0", "PosString_1"], + "setBlock_s": ["PosString_0", "PosString_1", "IdString_0"], "move_s": ["PosString_0", "PosString_1"], "jump_s": ["PosString_2", "PosString_3"], // 跳跃暂时只考虑终点 "showBgFgMap_s": ["EvalString_0", "EvalString_1", "IdString_0"], From 07646a8491e03d9bca6bd0d166e9777ab3d9f96a Mon Sep 17 00:00:00 2001 From: oc Date: Fri, 31 May 2019 22:52:58 +0800 Subject: [PATCH 02/14] uievent z --- _docs/event.md | 1 + _docs/personalization.md | 3 +++ _server/MotaAction.g4 | 12 ++++++++---- libs/ui.js | 10 +++++++++- 4 files changed, 21 insertions(+), 5 deletions(-) diff --git a/_docs/event.md b/_docs/event.md index 7cd66565..64a598d1 100644 --- a/_docs/event.md +++ b/_docs/event.md @@ -1840,6 +1840,7 @@ UI绘制事件。 - `alpha`：不透明度，必须是0到1之间的浮点数 - `align`：对齐方式，只能是`left`, `center`, `right`，分别代表左对齐，居中和右对齐 - `baseline`：基准线，只能是`top`, `middle`, `alphabetic`, `bottom`，分别代表顶部，居中，标准值和底部。 +- `z`：画布的z值，必须是正整数。初始创建时画布的z值是135。请注意，闪烁光标所在画布的z值永远比该画布大1。 ### fillText：绘制文本 diff --git a/_docs/personalization.md b/_docs/personalization.md index 72de08cd..5b71c8c3 100644 --- a/_docs/personalization.md +++ b/_docs/personalization.md @@ -22,6 +22,7 @@ HTML5魔塔是使用画布（canvas）来绘制，存在若干个图层，它们 - paint**[D]**：绘图层；主要用来进行绘图模式。（z-index: 95) - curtain：色调层；用来控制当前楼层的画面色调 (z-index: 125) - image1\~50**[D]**：图片层；用来绘制图片等操作。（z-index: 100+code, 101~150） +- uievent**[D]**：自定义UI绘制层；用来进行自定义UI绘制等操作。（z-index：135，可以通过事件设置该值） - ui：UI层；用来绘制一切UI窗口，如剧情文本、怪物手册、楼传器、系统菜单等等 (z-index: 140) - data：数据层；用来绘制一些顶层的或更新比较快的数据，如左上角的提示，战斗界面中数据的变化等等。 (z-index: 170) @@ -29,6 +30,8 @@ HTML5魔塔是使用画布（canvas）来绘制，存在若干个图层，它们 而，色调层的z-index是25，ui层的z-index是140；因此，图片编号在1~24的将被色调层遮挡，25~40的将被ui层遮挡，41~50的将遮挡UI层。 +uievent层为自定义UI绘制所在的层，其z值初始是135，可以通过事件设置；自定义绘制的闪烁光标所在层的z值永远比该值大1。 + ### 动态创建canvas 从V2.5.3开始，可以在H5样板中任意动态创建canvas并进行使用。 diff --git a/_server/MotaAction.g4 b/_server/MotaAction.g4 index 2d0a5276..1d87eba5 100644 --- a/_server/MotaAction.g4 +++ b/_server/MotaAction.g4 @@ -1917,13 +1917,13 @@ return code; setAttribute_s - : '设置画布属性' '字体' EvalString? '填充样式' EvalString? Colour '边框样式' EvalString? Colour BGNL? '线宽度' EvalString? '不透明度' EvalString? '对齐' TextAlign_List '基准线' TextBaseline_List Newline + : '设置画布属性' '字体' EvalString? '填充样式' EvalString? Colour '边框样式' EvalString? Colour BGNL? '线宽度' EvalString? '不透明度' EvalString? '对齐' TextAlign_List '基准线' TextBaseline_List 'z值' EvalString? Newline /* setAttribute_s tooltip : setAttribute：设置画布属性 helpUrl : https://h5mota.com/games/template/_docs/#/event?id=setAttribute%ef%bc%9a%e8%ae%be%e7%bd%ae%e7%94%bb%e5%b8%83%e5%b1%9e%e6%80%a7 colour : this.subColor -default : ["","",'rgba(255,255,255,1)',"",'rgba(255,255,255,1)',"","",null,null] +default : ["","",'rgba(255,255,255,1)',"",'rgba(255,255,255,1)',"","",null,null,""] TextAlign_List_0 = TextAlign_List_0==='null'?'': ', "align": "'+TextAlign_List_0+'"'; TextBaseline_List_0 = TextBaseline_List_0==='null'?'': ', "baseline": "'+TextBaseline_List_0+'"'; var colorRe = MotaActionFunctions.pattern.colorRe; @@ -1949,7 +1949,11 @@ if (EvalString_4) { if (isNaN(f) || f<0 || f>1) throw new Error('不透明度必须是0到1的浮点数或不填'); EvalString_4 = ', "alpha": '+EvalString_4; } -var code = '{"type": "setAttribute"'+EvalString_0+EvalString_1+EvalString_2+EvalString_3+EvalString_4+TextAlign_List_0+TextBaseline_List_0+'},\n'; +if (EvalString_5) { + if (!/^\d+$/.test(EvalString_5))throw new Error('z值必须是整数或不填'); + EvalString_5 = ', "z": '+EvalString_5; +} +var code = '{"type": "setAttribute"'+EvalString_0+EvalString_1+EvalString_2+EvalString_3+EvalString_4+TextAlign_List_0+TextBaseline_List_0+EvalString_5+'},\n'; return code; */; @@ -3234,7 +3238,7 @@ ActionParser.prototype.parseAction = function() { data.strokeStyle=this.Colour(data.strokeStyle); this.next = MotaActionBlocks['setAttribute_s'].xmlText([ data.font,data.fillStyle,'rgba('+data.fillStyle+')',data.strokeStyle,'rgba('+data.strokeStyle+')', - data.lineWidth,data.alpha,data.align,data.baseline,this.next]); + data.lineWidth,data.alpha,data.align,data.baseline,data.z,this.next]); break; case "fillText": // 绘制一行文本 data.style = this.Colour(data.style); diff --git a/libs/ui.js b/libs/ui.js index c4b5ecbb..d2ef8f88 100644 --- a/libs/ui.js +++ b/libs/ui.js @@ -301,6 +301,12 @@ ui.prototype._uievent_setAttribute = function (data) { if (data.strokeStyle) this.setStrokeStyle('uievent', data.strokeStyle); if (data.align) this.setTextAlign('uievent', data.align); if (data.baseline) this.setTextBaseline('uievent', data.baseline); + if (data.z != null && main.mode != 'editor') { + var z = parseInt(data.z) || 135; + core.dymCanvas.uievent.canvas.style.zIndex = z; + if (core.dymCanvas._uievent_selector) + core.dymCanvas._uievent_selector.canvas.style.zIndex = z + 1; + } } ////// 计算某段文字的宽度 ////// @@ -613,7 +619,9 @@ ui.prototype._uievent_drawSelector = function (data) { this._drawSelector('uievent', background, w, h, x, y); return; } - var ctx = core.createCanvas('_uievent_selector', x, y, w, h, 136); + var z = 136; + if (core.dymCanvas.uievent) z = (parseInt(core.dymCanvas.uievent.canvas.style.zIndex) || 135) + 1; + var ctx = core.createCanvas('_uievent_selector', x, y, w, h, z); ctx.canvas.style.opacity = 0.8; this._drawSelector(ctx, background, w, h); } From 2899167a3be356f2ce5ff519236b108d66fb7a07 Mon Sep 17 00:00:00 2001 From: oc Date: Fri, 31 May 2019 23:31:01 +0800 Subject: [PATCH 03/14] fix g4 bug --- _server/MotaAction.g4 | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/_server/MotaAction.g4 b/_server/MotaAction.g4 index 1d87eba5..ccddca7a 100644 --- a/_server/MotaAction.g4 +++ b/_server/MotaAction.g4 @@ -109,7 +109,7 @@ return code; */; shopsub - : '商店 id' IdString '标题' EvalString '图标' IdString BGNL? Newline '快捷商店栏中名称' EvalString '共用times' Bool BGNL? Newline '未开启状态则不显示在列表中' Bool BGNL? NewLine '使用' ShopUse_List '消耗' EvalString BGNL? Newline '显示文字' EvalString BGNL? Newline shopChoices+ BEND + : '商店 id' IdString '标题' EvalString '图标' IdString BGNL? Newline '快捷商店栏中名称' EvalString '共用times' Bool BGNL? Newline '未开启状态则不显示在列表中' Bool BGNL? Newline '使用' ShopUse_List '消耗' EvalString BGNL? Newline '显示文字' EvalString BGNL? Newline shopChoices+ BEND /* shopsub @@ -702,7 +702,7 @@ return code; */; insert_2_s - : '插入事件' 'x' PosString ',' 'y' PosString Event_List? '楼层' IdString? '参数列表' EvalString? ENewline + : '插入事件' 'x' PosString ',' 'y' PosString Event_List? '楼层' IdString? '参数列表' EvalString? Newline /* insert_2_s From 718852b9ef9e30c0bc5cf78884b6b63efc32cfee Mon Sep 17 00:00:00 2001 From: oc Date: Sun, 2 Jun 2019 10:23:46 +0800 Subject: [PATCH 04/14] fix bugs --- _server/editor_file_unsorted.js | 4 ++-- libs/events.js | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/_server/editor_file_unsorted.js b/_server/editor_file_unsorted.js index c6206fe9..eec1667a 100644 --- a/_server/editor_file_unsorted.js +++ b/_server/editor_file_unsorted.js @@ -58,8 +58,8 @@ editor_file = function (editor, callback) { title = "主塔 "+name+" 层"; } - var width = parseInt(document.getElementById('newMapsWidth').value); - var height = parseInt(document.getElementById('newMapsHeight').value); + var width = parseInt(document.getElementById('newMapWidth').value); + var height = parseInt(document.getElementById('newMapHeight').value); var row = [], map = []; for (var i=0;i Date: Sun, 2 Jun 2019 14:49:54 +0800 Subject: [PATCH 05/14] long press arrow --- _server/editor_unsorted_1.js | 25 +++++++++++++++++-- _server/editor_unsorted_3.js | 47 ++++++++++++++++++++++++------------ 2 files changed, 55 insertions(+), 17 deletions(-) diff --git a/_server/editor_unsorted_1.js b/_server/editor_unsorted_1.js index 06fda791..0df1beaf 100644 --- a/_server/editor_unsorted_1.js +++ b/_server/editor_unsorted_1.js @@ -760,10 +760,31 @@ editor.constructor.prototype.listen=function () { } var viewportButtons=document.getElementById('viewportButtons'); + var pressTimer = null; for(var ii=0,node;node=viewportButtons.children[ii];ii++){ (function(x,y){ - node.onclick=function(){ - editor.moveViewport(x,y); + var move = function () { + editor.moveViewport(x, y); + } + node.onmousedown = function () { + clearTimeout(pressTimer); + pressTimer = setTimeout(function () { + pressTimer = -1; + var f = function () { + if (pressTimer != null) { + move(); + setTimeout(f, 150); + } + } + f(); + }, 500); + }; + node.onmouseup = function () { + if (pressTimer >= 0) { + clearTimeout(pressTimer); + move(); + } + pressTimer = null; } })([-1,0,0,1][ii],[0,-1,1,0][ii]); } diff --git a/_server/editor_unsorted_3.js b/_server/editor_unsorted_3.js index 5be3711f..fc196d31 100644 --- a/_server/editor_unsorted_3.js +++ b/_server/editor_unsorted_3.js @@ -511,23 +511,40 @@ uievent.move = function (dx, dy) { uievent.values.left = core.clamp(uievent.values.left + dx, 0, uievent.values.width - core.__SIZE__); uievent.values.top = core.clamp(uievent.values.top + dy, 0, uievent.values.height - core.__SIZE__); this.updateSelectPoint(true); -} +}; -uievent.elements.selectPointButtons.children[0].onclick = function () { - uievent.move(-1, 0); -} +(function() { -uievent.elements.selectPointButtons.children[1].onclick = function () { - uievent.move(0, -1); -} - -uievent.elements.selectPointButtons.children[2].onclick = function () { - uievent.move(0, 1); -} - -uievent.elements.selectPointButtons.children[3].onclick = function () { - uievent.move(1, 0); -} + var viewportButtons = uievent.elements.selectPointButtons; + var pressTimer = null; + for(var ii=0,node;node=viewportButtons.children[ii];ii++){ + (function(x,y){ + var move = function () { + uievent.move(x, y); + } + node.onmousedown = function () { + clearTimeout(pressTimer); + pressTimer = setTimeout(function () { + pressTimer = -1; + var f = function () { + if (pressTimer != null) { + move(); + setTimeout(f, 150); + } + } + f(); + }, 500); + }; + node.onmouseup = function () { + if (pressTimer >= 0) { + clearTimeout(pressTimer); + move(); + } + pressTimer = null; + } + })([-1,0,0,1][ii],[0,-1,1,0][ii]); + } +})(); uievent.elements.div.onmousewheel = function (e) { if (uievent.mode != 'selectPoint' || uievent.values.hideFloor) return; From 10fc17993474440e1fab66c62b7cc478cb1c1fb7 Mon Sep 17 00:00:00 2001 From: oc Date: Sun, 2 Jun 2019 15:32:14 +0800 Subject: [PATCH 06/14] editor help & plugin new function --- _server/editor_multi.js | 2 ++ _server/editor_unsorted_1.js | 47 ++++++++++++++++++++++++++++-------- _server/editor_unsorted_2.js | 9 ++++--- _server/editor_unsorted_3.js | 11 +++++---- 4 files changed, 51 insertions(+), 18 deletions(-) diff --git a/_server/editor_multi.js b/_server/editor_multi.js index 476536bb..069855cc 100644 --- a/_server/editor_multi.js +++ b/_server/editor_multi.js @@ -94,6 +94,8 @@ editor_multi = function () { editor_multi.lintAutocomplete = false; if (args.lint === true) editor_multi.lintAutocomplete = true; if (field.indexOf('Effect') !== -1) editor_multi.lintAutocomplete = true; + if ((!input.value || input.value == 'null') && editor_mode.mode == 'plugins') + input.value = '"function () {\\n\\t// 在此增加新插件\\n\\t\\n}"'; if (input.value.slice(0, 1) === '"' || args.string) { editor_multi.isString = true; codeEditor.setValue(JSON.parse(input.value) || ''); diff --git a/_server/editor_unsorted_1.js b/_server/editor_unsorted_1.js index 0df1beaf..6eec656c 100644 --- a/_server/editor_unsorted_1.js +++ b/_server/editor_unsorted_1.js @@ -379,18 +379,45 @@ editor.constructor.prototype.listen=function () { } var focusElement = document.activeElement; if (!focusElement || focusElement.tagName.toLowerCase()=='body') { - // wasd平移大地图 - if (e.keyCode==87) - editor.moveViewport(0,-1) - else if (e.keyCode==65) - editor.moveViewport(-1,0) - else if (e.keyCode==83) - editor.moveViewport(0,1); - else if (e.keyCode==68) - editor.moveViewport(1,0); + switch (e.keyCode) { + // WASD + case 87: editor.moveViewport(0,-1); break; + case 65: editor.moveViewport(-1,0); break; + case 83: editor.moveViewport(0,1); break; + case 68: editor.moveViewport(1,0); break; + // Z~. + case 90: editor_mode.change('map'); break; // Z + case 88: editor_mode.change('loc'); break; // X + case 67: editor_mode.change('enemyitem'); break; // C + case 86: editor_mode.change('floor'); break; // V + case 66: editor_mode.change('tower'); break; // B + case 78: editor_mode.change('functions'); break; // N + case 77: editor_mode.change('appendpic'); break; // M + case 188: editor_mode.change('commonevent'); break; // , + case 190: editor_mode.change('plugins'); break; // . + // H + case 72: editor.showHelp(); break; + } } } + editor.showHelp = function () { + alert( + "快捷操作帮助：\n" + + "点击空白处：自动保存当前修改" + + "WASD / 长按箭头：平移大地图\n" + + "PgUp, PgDn / 鼠标滚轮：上下切换楼层\n" + + "Z~.（键盘的第三排）：快捷切换标签\n" + + "双击地图：选中对应点的素材\n" + + "右键地图：弹出菜单栏\n" + + "Alt+0~9：保存当前使用的图块\n" + + "Ctrl+0~9：选中保存的图块\n" + + "Ctrl+Z / Ctrl+Y：撤销/重做上次绘制\n" + + "Ctrl+S：事件与脚本编辑器的保存并退出\n" + + "双击事件编辑器：长文本编辑/脚本编辑/地图选点/UI绘制预览" + ); + } + var getScrollBarHeight = function () { var outer = document.createElement("div"); outer.style.visibility = "hidden"; @@ -780,7 +807,7 @@ editor.constructor.prototype.listen=function () { }, 500); }; node.onmouseup = function () { - if (pressTimer >= 0) { + if (pressTimer > 0) { clearTimeout(pressTimer); move(); } diff --git a/_server/editor_unsorted_2.js b/_server/editor_unsorted_2.js index 17b8092e..042b617b 100644 --- a/_server/editor_unsorted_2.js +++ b/_server/editor_unsorted_2.js @@ -568,11 +568,14 @@ editor_unsorted_2_wrapper=function(editor_mode){ }); } + editor_mode.change = function (value) { + editor_mode.onmode('nextChange'); + editor_mode.onmode(value); + if(editor.isMobile)editor.showdataarea(false); + } var editModeSelect = document.getElementById('editModeSelect'); editModeSelect.onchange = function () { - editor_mode.onmode('nextChange'); - editor_mode.onmode(editModeSelect.value); - if(editor.isMobile)editor.showdataarea(false); + editor_mode.change(editModeSelect.value); } editor_mode.checkUnique = function (thiseval) { diff --git a/_server/editor_unsorted_3.js b/_server/editor_unsorted_3.js index fc196d31..c33c5c07 100644 --- a/_server/editor_unsorted_3.js +++ b/_server/editor_unsorted_3.js @@ -207,10 +207,11 @@ printe = function (str_) { printf(str_, 'error') } tip_in_showMode = [ - '涉及图片的更改需要F5刷新浏览器来生效', - '文本域可以通过双击,在文本编辑器或事件编辑器中编辑', - '事件编辑器中的显示文本和自定义脚本的方块也可以双击', - "画出的地图要点击\"保存地图\"才会写入到文件中", + '表格的文本域可以双击进行编辑', + '双击地图可以选中素材，右键可以弹出菜单', + '双击事件编辑器的图块可以进行长文本编辑/脚本编辑/地图选点/UI绘制预览等操作', + '点击空白处可以自动保存当前修改', + 'H键可以打开操作帮助哦', ]; tip=document.getElementById('tip') tip._infos= {} @@ -536,7 +537,7 @@ uievent.move = function (dx, dy) { }, 500); }; node.onmouseup = function () { - if (pressTimer >= 0) { + if (pressTimer > 0) { clearTimeout(pressTimer); move(); } From 4753b47eb4e346dfd46c3dd7bbac2ba5c3e00068 Mon Sep 17 00:00:00 2001 From: oc Date: Sun, 2 Jun 2019 17:10:37 +0800 Subject: [PATCH 07/14] editor.viewportLoc --- _server/editor.js | 20 +++++++++++++------- 1 file changed, 13 insertions(+), 7 deletions(-) diff --git a/_server/editor.js b/_server/editor.js index aa5a21ec..b8c770e4 100644 --- a/_server/editor.js +++ b/_server/editor.js @@ -144,14 +144,15 @@ editor.prototype.changeFloor = function (floorId, callback) { } editor.preMapData = null; core.changeFloor(floorId, null, {"x": 0, "y": 0, "direction": "up"}, null, function () { - core.bigmap.offsetX=0; - core.bigmap.offsetY=0; - editor.moveViewport(0,0); - editor.game.fetchMapFromCore(); editor.updateMap(); editor_mode.floor(); editor.drawEventBlock(); + + editor.viewportLoc = editor.viewportLoc || {}; + var loc = editor.viewportLoc[floorId] || [], x = loc[0] || 0, y = loc[1] || 0; + editor.setViewport(x, y); + if (callback) callback(); }); } @@ -256,14 +257,19 @@ editor.prototype.updateMap = function () { } -editor.prototype.moveViewport=function(x,y){ - core.bigmap.offsetX = core.clamp(core.bigmap.offsetX+32*x, 0, 32*core.bigmap.width-core.__PIXELS__); - core.bigmap.offsetY = core.clamp(core.bigmap.offsetY+32*y, 0, 32*core.bigmap.height-core.__PIXELS__); +editor.prototype.setViewport=function (x, y) { + core.bigmap.offsetX = core.clamp(x, 0, 32*core.bigmap.width-core.__PIXELS__); + core.bigmap.offsetY = core.clamp(y, 0, 32*core.bigmap.height-core.__PIXELS__); + editor.viewportLoc[editor.currentFloorId] = [core.bigmap.offsetX, core.bigmap.offsetY]; core.control.updateViewport(); editor.buildMark(); editor.drawPosSelection(); } +editor.prototype.moveViewport=function(x,y){ + this.setViewport(core.bigmap.offsetX+32*x, core.bigmap.offsetY+32*y); +} + /////////// 界面交互相关 /////////// editor.prototype.drawInitData = function (icons) { From bcb3bfc8fd13d2b85d7743a8120ecb03d3b02a12 Mon Sep 17 00:00:00 2001 From: oc Date: Mon, 3 Jun 2019 01:10:07 +0800 Subject: [PATCH 08/14] expand / fold materials --- _server/css/editor.css | 7 ++ _server/css/editor_mobile.css | 9 ++- _server/editor.js | 127 +++++++++++++++++----------------- _server/editor_unsorted_1.js | 40 ++++++++--- editor-mobile.html | 1 + editor.html | 1 + libs/utils.js | 7 +- 7 files changed, 116 insertions(+), 76 deletions(-) diff --git a/_server/css/editor.css b/_server/css/editor.css index e053cafd..df5e2670 100644 --- a/_server/css/editor.css +++ b/_server/css/editor.css @@ -287,6 +287,13 @@ body { 0 0 0 3px #000; } +#iconExpandBtn { + position: absolute; + left: 10px; + bottom: 30px; + display: none; +} + .warnText { color: #D50000; font-weight: 700; diff --git a/_server/css/editor_mobile.css b/_server/css/editor_mobile.css index ef6d2f72..4a46198b 100644 --- a/_server/css/editor_mobile.css +++ b/_server/css/editor_mobile.css @@ -272,6 +272,13 @@ body { 0 0 0 3px #000; } +#iconExpandBtn { + position: absolute; + left: 10px; + bottom: 30px; + display: none; +} + .warnText { color: #D50000; font-weight: 700; @@ -433,7 +440,7 @@ div.row .rowtd .rowtext{ font: normal 2.5vw Arial, sans-serif; list-style: none; margin: 0; - padding: 4px 7em 4px 28px; + padding: 4px 7em 4px 4px; white-space: nowrap; /* padding-left: 12px; */ diff --git a/_server/editor.js b/_server/editor.js index b8c770e4..24401e84 100644 --- a/_server/editor.js +++ b/_server/editor.js @@ -267,7 +267,7 @@ editor.prototype.setViewport=function (x, y) { } editor.prototype.moveViewport=function(x,y){ - this.setViewport(core.bigmap.offsetX+32*x, core.bigmap.offsetY+32*y); + editor.setViewport(core.bigmap.offsetX+32*x, core.bigmap.offsetY+32*y); } /////////// 界面交互相关 /////////// @@ -278,6 +278,9 @@ editor.prototype.drawInitData = function (icons) { var maxHeight = 700; var sumWidth = 0; editor.widthsX = {}; + editor.folded = core.getLocalStorage('folded', false); + // editor.folded = true; + editor.foldPerCol = 30; // var imgNames = Object.keys(images); //还是固定顺序吧； var imgNames = ["terrains", "animates", "enemys", "enemy48", "items", "npcs", "npc48", "autotile"]; @@ -288,20 +291,21 @@ editor.prototype.drawInitData = function (icons) { for (var im in autotiles) { tempy += autotiles[im].height; } - editor.widthsX[img] = [img, sumWidth / 32, (sumWidth + 3 * 32) / 32, tempy]; - sumWidth += 3 * 32; + var tempx = editor.folded ? 32 : 3 * 32; + editor.widthsX[img] = [img, sumWidth / 32, (sumWidth + tempx) / 32, tempy]; + sumWidth += tempx; maxHeight = Math.max(maxHeight, tempy); continue; } - if (img == 'terrains') { - editor.widthsX[img] = [img, sumWidth / 32, (sumWidth + images[img].width) / 32, images[img].height + 32*2] - sumWidth += images[img].width; - maxHeight = Math.max(maxHeight, images[img].height + 32*2); - continue; + var width = images[img].width, height = images[img].height, mh = height; + if (editor.folded) { + var per_height = (img == 'enemy48' || img == 'npc48' ? 48 : 32); + width = Math.ceil(height / per_height / editor.foldPerCol) * 32; + if (width > 32) mh = per_height * editor.foldPerCol; } - editor.widthsX[img] = [img, sumWidth / 32, (sumWidth + images[img].width) / 32, images[img].height]; - sumWidth += images[img].width; - maxHeight = Math.max(maxHeight, images[img].height); + editor.widthsX[img] = [img, sumWidth / 32, (sumWidth + width) / 32, height]; + sumWidth += width; + maxHeight = Math.max(maxHeight, mh + 64); } var tilesets = images.tilesets; for (var ii in core.tilesets) { @@ -318,82 +322,75 @@ editor.prototype.drawInitData = function (icons) { if (fullWidth > edata.width) edata.style.width = (edata.width = fullWidth) / ratio + 'px'; edata.style.height = (edata.height = fullHeight) / ratio + 'px'; */ + var iconImages = document.getElementById('iconImages'); iconImages.style.width = (iconImages.width = fullWidth) / ratio + 'px'; iconImages.style.height = (iconImages.height = fullHeight) / ratio + 'px'; - var dc = {drawImage:function(){ - var image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight; - var a=Array.prototype.slice.call(arguments) - if(arguments.length==3){ - // [image, dx, dy]=arguments - // [sx, sy, sWidth, sHeight, dWidth, dHeight]=[0,0,image.width,image.height,image.width,image.height] - image=a[0] - a=[a[0],0,0,image.width,image.height,a[1],a[2],image.width,image.height] - } - if(arguments.length==5){ - // [image, dx, dy, dWidth, dHeight]=arguments - // [sx, sy, sWidth, sHeight]=[0,0,image.width,image.height] - image=a[0] - a=[a[0],0,0,image.width,image.height,a[1],a[2],a[3],a[4]] - } - if(arguments.length==9){ - // [image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight]=arguments - } - image=a[0]; - sx=a[1]; - sy=a[2]; - sWidth=a[3]; - sHeight=a[4]; - dx=a[5]; - dy=a[6]; - dWidth=a[7]; - dHeight=a[8]; - //放弃对 dWidth, dHeight 的支持, 始终画一样大的 - var dimg=new Image() - dimg.src = image.src; - dimg.style.clip=['rect(',sy,'px,',sx+sWidth,'px,',sy+sHeight,'px,',sx,'px)'].join('') - dimg.style.top=dy-sy+'px' - dimg.style.left=dx-sx+'px' - dimg.width=image.width/ratio - dimg.height=image.height/ratio - iconImages.appendChild(dimg) - }} - // var dc = edata.getContext('2d'); - var nowx = 0; - var nowy = 0; + var drawImage = function (image, x, y) { + image.style.left = x + 'px'; + image.style.top = y + 'px'; + iconImages.appendChild(image); + } + + var nowx = 0, nowy = 0; for (var ii = 0; ii < imgNames.length; ii++) { var img = imgNames[ii]; if (img == 'terrains') { - (function(image,dc,nowx){ + (function(image,nowx){ if (image.complete) { - dc.drawImage(image, nowx, 32); + drawImage(image, nowx, 32); core.material.images.airwall = image; delete(editor.airwallImg); } else image.onload = function () { - dc.drawImage(image, nowx, 32); + drawImage(image, nowx, 32); core.material.images.airwall = image; delete(editor.airwallImg); editor.updateMap(); } - })(editor.airwallImg,dc,nowx); - dc.drawImage(images[img], nowx, 32*2); - nowx += images[img].width; + })(editor.airwallImg,nowx); + if (editor.folded) { + // --- 单列 & 折行 + var subimgs = core.splitImage(images[img], 32, editor.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); + nowx += 32; + } + } + else { + drawImage(images[img], nowx, 32*2); + nowx += images[img].width; + } continue; } if (img == 'autotile') { var autotiles = images[img]; + var tempx = editor.folded ? 32 : 96; for (var im in autotiles) { - dc.drawImage(autotiles[im], 0, 0, 96, 128, nowx, nowy, 96, 128); + var subimgs = core.splitImage(autotiles[im], tempx, autotiles[im].height); + drawImage(subimgs[0], nowx, nowy); nowy += autotiles[im].height; } - nowx += 3 * 32; + nowx += tempx; continue; } - dc.drawImage(images[img], nowx, 0) - nowx += images[img].width; + if (editor.folded) { + // --- 单列 & 折行 + var per_height = img.endsWith('48') ? 48 : 32; + var subimgs = core.splitImage(images[img], 32, editor.foldPerCol * per_height); + var frames = images[img].width / 32; + for (var i = 0; i < subimgs.length; i+=frames) { + drawImage(subimgs[i], nowx, 0); + nowx += 32; + } + } + else { + drawImage(images[img], nowx, 0); + nowx += images[img].width; + } } for (var ii in core.tilesets) { var img = core.tilesets[ii]; - dc.drawImage(tilesets[img], nowx, 0) + drawImage(tilesets[img], nowx, 0); nowx += tilesets[img].width; } //editor.mapInit(); @@ -467,8 +464,12 @@ editor.prototype.setSelectBoxFromInfo=function(thisevent){ pos.x=editor.widthsX[thisevent.images][1]; pos.y=thisevent.y; if(thisevent.x)pos.x+=thisevent.x; - if(thisevent.images=='terrains')pos.y+=2; ysize = thisevent.images.endsWith('48') ? 48 : 32; + if (editor.folded) { + pos.x += Math.floor(pos.y / editor.foldPerCol); + pos.y %= editor.foldPerCol; + } + if(pos.x == 0) pos.y+=2; } var dataSelection = document.getElementById('dataSelection'); dataSelection.style.left = pos.x * 32 + 'px'; diff --git a/_server/editor_unsorted_1.js b/_server/editor_unsorted_1.js index 6eec656c..b31510d6 100644 --- a/_server/editor_unsorted_1.js +++ b/_server/editor_unsorted_1.js @@ -444,11 +444,22 @@ editor.constructor.prototype.listen=function () { } var scrollBarHeight = getScrollBarHeight(); + var iconExpandBtn = document.getElementById('iconExpandBtn'); + iconExpandBtn.style.display = 'block'; + iconExpandBtn.innerText = editor.folded ? "展开" : "折叠"; + iconExpandBtn.onclick = function () { + if (confirm(editor.folded ? "你想要展开素材吗？\n展开模式下将显示全素材内容。" + : ("你想要折叠素材吗？\n折叠模式下每个素材将仅显示单列，并且每"+editor.foldPerCol+"个自动换列。"))) { + core.setLocalStorage('folded', !editor.folded); + window.location.reload(); + } + } + var dataSelection = document.getElementById('dataSelection'); var iconLib=document.getElementById('iconLib'); iconLib.onmousedown = function (e) { e.stopPropagation(); - if (!editor.isMobile && e.clientY>=((core.__SIZE__==13?630:655) - scrollBarHeight)) return; + if (!editor.isMobile && e.clientY>=iconLib.offsetHeight - scrollBarHeight) return; var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft; var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; var loc = { @@ -460,11 +471,11 @@ editor.constructor.prototype.listen=function () { var pos = locToPos(loc); for (var spriter in editor.widthsX) { if (pos.x >= editor.widthsX[spriter][1] && pos.x < editor.widthsX[spriter][2]) { - var ysize = spriter.indexOf('48') === -1 ? 32 : 48; + var ysize = spriter.endsWith('48') ? 48 : 32; loc.ysize = ysize; pos.images = editor.widthsX[spriter][0]; pos.y = ~~(loc.y / loc.ysize); - if(core.tilesets.indexOf(pos.images)==-1)pos.x = editor.widthsX[spriter][1]; + if(!editor.folded && core.tilesets.indexOf(pos.images)==-1) pos.x = editor.widthsX[spriter][1]; var autotiles = core.material.images['autotile']; if (pos.images == 'autotile') { var imNames = Object.keys(autotiles); @@ -478,8 +489,15 @@ editor.constructor.prototype.listen=function () { } } } - } else if ((pos.y + 1) * ysize > editor.widthsX[spriter][3]) - pos.y = ~~(editor.widthsX[spriter][3] / ysize) - 1; + } + else { + var height = editor.widthsX[spriter][3], col = height / ysize; + if (editor.folded) { + col = (pos.x == editor.widthsX[spriter][2] - 1) ? ((col - 1) % editor.foldPerCol + 1) : editor.foldPerCol; + } + if (spriter == 'terrains' && pos.x == editor.widthsX[spriter][1]) col += 2; + pos.y = Math.min(pos.y, col - 1); + } selectBox.isSelected(true); // console.log(pos,core.material.images[pos.images].height) @@ -493,10 +511,16 @@ editor.constructor.prototype.listen=function () { } else if(pos.x == 0 && pos.y == 1){ editor.info = editor.ids[editor.indexs[17]]; } else { - if (Object.prototype.hasOwnProperty.call(autotiles, pos.images)) editor.info = {'images': pos.images, 'y': 0}; - else if (pos.images == 'terrains') editor.info = {'images': pos.images, 'y': pos.y - 2}; + if (autotiles[pos.images]) editor.info = {'images': pos.images, 'y': 0}; else if (core.tilesets.indexOf(pos.images)!=-1) editor.info = {'images': pos.images, 'y': pos.y, 'x': pos.x-editor.widthsX[spriter][1]}; - else editor.info = {'images': pos.images, 'y': pos.y}; + else { + var y = pos.y; + if (editor.folded) { + y += editor.foldPerCol * (pos.x-editor.widthsX[spriter][1]); + } + if (pos.images == 'terrains' && pos.x == 0) y -= 2; + editor.info = {'images': pos.images, 'y': y} + } for (var ii = 0; ii < editor.ids.length; ii++) { if ((core.tilesets.indexOf(pos.images)!=-1 && editor.info.images == editor.ids[ii].images diff --git a/editor-mobile.html b/editor-mobile.html index d76491b1..e12accb8 100644 --- a/editor-mobile.html +++ b/editor-mobile.html @@ -308,6 +308,7 @@ +
diff --git a/editor.html b/editor.html index 0a0f0d96..7ffc7df3 100644 --- a/editor.html +++ b/editor.html @@ -352,6 +352,7 @@
+ diff --git a/editor.html b/editor.html index 7ffc7df3..43200cfe 100644 --- a/editor.html +++ b/editor.html @@ -293,7 +293,7 @@ - +