diff --git a/docs/event.md b/docs/event.md index 879ac5d1..2966278f 100644 --- a/docs/event.md +++ b/docs/event.md @@ -621,7 +621,7 @@ loc可忽略，如果忽略则显示为事件当前点。 ] ``` -name为图片名。**请确保图片在main.js中的this.pngs中被定义过。** +name为图片名。**请确保图片在main.js中的this.images中被定义过。** loc为图片左上角坐标，以像素为单位进行计算。 diff --git a/docs/personalization.md b/docs/personalization.md index 1f4fbd0b..288d9eeb 100644 --- a/docs/personalization.md +++ b/docs/personalization.md @@ -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中定义过。 你的图片背景素材将会覆盖原来本身的背景层。 diff --git a/libs/events.js b/libs/events.js index 07268665..1a4e2e46 100644 --- a/libs/events.js +++ b/libs/events.js @@ -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(); diff --git a/libs/loader.js b/libs/loader.js index e9a09e5e..48844bb6 100644 --- a/libs/loader.js +++ b/libs/loader.js @@ -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; diff --git a/libs/maps.js b/libs/maps.js index 879d9027..6b3eecc5 100644 --- a/libs/maps.js +++ b/libs/maps.js @@ -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 diff --git a/libs/ui.js b/libs/ui.js index cceb37be..8a75c0f3 100644 --- a/libs/ui.js +++ b/libs/ui.js @@ -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 () { diff --git a/main.js b/main.js index 2631395d..7da8aa9a 100644 --- a/main.js +++ b/main.js @@ -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]; }) diff --git a/project/comment.js b/project/comment.js index e1869a3c..7b10198d 100644 --- a/project/comment.js +++ b/project/comment.js @@ -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。本项可忽略。 ", diff --git a/project/data.comment.js b/project/data.comment.js index fee8d03b..3526688c 100644 --- a/project/data.comment.js +++ b/project/data.comment.js @@ -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", diff --git a/project/data.js b/project/data.js index b1402f32..5e3c5775 100644 --- a/project/data.js +++ b/project/data.js @@ -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"]], }, diff --git a/project/floors/sample1.js b/project/floors/sample1.js index 08ce590e..04775340 100644 --- a/project/floors/sample1.js +++ b/project/floors/sample1.js @@ -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。本项可忽略。 diff --git a/project/images/bg.jpg b/project/images/bg.jpg new file mode 100644 index 00000000..55cf862c Binary files /dev/null and b/project/images/bg.jpg differ diff --git a/project/images/bg.png b/project/images/bg.png deleted file mode 100644 index d235379c..00000000 Binary files a/project/images/bg.png and /dev/null differ diff --git a/project/images/yewai.png b/project/images/yewai.png deleted file mode 100644 index ca42c618..00000000 Binary files a/project/images/yewai.png and /dev/null differ