jianghe2nd/mota-js
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity
5314aa491c
mota-js/_docs/start.md
AutumnOrange51 321d5c5ada update docs
2020-05-24 23:24:30 +08:00

22 KiB
Raw Blame History

快速上手

?> 目前版本v2.7，上次更新时间：* {docsify-updated} *
在这一节中，将详细介绍做一部塔的流程。现在，让我们来做一部单层塔！

前置需求

你需要满足如下条件才能进行制作：

  • Windows 8 以上操作系统；Windows 7 需要安装 .Net Framework 4.0。（能打开同目录下的“启动服务.exe”即可）
    • 其他电脑则需安装 python 3.8.2 或更高版本，能打开server.py即可（ Windows 也可以这样做）。
    • 安卓手机端需要下载最新版的 HTML5安卓造塔器。
  • Chrome浏览器。其他浏览器可能会导致本地服务器产生闪退等现象。
  • 强烈推荐安装一个很好的文本编辑器：VSCode。在某些需要直接修改文件的场合，可能会非常重要。

只要满足了上述条件，你就可以开始做自己的塔啦！

启动HTTP服务

与编辑器闭源的 RPG Maker MV 不同，本样板对文件的绝大部分修改是通过网页编辑器经由本地 HTTP 服务完成的，这样做也有助于编辑器跨平台并最大限度地复用运行时代码，还可以让玩家在在线游戏时查看游戏工程。
在根目录下有一个“启动服务.exe”，运行之。（非 Windows 电脑则需使用命令行运行 server.py，手机端则使用造塔APP。） 启动服务

  • “启动游戏”按钮将打开一个网页（您也可以手动在浏览器中键入 127.0.0.1:1055/index.html ，同时开启多个启动服务则1056、1057顺延），你能在里面看到现在游戏的效果。
  • “地图编辑器”允许你以可视化的方式进行编辑游戏（这个名称为历史遗留，两年前它真的只能编辑地图）。您也可以手动在浏览器中键入 127.0.0.1:1055/editor.html
  • 以下为 Windows 专用的一些辅助工具，由C#编写：
  • “便捷PS工具”能让你很方便的对自定义素材进行添加。参见自定义素材。
  • “地图生成器”能让你从已有的截图（如RMXP项目）中立刻生成可被本样板识别的地图数据。
  • “怪物数据导出”能让你从RMXP（RPG Maker XP 1.03，下同）中导出怪物数据而被HTML5魔塔使用。
  • “RM动画导出”能让你从RMXP中导出动画而被HTML5魔塔使用。
  • “JS代码压缩”能对JS代码和音像素材进行压缩，从而减少IO请求数和文件大小。
  • “额外素材合并”能将用到的tileset素材重新拼成更少的图片，并更新对应的地图矩阵。
  • “伤害和临界值计算器”是一个很便捷的小工具，能对怪物的伤害和临界值进行计算。
  • “动画编辑器”能让你编辑已有的animate动画文件，或自己利用图片制作全新的动画。
  • “怪物数据生成机”能够借助AI生成适当强度的怪物，此工具需要手动下载。

!> 整个造塔过程中，启动服务必须全程处于开启状态！切不可手滑关闭，否则做的都是无用功！

绘制地图

有两种绘制地图的方式：从头绘制地图；从RMXP中导入已有的地图。

从头绘制地图

我们直接打开“地图编辑器”，可以看到一个可视化的UI界面。

楼层切换到MT0层，然后可以开始任意绘制地图。

绘制地图

如果提示“该素材未被定义”或有红色问号框，请参见素材注册。
绘制地图时可以右键弹出菜单，复制、交换、删除图块、选中素材、更改出生点或快速创建常用事件。
从V2.4.2开始，可以使用 Alt+0~9 对一个图块素材快速保存，大键盘 0~9 来快速选用。
从V2.6.6开始，最近使用的图块也会直接显示在地图下方，您可以随时选取或清空它们。
从V2.7开始，除最近使用的图块外，还显示了最常使用的图块，您可以右击它们来置顶和取消置顶。

您还可以用右键在地图上拖动或用左键在素材区 tileset 区域拖动来批量选中图块，从而进行复制和平铺绘制。

