diff --git a/_server/editor.js b/_server/editor.js index c7396183..6f9481f3 100644 --- a/_server/editor.js +++ b/_server/editor.js @@ -8,6 +8,7 @@ function editor() { body:document.body, eui:document.getElementById('eui'), euiCtx:document.getElementById('eui').getContext('2d'), + efgCtx:document.getElementById('efg').getContext('2d'), mid:document.getElementById('mid'), mapEdit:document.getElementById('mapEdit'), selectFloor:document.getElementById('selectFloor'), @@ -26,9 +27,13 @@ function editor() { brushMod2:document.getElementById('brushMod2'), brushMod3:document.getElementById('brushMod3'), bgc : document.getElementById('bg'), + bgCtx : document.getElementById('bg').getContext('2d'), fgc : document.getElementById('fg'), - evc : document.getElementById('event'), + fgCtx : document.getElementById('fg').getContext('2d'), + evc : document.getElementById('event'), + evCtx : document.getElementById('event').getContext('2d'), ev2c : document.getElementById('event2'), + ev2Ctx : document.getElementById('event2').getContext('2d'), layerMod:document.getElementById('layerMod'), layerMod2:document.getElementById('layerMod2'), layerMod3:document.getElementById('layerMod3'), @@ -46,6 +51,10 @@ function editor() { changeFloorId :document.getElementById('changeFloorId'), left1 : document.getElementById('left1'), editModeSelect :document.getElementById('editModeSelect'), + mid2 : document.getElementById('mid2'), + lastUsedDiv: document.getElementById('lastUsedDiv'), + lastUsed: document.getElementById('lastUsed'), + lastUsedCtx: document.getElementById('lastUsed').getContext('2d'), }; this.uivalues={ @@ -89,6 +98,9 @@ function editor() { // tile tileSize: [1,1], + + // 最近使用的图块 + lastUsed: [], }; window.onerror = function (msg, url, lineNo, columnNo, error) { @@ -212,9 +224,9 @@ editor.prototype.init = function (callback) { } editor.prototype.mapInit = function () { - var ec = document.getElementById('event').getContext('2d'); + var ec = editor.dom.evCtx; ec.clearRect(0, 0, core.bigmap.width*32, core.bigmap.height*32); - document.getElementById('event2').getContext('2d').clearRect(0, 0, core.bigmap.width*32, core.bigmap.height*32); + editor.dom.ev2Ctx.clearRect(0, 0, core.bigmap.width*32, core.bigmap.height*32); editor.map = []; var sy=editor.currentFloorData.map.length,sx=editor.currentFloorData.map[0].length; for (var y = 0; y < sy; y++) { @@ -268,7 +280,7 @@ editor.prototype.changeFloor = function (floorId, callback) { /////////// 游戏绘图相关 /////////// editor.prototype.drawEventBlock = function () { - var fg=document.getElementById('efg').getContext('2d'); + var fg=editor.dom.efgCtx; fg.clearRect(0, 0, core.__PIXELS__, core.__PIXELS__); var firstData = editor.game.getFirstData(); @@ -319,7 +331,7 @@ editor.prototype.drawEventBlock = function () { editor.prototype.drawPosSelection = function () { this.drawEventBlock(); - var fg=document.getElementById('efg').getContext('2d'); + var fg=editor.dom.efgCtx; fg.strokeStyle = 'rgba(255,255,255,0.7)'; fg.lineWidth = 4; fg.strokeRect(32*editor.pos.x - core.bigmap.offsetX + 4, 32*editor.pos.y - core.bigmap.offsetY + 4, 24, 24); @@ -371,20 +383,42 @@ editor.prototype.updateMap = function () { //ctx.drawImage(core.material.images[tileInfo.images], 0, tileInfo.y*32, 32, 32, x*32, y*32, 32, 32); } // 绘制地图 start - var eventCtx = document.getElementById('event').getContext("2d"); - var fgCtx = document.getElementById('fg').getContext("2d"); - var bgCtx = document.getElementById('bg').getContext("2d"); - for (var y = 0; y < editor.map.length; y++) + for (var y = 0; y < editor.map.length; y++) { for (var x = 0; x < editor.map[0].length; x++) { var tileInfo = editor.map[y][x]; - drawTile(eventCtx, x, y, tileInfo); + drawTile(editor.dom.evCtx, x, y, tileInfo); tileInfo = editor.fgmap[y][x]; - drawTile(fgCtx, x, y, tileInfo); + drawTile(editor.dom.fgCtx, x, y, tileInfo); tileInfo = editor.bgmap[y][x]; - drawTile(bgCtx, x, y, tileInfo); + drawTile(editor.dom.bgCtx, x, y, tileInfo); } + } // 绘制地图 end - + + this.updateLastUsedMap(); +} + +editor.prototype.updateLastUsedMap = function () { + // 绘制最近使用事件 + var ctx = editor.dom.lastUsedCtx; + ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); + ctx.strokeStyle = 'rgba(255,128,0,0.85)'; + ctx.lineWidth = 4; + for (var i = 0; i < editor.uivalues.lastUsed.length; ++i) { + var x = i % core.__SIZE__, y = parseInt(i / core.__SIZE__); + if (y >= 5) break; + var info = editor.uivalues.lastUsed[i]; + if (!info || !info.images) continue; + if (info.isTile) { + ctx.drawImage(core.material.images.tilesets[info.images], 32 * info.x, 32 * info.y, 32, 32, x*32, y*32, 32, 32); + } else { + var per_height = info.images.endsWith('48') ? 48 : 32; + ctx.drawImage(core.material.images[info.images], 0, info.y * per_height, 32, per_height, x * 32, y * 32, 32, 32); + } + if (selectBox.isSelected() && editor.info.id == info.id) { + ctx.strokeRect(32 * x + 2, 32 * y + 2, 28, 28); + } + } } editor.prototype.setViewport=function (x, y) { @@ -413,6 +447,7 @@ editor.prototype.drawInitData = function (icons) { // editor.uivalues.folded = true; editor.uivalues.foldPerCol = core.getLocalStorage('foldPerCol', 50); // var imgNames = Object.keys(images); //还是固定顺序吧； + editor.uivalues.lastUsed = core.getLocalStorage("lastUsed", []); var imgNames = ["terrains", "animates", "enemys", "enemy48", "items", "npcs", "npc48", "autotile"]; for (var ii = 0; ii < imgNames.length; ii++) { @@ -605,7 +640,10 @@ editor.prototype.setSelectBoxFromInfo=function(thisevent){ editor.dom.dataSelection.style.left = pos.x * 32 + 'px'; editor.dom.dataSelection.style.top = pos.y * ysize + 'px'; editor.dom.dataSelection.style.height = ysize - 6 + 'px'; - setTimeout(function(){selectBox.isSelected(true);}); + setTimeout(function(){ + selectBox.isSelected(true); + editor.updateLastUsedMap(); + }); editor.info = JSON.parse(JSON.stringify(thisevent)); tip.infos(JSON.parse(JSON.stringify(thisevent))); editor.pos=pos; diff --git a/_server/editor_datapanel.js b/_server/editor_datapanel.js index a962efe0..948ce9c0 100644 --- a/_server/editor_datapanel.js +++ b/_server/editor_datapanel.js @@ -540,7 +540,7 @@ editor_datapanel_wrapper = function (editor) { } //画灰白相间的格子 - var bgc = editor.dom.bg.getContext('2d'); + var bgc = editor.dom.bgCtx; var colorA = ["#f8f8f8", "#cccccc"]; var colorIndex; var sratio = 4; diff --git a/_server/editor_listen.js b/_server/editor_listen.js index 62bb2e73..e4668d9a 100644 --- a/_server/editor_listen.js +++ b/_server/editor_listen.js @@ -34,6 +34,8 @@ editor_listen_wrapper = function (editor) { editor.dom.clearEvent.onmousedown = editor.uifunctions.clearEvent_click editor.dom.clearLoc.onmousedown = editor.uifunctions.clearLoc_click + editor.dom.lastUsed.onmousedown = editor.uifunctions.lastUsed_click; + editor.dom.brushMod.onchange = editor.uifunctions.brushMod_onchange if (editor.dom.brushMod2) editor.dom.brushMod2.onchange = editor.uifunctions.brushMod2_onchange; if (editor.dom.brushMod3) editor.dom.brushMod3.onchange = editor.uifunctions.brushMod3_onchange; diff --git a/_server/editor_mappanel.js b/_server/editor_mappanel.js index fb32c7b3..c25f3e68 100644 --- a/_server/editor_mappanel.js +++ b/_server/editor_mappanel.js @@ -251,6 +251,10 @@ editor_mappanel_wrapper = function (editor) { editor[editor.layerMod][editor.uivalues.stepPostfix[ii].y][editor.uivalues.stepPostfix[ii].x] = editor.info; } // console.log(editor.map); + if (editor.info.y != null) { + editor.uivalues.lastUsed = [editor.info].concat(editor.uivalues.lastUsed.filter(function (e) { return e.id != editor.info.id})); + core.setLocalStorage("lastUsed", editor.uivalues.lastUsed); + } editor.updateMap(); editor.uivalues.holdingPath = 0; editor.uivalues.stepPostfix = []; @@ -587,6 +591,7 @@ editor_mappanel_wrapper = function (editor) { * 切换画笔模式 */ editor.uifunctions.brushMod3_onchange = function () { + alert("从V2.6.6开始，tileset贴图模式已被废弃。\n请右键额外素材，并输入所需要绘制的宽高，然后单击地图以绘制一个区域。"); // tip.showHelp(5) tip.isSelectedBlock(false) tip.msgs[11] = String('tileset贴图模式下可以按选中tileset素材，并在地图上拖动来一次绘制一个区域'); @@ -710,6 +715,20 @@ editor_mappanel_wrapper = function (editor) { saveFloor.onclick = editor_mode.saveFloor; } + editor.uifunctions.lastUsed_click = function (e) { + if (editor.isMobile) return; + + var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft + var scrollTop = document.documentElement.scrollTop || document.body.scrollTop + var px = scrollLeft + e.clientX - editor.dom.mid2.offsetLeft - editor.dom.lastUsedDiv.offsetLeft, + py = scrollTop + e.clientY - editor.dom.mid2.offsetTop - editor.dom.lastUsedDiv.offsetTop; + var x = parseInt(px / 32), y = parseInt(py / 32); + var index = x + core.__SIZE__ * y; + if (index >= editor.uivalues.lastUsed.length) return; + editor.setSelectBoxFromInfo(editor.uivalues.lastUsed[index]); + return; + } + ///////////////////////////////////////////////////////////////////////////// @@ -863,7 +882,4 @@ editor_mappanel_wrapper = function (editor) { - - - } \ No newline at end of file diff --git a/_server/editor_materialpanel.js b/_server/editor_materialpanel.js index f5dd9916..6b81cf1e 100644 --- a/_server/editor_materialpanel.js +++ b/_server/editor_materialpanel.js @@ -147,6 +147,7 @@ editor_materialpanel_wrapper = function (editor) { tip.infos(JSON.parse(JSON.stringify(editor.info))); editor_mode.onmode('nextChange'); editor_mode.onmode('enemyitem'); + editor.updateLastUsedMap(); //editor_mode.enemyitem(); } } diff --git a/_server/editor_ui.js b/_server/editor_ui.js index 159f7395..c5f4677d 100644 --- a/_server/editor_ui.js +++ b/_server/editor_ui.js @@ -49,7 +49,7 @@ editor_ui_wrapper = function (editor) { } } if (unselect) { - if (clickpath.indexOf('eui') === -1) { + if (clickpath.indexOf('eui') === -1 && clickpath.indexOf('lastUsed')) { if (selectBox.isSelected()) { editor_mode.onmode(''); editor.file.saveFloorFile(function (err) { diff --git a/editor-mobile.html b/editor-mobile.html index f172454c..d586ea90 100644 --- a/editor-mobile.html +++ b/editor-mobile.html @@ -313,8 +313,11 @@ -
- +
- +

最近使用的图块列表：

+
+ +