Add support for Tilesets

docs/personalization.md

@@ -233,6 +233,35 @@ ID必须由数字字母下划线组成，数字在1000以内，且均不能和
 
 因此，在你修改了icons.js和maps.js两个文件，也就是将素材添加到游戏后，地图生成器的对应关系也将同步更新。
 
+### 额外素材
+
+从V2.4.2开始，HTML5魔塔样板开始支持额外素材。
+
+具体而言，通过上面的“素材导入”的方式，确实可以有效地添加素材到游戏。但是，如果想增加大量自定义素材，需要通过便捷PS工具将这些素材全部导入到
+`terrains.png`中，并且全部是单列，极度不友好。这也导致了野外风的制作相对变得很困难，增加了大量素材处理的工作量。
+
+额外素材就是为了解决这个问题而被提出。
+
+所谓`额外素材`，即用户可以自定导入任意张素材图片，无需PS，无需注册，即可直接在游戏中使用。这一点已经十分向RM靠拢了。
+
+要使用额外素材，请将你需要的素材图片放在`images`目录下，并在`全塔属性`的`tilesets`中定义图片名。
+
+**该素材的宽高必须都是32的倍数，且图片上的总图块数不超过1000（即最多有1000个32*32的图块在该图片上）。**
+
+```js
+"tilesets": ["1.png", "2.png"]    // 导入两个额外素材，文件名分别是1.png和2.png
+```
+
+刷新后，系统会自动加载该素材并添加到素材区。
+
+额外素材无需导入，无需注册。在`tilesets`中定义了图片后，即可直接使用绘图，无需再注册其数字和ID。其ID、索引和数字均为系统自动分配，且不允许修改。
+
+请注意，额外素材的ID、索引和数字，与该图片在tilesets数组中的index及该素材在图片上的位置都有关系。
+
+!> **因此如果对`tilesets`数组随意删除或修改顺序，可能会导致所有额外素材全部发生变化！这点请务必注意！！！**
+
+除此之外，额外素材在游戏中的使用和正式素材都是一致的，也能在前景或背景图层绘制。
+
 ## 自定义道具效果
 
 本节中将继续介绍如何自己编辑一个道具的效果。

docs/start.md

@@ -178,6 +178,16 @@
 
 素材注册完毕后，即可在游戏中正常使用，也可以被地图生成器所识别（需要重开地图生成器）。
 