从RMXP导入已有的地图

!> 注：现在已经不推荐此方法，如需从RMXP复刻魔塔请观看 RM转H5刻塔器使用教程 进行操作。
从V2.7起，RM转H5刻塔器被废弃，导出结果仅供阅读，仍需手动翻译成新样板的合适写法。
如果我们想复刻一个现有的，已经被RMXP所制作的塔，也有很便捷的方式，那就是用到我们的“地图生成器”。

首先，我们打开RMXP和对应的项目，可以看到它的地图。

绘制地图

我们打开地图编辑器，创建一个地图，宽高需要和RM中的地图一致。
之后，我们打开 Windows 10 自带的“截图工具”（非 Windows 10 请使用 Print Screen 键全屏截图后粘贴到“画图”中裁剪，或使用微信/QQ等自带的截图功能），并将整个地图有效区域截图下来，复制到剪切板。 绘制地图

截图时请注意：只截取有效游戏空间内数据，并且有效空间内的范围必须是创建的地图的大小（至少为13x13）。

确认地图的图片文件已经复制到剪切板后，我们打开“地图生成器”，并点“加载图片”。大约1-2秒后，可以得到地图的数据。

生成地图

然后点击“复制地图”，即可将地图数据复制到剪切板，然后再地图编辑器中切换到“地图编辑”，并在左边的框进行粘贴。

!> 地图生成器默认只支持已被定义的素材。如果有自定义素材需求（例如原版的1层小塔那种素材），请先导入并注册素材后再进行操作。
!> 请确保截图范围为你创建的地图大小，并且保证每个位置的像素都是32x32（譬如48×48的RPG Maker MV就需要缩小到2/3比例再截图）。

!> 如果宽度超过13，地图生成器将无法显示完全，但是仍然可以粘贴到地图编辑器中进行修改。

!> 地图生成器靠左上角来确定偏移量，如果左上角是全黑或者星空之类的素材可能导致识别不准，此时请在左上角放置一个岩浆后再进行截图识别。

岩浆

编辑属性

当地图绘制完毕后，我们可能需要进行属性的编辑。属性编辑有四类：楼层属性、怪物属性、道具属性、全塔属性。

楼层属性（快捷键V）

我们切换到楼层属性，并进行一项项的编辑。将鼠标放在中间有具体的每一项注释，这里不再细说。
从V2.7起，表格的注释被大幅度精简，因此没有下图中显示的那么冗长，上下楼点属性可以通过地图选点指定。
另外，地面图块被改为了允许使用任何图块（不一定非要是 terrains.png 中的）。
色调的设置提供了颜色选择器，贴图的设置则通过事件编辑器实现，地图的宽高也可以修改了。
“宝石血瓶效果”的标识符进行了改动，请参考4种血瓶和3种宝石的拾取效果。 楼层属性

怪物属性

我们点击右边的怪物图块，可以在左边的框内设置该怪物的各项属性。将鼠标放在中间有具体的每一项注释，这里不再细说。
从V2.7起，怪物特殊属性的格式强制为数组（即不再允许写单项，之前的单项0也要改为空数组[]）,在编辑器中通过勾选框的方式启用。游戏作者在“脚本编辑”getSpecials中新追加的特殊属性也将在刷新浏览器页面后出现。
有关怪物的更详细信息可参见元件说明：怪物。

怪物属性

道具属性

同理，点击道具可以对道具属性进行编辑。
从V2.6.6起，即捡即用类道具的捡拾效果和其他非装备的使用效果可以通过 useItemEvent 项用事件而不是脚本来书写。
从V2.7起，定义道具属性的js文件被大幅度重构，text 和 tip 不再通过 eval 而是通过模板字符串 ${} 实现。
道具子类 cls 中的 keys 被移除，原本的黄蓝红钥匙的子类被改为 tools，
道具属性中追加了一项“不显示在道具栏”可供您利用，例如制作一些隐藏的剧情物品。
此外，部分道具的素材被重制，如地震卷轴、怪物手册、楼层传送器、四种解药瓶、金钱袋和两种鞋。
目前大多数道具都已有默认效果。更多信息可参见元件说明：道具。

全塔属性（快捷键B）

