From ac064428443dfd48dbdb78f685a559f4ee7d4ca1 Mon Sep 17 00:00:00 2001 From: echo Date: Sun, 31 Dec 2017 18:24:58 +0800 Subject: [PATCH 1/2] update docs --- docs/api.md | 2 ++ docs/element.md | 5 +++-- docs/event.md | 2 ++ docs/index.html | 5 ++++- docs/index.md | 4 +++- docs/personalization.md | 2 ++ docs/start.md | 6 ++++-- 7 files changed, 20 insertions(+), 6 deletions(-) diff --git a/docs/api.md b/docs/api.md index 51973cda..a315eb1e 100644 --- a/docs/api.md +++ b/docs/api.md @@ -1,5 +1,7 @@ # 附录:API列表 +?> 上次更新时间：* {docsify-updated} * + 所有系统支持的API都列在了这里。所有可能被用到的API都在前面用\*标记。 可以在chrome浏览器的控制台中（`ctrl+shift+I`，找到Console）中直接进行调用，以查看效果。 diff --git a/docs/element.md b/docs/element.md index 668c0c2d..f515cc10 100644 --- a/docs/element.md +++ b/docs/element.md @@ -1,5 +1,7 @@ # 元件说明 +?> 上次更新时间：* {docsify-updated} * + 在本章中，将对样板里的各个元件进行说明。各个元件主要包括道具、门、怪物、楼梯等等。 请打开样板0层 `sample0.js` 进行参照对比。 @@ -97,7 +99,7 @@ enemys.prototype.getSpecialText = function (enemyId) { 如有额外需求，可参见[自定义怪物属性](personalization#自定义自定义怪物属性)，里面讲了如何设置一个新的怪物属性。 -### 路障、楼梯、传送门 +## 路障、楼梯、传送门 血网的伤害数值、中毒后每步伤害数值、衰弱时暂时攻防下降的数值，都在 `data.js` 的values内定义。 @@ -134,4 +136,3 @@ floorId指定的是目标楼层的唯一标识符（ID）。 ========================================================================================== [继续阅读下一章：事件](event) - diff --git a/docs/event.md b/docs/event.md index f9cab896..e85983cf 100644 --- a/docs/event.md +++ b/docs/event.md @@ -1,5 +1,7 @@ # 事件 +?> 上次更新时间：* {docsify-updated} * + 本章内将对样板所支持的事件进行介绍。 ## 事件的机制 diff --git a/docs/index.html b/docs/index.html index e445274a..bc546416 100644 --- a/docs/index.html +++ b/docs/index.html @@ -19,7 +19,7 @@ repo: 'https://github.com/ckcz123/mota-js', // basepath: '../docs/', - // Search Support + // Search Support // search: { // maxAge: 43200000, // 过期时间，单位毫秒，默认一天 // paths: 'auto', @@ -37,6 +37,9 @@ loadSidebar: '_sidebar.md', subMaxLevel: 2, autoHeader: true, + auto2top: true, + mergeNavbar: true, + formatUpdated: '{YYYY}-{MM}-{DD} {HH}:{mm}:{ss}', } //离线模式 if (typeof navigator.serviceWorker !== 'undefined') { diff --git a/docs/index.md b/docs/index.md index ad17349c..9f0059ef 100644 --- a/docs/index.md +++ b/docs/index.md @@ -1,5 +1,7 @@ # HTML5 魔塔样板说明文档 +?> 上次更新时间：* {docsify-updated} * + 众所周知，魔塔的趋势是向移动端发展，贴吧中也常常能见到“求手机魔塔”的帖子。然而现有的工具中，NekoRPG有着比较大的局限性，游戏感较差，更是完全没法在iOS上运行。而一些APP的魔塔虽然可用，但是必须要下载安装，对于Android和iOS还必须开发不同的版本，非常麻烦。 但是，现在我们有了HTML5。 HTML5的画布（canvas）以及它被Android/iOS内置浏览器所支持的特性，可以让我们做出真正意义上的全平台覆盖的魔塔。 @@ -11,7 +13,7 @@ 继续查看文档的详细介绍，让你学会如何使用这一个样板来制作属于自己的HTML5魔塔。 -视频教程地址：http://www.bilibili.com/video/av17608025/ ，配合本教程观看效果更佳~ +视频教程地址：[http://www.bilibili.com/video/av17608025/](http://www.bilibili.com/video/av17608025/) ，配合本教程观看效果更佳~ ========================================================================================== diff --git a/docs/personalization.md b/docs/personalization.md index 08328a78..72abc06c 100644 --- a/docs/personalization.md +++ b/docs/personalization.md @@ -1,5 +1,7 @@ # 个性化 +?> 上次更新时间：* {docsify-updated} * + 有时候只靠样板本身可能是不够的。我们需要一些个性化、自定义的素材，道具效果，怪物属性，等等。 ## 自定义素材 diff --git a/docs/start.md b/docs/start.md index 127fd819..5bcf3cfb 100644 --- a/docs/start.md +++ b/docs/start.md @@ -1,5 +1,7 @@ # 快速上手 +?> 上次更新时间：* {docsify-updated} * + 在这一节中，将详细介绍做一部塔的流程。现在，让我们来做一部单层塔！ ## 前置需求 @@ -8,8 +10,8 @@ - Windows 8以上操作系统；Windows 7需要安装.Net Framework 4.0。（能打开同目录下的“启动服务.exe”即可） - 任一款现代浏览器。强烈推荐Chrome。 -- 一个很好的文本编辑器。推荐带有高亮染色、错误提示等效果。例如：WebStorm，VSCode，或者至少也要Sublime Text。 -（[VSCode下载地址](https://code.visualstudio.com/)，群里的群文件中也有，强烈推荐之。） +- 一个很好的文本编辑器。推荐带有高亮染色、错误提示等效果。例如：WebStorm，VSCode，或者至少也要Sublime Text。 + - （[VSCode下载地址](https://code.visualstudio.com/)，群里的群文件中也有，强烈推荐之。） 只要满足了上述条件，你就可以开始做自己的塔啦！ From 92a2c8cef1e1b17025affe7bc53ab4663bc08919 Mon Sep 17 00:00:00 2001 From: echo Date: Sun, 31 Dec 2017 22:00:26 +0800 Subject: [PATCH 2/2] update autotile --- libs/core.js | 120 ++++++++++++++++++++++++++++++++++++++++++++++++++- libs/maps.js | 6 +++ libs/ui.js | 6 +-- 3 files changed, 127 insertions(+), 5 deletions(-) diff --git a/libs/core.js b/libs/core.js index e572fe5b..e863fb15 100644 --- a/libs/core.js +++ b/libs/core.js @@ -1882,6 +1882,124 @@ core.prototype.setFillStyle = function (map, style) { * @param callback 绘制完毕后的回调函数 */ core.prototype.drawMap = function (mapName, callback) { + var mapData = core.status.maps[mapName]; + var mapBlocks = mapData.blocks; + core.status.floorId = mapName; + core.status.thisMap = mapData; + core.clearMap('all'); + core.removeGlobalAnimate(null, null, true); + var groundId = core.floors[mapName].defaultGround || "ground"; + var blockIcon = core.material.icons.terrains[groundId]; + var blockImage = core.material.images.terrains; + for (var x = 0; x < 13; x++) { + for (var y = 0; y < 13; y++) { + core.canvas.bg.drawImage(blockImage, 0, blockIcon * 32, 32, 32, x * 32, y * 32, 32, 32); + } + } + var mapArr = core.maps.getMapArr(mapName); + for (var b = 0; b < mapBlocks.length; b++) { + // 事件启用 + var block = mapBlocks[b]; + if (core.isset(block.event) && !(core.isset(block.enable) && !block.enable)) { + if (block.event.cls == 'autotile') { + core.drawAutotile(core.canvas.event, mapArr, block, 32); + continue; + } + else { + blockIcon = core.material.icons[block.event.cls][block.event.id]; + blockImage = core.material.images[block.event.cls]; + core.canvas.event.drawImage(core.material.images[block.event.cls], 0, blockIcon * 32, 32, 32, block.x * 32, block.y * 32, 32, 32); + core.addGlobalAnimate(block.event.animate, block.x * 32, block.y * 32, blockIcon, blockImage); + } + } + } + core.setGlobalAnimate(core.values.animateSpeed); + if (core.isset(callback)) + callback(); +} +core.prototype.drawAutotile = function(ctx, mapArr, block, size, left, top){ + var indexArrs = [ //16种组合的图块索引数组; // 将autotile分割成48块16*16的小块; 数组索引即对应各个小块 + // +----+----+----+----+----+----+ + [10, 9, 4, 3 ], //0 bin:0000 | 1 | 2 | 3 | 4 | 5 | 6 | + [10, 9, 4, 13], //1 bin:0001 +----+----+----+----+----+----+ + [10, 9, 18, 3 ], //2 bin:0010 | 7 | 8 | 9 | 10 | 11 | 12 | + [10, 9, 16, 15], //3 bin:0011 +----+----+----+----+----+----+ + [10, 43, 4, 3 ], //4 bin:0100 | 13 | 14 | 15 | 16 | 17 | 18 | + [10, 31, 4, 25], //5 bin:0101 +----+----+----+----+----+----+ + [10, 7, 2, 3 ], //6 bin:0110 | 19 | 20 | 21 | 22 | 23 | 24 | + [10, 31, 16, 5 ], //7 bin:0111 +----+----+----+----+----+----+ + [48, 9, 4, 3 ], //8 bin:1000 | 25 | 26 | 27 | 28 | 29 | 30 | + [ 8, 9, 4, 1 ], //9 bin:1001 +----+----+----+----+----+----+ + [36, 9, 30, 3 ], //10 bin:1010 | 31 | 32 | 33 | 34 | 35 | 36 | + [36, 9, 6, 15], //11 bin:1011 +----+----+----+----+----+----+ + [46, 45, 4, 3 ], //12 bin:1100 | 37 | 38 | 39 | 40 | 41 | 42 | + [46, 11, 4, 25], //13 bin:1101 +----+----+----+----+----+----+ + [12, 45, 30, 3 ], //14 bin:1110 | 43 | 44 | 45 | 46 | 47 | 48 | + [34, 33, 28, 27] //15 bin:1111 +----+----+----+----+----+----+ + ]; + + var drawBlockByIndex = function(ctx, dx, dy, autotileImg, index, size){ //index为autotile的图块索引1-48 + var sx = 16*((index-1)%6), sy = 16*(~~((index-1)/6)); + ctx.drawImage(autotileImg, sx, sy, 16, 16, dx, dy, size/2, size/2); + } + var getAutotileAroundId = function(currId, x, y){ + if(x<0 || y<0 || x>12 || y>12) return 1; + else return mapArr[y][x]==currId ? 1:0; + } + var checkAround = function(x, y){ // 得到周围四个32*32块（周围每块都包含当前块的1/4，不清楚的话画下图你就明白）的数组索引 + var currId = mapArr[y][x]; + var pointBlock = []; + for(var i=0; i<4; i++){ + var bsum = 0; + var offsetx = i%2, offsety = ~~(i/2); + for(var j=0; j<4; j++){ + var mx = j%2, my = ~~(j/2); + var b = getAutotileAroundId(currId, x+offsetx+mx-1, y+offsety+my-1); + bsum += b*(Math.pow(2, 3-j)); + } + pointBlock.push(bsum); + } + return pointBlock; + } + var getAutotileIndexs = function(x, y){ + var indexArr = []; + var pointBlocks = checkAround(x, y); + for(var i=0; i<4; i++){ + var arr = indexArrs[pointBlocks[i]] + indexArr.push(arr[3-i]); + } + return indexArr; + } + // 开始绘制autotile + var top = core.isset(top)? top : 0, left = core.isset(left) ? left : 0; + var x = block.x, y = block.y; + var pieceIndexs = getAutotileIndexs(x, y); + ctx.clearRect(x*size+left, y*size+top, size, size); + + //修正四个边角的固定搭配 + if(pieceIndexs[0] == 13){ + if(pieceIndexs[1] == 16) pieceIndexs[1] = 14; + if(pieceIndexs[2] == 31) pieceIndexs[2] = 19; + } + if(pieceIndexs[1] == 18){ + if(pieceIndexs[0] == 15) pieceIndexs[0] = 17; + if(pieceIndexs[3] == 36) pieceIndexs[3] = 24; + } + if(pieceIndexs[2] == 43){ + if(pieceIndexs[0] == 25) pieceIndexs[0] = 37; + if(pieceIndexs[3] == 46) pieceIndexs[3] = 44; + } + if(pieceIndexs[3] == 48){ + if(pieceIndexs[1] == 30) pieceIndexs[1] = 42; + if(pieceIndexs[2] == 45) pieceIndexs[2] = 47; + } + for(var i=0; i<4; i++){ + var index = pieceIndexs[i]; + var dx = x*size + size/2*(i%2), dy = y*size + size/2*(~~(i/2)); + drawBlockByIndex(ctx, dx+left, dy+top, core.material.images['autotile'][block.event.id], index, size); + } +} +core.prototype.drawMap_old = function (mapName, callback) { var mapData = core.status.maps[mapName]; var mapBlocks = mapData.blocks; core.status.floorId = mapName; @@ -1921,7 +2039,7 @@ core.prototype.drawMap = function (mapName, callback) { callback(); } -core.prototype.drawAutotile = function (floorId, canvas, autotileMaps, left, top, size, autotileId) { +core.prototype.drawAutotile_old = function (floorId, canvas, autotileMaps, left, top, size, autotileId) { if (!core.isset(autotileId)) { var autotileIds = {}; diff --git a/libs/maps.js b/libs/maps.js index a6ee2112..bc1360be 100644 --- a/libs/maps.js +++ b/libs/maps.js @@ -343,5 +343,11 @@ maps.prototype.load = function (data, floorId) { } return this.loadFloor(floorId, data[floorId]); } +maps.prototype.getMapArr = function (floorId){ + var floor = core.floors[floorId]; + var map=floor.map; + + return map; +} main.instance.maps = new maps(); \ No newline at end of file diff --git a/libs/ui.js b/libs/ui.js index f9480f9c..412d5f71 100644 --- a/libs/ui.js +++ b/libs/ui.js @@ -1114,13 +1114,12 @@ ui.prototype.drawThumbnail = function(floorId, canvas, blocks, x, y, size, heroL core.canvas[canvas].drawImage(blockImage, 0, blockIcon * 32, 32, 32, x + i * persize, y + j * persize, persize, persize); } } - var autotileMaps = []; + var mapArr = core.maps.getMapArr(floorId); for (var b in blocks) { var block = blocks[b]; if (core.isset(block.event) && !(core.isset(block.enable) && !block.enable)) { if (block.event.cls == 'autotile') { - // core.drawAutotile(); - autotileMaps[13*block.x + block.y] = block.event.id; + core.drawAutotile(core.canvas.ui, mapArr, block, persize, x, y); continue; } else { @@ -1130,7 +1129,6 @@ ui.prototype.drawThumbnail = function(floorId, canvas, blocks, x, y, size, heroL } } } - core.drawAutotile(floorId, 'ui', autotileMaps, x, y, persize); if (core.isset(heroLoc)) { var heroIcon = core.material.icons.hero[heroLoc.direction];