From 519b88275824afb79e9c0c9c3ff8c766eb7350f2 Mon Sep 17 00:00:00 2001 From: oc Date: Thu, 6 Dec 2018 23:29:49 +0800 Subject: [PATCH 1/2] statusCanvas --- _server/data.comment.js | 12 +++ _server/functions.comment.js | 6 ++ editor-mobile.html | 11 ++- editor.html | 11 ++- index.html | 11 ++- libs/control.js | 181 ++++++++++++++--------------------- main.js | 6 +- project/data.js | 2 + project/functions.js | 22 +++++ 9 files changed, 141 insertions(+), 121 deletions(-) diff --git a/_server/data.comment.js b/_server/data.comment.js index 7e7e136a..ab8ddd6e 100644 --- a/_server/data.comment.js +++ b/_server/data.comment.js @@ -564,6 +564,18 @@ var data_comment_c456ea59_6018_45ef_8bcc_211a24c627dc = "_bool": "bool", "_data": "点击“开始游戏”后是否立刻开始游戏而不显示难度选择界面" }, + "statusCanvas": { + "_leaf": true, + "_type": "checkbox", + "_bool": "bool", + "_data": "是否状态栏canvas化，即手动自定义绘制状态栏。\n如果此项开启，则可在脚本编辑的drawStatusBar中自定义绘制菜单栏。" + }, + "statusCanvasRowsOnMobile": { + "_leaf": true, + "_type": "textarea", + "_range": "thiseval==null || (thiseval>0 && thiseval<=4)", + "_data": "竖屏模式下，顶端状态栏canvas化后的行数。\n此项将决定竖屏的状态栏高度，如果设置则不小于1且不大于4。\n仅在statusCanvas开启时才有效" + }, "canOpenBattleAnimate": { "_leaf": true, "_type": "checkbox", diff --git a/_server/functions.comment.js b/_server/functions.comment.js index d7fb4499..ae97a7cd 100644 --- a/_server/functions.comment.js +++ b/_server/functions.comment.js @@ -169,6 +169,12 @@ var functions_comment_c456ea59_6018_45ef_8bcc_211a24c627dc = "_leaf": false, "_type": "object", "_data": { + "drawStatusBar": { + "_leaf": true, + "_type": "textarea", + "_lint": true, + "_data": "自定义绘制状态栏。\n当状态栏canvas化开启时，可以在这里对状态栏进行自定义绘制。\n仅当statusCanvas开启时有效。" + }, "drawStatistics": { "_leaf": true, "_type": "textarea", diff --git a/editor-mobile.html b/editor-mobile.html index 89b98714..c3396905 100644 --- a/editor-mobile.html +++ b/editor-mobile.html @@ -353,7 +353,7 @@

-
+

@@ -361,11 +361,11 @@

-
+

-
+

@@ -377,7 +377,7 @@

-
+

@@ -404,6 +404,9 @@
+ + +
diff --git a/editor.html b/editor.html index b5f76989..54cdb46e 100644 --- a/editor.html +++ b/editor.html @@ -339,7 +339,7 @@

-
+

@@ -347,11 +347,11 @@

-
+

-
+

@@ -363,7 +363,7 @@

-
+

@@ -390,6 +390,9 @@
+ + +
diff --git a/index.html b/index.html index 4e65f98a..8fe217e5 100644 --- a/index.html +++ b/index.html @@ -58,7 +58,7 @@

-
+

@@ -66,11 +66,11 @@

-
+

-
+

@@ -82,7 +82,7 @@

-
+

@@ -109,6 +109,9 @@
+ + +
diff --git a/libs/control.js b/libs/control.js index 0c15502b..c413b999 100644 --- a/libs/control.js +++ b/libs/control.js @@ -2907,6 +2907,36 @@ control.prototype.setToolbarButton = function (useButton) { } } +control.prototype.needDraw = function(id) { + if (!core.isset(id)) { + var toDraw = [], status = core.dom.status; + for (var i = 0; i12) alert("当前状态栏数目("+count+")大于12，请调整到不超过12以避免手机端出现显示问题。"); + if (!statusCanvas && count>12) alert("当前状态栏数目("+count+")大于12，请调整到不超过12以避免手机端出现显示问题。"); + var col = Math.ceil(count / 3); + if (statusCanvas) col = statusCanvasRows; var statusLineHeight = BASE_LINEHEIGHT * 9 / count; var statusLineFontSize = DEFAULT_FONT_SIZE; @@ -2988,9 +3009,6 @@ control.prototype.resize = function(clientWidth, clientHeight) { core.domStyle.screenMode = 'vertical'; //显示快捷商店图标 shopDisplay = 'block'; - //判断应该显示几行 - // var col = core.flags.enableMDef || core.flags.enableExperience || core.flags.enableDebuff ? 3 : 2; - var col = parseInt((count-1)/3)+1; var tempTopBarH = scale * (BASE_LINEHEIGHT * col + SPACE * 2) + 6; var tempBotBarH = scale * (BASE_LINEHEIGHT + SPACE * 4) + 6; @@ -2998,6 +3016,8 @@ control.prototype.resize = function(clientWidth, clientHeight) { gameGroupHeight = tempWidth + tempTopBarH + tempBotBarH; gameGroupWidth = tempWidth + statusCanvasWidth = canvasWidth; + statusCanvasHeight = tempTopBarH; canvasTop = tempTopBarH; // canvasLeft = 0; toolBarWidth = statusBarWidth = canvasWidth; @@ -3031,6 +3051,8 @@ control.prototype.resize = function(clientWidth, clientHeight) { toolBarWidth = statusBarWidth = DEFAULT_BAR_WIDTH * scale; statusBarHeight = gameGroupHeight - SPACE; statusBarBorder = '3px '+borderColor+' solid'; + statusCanvasWidth = toolBarWidth + SPACE; + statusCanvasHeight = statusBarHeight; statusBackground = (core.status.globalAttribute||core.initStatus.globalAttribute).statusLeftBackground; statusHeight = scale*statusLineHeight * .8; @@ -3065,6 +3087,8 @@ control.prototype.resize = function(clientWidth, clientHeight) { // statusBarHeight = statusLineHeight * count + SPACE * 2; //一共有9行 statusBackground = (core.status.globalAttribute||core.initStatus.globalAttribute).statusLeftBackground; statusBarHeight = gameGroupHeight - SPACE; + statusCanvasWidth = toolBarWidth + SPACE; + statusCanvasHeight = statusBarHeight; statusHeight = statusLineHeight * .8; statusLabelsLH = .8 * statusLineHeight; @@ -3100,6 +3124,14 @@ control.prototype.resize = function(clientWidth, clientHeight) { height: (canvasWidth - SPACE*2) + unit, } }, + { + id: 'statusCanvas', + rules: { + width: (statusCanvasWidth - SPACE*2) + unit, + height: (statusCanvasHeight - SPACE) + unit, + display: statusCanvas?'block':'none' + } + }, { id: 'gif', rules: { @@ -3114,15 +3146,6 @@ control.prototype.resize = function(clientWidth, clientHeight) { height:(canvasWidth - SPACE*2) + unit, } }, - /* - { - id: 'curtain', - rules: { - width: (canvasWidth - SPACE*2) + unit, - height:(canvasWidth - SPACE*2) + unit, - } - }, - */ { id: 'gameDraw', rules: { @@ -3166,7 +3189,8 @@ control.prototype.resize = function(clientWidth, clientHeight) { width: '100%', maxWidth: statusMaxWidth + unit, height: statusHeight + unit, - margin: margin/2 + unit + margin: margin/2 + unit, + display: !statusCanvas?'block':'none' } }, { @@ -3212,84 +3236,6 @@ control.prototype.resize = function(clientWidth, clientHeight) { display: shopDisplay && core.domStyle.showStatusBar } }, - { - id: 'floorCol', - rules: { - display: core.flags.enableFloor ? 'block': 'none' - } - }, - { - id: 'nameCol', - rules: { - display: core.flags.enableName ? 'block': 'none' - } - }, - { - id: 'lvCol', - rules: { - display: core.flags.enableLv ? 'block': 'none' - } - }, - { - id: 'hpmaxCol', - rules: { - display: core.flags.enableHPMax ? 'block': 'none' - } - }, - { - id: 'manaCol', - rules: { - display: core.flags.enableMana ? 'block': 'none' - } - }, - { - id: 'mdefCol', - rules: { - display: core.flags.enableMDef ? 'block': 'none' - } - }, - { - id: 'moneyCol', - rules: { - display: core.flags.enableMoney ? 'block': 'none' - } - }, - { - id: 'expCol', - rules: { - display: core.flags.enableExperience && !core.flags.levelUpLeftMode ? 'block': 'none' - } - }, - { - id: 'upCol', - rules: { - display: core.flags.enableLevelUp ? 'block': 'none' - } - }, - { - id: 'skillCol', - rules: { - display: core.flags.enableSkill ? 'block': 'none' - } - }, - { - id: 'keyCol', - rules: { - display: !core.isset(core.flags.enableKeys)||core.flags.enableKeys?'block':'none' - } - }, - { - id: 'pzfCol', - rules: { - display: core.flags.enablePZF?'block':'none' - } - }, - { - 'id': 'debuffCol', - rules: { - display: core.flags.enableDebuff ? 'block': 'none' - } - }, { id: 'hard', rules: { @@ -3298,8 +3244,27 @@ control.prototype.resize = function(clientWidth, clientHeight) { } }, ] + for (var i = 0; i < core.dom.status.length; ++i) { + var id = core.dom.status[i].id; + core.domStyle.styles.push({ + id: id, + rules: { + display: toDraw.indexOf(id.substring(0, id.length-3))>=0 && !statusCanvas ? "block": "none" + } + }); + } + core.domRenderer(); this.setToolbarButton(); + + if (core.domStyle.screenMode == 'vertical') { + core.dom.statusCanvas.width = 416; + core.dom.statusCanvas.height = col * BASE_LINEHEIGHT + SPACE + 6; + } + else { + core.dom.statusCanvas.width = 129; + core.dom.statusCanvas.height = 416; + } } ////// 渲染DOM ////// diff --git a/main.js b/main.js index 2ff39470..0ea10df4 100644 --- a/main.js +++ b/main.js @@ -55,16 +55,20 @@ function main() { 'nameCol': document.getElementById('nameCol'), 'lvCol': document.getElementById('lvCol'), 'hpmaxCol': document.getElementById('hpmaxCol'), + 'hpCol': document.getElementById('hpCol'), 'manaCol': document.getElementById('manaCol'), + 'atkCol': document.getElementById('atkCol'), + 'defCol': document.getElementById('defCol'), 'mdefCol': document.getElementById('mdefCol'), 'moneyCol': document.getElementById('moneyCol'), - 'expCol': document.getElementById('expCol'), + 'experienceCol': document.getElementById('experienceCol'), 'upCol': document.getElementById('upCol'), 'keyCol': document.getElementById('keyCol'), 'pzfCol': document.getElementById('pzfCol'), 'debuffCol': document.getElementById('debuffCol'), 'skillCol': document.getElementById('skillCol'), 'hard': document.getElementById('hard'), + 'statusCanvas': document.getElementById('statusCanvas') }; this.mode = 'play'; this.loadList = [ diff --git a/project/data.js b/project/data.js index 41c36ba7..c4a85d72 100644 --- a/project/data.js +++ b/project/data.js @@ -369,6 +369,8 @@ var data_a1e2fb4a_e986_4524_b0da_9b7ba7c0874d = "useLoop": false, "startUsingCanvas": false, "startDirectly": false, + "statusCanvas": false, + "statusCanvasRowsOnMobile": 3, "canOpenBattleAnimate": true, "showBattleAnimateConfirm": false, "battleAnimate": false, diff --git a/project/functions.js b/project/functions.js index 98fbcb24..c1011e77 100644 --- a/project/functions.js +++ b/project/functions.js @@ -998,6 +998,28 @@ var functions_d6ad677b_427a_4623_b50f_a445a3b0ef8a = } }, "ui": { + "drawStatusBar": function () { + // 如果是非状态栏canvas化，直接返回 + if (!core.flags.statusCanvas) return; + var canvas = core.dom.statusCanvas, ctx = canvas.getContext('2d'); + // 清空状态栏 + ctx.clearRect(0, 0, canvas.width, canvas.height); + // 如果是隐藏状态栏模式，直接返回 + if (!core.domStyle.showStatusBar) return; + + // 动态计算要绘制的项目 + var toDraw = core.control.needDraw(); + console.log(toDraw); + + // 开始绘制；横竖屏分别绘制 + if (core.domStyle.screenMode != 'vertical') { + console.log("横屏"); + } + else { + console.log("竖屏"); + } + +}, "drawStatistics": function () { // 浏览地图时参与的统计项目 From 267623027318d15577c82306270f8123dc52c1f8 Mon Sep 17 00:00:00 2001 From: oc Date: Sat, 8 Dec 2018 01:35:44 +0800 Subject: [PATCH 2/2] StatusBar Canvas --- libs/actions.js | 17 ++++++------- libs/control.js | 21 +++++++++------- libs/core.js | 7 ++++++ libs/ui.js | 6 +++++ project/functions.js | 58 +++++++++++++++++++++++++++++++++++++------- 5 files changed, 81 insertions(+), 28 deletions(-) diff --git a/libs/actions.js b/libs/actions.js index ceee4f34..55212e0b 100644 --- a/libs/actions.js +++ b/libs/actions.js @@ -432,16 +432,13 @@ actions.prototype.getClickLoc = function (x, y) { var size = 32; size = size * core.domStyle.scale; - switch (core.domStyle.screenMode) {// 这里的3是指statusBar和游戏画布之间的白线宽度 - case 'vertical': - statusBar.x = 0; - statusBar.y = core.dom.statusBar.offsetHeight + 3; - break; - case 'horizontal': - case 'bigScreen': - statusBar.x = core.dom.statusBar.offsetWidth + 3; - statusBar.y = 0; - break; + if (core.domStyle.isVertical) { + statusBar.x = 0; + statusBar.y = core.dom.statusBar.offsetHeight + 3; + } + else { + statusBar.x = core.dom.statusBar.offsetWidth + 3; + statusBar.y = 0; } var left = core.dom.gameGroup.offsetLeft + statusBar.x; diff --git a/libs/control.js b/libs/control.js index f533e065..d3f25f7d 100644 --- a/libs/control.js +++ b/libs/control.js @@ -2877,31 +2877,30 @@ control.prototype.updateGlobalAttribute = function (name) { if (!core.isset(attribute)) return; switch (name) { case 'statusLeftBackground': - if (core.domStyle.screenMode == 'horizontal' || core.domStyle.screenMode == 'bigScreen') { + if (!core.domStyle.isVertical) { core.dom.statusBar.style.background = attribute[name]; } break; case 'statusTopBackground': - if (core.domStyle.screenMode == 'vertical') { + if (core.domStyle.isVertical) { core.dom.statusBar.style.background = attribute[name]; } break; case 'toolsBackground': - if (core.domStyle.screenMode == 'vertical') { + if (core.domStyle.isVertical) { core.dom.toolBar.style.background = attribute[name]; } break; case 'borderColor': { var border = '3px ' + attribute[name] + ' solid'; - var isVertical = core.domStyle.screenMode == 'vertical'; core.dom.statusBar.style.borderTop = border; core.dom.statusBar.style.borderLeft = border; - core.dom.statusBar.style.borderRight = isVertical?'':border; + core.dom.statusBar.style.borderRight = core.domStyle.isVertical?'':border; core.dom.gameDraw.style.border = border; core.dom.toolBar.style.borderBottom = border; core.dom.toolBar.style.borderLeft = border; - core.dom.toolBar.style.borderRight = isVertical?'':border; + core.dom.toolBar.style.borderRight = core.domStyle.isVertical?'':border; break; } case 'statusBarColor': @@ -2928,7 +2927,7 @@ control.prototype.setToolbarButton = function (useButton) { if (!core.domStyle.showStatusBar) return; if (!core.isset(useButton)) useButton = core.domStyle.toolbarBtn; - if (core.domStyle.screenMode != 'vertical') useButton = false; + if (!core.domStyle.isVertical) useButton = false; core.domStyle.toolbarBtn = useButton; if (useButton) { @@ -2946,7 +2945,7 @@ control.prototype.setToolbarButton = function (useButton) { ["book","fly","toolbox","shop","save","load","settings"].forEach(function (t) { core.statusBar.image[t].style.display = 'block'; }); - core.statusBar.image.shop.style.display = core.domStyle.screenMode != 'vertical' ? "none":"block"; + core.statusBar.image.shop.style.display = core.domStyle.isVertical ? "block":"none"; } } @@ -3050,6 +3049,7 @@ control.prototype.resize = function(clientWidth, clientHeight) { var tempWidth = DEFAULT_CANVAS_WIDTH * scale; if(!isHorizontal){ //竖屏 core.domStyle.screenMode = 'vertical'; + core.domStyle.isVertical = true; //显示快捷商店图标 shopDisplay = 'block'; @@ -3086,6 +3086,7 @@ control.prototype.resize = function(clientWidth, clientHeight) { toolbarFontSize = DEFAULT_FONT_SIZE * scale; }else { //横屏 core.domStyle.screenMode = 'horizontal'; + core.domStyle.isVertical = false; shopDisplay = 'none'; gameGroupWidth = tempWidth + DEFAULT_BAR_WIDTH * scale; gameGroupHeight = tempWidth; @@ -3118,6 +3119,7 @@ control.prototype.resize = function(clientWidth, clientHeight) { }else { //大屏设备 pc端 core.domStyle.scale = 1; core.domStyle.screenMode = 'bigScreen'; + core.domStyle.isVertical = false; shopDisplay = 'none'; gameGroupWidth = DEFAULT_CANVAS_WIDTH + DEFAULT_BAR_WIDTH; @@ -3300,7 +3302,7 @@ control.prototype.resize = function(clientWidth, clientHeight) { core.domRenderer(); this.setToolbarButton(); - if (core.domStyle.screenMode == 'vertical') { + if (core.domStyle.isVertical) { core.dom.statusCanvas.width = 416; core.dom.statusCanvas.height = col * BASE_LINEHEIGHT + SPACE + 6; } @@ -3308,6 +3310,7 @@ control.prototype.resize = function(clientWidth, clientHeight) { core.dom.statusCanvas.width = 129; core.dom.statusCanvas.height = 416; } + this.updateStatusBar(); } ////// 渲染DOM ////// diff --git a/libs/core.js b/libs/core.js index 6a602754..1882bf8b 100644 --- a/libs/core.js +++ b/libs/core.js @@ -77,6 +77,8 @@ function core() { this.domStyle = { styles: [], scale: 1.0, + screenMode: null, + isVertical: false, toolbarBtn: false, showStatusBar: true, } @@ -1386,6 +1388,11 @@ core.prototype.updateStatusBar = function () { core.control.updateStatusBar(); } +////// 绘制状态栏 ////// +core.prototype.drawStatusBar = function () { + core.ui.drawStatusBar(); +} + ////// 屏幕分辨率改变后重新自适应 ////// core.prototype.resize = function(clientWidth, clientHeight) { core.control.resize(clientWidth, clientHeight); diff --git a/libs/ui.js b/libs/ui.js index 1be9ee61..27ba3e00 100644 --- a/libs/ui.js +++ b/libs/ui.js @@ -2394,6 +2394,12 @@ ui.prototype.drawKeyBoard = function () { core.fillText("ui", "返回游戏", 416-80, offset-3, '#FFFFFF', 'bold 15px '+globalFont); } +////// 绘制状态栏 ///// +ui.prototype.drawStatusBar = function () { + if (this.uidata.drawStatusBar) + this.uidata.drawStatusBar(); +} + ////// 绘制“数据统计”界面 ////// ui.prototype.drawStatistics = function () { diff --git a/project/functions.js b/project/functions.js index 26c747fb..4309b9d1 100644 --- a/project/functions.js +++ b/project/functions.js @@ -863,6 +863,8 @@ var functions_d6ad677b_427a_4623_b50f_a445a3b0ef8a = // 难度 core.statusBar.hard.innerHTML = core.status.hard; + // 状态栏绘制 + core.drawStatusBar(); // 更新阻激夹域的伤害值 core.updateCheckBlock(); @@ -1010,18 +1012,56 @@ var functions_d6ad677b_427a_4623_b50f_a445a3b0ef8a = // 如果是隐藏状态栏模式，直接返回 if (!core.domStyle.showStatusBar) return; - // 动态计算要绘制的项目 - var toDraw = core.control.needDraw(); - console.log(toDraw); + // 作为样板，只绘制楼层、生命、攻击、防御、魔防、金币、钥匙这七个内容 + // 需要其他的请自行进行修改；横竖屏都需要进行适配绘制。 + // （可以使用Chrome浏览器开控制台来模拟手机上的竖屏模式的显示效果，具体方式自行百度） + // 横屏模式下的画布大小是 129*416 + // 竖屏模式下的画布大小是 416*(32*rows+9) 其中rows为状态栏行数，即全塔属性中statusCanvasRowsOnMobile值 + // 可以使用 core.domStyle.isVertical 来判定当前是否是竖屏模式 - // 开始绘制；横竖屏分别绘制 - if (core.domStyle.screenMode != 'vertical') { - console.log("横屏"); - } - else { - console.log("竖屏"); + ctx.fillStyle = core.status.globalAttribute.statusBarColor || core.initStatus.globalAttribute.statusBarColor; + ctx.font = 'italic bold 18px Verdana'; + + // 距离左侧边框6像素，上侧边框9像素，行距约为39像素 + var leftOffset = 6, topOffset = 9, lineHeight = 39; + if (core.domStyle.isVertical) { // 竖屏模式，行高32像素 + leftOffset = 6; topOffset = 6; lineHeight = 32; } + var toDraw = ["floor", "hp", "atk", "def", "mdef", "money"]; + for (var index = 0; index < toDraw.length; index++) { + // 绘制下一个数据 + var name = toDraw[index]; + // 图片大小25x25 + ctx.drawImage(core.statusBar.icons[name], leftOffset, topOffset, 25, 25); + // 文字内容 + var text = (core.statusBar[name]||{}).innerText || " "; + // 斜体判定：如果不是纯数字，斜体会非常难看，需要取消 + if (!/^\d*$/.test(text)) ctx.font = 'bold 18px Verdana'; + // 绘制文字 + ctx.fillText(text, leftOffset + 36, topOffset + 20); + ctx.font = 'italic bold 18px Verdana'; + // 计算下一个绘制的坐标 + if (core.domStyle.isVertical) { + // 竖屏模式 + if (index % 3 != 2) leftOffset += 131; + else { + leftOffset = 6; + topOffset += lineHeight; + } + } + else { + // 横屏模式 + topOffset += lineHeight; + } + } + // 绘制三色钥匙 + ctx.fillStyle = '#FFCCAA'; + ctx.fillText(core.statusBar.yellowKey.innerText, leftOffset + 5, topOffset + 20); + ctx.fillStyle = '#AAAADD'; + ctx.fillText(core.statusBar.blueKey.innerText, leftOffset + 40, topOffset + 20); + ctx.fillStyle = '#FF8888'; + ctx.fillText(core.statusBar.redKey.innerText, leftOffset + 75, topOffset + 20); }, "drawStatistics": function () { // 浏览地图时参与的统计项目