From 99463c6e5ee96ea3c5475c77c714de1b90694fd2 Mon Sep 17 00:00:00 2001 From: oc Date: Mon, 5 Feb 2018 22:16:55 +0800 Subject: [PATCH] Support Show Image --- docs/event.md | 20 ++++++++++++++++++++ docs/personalization.md | 14 ++++++++++---- libs/core.js | 23 +++++++++++++++++++++-- libs/events.js | 7 +++++++ libs/floors/MT0.js | 2 +- libs/floors/sample0.js | 2 +- libs/floors/sample1.js | 2 +- libs/floors/sample2.js | 2 +- libs/ui.js | 22 ++++++++++++++++++++++ 更新说明.txt | 4 +++- 10 files changed, 87 insertions(+), 11 deletions(-) diff --git a/docs/event.md b/docs/event.md index a28dd7ce..8738794c 100644 --- a/docs/event.md +++ b/docs/event.md @@ -530,6 +530,26 @@ time为可选的，指定的话将作为楼层切换动画的时间。 使用disableShop可以永久禁用全局商店直到再次被openShop打开为止。有关全局商店的说明可参见[全局商店](#全局商店)。 +### showImage：显示图片 + +我们可以使用 `{"type": "showImage"}` 来显示一张图片。 + +``` js +"x,y": [ // 实际执行的事件列表 + {"type": "showImage", "name": "bg.png", "x": 231, "y": 297}, // 在(231,297)显示bg.png + {"type": "showImage", "name": "1.png", "x": 109, "y": 167}, // 在(109,167)显示1.png + {"type": "showImage"} // 如果不指定name则清除所有图片。 +] +``` + +name为图片名。**请确保图片在main.js中的this.pngs中被定义过。** + +x和y为图片左上角坐标，以像素为单位进行计算。 + +如果不指定name则清除所有显示的图片。 + +调用show/hide/move/animate等几个事件同样会清除所有显示的图片。 + ### setFg: 更改画面色调 我们可以使用 `{"type": "setFg"}` 来更改画面色调。 diff --git a/docs/personalization.md b/docs/personalization.md index 9b4eb0ca..840c1b5c 100644 --- a/docs/personalization.md +++ b/docs/personalization.md @@ -27,7 +27,7 @@ 由于HTML5功能（素材）有限，导致了对很多比较复杂的素材（比如房子内）等无法有着较好的绘图方式。 -为了解决这个问题，我们允许用户自己放置一张图片作为某一层的背景素材。 +为了解决这个问题，我们允许用户自己放置一张或多张图片作为某一层的背景素材。 要启用这个功能，我们首先需要在`main.js`中将可能的图片进行加载。 @@ -38,16 +38,22 @@ this.pngs = [ // 在此存放所有可能的背景图片；背景图片最好是 ]; ``` -!> 背景素材只支持png格式，且会被强制缩放到416*416。 +!> 背景素材只支持png格式。 !> 请使用网上的一些[在线图片压缩工具](http://www.asqql.com/gifzip/)对png图片进行压缩，以节省流量。一张500KB的png图片可以被压缩到20-30KB，显示效果不会有太大差异。 -之后，我们可以在每层剧本的`"png": "xxx"`里来定义该层的默认背景图片素材。 +之后，我们可以在每层剧本的`"png"`里来定义该层的默认背景图片素材。 ``` js -"png": "bg.png", // 背景图；你可以选择一张png图片来作为背景素材。 +"png": [[x,y,"bg.png"]], // 背景图；你可以选择一张或多张png图片来作为背景素材。 +"png": [], // 无任何背景图 +"png": [[1,1,"house.png"], [6,7,"house2.png"]] // 在(1,1)放一个house.png，且(6,7)放house2.png ``` +png为一个数组，代表当前层所有作为背景素材的图片信息。 + +每一项为一个三元组，分别为该背景素材的x，y和图片名。其中x和y分别为横纵坐标，在0-12之间；图片名则必须在上面的this.pngs中定义过。 + 你的图片背景素材将会覆盖原来本身的背景层。 **如果你需要让某些点不可通行（比如你建了个房子，墙壁和家具等位置不让通行），则需在`events`中指定`{"noPass": false}`，参见[自定义事件](event#自定义事件)的写法。 diff --git a/libs/core.js b/libs/core.js index e3e16ab6..eafa6e44 100644 --- a/libs/core.js +++ b/libs/core.js @@ -2566,9 +2566,28 @@ core.prototype.drawMap = function (mapName, callback) { // 如果存在png if (core.isset(core.floors[mapName].png)) { + + var x=0, y=0, size=416; + var png = core.floors[mapName].png; - if (core.isset(core.material.images.pngs[png])) { - core.canvas.bg.drawImage(core.material.images.pngs[png], 0, 0, 416, 416); + + var ratio = size/416; + + if (typeof png == 'string') { + if (core.isset(core.material.images.pngs[png])) { + core.canvas.bg.drawImage(core.material.images.pngs[png], x, y, size, size); + } + } + else if (png instanceof Array) { + png.forEach(function (t) { + if (t.length!=3) return; + var dx=parseInt(t[0]), dy=parseInt(t[1]), p=t[2]; + if (core.isset(dx) && core.isset(dy) && core.isset(core.material.images.pngs[p])) { + dx*=32; dy*=32; + var image = core.material.images.pngs[p]; + core.canvas.bg.drawImage(image, x+dx*ratio, y+dy*ratio, Math.min(size-dx*ratio, ratio*image.width), Math.min(size-dy*ratio, ratio*image.height)); + } + }) } } diff --git a/libs/events.js b/libs/events.js index 874d612b..f5575965 100644 --- a/libs/events.js +++ b/libs/events.js @@ -366,6 +366,13 @@ events.prototype.doAction = function() { core.drawHero(core.getHeroLoc('direction'), core.getHeroLoc('x'), core.getHeroLoc('y'), 'stop'); this.doAction(); break; + case "showImage": // 显示图片 + if (core.isset(data.name) && core.isset(data.x) && core.isset(data.y) && core.isset(core.material.images.pngs[data.name])) { + core.canvas.animate.drawImage(core.material.images.pngs[data.name], data.x, data.y); + } + else core.clearMap('animate', 0, 0, 416, 416); + this.doAction(); + break; case "setFg": // 颜色渐变 core.setFg(data.color, data.time, function() { core.events.doAction(); diff --git a/libs/floors/MT0.js b/libs/floors/MT0.js index 7ad9e0f7..a66fff00 100644 --- a/libs/floors/MT0.js +++ b/libs/floors/MT0.js @@ -8,7 +8,7 @@ main.floors.MT0 = { "canFlyTo": true, // 该楼能否被楼传器飞到（不能的话在该楼也不允许使用楼传器） "canUseQuickShop": true, // 该层是否允许使用快捷商店 "defaultGround": "ground", // 默认地面的图块ID（terrains中） - // "png": "bg.png", // 背景图；你可以选择一张png图片来作为背景素材。详细用法请参见文档“自定义素材”中的说明。 + "png": [], // 该层默认显示的所有图片；详细用法请查看文档“自定义素材”中的说明。 // "color": [0,0,0,0.3], // 该层的默认画面色调。本项可不写（代表无色调），如果写需要是一个RGBA数组。 // "weather": ["snow",5], // 该层的默认天气。本项可不写，如果写则第一项为"rain"或"snow"代表雨雪，第二项为1-10之间的数代表强度。 // "bgm": "bgm.mp3", // 到达该层后默认播放的BGM。本项可忽略。 diff --git a/libs/floors/sample0.js b/libs/floors/sample0.js index 6cced8d2..26c8bcb5 100644 --- a/libs/floors/sample0.js +++ b/libs/floors/sample0.js @@ -8,7 +8,7 @@ main.floors.sample0 = { "canFlyTo": true, // 该楼能否被楼传器飞到（不能的话在该楼也不允许使用楼传器） "canUseQuickShop": true, // 该层是否允许使用快捷商店 "defaultGround": "ground", // 默认地面的图块ID（terrains中） - // "png": "bg.png", // 背景图；你可以选择一张png图片来作为背景素材。详细用法请参见文档“自定义素材”中的说明。 + "png": [], // 该层默认显示的所有图片；详细用法请查看文档“自定义素材”中的说明。 // "color": [0,0,0,0.3] // 该层的默认画面色调。本项可不写（代表无色调），如果写需要是一个RGBA数组。 // "weather": ["snow",5], // 该层的默认天气。本项可不写，如果写则第一项为"rain"或"snow"代表雨雪，第二项为1-10之间的数代表强度。 "bgm": "bgm.mp3", // 到达该层后默认播放的BGM。本项可忽略。 diff --git a/libs/floors/sample1.js b/libs/floors/sample1.js index 056ed1df..59aed3b4 100644 --- a/libs/floors/sample1.js +++ b/libs/floors/sample1.js @@ -8,7 +8,7 @@ main.floors.sample1 = { "canFlyTo": true, // 该楼能否被楼传器飞到（不能的话在该楼也不允许使用楼传器） "canUseQuickShop": true, // 该层是否允许使用快捷商店 "defaultGround": "grass", // 默认地面的图块ID（terrains中） - "png": "bg.png", // 背景图；你可以选择一张png图片来作为背景素材。详细用法请参见文档“自定义素材”中的说明。 + "png": [[0,0,"bg.png"]], // // 该层默认显示的所有图片；详细用法请查看文档“自定义素材”中的说明。 // "color": [0,0,0,0.3] // 该层的默认画面色调。本项可不写（代表无色调），如果写需要是一个RGBA数组。 "weather": ["snow",6], // 该层的默认天气。本项可不写，如果写则第一项为"rain"或"snow"代表雨雪，第二项为1-10之间的数代表强度。 // "bgm": "bgm.mp3", // 到达该层后默认播放的BGM。本项可忽略。 diff --git a/libs/floors/sample2.js b/libs/floors/sample2.js index d8f0b3fd..52ba5251 100644 --- a/libs/floors/sample2.js +++ b/libs/floors/sample2.js @@ -8,7 +8,7 @@ main.floors.sample2 = { "canFlyTo": false, // 该楼能否被楼传器飞到（不能的话在该楼也不允许使用楼传器） "canUseQuickShop": true, // 该层是否允许使用快捷商店 "defaultGround": "snowGround", // 默认地面的图块ID（terrains中） - // "png": "bg.png", // 背景图；你可以选择一张png图片来作为背景素材。详细用法请参见文档“自定义素材”中的说明。 + "png": [], // // 该层默认显示的所有图片；详细用法请查看文档“自定义素材”中的说明。 "color": [255,0,0,0.3], // 该层的默认画面色调。本项可不写（代表无色调），如果写需要是一个RGBA数组。 "weather": ["rain",10], // 该层的默认天气。本项可不写，如果写则第一项为"rain"或"snow"代表雨雪，第二项为1-10之间的数代表强度。 "bgm": "qianjin.mid", // 到达该层后默认播放的BGM。本项可忽略。 diff --git a/libs/ui.js b/libs/ui.js index a74b2056..9541aa50 100644 --- a/libs/ui.js +++ b/libs/ui.js @@ -1276,9 +1276,31 @@ ui.prototype.drawThumbnail = function(floorId, canvas, blocks, x, y, size, heroL if (core.isset(core.floors[floorId].png)) { var png = core.floors[floorId].png; + /* if (core.isset(core.material.images.pngs[png])) { core.canvas.ui.drawImage(core.material.images.pngs[png], x, y, size, size); } + */ + + var ratio = size/416; + + if (typeof png == 'string') { + if (core.isset(core.material.images.pngs[png])) { + core.canvas.ui.drawImage(core.material.images.pngs[png], x, y, size, size); + } + } + else if (png instanceof Array) { + png.forEach(function (t) { + if (t.length!=3) return; + var dx=parseInt(t[0]), dy=parseInt(t[1]), p=t[2]; + if (core.isset(dx) && core.isset(dy) && core.isset(core.material.images.pngs[p])) { + dx*=32; dy*=32; + var image = core.material.images.pngs[p]; + core.canvas.ui.drawImage(image, x+dx*ratio, y+dy*ratio, Math.min(size-dx*ratio, ratio*image.width), Math.min(size-dy*ratio, ratio*image.height)); + } + }) + } + } var mapArray = core.maps.getMapArray(blocks); diff --git a/更新说明.txt b/更新说明.txt index 6a15b270..542fc8b4 100644 --- a/更新说明.txt +++ b/更新说明.txt @@ -1,7 +1,9 @@ HTML5魔塔样板V1.3.3 瞬间移动。 -支持雨雪的天气。 +支持天气系统，可以在剧本中设置默认天气。 +新增自定义事件-图片显示。 +同时可以在剧本中设定多个背景素材。 剧情文本特性控制，人物的对话框效果。 单存档同步到服务器，下载到文件和读取。 键盘支持自动寻路操作。