From d1df7eac7360d83b3687ae12606d195a0ceff7d9 Mon Sep 17 00:00:00 2001 From: ckcz123 Date: Fri, 30 Oct 2020 17:09:46 +0800 Subject: [PATCH] =?UTF-8?q?=E9=AB=98=E6=B8=85UI?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- _docs/api.md | 1 + _server/CodeMirror/defs.js | 8 ++++++++ _server/table/data.comment.js | 6 ++++++ libs/control.js | 14 ++++++++------ libs/core.js | 13 +++++++++---- libs/maps.js | 16 ++++++++++++++-- libs/ui.js | 20 +++++++++++++------- mota-js10月和273issue.txt | 4 ++-- project/data.js | 3 ++- project/plugins.js | 7 ++++++- 10 files changed, 69 insertions(+), 23 deletions(-) diff --git a/_docs/api.md b/_docs/api.md index ce19861a..34c7a6c7 100644 --- a/_docs/api.md +++ b/_docs/api.md @@ -62,6 +62,7 @@ core.platform.useLocalForage （是否开启了新版存档） core.domStyle 游戏的界面信息，包含如下几个： core.domStyle.scale （当前的放缩比） +core.domStyle.ratio （高清UI的放缩比） core.domStyle.isVertical （当前是否是竖屏状态） core.domStyle.showStatusBar （当前是否显示状态栏） core.domStyle.toolbarBtn （当前是否显示工具栏） diff --git a/_server/CodeMirror/defs.js b/_server/CodeMirror/defs.js index 403e2d4c..71ba0eb9 100644 --- a/_server/CodeMirror/defs.js +++ b/_server/CodeMirror/defs.js @@ -1832,6 +1832,14 @@ var terndefs_f6783a0a_522d_417e_8407_94c67b692e50 = [ "!type": "number", "!doc": "当前界面放缩比例", }, + "ratio": { + "!type": "number", + "!doc": "高清UI放缩比例" + }, + "hdCanvas": { + "!type": "[string]", + "!doc": "高清UI的系统画布" + }, "availableScale": { "!type": "[number]", "!doc": "当前界面支持的放缩比例" diff --git a/_server/table/data.comment.js b/_server/table/data.comment.js index bbb709c7..593e62e1 100644 --- a/_server/table/data.comment.js +++ b/_server/table/data.comment.js @@ -659,6 +659,12 @@ var data_comment_c456ea59_6018_45ef_8bcc_211a24c627dc = { "_type": "checkbox", "_docs": "虚化前景层", "_data": "是否虚化前景层；如果此项开启，则在游戏中事件层有东西（如宝石等）时虚化前景层。" + }, + "enableHDCanvas": { + "_leaf": true, + "_type": "checkbox", + "_docs": "高清UI", + "_data": "是否使用高清UI" } } } diff --git a/libs/control.js b/libs/control.js index b223250d..d92f9714 100644 --- a/libs/control.js +++ b/libs/control.js @@ -3004,16 +3004,18 @@ control.prototype._resize_canvas = function (obj) { core.dom.gameDraw.style.border = obj.border; // resize bigmap core.bigmap.canvas.forEach(function (cn) { - core.canvas[cn].canvas.style.width = core.canvas[cn].canvas.width * core.domStyle.scale + "px"; - core.canvas[cn].canvas.style.height = core.canvas[cn].canvas.height * core.domStyle.scale + "px"; + var ratio = core.canvas[cn].canvas.hasAttribute('isHD') ? core.domStyle.ratio : 1; + core.canvas[cn].canvas.style.width = core.canvas[cn].canvas.width / ratio * core.domStyle.scale + "px"; + core.canvas[cn].canvas.style.height = core.canvas[cn].canvas.height / ratio * core.domStyle.scale + "px"; }); // resize dynamic canvas for (var name in core.dymCanvas) { var ctx = core.dymCanvas[name], canvas = ctx.canvas; - canvas.style.width = canvas.width * core.domStyle.scale + "px"; - canvas.style.height = canvas.height * core.domStyle.scale + "px"; - canvas.style.left = parseFloat(canvas.getAttribute("_left")) * core.domStyle.scale + "px"; - canvas.style.top = parseFloat(canvas.getAttribute("_top")) * core.domStyle.scale + "px"; + var ratio = canvas.hasAttribute('isHD') ? core.domStyle.ratio : 1; + canvas.style.width = canvas.width / ratio * core.domStyle.scale + "px"; + canvas.style.height = canvas.height / ratio * core.domStyle.scale + "px"; + canvas.style.left = parseFloat(canvas.getAttribute("_left")) * core.domStyle.scale + "px"; + canvas.style.top = parseFloat(canvas.getAttribute("_top")) * core.domStyle.scale + "px"; } // resize next main.dom.next.style.width = main.dom.next.style.height = 5 * core.domStyle.scale + "px"; diff --git a/libs/core.js b/libs/core.js index 0f163532..9b8ab8c3 100644 --- a/libs/core.js +++ b/libs/core.js @@ -87,6 +87,8 @@ function core() { // 样式 this.domStyle = { scale: 1.0, + ratio: 1.0, + hdCanvas: ["damage", "ui", "data"], availableScale: [], isVertical: false, showStatusBar: true, @@ -249,7 +251,12 @@ core.prototype.init = function (coreData, callback) { // 初始化画布 for (var name in core.canvas) { - core.canvas[name].canvas.width = core.canvas[name].canvas.height = core.__PIXELS__; + if (core.domStyle.hdCanvas.indexOf(name) >= 0) + core.maps._setHDCanvasSize(core.canvas[name], core.__PIXELS__, core.__PIXELS__); + else { + core.canvas[name].canvas.width = core.__PIXELS__; + core.canvas[name].canvas.height = core.__PIXELS__; + } } core.loader._load(function () { @@ -325,9 +332,7 @@ core.prototype._init_sys_flags = function () { if (core.values.floorChangeTime == null) core.values.floorChangeTime = 500; if (main.mode != 'editor') { core.domStyle.scale = core.getLocalStorage('scale', 1); - if (core.domStyle.scale != 1) { - core.resize(); - } + if (core.flags.enableHDCanvas) core.domStyle.ratio = window.devicePixelRatio || 1; } } diff --git a/libs/maps.js b/libs/maps.js index 4880af5d..08122217 100644 --- a/libs/maps.js +++ b/libs/maps.js @@ -33,6 +33,14 @@ maps.prototype._resetFloorImages = function () { } } +maps.prototype._setHDCanvasSize = function (ctx, width, height) { + ctx.setTransform(1, 0, 0, 1, 0, 0); + if (width != null) ctx.canvas.width = width * core.domStyle.ratio; + if (height != null) ctx.canvas.height = height * core.domStyle.ratio; + ctx.scale(core.domStyle.ratio, core.domStyle.ratio); + ctx.canvas.setAttribute('isHD', 1); +} + // ------ 加载地图与地图的存档读档（压缩与解压缩） ------ // ////// 加载某个楼层（从剧本或存档中） ////// @@ -412,8 +420,12 @@ maps.prototype.resizeMap = function (floorId) { var height = core.bigmap.v2 ? core.__PIXELS__ + 64 : core.bigmap.height * 32; core.bigmap.canvas.forEach(function (cn) { - core.canvas[cn].canvas.setAttribute("width", width); - core.canvas[cn].canvas.setAttribute("height", height); + if (core.domStyle.hdCanvas.indexOf(cn) >= 0) + core.maps._setHDCanvasSize(core.canvas[cn], width, height); + else { + core.canvas[cn].canvas.width = width; + core.canvas[cn].canvas.height = height; + } core.canvas[cn].canvas.style.width = width * core.domStyle.scale + "px"; core.canvas[cn].canvas.style.height = height * core.domStyle.scale + "px"; core.canvas[cn].translate(core.bigmap.v2 ? 32 : 0, core.bigmap.v2 ? 32 : 0); diff --git a/libs/ui.js b/libs/ui.js index bbe39049..57085451 100644 --- a/libs/ui.js +++ b/libs/ui.js @@ -1072,14 +1072,20 @@ ui.prototype.drawTextContent = function (ctx, content, config) { config.offsetY = 0; config.line = 0; config.blocks = []; + config.isHD = ctx != null && ctx.canvas.hasAttribute('isHD'); // 创建一个新的临时画布 - var tempCtx = core.createCanvas('__temp__', 0, 0, ctx==null?1:ctx.canvas.width, ctx==null?1:ctx.canvas.height, -1); + var tempCtx = document.createElement('canvas').getContext('2d'); + if (config.isHD) { + core.maps._setHDCanvasSize(tempCtx, ctx.canvas.width, ctx.canvas.height); + } else { + tempCtx.canvas.width = ctx==null?1:ctx.canvas.width; + tempCtx.canvas.height = ctx==null?1:ctx.canvas.height; + } tempCtx.textBaseline = 'top'; tempCtx.font = this._buildFont(config.fontSize, config.bold, config.italic, config.font); tempCtx.fillStyle = config.color; config = this._drawTextContent_draw(ctx, tempCtx, content, config); - core.deleteCanvas('__temp__'); return config; } @@ -1106,7 +1112,8 @@ ui.prototype._drawTextContent_draw = function (ctx, tempCtx, content, config) { if (config.index >= config.blocks.length) return false; var block = config.blocks[config.index++]; if (block != null) { - core.drawImage(ctx, tempCtx.canvas, block.left, block.top, block.width, block.height, + var ratio = config.isHD ? core.domStyle.ratio : 1; + core.drawImage(ctx, tempCtx.canvas, block.left * ratio, block.top * ratio, block.width * ratio, block.height * ratio, config.left + block.left + block.marginLeft, config.top + block.top + block.marginTop, block.width, block.height); } @@ -3161,8 +3168,6 @@ ui.prototype.createCanvas = function (name, x, y, width, height, z) { var newCanvas = document.createElement("canvas"); newCanvas.id = name; newCanvas.style.display = 'block'; - newCanvas.width = width; - newCanvas.height = height; newCanvas.setAttribute("_left", x); newCanvas.setAttribute("_top", y); newCanvas.style.width = width * core.domStyle.scale + 'px'; @@ -3172,6 +3177,7 @@ ui.prototype.createCanvas = function (name, x, y, width, height, z) { newCanvas.style.zIndex = z; newCanvas.style.position = 'absolute'; core.dymCanvas[name] = newCanvas.getContext('2d'); + core.maps._setHDCanvasSize(core.dymCanvas[name], width, height); core.dom.gameDraw.appendChild(newCanvas); return core.dymCanvas[name]; } @@ -3196,11 +3202,11 @@ ui.prototype.resizeCanvas = function (name, width, height, styleOnly) { var ctx = core.getContextByName(name); if (!ctx) return null; if (width != null) { - if (!styleOnly) ctx.canvas.width = width; + if (!styleOnly) core.maps._setHDCanvasSize(ctx, width, null); ctx.canvas.style.width = width * core.domStyle.scale + 'px'; } if (height != null) { - if (!styleOnly) ctx.canvas.height = height; + if (!styleOnly) core.maps._setHDCanvasSize(ctx, null, height); ctx.canvas.style.height = height * core.domStyle.scale + 'px'; } return ctx; diff --git a/mota-js10月和273issue.txt b/mota-js10月和273issue.txt index 59bec129..a229e0ea 100644 --- a/mota-js10月和273issue.txt +++ b/mota-js10月和273issue.txt @@ -45,7 +45,7 @@ N：可能影响接档等，下一个版本再考虑 （√）0.（1008）加入一个flag来控制当前是否允许存档，因为天气色调bgm进存档的情况下会屏蔽楼层切换，不进存档的话玩家原地SL又不保留。 （√）0.1. 录像播放中加一个百分比（二次录制长度/原录像长度）显示， （x）0.2. 并且允许在已播放的任意节点之间快退快进。 -（?）1. 希望尝试修复2.6.x的高清UI、 +（√）1. 希望尝试修复2.6.x的高清UI、 （x）1.2 自动元件通行性（勇士和阻击怪可在同种图块内部自由通行，但进出另一种图块则必须通过桥梁）、 （x）1.3 仿rm光照和负色调（含true-light.js）等插件并加入样板， （x）1.4. 2.7.2发布以来插件库有了一些新插件，也希望加入（该修的bug要修，比如什么==NaN）。 @@ -94,7 +94,7 @@ N：可能影响接档等，下一个版本再考虑 1.（来自github）（编辑器和运行时的）缩略图任取一片正方形网格区绘制并配合wsad键滚动（浏览），而不是只能绘制全景并因为长宽不相等而留下黑边。此需求对长卷式横/纵版大地图（如13*128、128*13）很有意义。 2.（来自github）编辑器的地图区能任意放大，而不是写死的416*416或480*480，否则以120*120地图在15*15样板为例，每格只占4*4px，难以绘制和查看。 3.（来自github）对话框的淡入淡出：主要用于不可被ctrl跳过的“自动剧情文本、确认框、选择项、UI绘制”和系统UI（如esc菜单、手册、道具栏、装备栏、楼传页面、SL页面）即可。 -4.（来自github）高清UI：运行时横屏放大到2x后，UI尤其是文字的逻辑分辨率也应当相应地扩大为834*834，以免模糊。相应的windowSkin图片规格也可以一起扩大。 +（√）4.（来自github）高清UI：运行时横屏放大到2x后，UI尤其是文字的逻辑分辨率也应当相应地扩大为834*834，以免模糊。相应的windowSkin图片规格也可以一起扩大。 5.（长方形样板）建议样板尽早将core.__SIZE__等常量分为横竖两个量，并推出没有目前这种独立状态栏（不管dom还是自绘）的版本（不一定牺牲竖屏，但同时支持纵横两个方向的大地图可能需要额外的适配），以实现@幻灵 等人提出的更好的演出效果，如在地图上任意位置使用事件流完全自绘状态栏的同时还能享受天气色调动画wait事件。 6.（楼层属性、图块属性编辑和查看的增强）cannotIn/Out/Move、canPass/Break、hideInXxx的设定和显示建议提供像rm一样集中的UI，而不是要一个一个图块/点去看。同理，notBomb建议进special，同时special中没有额外value的属性本质上是个开关，也应当像上述一样提供集中的UI。楼层属性的五个勾选框和ratio等也同理，只不过没法像图块一样绘制出来而只能写个floorId. 这样我们就可以方便地查看“哪些怪物有先攻、魔攻、坚固、夹击、无敌、免炸，哪些楼层是地下层、不可浏览等”，并进行批量的修改。（怪物已经有了一定程度上的替代方案，即转换为csv） 7.（小工具）建议再次增强便捷ps工具，扩大窗口大小（目前只能显示5列，对tileset、多帧autotile很不友好）、实现任意单位宽高、框选一片网格批量复制粘贴（单个网格的复制粘贴建议直接简化成拖动）、任意纯色底转透明（具体色号可让作者输入），并增加“删除一列”操作（很多作者误点“增加一列”，但事实上增加列的功能一般只对新建的图片有意义），同时把复制粘贴的快捷键明确提示为C和V. diff --git a/project/data.js b/project/data.js index fae232d4..ba7b0e3b 100644 --- a/project/data.js +++ b/project/data.js @@ -482,6 +482,7 @@ var data_a1e2fb4a_e986_4524_b0da_9b7ba7c0874d = "enableMoveDirectly": true, "enableRouteFolding": true, "disableShopOnDamage": false, - "blurFg": false + "blurFg": false, + "enableHDCanvas": true } } \ No newline at end of file diff --git a/project/plugins.js b/project/plugins.js index 65c27029..f47ace85 100644 --- a/project/plugins.js +++ b/project/plugins.js @@ -339,13 +339,18 @@ var plugins_bb40132b_638b_4a9f_b028_d3fe47acc8d1 = var canvas = document.createElement('canvas'); canvas.id = name; canvas.className = 'gameCanvas'; - canvas.width = canvas.height = core.__PIXELS__; // 编辑器模式下设置zIndex会导致加入的图层覆盖优先级过高 if (main.mode != "editor") canvas.style.zIndex = zIndex || 0; // 将图层插入进游戏内容 document.getElementById('gameDraw').appendChild(canvas); var ctx = canvas.getContext('2d'); core.canvas[name] = ctx; + if (core.domStyle.hdCanvas.indexOf('name') >= 0) + core.maps._setHDCanvasSize(ctx, core.__PIXELS__, core.__PIXELS__); + else { + canvas.width = core.__PIXELS__; + canvas.height = core.__PIXELS__; + } return canvas; }