我们切换到全塔属性，并进行一项项的编辑。同样鼠标放在中间可以查看注释。
我们可以在这里定义一些全局的属性，比如开始剧情、宝石血瓶数值，破甲反击净化的比例，以及一些系统开关比如是否启用加点，是否允许负伤害等等。
!> 注：name作为游戏的唯一标识符必须进行修改，否则可能会导致存档等出现问题。
从V2.7起，全塔属性被大幅度重构，同时几类属性之间支持折叠。具体有如下变动：

  1. 音像素材的注册半自动化：现在编辑器会自动读取文件系统，将支持的格式的文件列出，还可以预览/试听。具体支持的格式类型，可以通过点击左上角的“配置表格”来查阅和修改（关于“配置表格”的详细用法，请阅读 @zhaouv 撰写的另一篇文档）。
  2. 支持个性化字体：请将.ttf 格式的字体文件放在 project\fonts 文件夹。
  3. 部分素材目录变动：背景音乐从 project\sounds 移到了 project\bgms，主角行走图和对话框皮肤图以外的图片从 project\images 被移到了 project\materials，自动元件和 tileset 类素材从 project\images 被移到了专门提供的新文件夹 project\autotiles 和 project\tilesets，且对后者的追加总会追加在末尾。
  4. “难度分歧”现在由事件编辑器编写，分为“名称、简写、flag:hard值、颜色和事件”五项，含义分别为：
    1. 名称：标题界面点击“开始游戏”后弹出的二级菜单中的名称，您可以简要介绍一下该难度的差异（如减伤比例、初始属性变化）。
    2. 简写：即游戏中 core.status.hard 的值，将作为横屏状态栏左下角（竖屏状态栏右下角，该位置也作为数字键盘切换按钮，故无难度分歧的情况下推荐在这里注明此功能）、存读档界面和在线游戏排行榜中显示的难度名称。该值也允许使用中文，但请注意控制字数。
    3. flag:hard 值：同一个名称的游戏结局有多个难度有人通关时，在线游戏排行榜中只统计此flag值最大的难度。
    4. 颜色：flag:__hardColor__ 的值，将作为上述“简写”在状态栏和存读档界面的文字颜色。习惯上低难度用冷色，高难度用暖色。
    5. 事件：在全塔属性 startText 之前执行的事件，可以设置一些初始属性和道具。
  5. css设置项被合并，现在叫“主样式”，由事件编辑器编辑，同时横竖屏的标题画面支持用不同的图片啦~
  6. 编辑器和游戏中的所有“魔防”都已改名为“护盾”，所有 experience 都已改为 exp
  7. 主角的初始行走图（包括文件名）可以直接修改了，同时还支持了踏步动画（可以用于剧情对话中，但朝上会自动改为朝下否则不好看），这在表现长翅膀的主角时非常有用。
  8. 第一代全局商店被彻底重构，不再支持长按连续购买。需要自行处理扣钱和涨价问题，但用法也更灵活了，功能也更自由了。
  9. 全局开关被大幅度重构，形如“状态栏是否显示某某项”的开关被合并。其他一些影响道具属性的开关被删除（破炸冰的目标个数请直接在使用效果中指定），检查控制台和夹击上下整也被删除。

上述属性全部修改完毕后，保存，然后点启动服务的“开始游戏”，就可以看到我们写的游戏效果啦！

新建和删除楼层、调节尺寸

如果要新建楼层，请切换到“地图编辑”，输入新的楼层ID，并新建空白地图，然后刷新编辑器。

请注意，楼层ID必须是由字母、数字和下划线组成且不能以数字开头，不能和任何已有的楼层ID重复。

你也可以删除当前楼层（比如几个样板层），只需要点击删除楼层再刷新就行。删除楼层并不会删除文件，只是不再被游戏所引入而已。

你可以在全塔属性 - floorIds中看到所有的楼层。其顺序将影响到楼传器的顺序、浏览地图的顺序和上下楼器等的顺序。您可以在这里对它们进行顺序的调换和批量删除，只要注意别把出生楼层删了！
从V2.6.1起，支持修改楼层ID，修改按钮在楼层属性最下面，修改后请立即刷新浏览器页面。
从V2.7起，还支持调节地图尺寸。调节按钮的位置同上，“偏移”允许你做出“给13×13地图加一圈外墙”、“截取20×20地图的右下角13×13部分”这样的操作。

