diff --git a/README.md b/README.md index 872a268e..2415a409 100644 --- a/README.md +++ b/README.md @@ -9,6 +9,8 @@ HTML5 canvas制作的魔塔样板,支持全平台游戏! * [Demo / 样板效果](https://ckcz123.com/games/template/) * [Docs / 使用文档说明](https://ckcz123.github.io/mota-js/) * [Video / 视频教程](https://www.bilibili.com/video/av32781473/) +* [Video / 新版视频教程](https://www.bilibili.com/video/BV1SB4y1p7bg?share_source=copy_web) +* [Video / 脚本教程](https://www.bilibili.com/video/BV1uL411J7yZ?share_source=copy_web) ![样板](./docs/sample0.png) @@ -65,6 +67,34 @@ HTML5 canvas制作的魔塔样板,支持全平台游戏! ## 更新说明 +### 2022.7.10 HTML5魔塔样板V2.9.1 + +* [x] 修复更新状态栏延迟到下一动画帧引发的一系列bug,修改为增加一个是否立即更新的参数 +* [x] 修复resize导致canvas被清空的bug +* [x] 修复怪物属性栏光环叠加的说明bug +* [x] 修复自2.7.3增加薄墙以来导致的terrains模糊 +* [x] 修复手机端绘制缩略图的模糊问题 +* [x] 更新部分文档 + +### 2022.2.2 HTML5魔塔样板V2.9 + +* [x] 修复浏览地图使用楼传可无视楼梯边的bug +* [x] 修复utils.js里面的语法bug +* [x] 修复设置前景层背景层的图块后立刻刷新地图导致图块重新出现的bug +* [x] 修复商店长按与keyUp冲突的bug +* [x] 修复图片缩放以后缩放浏览器导致图片大小还原的bug +* [x] 修复缩略图不高清的bug +* [x] 修复大怪物的boxAnimate的bug +* [x] 优化updateStatusBar的性能 +* [x] \i支持enemy48和npc48 +* [x] 启动服务加入魔塔小课堂 +* [x] 分离怪物属性,将value分离成zone laser repulse等 +* [x] 复写可以新增参数 +* [x] 杀掉main.log +* [x] 完善runtime.d.ts,建议使用vscode进行编辑脚本 +* [x] 自动缩放最大化 +* [x] 缩放最高支持2.5倍缩放 + ### 2021.9.1 HTML5魔塔样板V2.8.2 * [x] 在游戏中,可以在大地图长按后拖动预览。(超大地图福音!) diff --git a/_docs/index.md b/_docs/index.md index 9899d8ec..8412bf8c 100644 --- a/_docs/index.md +++ b/_docs/index.md @@ -17,7 +17,8 @@ ckcz123)特意制作了这样一部HTML5魔塔样板。 继续查看文档的详细介绍,让你学会如何使用这一个样板来制作属于自己的HTML5魔塔,或者……任何非即时的网格地图游戏。 -本说明文档配有较为过时的B站视频教程,可供参考:[https://www.bilibili.com/video/av32781473/](https://www.bilibili.com/video/av32781473/)。 +* [新版视频教程](https://www.bilibili.com/video/BV1SB4y1p7bg?share_source=copy_web) +* [脚本教程](https://www.bilibili.com/video/BV1uL411J7yZ?share_source=copy_web) ========================================================================================== diff --git a/_docs/script.md b/_docs/script.md index e6333c5f..27af22b4 100644 --- a/_docs/script.md +++ b/_docs/script.md @@ -4,7 +4,7 @@ 在V2.6版本中,基本对整个项目代码进行了重写,更加方便造塔者的使用。 -可配合基础js教学视频 https://www.bilibili.com/video/BV1uL411J7yZ/ 使用。 +* [脚本教程视频](https://www.bilibili.com/video/BV1uL411J7yZ?share_source=copy_web) ## 控制台的使用 diff --git a/_docs/start.md b/_docs/start.md index 2cf2bf6c..fb21b017 100644 --- a/_docs/start.md +++ b/_docs/start.md @@ -2,6 +2,9 @@ ?> 在这一节中,将详细介绍做一部塔的流程。现在,让我们来做一部单层塔! +* [新版视频教程](https://www.bilibili.com/video/BV1SB4y1p7bg?share_source=copy_web) +* [脚本教程](https://www.bilibili.com/video/BV1uL411J7yZ?share_source=copy_web) + ## 前置需求 你需要满足如下条件才能进行制作:[样板下载地址](https://github.com/ckcz123/mota-js/releases)。 1. 操作系统: diff --git a/_server/CodeMirror/defs.js b/_server/CodeMirror/defs.js index 57b421ca..1c16b253 100644 --- a/_server/CodeMirror/defs.js +++ b/_server/CodeMirror/defs.js @@ -3393,7 +3393,7 @@ var terndefs_f6783a0a_522d_417e_8407_94c67b692e50 = [ "!doc": "负责一切UI界面的绘制。主要包括三个部分:
- 设置某个画布的属性与在某个画布上绘制的相关API
- 具体的某个UI界面的绘制
- 动态创建画布相关的API", "resizeCanvas": { "!doc": "重新设置一个自定义画布的大小", - "!type": "fn(name: string, x: number, y: number)" + "!type": "fn(name: string, x?: number, y?: number, styleOnly?: bool, isTempCanvas?: bool)" }, "deleteCanvas": { "!doc": "删除一个自定义画布
name: 画布名,也可以传入一个函数对所有画布进行筛选", diff --git a/libs/control.js b/libs/control.js index 3c385ee1..0bbed9c3 100644 --- a/libs/control.js +++ b/libs/control.js @@ -3284,7 +3284,7 @@ control.prototype.resize = function () { else { // 竖屏 core.domStyle.isVertical = true; - core.domStyle.scale = Math.min(1, (clientWidth - 2 * BORDER) / CANVAS_WIDTH); + core.domStyle.scale = Math.min((clientWidth - 2 * BORDER) / CANVAS_WIDTH); core.domStyle.availableScale = []; extendToolbar = false; } diff --git a/libs/maps.js b/libs/maps.js index dab3ae7d..bb461c32 100644 --- a/libs/maps.js +++ b/libs/maps.js @@ -38,10 +38,11 @@ maps.prototype._resetFloorImages = function () { } } -maps.prototype._setHDCanvasSize = function (ctx, width, height) { +maps.prototype._setHDCanvasSize = function (ctx, width, height, isTempCanvas) { ctx.setTransform(1, 0, 0, 1, 0, 0); var ratio = core.domStyle.ratio; if (ctx === core.bigmap.tempCanvas) ratio = core.domStyle.scale; + if (isTempCanvas) ratio = core.domStyle.ratio; if (width != null) ctx.canvas.width = width * ratio; if (height != null) ctx.canvas.height = height * ratio; ctx.scale(ratio, ratio); @@ -1736,7 +1737,7 @@ maps.prototype._drawThumbnail_drawTempCanvas = function (floorId, blocks, option if (options.noHD) { tempCanvas.canvas.width = width * 32 * scale; tempCanvas.canvas.height = height * 32 * scale; - } else core.resizeCanvas(tempCanvas, width * 32 * scale, height * 32 * scale); + } else core.resizeCanvas(tempCanvas, width * 32 * scale, height * 32 * scale, false, true); tempCanvas.scale(scale, scale); } else if (width * height > core.bigmap.threshold) { options.v2 = true; @@ -1749,13 +1750,13 @@ maps.prototype._drawThumbnail_drawTempCanvas = function (floorId, blocks, option if (centerY == null) centerY = Math.floor(height / 2); var offsetX = core.clamp(centerX - core.__HALF_SIZE__, 0, width - core.__SIZE__), offsetY = core.clamp(centerY - core.__HALF_SIZE__, 0, height - core.__SIZE__); - tempCanvas.translate(-32 * offsetX, -32 * offsetY); + tempCanvas.translate(-32 * offsetX, -32 * offsetY, false, true); } else { options.v2 = false; if (options.noHD) { tempCanvas.canvas.width = width * 32; tempCanvas.canvas.height = height * 32; - } else core.resizeCanvas(tempCanvas, width * 32, height * 32); + } else core.resizeCanvas(tempCanvas, width * 32, height * 32, false, true); } options.ctx = tempCanvas; diff --git a/libs/ui.js b/libs/ui.js index de41794f..8a7622f8 100644 --- a/libs/ui.js +++ b/libs/ui.js @@ -3454,15 +3454,15 @@ ui.prototype.rotateCanvas = function (name, angle, centerX, centerY) { } ////// canvas重置 ////// -ui.prototype.resizeCanvas = function (name, width, height, styleOnly) { +ui.prototype.resizeCanvas = function (name, width, height, styleOnly, isTempCanvas) { var ctx = core.getContextByName(name); if (!ctx) return null; if (width != null) { - if (!styleOnly) core.maps._setHDCanvasSize(ctx, width, null); + if (!styleOnly) core.maps._setHDCanvasSize(ctx, width, null, isTempCanvas); ctx.canvas.style.width = width * core.domStyle.scale + 'px'; } if (height != null) { - if (!styleOnly) core.maps._setHDCanvasSize(ctx, null, height); + if (!styleOnly) core.maps._setHDCanvasSize(ctx, null, height, isTempCanvas); ctx.canvas.style.height = height * core.domStyle.scale + 'px'; } return ctx; diff --git a/project/materials/terrains.png b/project/materials/terrains.png index b98485c6..6d96b933 100644 Binary files a/project/materials/terrains.png and b/project/materials/terrains.png differ diff --git a/runtime.d.ts b/runtime.d.ts index dcb22c10..2b768e1a 100644 --- a/runtime.d.ts +++ b/runtime.d.ts @@ -2238,8 +2238,12 @@ declare class ui { /** 重新定位一个自定义画布 */ relocateCanvas(name: string, x: number, y: number, useDelta: boolean): void - /** 重新设置一个自定义画布的大小 */ - resizeCanvas(name: string, x: number, y: number): void + /** + * 重新设置一个自定义画布的大小 + * @param styleOnly 是否只修改style,而不修改元素上的长宽,如果是true,会出现模糊现象 + * @param isTempCanvas 是否是临时画布,如果填true,会将临时画布修改为高清画布 + */ + resizeCanvas(name: string, x?: number, y?: number, styleOnly?: boolean, isTempCanvas?: boolean): void /** 设置一个自定义画布的旋转角度 */ rotateCanvas(name: string, angle: number, centerX?: number, centerY?: number): void