jianghe2nd/mota-js
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

Support fg & bg

Browse Source
This commit is contained in:
ckcz123 2018-03-13 12:24:06 +08:00
parent 292c2a59e6
commit cda73fe058
14 changed files with 72 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/event.md
View File

@ -621,7 +621,7 @@ loc可忽略，如果忽略则显示为事件当前点。
]
```
name为图片名。**请确保图片在main.js中的this.pngs中被定义过。**
name为图片名。**请确保图片在main.js中的this.images中被定义过。**
loc为图片左上角坐标，以像素为单位进行计算。

12
docs/personalization.md
View File

@ -32,29 +32,27 @@
要启用这个功能，我们首先需要在`main.js`中将可能的图片进行加载。
``` js
this.pngs = [ // 在此存放所有可能使用的图片，只能是png格式，可以不写后缀名
this.images = [ // 在此存放所有可能使用的图片
// 图片可以被作为背景图（的一部分），也可以直接用自定义事件进行显示。
// 图片名不能使用中文，不能带空格或特殊字符；可以直接改名拼音就好
// 建议对于较大的图片，在网上使用在线的“图片压缩工具(http://compresspng.com/zh/)”来进行压缩，以节省流量
"bg", // 依次向后添加
"bg.jpg", // 依次向后添加
];
```
!> 背景素材只支持png格式。
!> 请使用网上的一些[在线图片压缩工具](http://compresspng.com/zh/)对png图片进行压缩，以节省流量。一张500KB的png图片可以被压缩到20-30KB，显示效果不会有太大差异。
之后，我们可以在每层剧本的`"png"`里来定义该层的默认背景图片素材。
之后，我们可以在每层剧本的`"images"`里来定义该层的默认背景图片素材。
``` js
"png": [[x,y,"bg"]], // 背景图；你可以选择一张或多张png图片来作为背景素材。
"png": [[x,y,"bg.jpg"]], // 背景图；你可以选择一张或多张图片来作为背景素材。
"png": [], // 无任何背景图
"png": [[1,1,"house"], [6,7,"house2"]] // 在(1,1)放一个house.png，且(6,7)放house2.png
```
png为一个数组，代表当前层所有作为背景素材的图片信息。
每一项为一个三元组，分别为该背景素材的x，y和图片名。其中x和y分别为横纵坐标，在0-12之间；图片名则必须在上面的this.pngs中定义过。
每一项为一个三元组，分别为该背景素材的x，y和图片名。其中x和y分别为横纵坐标，在0-12之间；图片名则必须在上面的this.images中定义过。
你的图片背景素材将会覆盖原来本身的背景层。

4
libs/events.js
View File

@ -399,8 +399,8 @@ events.prototype.doAction = function() {
this.doAction();
break;
case "showImage": // 显示图片
if (core.isset(data.loc) && core.isset(core.material.images.pngs[data.name])) {
core.canvas.animate.drawImage(core.material.images.pngs[data.name], data.loc[0], data.loc[1]);
if (core.isset(data.loc) && core.isset(core.material.images.images[data.name])) {
core.canvas.animate.drawImage(core.material.images.images[data.name], data.loc[0], data.loc[1]);
}
else core.clearMap('animate', 0, 0, 416, 416);
this.doAction();

8
libs/loader.js
View File

@ -24,10 +24,10 @@ loader.prototype.setStartLoadTipText = function (text) {
loader.prototype.load = function (callback) {
// 加载图片
core.loader.loadImages(core.images, core.material.images, function () {
core.loader.loadImages(core.materials, core.material.images, function () {
// 加载png图片
core.material.images.pngs = {};
core.loader.loadImages(core.pngs, core.material.images.pngs, function () {
core.material.images.images = {};
core.loader.loadImages(core.images, core.material.images.images, function () {
// 加载autotile
core.material.images.autotile = {};
core.loader.loadImages(Object.keys(core.material.icons.autotile), core.material.images.autotile, function () {
@ -62,7 +62,7 @@ loader.prototype.loadImages = function (names, toSave, callback) {
loader.prototype.loadImage = function (imgName, callback) {
try {
var name=imgName;
if (name.indexOf(".png")<0) // 不包含"png"
if (name.indexOf(".")<0)
name=name+".png";
var image = new Image();
image.src = 'project/images/' + name + "?v=" + main.version;

52
libs/maps.js
View File

@ -294,9 +294,11 @@ maps.prototype.drawBlock = function (block, animate, dx, dy) {
dx = dx || 0;
dy = dy || 0;
core.canvas.event.clearRect(block.x * 32 + dx, block.y * 32 + dy, 32, 32);
core.canvas.event2.clearRect(block.x * 32 + dx, block.y * 32 - 32 + dy, 32, 32)
core.canvas.event.drawImage(blockImage, animate * 32, blockIcon * height + height-32, 32, 32, block.x * 32 + dx, block.y * 32 + dy, 32, 32);
core.canvas.event2.drawImage(blockImage, animate * 32, blockIcon * height, 32, height-32, block.x * 32 + dx, block.y*32 + 32 - height + dy, 32, height-32);
if (height>32) {
core.canvas.event2.clearRect(block.x * 32 + dx, block.y * 32 + 32 - height + dy, 32, height-32)
core.canvas.event2.drawImage(blockImage, animate * 32, blockIcon * height, 32, height-32, block.x * 32 + dx, block.y*32 + 32 - height + dy, 32, height-32);
}
}
////// 绘制某张地图 //////
@ -312,32 +314,27 @@ maps.prototype.drawMap = function (mapName, callback) {
core.canvas.bg.drawImage(blockImage, 0, blockIcon * 32, 32, 32, x * 32, y * 32, 32, 32);
}
}
// 如果存在png
if (core.isset(core.floors[mapName].png)) {
var x=0, y=0, size=416;
var png = core.floors[mapName].png;
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));
}
})
var images = [];
if (core.isset(core.floors[mapName].images)) {
images = core.floors[mapName].images;
if (typeof images == 'string') {
images = [[0, 0, images]];
}
}
images.forEach(function (t) {
var size=416, ratio=1;
var dx=parseInt(t[0]), dy=parseInt(t[1]), p=t[2];
if (core.isset(dx) && core.isset(dy) && core.isset(core.material.images.images[p])) {
dx*=32; dy*=32;
var image = core.material.images.images[p];
if (!t[3])
core.canvas.bg.drawImage(image, dx*ratio, dy*ratio, Math.min(size-dx*ratio, ratio*image.width), Math.min(size-dy*ratio, ratio*image.height));
else
core.canvas.event2.drawImage(image, dx*ratio, dy*ratio, Math.min(size-dx*ratio, ratio*image.width), Math.min(size-dy*ratio, ratio*image.height));
}
})
}
if (main.mode=='editor'){
main.editor.drawMapBg = function(){
@ -716,7 +713,10 @@ maps.prototype.removeBlock = function (x, y, floorId) {
if (floorId==core.status.floorId) {
core.removeGlobalAnimate(x, y);
core.canvas.event.clearRect(x * 32, y * 32, 32, 32);
core.canvas.event2.clearRect(x * 32, y * 32 - 32, 32, 32);
var height = 32;
if (core.isset(block.block.event)) height=block.block.event.height||32;
if (height>32)
core.canvas.event2.clearRect(x * 32, y * 32 +32-height, 32, height-32);
}
// 删除Index

46
libs/ui.js
View File

@ -1618,29 +1618,24 @@ ui.prototype.drawThumbnail = function(floorId, canvas, blocks, x, y, size, heroL
}
}
if (core.isset(core.floors[floorId].png)) {
var png = core.floors[floorId].png;
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);
}
var images = [];
if (core.isset(core.floors[floorId].images)) {
images = core.floors[floorId].images;
if (typeof images == 'string') {
images = [[0, 0, images]];
}
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));
}
})
}
}
images.forEach(function (t) {
var ratio = size/416;
var dx=parseInt(t[0]), dy=parseInt(t[1]), p=t[2];
if (core.isset(dx) && core.isset(dy) && !t[3] && core.isset(core.material.images.images[p])) {
dx*=32; dy*=32;
var image = core.material.images.images[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);
for (var b in blocks) {
var block = blocks[b];
@ -1665,6 +1660,17 @@ ui.prototype.drawThumbnail = function(floorId, canvas, blocks, x, y, size, heroL
var realHeight = persize*height/32;
core.canvas[canvas].drawImage(core.material.images.hero, heroIcon.stop * 32, heroIcon.loc * height, 32, height, x+persize*heroLoc.x, y+persize*heroLoc.y+persize-realHeight, persize, realHeight);
}
images.forEach(function (t) {
var ratio = size/416;
var dx=parseInt(t[0]), dy=parseInt(t[1]), p=t[2];
if (core.isset(dx) && core.isset(dy) && t[3] && core.isset(core.material.images.images[p])) {
dx*=32; dy*=32;
var image = core.material.images.images[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));
}
})
}
ui.prototype.drawKeyBoard = function () {

4
main.js
View File

@ -58,7 +58,7 @@ function main() {
this.pureData = [
"data","enemys","icons","maps","items","functions"
];
this.images = [
this.materials = [
'animates', 'enemys', 'hero', 'items', 'npcs', 'terrains', 'enemy48', 'npc48'
];
@ -159,7 +159,7 @@ main.prototype.init = function (mode, callback) {
main.loaderFloors(function() {
var coreData = {};
["dom", "statusBar", "canvas", "images", "pngs",
["dom", "statusBar", "canvas", "images", "materials",
"animates", "bgms", "sounds", "floorIds", "floors"].forEach(function (t) {
coreData[t] = main[t];
})

2
project/comment.js
View File

@ -39,7 +39,7 @@ comment_c456ea59_6018_45ef_8bcc_211a24c627dc =
"canFlyTo": "该楼能否被楼传器飞到（不能的话在该楼也不允许使用楼传器） \n$select({\"values\":[true,false]})$end",
"canUseQuickShop": "该层是否允许使用快捷商店 \n$select({\"values\":[true,false]})$end",
"defaultGround": "默认地面的图块ID（terrains中） \n$select({\"values\":Object.keys(editor.core.icons.icons.terrains)})$end",
"png": "背景图；你可以选择一张png图片来作为背景素材。详细用法请参见文档“自定义素材”中的说明。 \n$leaf(true)$end",
"images": "背景/前景图；你可以选择一张图片来作为背景/前景素材。详细用法请参见文档“自定义素材”中的说明。 \n$leaf(true)$end",
"color": "该层的默认画面色调。本项可不写（代表无色调），如果写需要是一个RGBA数组。 \n$leaf(true)$end",
"weather": "该层的默认天气。本项可忽略表示晴天，如果写则第一项为\"rain\"或\"snow\"代表雨雪，第二项为1-10之间的数代表强度。 \n$leaf(true)$end",
"bgm": "到达该层后默认播放的BGM。本项可忽略。 ",

2
project/data.comment.js
View File

@ -2,7 +2,7 @@ data_comment_c456ea59_6018_45ef_8bcc_211a24c627dc =
{
"main": {
"floorIds": " 在这里按顺序放所有的楼层；其顺序直接影响到楼层传送器的顺序和上楼器/下楼器的顺序 \n$leaf(true)$end",
"pngs": " 在此存放所有可能使用的图片，只能是png格式，可以不写后缀名 \n 图片可以被作为背景图（的一部分），也可以直接用自定义事件进行显示。 \n 图片名不能使用中文，不能带空格或特殊字符；可以直接改名拼音就好 \n 建议对于较大的图片，在网上使用在线的“图片压缩工具(http://compresspng.com/zh/)”来进行压缩，以节省流量 \n 依次向后添加 \n$leaf(true)$end",
"images": " 在此存放所有可能使用的图片 \n 图片可以被作为背景图（的一部分），也可以直接用自定义事件进行显示。 \n 图片名不能使用中文，不能带空格或特殊字符；可以直接改名拼音就好 \n 建议对于较大的图片，在网上使用在线的“图片压缩工具(http://compresspng.com/zh/)”来进行压缩，以节省流量 \n 依次向后添加 \n$leaf(true)$end",
"animates": " 在此存放所有可能使用的动画，必须是animate格式，在这里不写后缀名 \n 动画必须放在animates目录下；文件名不能使用中文，不能带空格或特殊字符 \n \"jianji\", \"thunder\" \n 根据需求自行添加 \n$leaf(true)$end",
"bgms": " 在此存放所有的bgm，和文件名一致。第一项为默认播放项 \n 音频名不能使用中文，不能带空格或特殊字符；可以直接改名拼音就好 \n$leaf(true)$end",
"sounds": " 在此存放所有的SE，和文件名一致 \n 音频名不能使用中文，不能带空格或特殊字符；可以直接改名拼音就好 \n$leaf(true)$end",

6
project/data.js
View File

@ -4,8 +4,8 @@ data_a1e2fb4a_e986_4524_b0da_9b7ba7c0874d =
"floorIds" : [
"sample0", "sample1", "sample2"
],
"pngs" : [
"bg",
"images" : [
"bg.jpg",
],
"animates" : [
"hand", "sword", "zone", "yongchang",
@ -17,7 +17,7 @@ data_a1e2fb4a_e986_4524_b0da_9b7ba7c0874d =
'floor.mp3', 'attack.ogg', 'door.ogg', 'item.ogg', 'zone.ogg'
],
"bgmRemote" : false,
"startBackground" : "bg.png",
"startBackground" : "bg.jpg",
"startLogoStyle" : "color: black",
"levelChoose" : [["简单","Easy"],["普通","Normal"],["困难","Hard"],["噩梦","Hell"]],
},

2
project/floors/sample1.js
View File

@ -9,7 +9,7 @@ main.floors.sample1 =
"canFlyTo": true, // 该楼能否被楼传器飞到（不能的话在该楼也不允许使用楼传器）
"canUseQuickShop": true, // 该层是否允许使用快捷商店
"defaultGround": "grass", // 默认地面的图块ID（terrains中）
"png": [[0,0,"bg"]], // // 该层默认显示的所有图片；详细用法请查看文档“自定义素材”中的说明。
"images": [[0,0,"bg.jpg",false]], // // 该层默认显示的所有图片；详细用法请查看文档“自定义素材”中的说明。
// "color": [0,0,0,0.3] // 该层的默认画面色调。本项可不写（代表无色调），如果写需要是一个RGBA数组。
"weather": ["snow",6], // 该层的默认天气。本项可忽略表示晴天，如果写则第一项为"rain"或"snow"代表雨雪，第二项为1-10之间的数代表强度。
// "bgm": "bgm.mp3", // 到达该层后默认播放的BGM。本项可忽略。

BIN
project/images/bg.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 38 KiB

BIN
project/images/bg.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 16 KiB

BIN
project/images/yewai.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 39 KiB