事件编辑

我们点击任意一个图块，都可以进入事件编辑模式。

地图选点

从上至下有若干项，分别代表该点的一些事件。有关事件的详细信息请参见事件。

如果一个点存在事件，则在地图编辑器中该点的左下角会有一个小方框表示。
红色为普通事件，橙色为自动事件，黄色为战后事件，绿色为楼层转换，青色为拾获道具后事件，靛色为不可通行性（不是事件），粉（紫）色为开门后事件。

自定义素材的添加与注册

有关素材的更多详细信息，包括素材的机制等内容，请参见自定义素材。

这里只对如何导入（新增）素材以及注册素材进行简要介绍。

新素材的添加

如果我们需要新增加一些素材，比如样板中没有的怪物等。
我们可以从启动服务打开便捷PS工具，然后选择对应的图片进行添加。非Windows系统，请使用“追加素材”功能。 便捷PS工具 在左边选择你要导入到的文件，比如怪物就是enemys.png，道具就是items.png等等，再在右边导入你的新素材图片。
之后就可以简单的使用 C 和 V 来复制粘贴了。
保存后，刷新地图编辑器即可生效。

素材注册

当我们使用新素材后，可能会出现素材不存在的情况，此时绘图时会存在红色问号方框。

素材注册

出现这种情况，是因为我们没有将该素材定义到游戏中，也无法进行使用。
要解决这个问题，只需要在左边的图块属性中定义新的图块ID和图块数字即可。ID必须由数字字母下划线组成，ID不允许使用纯数字。图块数字在1000以内，ID和图块数字均不能和已有的重复。
有关图块的ID和数字定义请参见素材的机制。

之后刷新编辑器即可。
也可以进行自动注册，只需要点击“自动注册”按钮，将对该栏下所有未注册的素材进行自动注册（自动分配ID和数字，随后强烈建议立即手动修改ID）。
素材注册完毕后，即可在游戏中正常使用，也可以被地图生成器所识别（需要重开地图生成器）。

额外素材

从2.4.2开始，H5魔塔样板支持额外素材，你可以导入任意个类似RM中的tilesets文件，且无需注册即可使用。

要使用额外素材，请在全塔属性中的tilesets项，添加额外素材的图片名称（从V2.7起，额外素材的图片文件要放在 project\tilestes 文件夹），刷新后即可在地图编辑器中使用。

额外素材不可注册，其数字、ID和索引都是和该图块在图片上的位置相关，不可编辑。

有关额外素材的更多说明参见额外素材

控制台调试

HTML5游戏都是可以进行控制台调试的。
当我们使用Chrome进入游戏后，可以按 Ctrl+Shift+I （F12），并找到 Console 控制台。 控制台