+### 额外素材
+
+从2.4.2开始，H5魔塔样板支持额外素材，你可以导入任意个类似RM中的tilesets文件，且无需注册即可使用。
+
+要使用额外素材，请在`全塔属性`中的`tilesets`项，添加额外素材的图片名称，刷新后即可在地图编辑器中使用。
+
+额外素材不可注册，其数字、ID和索引都是和该图块在图片上的位置相关，不可编辑。
+
+有关额外素材的更多说明参见[额外素材](personalization#额外素材)
+
 ## 控制台调试
 
 HTML5的塔都是可以进行控制台调试的。

index.html

@@ -5,7 +5,7 @@
     <meta http-equiv='X-UA-Compatible' content='IE=Edge, chrome=1'>
     <meta name='author' content='ckcz123'>
     <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=yes'>
-    <title></title>
+    <title>HTML5魔塔</title>
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
     <meta name="screen-orientation" content="portrait">
     <meta name="full-screen" content="yes">

libs/core.js

@@ -191,7 +191,6 @@ core.prototype.init = function (coreData, callback) {
     document.title = core.firstData.title + " - HTML5魔塔";
     document.getElementById("startLogo").innerHTML = core.firstData.title;
     core.material.items = core.clone(core.items.getItems());
-    core.initStatus.maps = core.maps.initMaps(core.floorIds);
     core.material.enemys = core.clone(core.enemys.getEnemys());
     core.material.icons = core.icons.getIcons();
     core.material.events = core.events.getEvents();
@@ -299,6 +298,7 @@ core.prototype.init = function (coreData, callback) {
         console.log(core.material);
         // 设置勇士高度
         core.material.icons.hero.height = core.material.images.hero.height/4;
+        core.initStatus.maps = core.maps.initMaps(core.floorIds);
         core.setRequestAnimationFrame();
         core.showStartAnimate();
 

libs/events.js

@@ -373,14 +373,14 @@ events.prototype.doAction = function() {
             if (core.isset(data.time) && data.time>0 && (!core.isset(data.floorId) || data.floorId==core.status.floorId)) {
                 core.animateBlock(data.loc,'show', data.time, function () {
                     data.loc.forEach(function (t) {
-                        core.showBlock(t[0],t[1],data.floorId)
+                        core.showBlock(t[0],t[1],data.floorId);
                     })
                     core.events.doAction();
                 });
             }
             else {
                 data.loc.forEach(function (t) {
-                    core.showBlock(t[0],t[1],data.floorId)
+                    core.showBlock(t[0],t[1],data.floorId);
                 })
                 this.doAction();
             }
@@ -392,14 +392,22 @@ events.prototype.doAction = function() {
                 && (typeof data.loc[1] == 'number' || typeof data.loc[1] == 'string'))
                 data.loc = [[core.calValue(data.loc[0]), core.calValue(data.loc[1])]];
             data.loc.forEach(function (t) {
-                core.removeBlock(t[0],t[1],data.floorId);
+                core.maps.eraseBlock(t[0],t[1],data.floorId);
             })
             if (core.isset(data.time) && data.time>0 && (!core.isset(data.floorId) || data.floorId==core.status.floorId)) {
                 core.animateBlock(data.loc,'hide',data.time, function () {
+                    data.loc.forEach(function (t) {
+                        core.removeBlock(t[0],t[1],data.floorId)
+                    })
                     core.events.doAction();
                 });
             }
-            else this.doAction();
+            else {
+                data.loc.forEach(function (t) {
+                    core.removeBlock(t[0],t[1],data.floorId)
+                })
+                this.doAction();
+            }
             break;
         case "setBlock": // 设置某图块
             {

libs/icons.js

@@ -5,8 +5,38 @@ function icons() {
 icons.prototype.init = function () {
     this.icons = icons_4665ee12_3a1f_44a4_bea3_0fccba634dc1;
     //delete(icons_4665ee12_3a1f_44a4_bea3_0fccba634dc1);
+
+    // tileset的起点
+    this.tilesetStartOffset = 10000;
 }
 
 icons.prototype.getIcons = function () {
     return this.icons;
 }
+
+////// 根据图块数字或ID获得所在的tileset和坐标信息 //////
+icons.prototype.getTilesetOffset = function (id) {
+
+    if (typeof id == 'string') {
+        // Tileset的ID必须是 X+数字 的形式
+        if (!/^X\d+$/.test(id)) return null;
+        id = parseInt(id.substring(1));
+    }
+    else if (typeof id != 'number') {
+        return null;
+    }
+
+    core.tilesets = core.tilesets || [];
+    var startOffset = this.tilesetStartOffset;
+    for (var i in core.tilesets) {
+        var imgName = core.tilesets[i];
+        var img = core.material.images.tilesets[imgName];
+        var width = Math.floor(img.width/32), height = Math.floor(img.height/32);
+        if (id>=startOffset && id<startOffset+width*height) {
+            var x = (id-startOffset)%width, y = parseInt((id-startOffset)/width);
+            return {"image": imgName, "x": x, "y": y};
+        }
+        startOffset += this.tilesetStartOffset;
+    }
+    return null;
+}

libs/loader.js

@@ -39,10 +39,25 @@ loader.prototype.load = function (callback) {
             // 加载autotile
             core.material.images.autotile = {};
             core.loader.loadImages(Object.keys(core.material.icons.autotile), core.material.images.autotile, function () {
-                core.loader.loadAnimates();
+
-                core.loader.loadMusic();
+                // 加载tilesets
-                if (core.isset(callback))
+                core.material.images.tilesets = {};
-                    callback();
+                if (!core.isset(core.tilesets)) core.tilesets = [];
+                core.loader.loadImages(core.clone(core.tilesets), core.material.images.tilesets, function () {
+
+                    // 检查宽高是32倍数，如果出错在控制台报错
+                    for (var imgName in core.material.images.tilesets) {
+                        var img = core.material.images.tilesets[imgName];
+                        if (img.width%32!=0 || img.height%32!=0) {
+                            console.warn("警告！"+imgName+"的宽或高不是32的倍数！");
+                        }
+                    }
+
+                    core.loader.loadAnimates();
+                    core.loader.loadMusic();
+                    if (core.isset(callback))
+                        callback();
+                })
             })
         })
     })
@@ -63,7 +78,7 @@ loader.prototype.loadIcons = function () {
 }
 
 loader.prototype.loadImages = function (names, toSave, callback) {
-    if (names.length==0) {
+    if (!core.isset(names) || names.length==0) {
         if (core.isset(callback)) callback();
         return;
     }

libs/maps.js

@@ -60,6 +60,12 @@ maps.prototype.initBlock = function (x, y, id) {
     if (disable!=null) tmp.disable = disable;
 
     if (id in this.blocksInfo) tmp.event = JSON.parse(JSON.stringify(this.blocksInfo[id]));
+    else {
+        var tilesetOffset = core.icons.getTilesetOffset(id);
+        if (tilesetOffset != null) {
+            tmp.event = {"cls": "tileset", "id": "X"+id, "noPass": true};
+        }
+    }
 
     return tmp;
 }
@@ -333,16 +339,30 @@ maps.prototype.canMoveDirectly = function (destX,destY) {
 
 maps.prototype.drawBlock = function (block, animate, dx, dy) {
     var cls = block.event.cls, height = block.event.height || 32;
-    var blockIcon = core.material.icons[cls][block.event.id];
+
-    var blockImage = core.material.images[cls];
+    var image, x, y;
-    animate=(animate||0)%(block.event.animate||1);
+    if (cls == 'tileset') {
+        var offset = core.icons.getTilesetOffset(block.event.id);
+        if (offset == null) return;
+        image = core.material.images.tilesets[offset.image];
+        x = offset.x;
+        y = offset.y;
+        height = 32;
+    }
+    else if (cls == 'autotile') return;
+    else {
+        image = core.material.images[cls];
+        x = (animate||0)%(block.event.animate||1);
+        y = core.material.icons[cls][block.event.id];
+    }
     dx = dx || 0;
     dy = dy || 0;
+
     core.canvas.event.clearRect(block.x * 32 + dx, block.y * 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.event.drawImage(image, x * 32, y * height + height-32, 32, 32, block.x * 32 + dx, block.y * 32 + dy, 32, 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);
+        core.canvas.event2.drawImage(image, x * 32, y * height, 32, height-32, block.x * 32 + dx, block.y*32 + 32 - height + dy, 32, height-32);
     }
 }
 
@@ -379,6 +399,12 @@ maps.prototype.drawBgFgMap = function (floorId, canvas, name) {
                     var id = block.event.id, cls = block.event.cls;
                     if (cls == 'autotile')
                         core.drawAutotile(canvas, arr, block, 32, 0, 0);
+                    else if (cls == 'tileset') {
+                        var offset = core.icons.getTilesetOffset(id);
+                        if (offset!=null) {
+                            canvas.drawImage(core.material.images.tilesets[offset.image], 32*offset.x, 32*offset.y, 32, 32, 32*block.x, 32*block.y, 32, 32);
+                        }
+                    }
                     else
                         canvas.drawImage(core.material.images[cls], 0, core.material.icons[cls][id] * 32, 32, 32, x * 32, y * 32, 32, 32);
                 }
@@ -390,6 +416,7 @@ maps.prototype.drawBgFgMap = function (floorId, canvas, name) {
 
 ////// 绘制某张地图 //////
 maps.prototype.drawMap = function (mapName, callback) {
+    mapName = mapName || core.status.floorId;
     core.clearMap('all');
     core.removeGlobalAnimate(null, null, true);
     var drawBg = function(){
@@ -465,11 +492,9 @@ maps.prototype.drawMap = function (mapName, callback) {
                 if (block.event.cls == 'autotile') {
                     core.drawAutotile(core.canvas.event, mapArray, block, 32, 0, 0);
                 }
-                else {
+                else if (block.event.id!='none') {
-                    if (block.event.id!='none') {
+                    core.drawBlock(block);
-                        core.drawBlock(block);
+                    core.addGlobalAnimate(block);
-                        core.addGlobalAnimate(block);
-                    }
                 }
             }
         }
@@ -675,13 +700,32 @@ maps.prototype.moveBlock = function(x,y,steps,time,keep,callback) {
     core.setAlpha('ui', 1.0);
 
     block=block.block;
-    var blockIcon = core.material.icons[block.event.cls][block.event.id];
+
-    var blockImage = core.material.images[block.event.cls];
+    var image, bx, by, height = block.event.height || 32;
-    var height = block.event.height || 32;
+    if (block.event.cls == 'tileset') {
+        var offset = core.icons.getTilesetOffset(block.event.id);
+        if (offset==null) {
+            if (core.isset(callback)) callback();
+            return;
+        }
+        bx = offset.x;
+        by = offset.y;
+        image = core.material.images.tilesets[offset.image];
+    }
+    // 不支持autotile
+    else if (block.event.cls == 'autotile') {
+        if (core.isset(callback)) callback();
+        return;
+    }
+    else {
+        image = core.material.images[block.event.cls];
+        bx = 0;
+        by = core.material.icons[block.event.cls][block.event.id];
+    }
 
     var opacityVal = 1;
     core.setOpacity('route', opacityVal);
-    core.canvas.route.drawImage(blockImage, 0, blockIcon * height, 32, height, block.x * 32, block.y * 32 +32 - height, 32, height);
+    core.canvas.route.drawImage(image, bx * 32, by * height, 32, height, block.x * 32, block.y * 32 +32 - height, 32, height);
 
     // 要运行的轨迹：将steps展开
     var moveSteps=[];
@@ -721,6 +765,9 @@ maps.prototype.moveBlock = function(x,y,steps,time,keep,callback) {
             animateTime = 0;
             if (animateCurrent>=animateValue) animateCurrent=0;
         }
+        if (block.event.cls=='tileset') {
+            animateCurrent = bx;
+        }
 
         // 已经移动完毕，消失
         if (moveSteps.length==0) {
@@ -728,7 +775,7 @@ maps.prototype.moveBlock = function(x,y,steps,time,keep,callback) {
             else opacityVal -= 0.06;
             core.setOpacity('route', opacityVal);
             core.clearMap('route', nowX, nowY-height+32, 32, height);
-            core.canvas.route.drawImage(blockImage, animateCurrent * 32, blockIcon * height, 32, height, nowX, nowY-height+32, 32, height);
+            core.canvas.route.drawImage(image, animateCurrent * 32, by * height, 32, height, nowX, nowY-height+32, 32, height);
             if (opacityVal<=0) {
                 clearInterval(animate);
                 core.clearMap('route');
@@ -749,7 +796,7 @@ maps.prototype.moveBlock = function(x,y,steps,time,keep,callback) {
             nowY+=scan[moveSteps[0]].y*2;
             core.clearMap('route', nowX-32, nowY-32, 96, 96);
             // 绘制
-            core.canvas.route.drawImage(blockImage, animateCurrent * 32, blockIcon * height, 32, height, nowX, nowY-height+32, 32, height);
+            core.canvas.route.drawImage(image, animateCurrent * 32, by * height, 32, height, nowX, nowY-height+32, 32, height);
             if (step==16) {
                 // 该移动完毕，继续
                 step=0;
@@ -778,13 +825,31 @@ maps.prototype.jumpBlock = function(sx,sy,ex,ey,time,keep,callback) {
     core.setAlpha('ui', 1.0);
 
     block=block.block;
-    var blockIcon = core.material.icons[block.event.cls][block.event.id];
+    var image, bx, by, height = block.event.height || 32;
-    var blockImage = core.material.images[block.event.cls];
+    if (block.event.cls == 'tileset') {
-    var height = block.event.height || 32;
+        var offset = core.icons.getTilesetOffset(block.event.id);
+        if (offset==null) {
+            if (core.isset(callback)) callback();
+            return;
+        }
+        bx = offset.x;
+        by = offset.y;
+        image = core.material.images.tilesets[offset.image];
+    }
+    // 不支持autotile
+    else if (block.event.cls == 'autotile') {
+        if (core.isset(callback)) callback();
+        return;
+    }
+    else {
+        image = core.material.images[block.event.cls];
+        bx = 0;
+        by = core.material.icons[block.event.cls][block.event.id];
+    }
 
     var opacityVal = 1;
     core.setOpacity('route', opacityVal);
-    core.canvas.route.drawImage(blockImage, 0, blockIcon * height, 32, height, block.x * 32, block.y * 32 +32 - height, 32, height);
+    core.canvas.route.drawImage(image, bx*32, by * height, 32, height, block.x * 32, block.y * 32 +32 - height, 32, height);
 
     core.playSound('jump.mp3');
 
@@ -823,18 +888,21 @@ maps.prototype.jumpBlock = function(sx,sy,ex,ey,time,keep,callback) {
             animateTime = 0;
             if (animateCurrent >= animateValue) animateCurrent = 0;
         }
+        if (block.event.cls=='tileset') {
+            animateCurrent = bx;
+        }
 
         if (jump_count>0) {
             core.clearMap('route', drawX(), drawY()-height+32, 32, height);
             updateJump();
-            core.canvas.route.drawImage(blockImage, animateCurrent * 32, blockIcon * height, 32, height, drawX(), drawY()-height+32, 32, height);
+            core.canvas.route.drawImage(image, animateCurrent * 32, by * height, 32, height, drawX(), drawY()-height+32, 32, height);
         }
         else {
             if (keep) opacityVal=0;
             else opacityVal -= 0.06;
             core.setOpacity('route', opacityVal);
             core.clearMap('route', drawX(), drawY()-height+32, 32, height);
-            core.canvas.route.drawImage(blockImage, animateCurrent * 32, blockIcon * height, 32, height, drawX(), drawY()-height+32, 32, height);
+            core.canvas.route.drawImage(image, animateCurrent * 32, by * height, 32, height, drawX(), drawY()-height+32, 32, height);
             if (opacityVal<=0) {
                 clearInterval(animate);
                 core.clearMap('route');
@@ -865,10 +933,29 @@ maps.prototype.animateBlock = function (loc,type,time,callback) {
         var block = core.getBlock(t[0],t[1],null,true);
         if (block==null) return;
         block=block.block;
+        var image, bx, by, height = block.event.height || 32;
+        if (block.event.cls == 'tileset') {
+            var offset = core.icons.getTilesetOffset(block.event.id);
+            if (offset==null) {
+                if (core.isset(callback)) callback();
+                return;
+            }
+            bx = offset.x;
+            by = offset.y;
+            image = core.material.images.tilesets[offset.image];
+        }
+        // 不支持autotile
+        else if (block.event.cls == 'autotile') {
+            return;
+        }
+        else {
+            image = core.material.images[block.event.cls];
+            bx = 0;
+            by = core.material.icons[block.event.cls][block.event.id];
+        }
         list.push({
-            'x': t[0], 'y': t[1], 'height': block.event.height||32,
+            'x': t[0], 'y': t[1], 'height': height,
-            'blockIcon': core.material.icons[block.event.cls][block.event.id],
+            'bx': bx, 'by': by, 'image': image
-            'blockImage': core.material.images[block.event.cls]
         })
     })
 
@@ -880,7 +967,7 @@ maps.prototype.animateBlock = function (loc,type,time,callback) {
     core.status.replay.animate=true;
     var draw = function () {
         list.forEach(function (t) {
-            core.canvas.route.drawImage(t.blockImage, 0, t.blockIcon*t.height, 32, t.height, t.x*32, t.y*32+32-t.height, 32, t.height);
+            core.canvas.route.drawImage(t.image, t.bx*32, t.by*t.height, 32, t.height, t.x*32, t.y*32+32-t.height, 32, t.height);
         })
     }
 
@@ -923,6 +1010,27 @@ maps.prototype.showBlock = function(x, y, floodId) {
     }
 }
 
+////// 只隐藏但不删除某块 //////
+maps.prototype.eraseBlock = function (x, y, floorId) {
+    floorId = floorId || core.status.floorId;
+
+    var block = core.getBlock(x,y,floorId,true);
+    if (block==null) return; // 不存在
+
+    // 删除动画，清除地图
+    if (floorId==core.status.floorId) {
+        core.removeGlobalAnimate(x, y);
+        core.canvas.event.clearRect(x * 32, y * 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);
+    }
+
+    block.disable = true;
+    core.updateStatusBar();
+}
+
 ////// 将某个块从启用变成禁用状态 //////
 maps.prototype.removeBlock = function (x, y, floorId) {
     floorId = floorId || core.status.floorId;

libs/ui.js

@@ -2039,6 +2039,12 @@ ui.prototype.drawThumbnail = function(floorId, canvas, blocks, x, y, size, cente
             if (block.event.cls == 'autotile') {
                 core.drawAutotile(tempCanvas, mapArray, block, 32, 0, 0);
             }
+            else if (block.event.cls == 'tileset') {
+                var offset = core.icons.getTilesetOffset(block.event.id);
+                if (offset!=null) {
+                    tempCanvas.drawImage(core.material.images.tilesets[offset.image], 32*offset.x, 32*offset.y, 32, 32, 32*block.x, 32*block.y, 32, 32);
+                }
+            }
             else {
                 if (block.event.id!='none') {
                     var blockIcon = core.material.icons[block.event.cls][block.event.id];

main.js

@@ -67,7 +67,7 @@ function main() {
         'loader', 'control', 'utils', 'items', 'icons', 'maps', 'enemys', 'events', 'actions', 'data', 'ui', 'core'
     ];
     this.pureData = [ 
-        "data","enemys","icons","maps","items","functions"
+        'data', 'enemys', 'icons', 'maps', 'items', 'functions'
     ];
     this.materials = [
         'animates', 'enemys', 'hero', 'items', 'npcs', 'terrains', 'enemy48', 'npc48'
@@ -182,7 +182,7 @@ main.prototype.init = function (mode, callback) {
 
             main.loaderFloors(function() {
                 var coreData = {};
-                ["dom", "statusBar", "canvas", "images", "materials",
+                ["dom", "statusBar", "canvas", "images", "tilesets", "materials",
                 "animates", "bgms", "sounds", "floorIds", "floors"].forEach(function (t) {
                     coreData[t] = main[t];
                 })

project/data.js

@@ -11,6 +11,7 @@ data_a1e2fb4a_e986_4524_b0da_9b7ba7c0874d =
 		"images": [
 			"bg.jpg"
 		],
+		"tilesets": [],
 		"animates": [
 			"hand",
 			"sword",