Support Show Image
This commit is contained in:
oc
parent
aab1bfa40b
commit
99463c6e5e
@ -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"}` 来更改画面色调。
|
||||
|
||||
@ -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#自定义事件)的写法。
|
||||
|
||||
23
libs/core.js
23
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));
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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();
|
||||
|
||||
@ -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。本项可忽略。
|
||||
|
||||
@ -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。本项可忽略。
|
||||
|
||||
@ -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。本项可忽略。
|
||||
|
||||
@ -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。本项可忽略。
|
||||
|
||||
22
libs/ui.js
22
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);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user