在控制台中，我们可以输入一些命令对游戏进行调试，常见的命令有：

  • core.status.floorId 获得当前层的floorId。
  • core.status.thisMap 获得当前地图信息。例如core.status.thisMap.blocks可以获得当前层所有图块。
  • core.floors 获得所有剧本的信息。例如core.floors[core.status.floorId].events可以获得当前层所有事件。
  • core.status.hero 获得当前勇士状态信息。例如core.status.hero.atk就是当前勇士的攻击力数值。
  • core.material.enemys 获得所有怪物信息。例如core.material.enemys.greenSlime就是获得绿色史莱姆的属性数据。
  • core.material.items 获得所有道具的信息。例如core.material.items.pickaxe就是获得破墙镐的信息。
  • flags.debug = true 开启调试模式；此模式下可以按住 Ctrl 键进行穿墙。
  • core.updateStatusBar() 立刻更新状态栏和地图显伤，并检查自动事件。
  • core.setStatus('atk', 1000) 直接设置勇士的某项属性。本句等价于 core.status.hero.atk = 1000。
  • core.getStatus('atk') 返回勇士当前某项属性数值。本句等价于 core.status.hero.atk。
  • core.setItem('pickaxe', 10) 直接设置勇士某个道具的个数。这里可以需要写道具的ID。
  • core.getItem('pickaxe', 2) 令勇士获得两个破墙镐。
  • core.itemCount('pickaxe') 返回勇士某个道具的个数。
  • core.hasItem('pickaxe') 返回勇士是否拥有某个道具。等价于core.itemCount('pickaxe') > 0。
  • core.getEquip(0) 返回0号装备类型（武器）的当前装备的itemId，不存在则返回null
  • core.hasEquip('sword1') 返回某个装备当前是否处于被装备状态
  • core.setFlag('xxx', 1) 设置某个flag/自定义变量的值。
  • core.getFlag('xxx', 10) 获得某个flag/自定义变量的值；如果该项不存在（未被定义），则返回第二个参数的值。
  • core.hasFlag('xxx') 返回是否存在某个变量且不为六种广义 false 。等价于 !!core.getFlag('xxx') 。
  • core.setFlag('xxx') 删除某个flag/自定义变量
  • core.insertAction(list) 执行一个公共事件或一段自定义事件。比如 core.insertAction(["剧情文本"]) 将执行一个剧情文本显示事件。
  • core.changeFloor('MT2', 'downFloor') 立刻执行楼层切换到MT2层的下楼点位置。
  • core.changeFloor('MT5', null, {'x': 4, 'y': 7}) 立刻切换楼层到MT5层的(4,7)点。
  • core.getBlock(3, 5, 'MT1') 获得当前地图上某一个块的信息。第三个参数为floorId，可省略表示当前楼层。
  • core.getBlockId(3, 5, 'MT1') 获得当前地图上某一个点的图块ID。第三个参数为floorId，可省略表示当前楼层。
  • core.resetMap() 重置当前层地图。
  • ……

更多API和详细参数介绍可参见API列表。

编辑器的基本操作

  • H 查看所有快捷键
  • Alt+0~9, 0~9 保存和读取当前选中图块（V2.7起，也可以用最常/最近使用图块置顶来代替）
  • W/A/S/D 移动大地图
  • Ctrl+Z 撤销上次绘图
  • Ctrl+Y 重做上次绘图
  • PgUp/PgDn，或滚轮 切换楼层
  • Ctrl+S 保存事件编辑器/脚本编辑器
  • 地图上单击 选中该点
  • DELETE键 删除选中点的事件和图块
  • 地图上双击 选中该点图块
  • ESC键 取消选中的点
  • 地图上右键 弹出菜单栏，包括选中、复制、交换、清除、更改出生点、快速绑定等操作
  • 地图上右键按住并拖动 批量框选图块，然后可以 ctrl+C/V 复制到别处
  • 素材区tileset区域左键按住并拖动 批量框选素材，然后可以单击地图批量绘制、在地图上拉框平铺
  • 事件编辑器中Ctrl+C, Ctrl+X, 右键, 双击等 执行相应操作，如进入多行编辑、UI绘制预览等

报错处理

有时候刷新后可能地图编辑器页面变成空白，即无法正确加载，游戏也无法正常进入。

出现这种问题的原因往往是如下几种：

  • 手动直接打开并错误编辑了文件
  • 文件不存在（被误删等）
  • 楼层floorId不合法（必须是字母数字下划线组成，且不能以数字开头）
  • 楼层floorId定义存在重复（比如定义了两个MT0层）
  • 初始楼层ID不存在（比如修改了全塔属性中的初始楼层ID，但是实际的该ID不存在，也会出错）
  • ……（可能各种奇怪的报错问题）

出现这种问题，（在Chrome浏览器中）请按Ctrl+Shift+I打开控制台，并找到Console查看报错。

一般都会具体到哪个楼层文件出错。

解决方式：哪个楼层文件出错，请使用VSCode等打开project目录下的data.js文件，并将出错的那个楼层定义删除。

例如下面这个问题：

检查错误

那么使用VSCode打开data.js文件，并将 "floorIds": [..., "MT1"] 这里对它的楼层定义删除，再刷新即可。

删除ID

请注意，手动删除楼层时一定要确保“初始楼层ID”是一个有效且存在的floorId！
如有任何无法解决的问题，欢迎加 QQ 群 959329661 寻求帮助。

==========================================================================================

继续阅读下一章：元件说明