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

Add support for Tilesets

Browse Source
This commit is contained in:
ckcz123 2018-09-26 19:58:39 +08:00
parent fb069ff78f
commit 1b80adcaf1
11 changed files with 246 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
docs/personalization.md
View File

@ -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`数组随意删除或修改顺序，可能会导致所有额外素材全部发生变化！这点请务必注意！！！**
除此之外，额外素材在游戏中的使用和正式素材都是一致的，也能在前景或背景图层绘制。
## 自定义道具效果
本节中将继续介绍如何自己编辑一个道具的效果。

10
docs/start.md
View File

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

2
index.html
View File

@ -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">

2
libs/core.js
View File

@ -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();

16
libs/events.js
View File

@ -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": // 设置某图块
{

30
libs/icons.js
View File

@ -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;
}

25
libs/loader.js
View File

@ -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();
if (core.isset(callback))
callback();
// 加载tilesets
core.material.images.tilesets = {};
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;
}

160
libs/maps.js
View File

@ -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];
animate=(animate||0)%(block.event.animate||1);
var image, x, y;
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 {
if (block.event.id!='none') {
core.drawBlock(block);
core.addGlobalAnimate(block);
}
else if (block.event.id!='none') {
core.drawBlock(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 height = block.event.height || 32;
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') {
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 blockImage = core.material.images[block.event.cls];
var height = block.event.height || 32;
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') {
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,
'blockIcon': core.material.icons[block.event.cls][block.event.id],
'blockImage': core.material.images[block.event.cls]
'x': t[0], 'y': t[1], 'height': height,
'bx': bx, 'by': by, 'image': image
})
})
@ -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;

6
libs/ui.js
View File

@ -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];

4
main.js
View File

@ -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];
})

1
project/data.js
View File

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