tianta/_docs/start.md

# 快速上手

?> 在这一节中，将详细介绍做一部塔的流程。现在，让我们来做一部单层塔！

* [新版视频教程](https://www.bilibili.com/video/BV1SB4y1p7bg?share_source=copy_web)
* [脚本教程](https://www.bilibili.com/video/BV1uL411J7yZ?share_source=copy_web)

## 前置需求
你需要满足如下条件才能进行制作：[样板下载地址](https://github.com/ckcz123/mota-js/releases)。
1.  操作系统：
    -   Win8或更高版本，Win7则需要安装 .Net Framework
        4.0（能打开根目录的“启动服务.exe”即可）
    -   其他电脑则需安装[python
        3.9.6](https://www.python.org/downloads/)或更高版本，能运行根目录的server.py即可（Windows也可以这样做）。
    -   安卓手机需要安装[HTML5安卓造塔器](http://h5mota.com/games/_client/H5motaMaker.apk)，推荐搭配ES文件浏览器。
2.  [谷歌chrome浏览器](http://google.cn/chrome)或win10自带的新版Edge浏览器：其他浏览器可能导致本地服务闪退。
3.  （强烈推荐）[VScode](http://code.visualstudio.com/download)：最适合HTML5项目的文本编辑器，能进行跨文件的正则搜索和替换，也能完整发挥根目录的runtime.d.ts文件的作用。

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

## 启动HTTP服务

与编辑器闭源的RPG Maker MV/MZ不同，本样板对文件的绝大部分修改是通过网页编辑器经由本地HTTP服务完成的，这样做也有助于编辑器跨平台并最大限度地复用运行时代码，还可以让玩家在在线游戏时查看游戏工程。

在根目录下有一个“启动服务.exe”，运行之。（非Windows电脑则需使用命令行运行`server.py`，安卓手机则使用造塔器）

!> 使用python启动服务的话，整个塔的绝对路径必须是全英文！

![image](img/server.jpg)

* 启动游戏：打开[http://127.0.0.1:1055/index.html](http://127.0.0.1:1055/index.html)，同时开启多个启动服务则1056、1057顺延（下同）。你能在里面看到现在游戏的效果。
* 启动编辑器：打开[http://127.0.0.1:1055/editor.html](http://127.0.0.1:1055/editor.html)（竖屏则为editor-mobile.html），这是您整个制作流程的核心页面

以下为Windows专用的一些辅助工具（位于“辅助工具”文件夹），由C#编写：

* 便捷PS工具：能方便地替换和新增32×32、32×48素材。V2.8.1对该工具进行了大幅强化，您甚至可以指定32×16的格子尺寸，作为前述两种尺寸的过渡操作。
* 地图生成器：识别RPG Maker魔塔的地图截图，生成HTML5魔塔的地图数据。
* 怪物数据导出：从RPG Maker XP 1.03游戏导出怪物数据，用于HTML5魔塔或使用Excel查看。
* RM动画导出：从RPG Maker XP 1.03游戏导出动画，用于HTML5魔塔。
* JS代码压缩：对js代码（限es5）和音像素材（背景音乐除外）进行压缩，从而减小文件体积，加快在线游戏的加载。一般无需手动运行，发布后我们的服务器会处理的。
* 动画编辑器：编辑`project\animates`文件夹中的动画文件，或利用图片制作全新的动画。
* 伤害和临界值计算器、帮助文档：如题，后者会打开本文档。

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

![image](img/V2_8server.jpg)

V2.7.x中，“地图生成器”因为图片文件被拆分到两个文件夹的缘故而无法再使用，该问题已在V2.8中修复，同时该工具更名为“截图识别器”。

V2.8中，“额外素材合并”不再在本地进行而是改在作品发布时在服务器端用python实现，并把实现原理改为“将未用到的图块透明化后，全图裁剪到可能的最小尺寸”，以避免图块id错乱的问题。

## 编辑器页面的结构

![image](img/editor.jpg)

如上图，编辑器页面的结构分为三大部分。左边叫**数据区**，中央叫**地图区**，右侧叫**素材区**，竖屏状态下同时只能显示其中一个，需要经常来回切换。

请尤其注意中央下方的下拉框，您可以随时按下Z、X、…、句号键（字母键第三行）让数据区在这些模式之间切换。更多键鼠快捷操作请按下H键查看，这里列出一部分：
1.  **Alt+0~9、0~9：**给素材区的图块绑定数字快捷键，并使用。（您也可以用中央下方的“最近/最常使用图块”和置顶来代替）
2.  **WASD、或单击/长按四个箭头按钮：**滚动大地图，还可以单击“大地图”按钮观看全景。
3.  **Ctrl+W/A/S/Z/X/C/V/Y：**关闭、全选、保存、撤销、剪切、复制、粘贴、重做绘图等操作。
4.  **PageUp/PageDown或滚轮：**切换楼层。
5.  **ESC、Delete：**取消选中并保存、删除选中点的图块和事件。（需要保存时“保存地图”按钮也会变色提示）
6.  **地图上单击、双击、右击：**地图选点、选中该点的素材并自动定位到素材区、弹出菜单（您可以进行出生点、机关门、上下楼的快速绑定等操作）
7.  **地图上左键或右键拖动：**交换两个点的图块和事件、框选一些点供Ctrl+X/C/V剪切复制。
8.  **素材区最右侧的tileset区域左键拖动：**框选一批素材，供在地图区单击批量绘制或左键拖动平铺。（右击或触屏点击则是手动输入所需的宽高）
9.  **事件编辑器中Ctrl+S/Z/X/C/V/Y、右击、双击等：**执行相应操作，如双击可以进入多行编辑/绘制预览/弹窗选文件/地图选点，地图选点时右击可以选多个点。

## 快速上手

针对红海塔作者，这里给出一个极简版的造塔流程，您可以据此造出一座没有任何事件（包括但不限于难度分歧、老人、木牌、商人和商店等）的塔：
1.  编辑勇士的出生点和初始属性：
    1.  滚轮切换到主塔0层，右击地图任意位置，绑定出生点为此点（会有一个大大的白色S字母显示出来）。
    2.  按下B键切换到“全塔属性”，填写`core.firstData.hero`中勇士的各项初始属性，以及一些全局的数值（如四种血瓶和三种宝石的效果、破甲反击净化的比例等，注意“唯一英文标识符”name一定要修改！）。
    3.  在数据区使用滚轮向下翻（您可以随时折叠全塔属性的几大部分），按需编辑下面的大量勾选框（主要就是状态栏的那些显示项）。
2.  从素材区选择各种各样的非NPC图块绘制在地图上，如门、怪物、道具、楼梯、路障、箭头、踩灯、箱子等。每当选中一个素材时，数据区就进入了“图块属性”模式，您可以去填写道具的一些说明、以及修改其他一些图块的可通行性等。注意滑冰（触发器为ski）要画在背景层。如果您需要制作机关门，请简单地将机关门和守卫（不支持阻击怪和炸弹）画在地图上，再右击机关门快速绑定即可。（看到机关门左下角出现橙色小方块、守卫们左下角出现黄色小方块即说明绑定成功）
3.  如果您需要制作多个楼层，只需按下Z键将数据区切换到“地图编辑”模式，然后“新建空白地图”即可，不同楼层之间简单地通过楼梯来往返，您可以将楼梯画在地图上再右击快速绑定即可。（看到楼梯左下角出现绿色小方块即说明绑定成功）各个楼层的属性可以通过按下V键将数据区切换到“楼层属性”模式来填写，如能否使用楼传、是否为地下层、画面色调、宝石血瓶倍率等。
4.  从素材区选择您所使用的各种怪物，在数据区填写它们的各项属性，其中“特殊属性”是通过多选框来编辑的。
5.  游戏胜利的触发：滚轮切换到样板1层，单击地图上的公主，按下Ctrl+C复制。滚轮切换回您的boss层，（记得给boss设置不可被炸哦）单击boss身后的任何一个空格子，按下Ctrl+V粘贴即可。这样玩家触碰到公主游戏就会胜利。

## 控制台调试

![image](img/console2.jpg)

HTML5项目都是可以进行控制台调试的，下面以edge浏览器为例介绍其部分操作：

首先按下F12键（部分键盘没有此键或需与Fn键一起按）或Ctrl+Shift+I，打开开发人员界面。

可以看到它分为“元素”、“控制台”、“调试程序”、“性能”等多个部分：
1.  **元素：**您可以在这里对游戏和编辑器的各HTML和css元素进行查看和临时的修改，譬如您想观察游戏在竖屏的表现，只需将窗口拉到瘦高。
2.  **性能：**您可以在这里对游戏的任何一段脚本进行性能分析，观察其中各行的执行频率和耗时，从而确定优化的方向。
3.  **调试程序：**您可以在这里查看游戏的源码，包括project文件夹的functions.js和plugin.js（脚本编辑和插件编写）以及整个libs文件夹，并进行断点调试。
4.  **控制台：**最常使用的部分，当编辑器或游戏打不开、卡死、或者不按您的预想运作时您就需要查看这里的报错信息。这里也是各种API输入的地方，譬如上图中您可以看到全部的插件函数。

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

- `core.status.floorId` 获得当前层的floorId。
- `core.status.thisMap` 获得当前地图信息。例如`core.status.thisMap.blocks`可以获得当前层所有图块。
- `core.floors` 获得所有楼层的初始信息。例如`core.floors[core.status.floorId].events`可以获得当前层所有事件。
- `core.status.hero` （或简写为hero）获得当前勇士状态信息。例如`core.status.hero.atk`就是当前勇士的攻击力数值。
- `core.material.enemys` 获得所有怪物信息。例如`core.material.enemys.greenSlime`就是获得绿色史莱姆的属性数据。
- `core.material.items` 获得所有道具的信息。例如`core.material.items.pickaxe`就是获得破墙镐的信息。
- `core.debug()` 开启调试模式；此模式下可以按住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/自定义变量的值，可以设为`null`表示删除。
- `core.getFlag('xxx', 10)` 获得某个flag/自定义变量的值；如果该项不存在（未被定义），则返回第二个参数的值。
- `core.hasFlag('xxx')` 返回是否存在某个变量且不为0。等价于`!!core.getFlag('xxx', 0)`。
- `core.removeFlag('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()` 重置当前层地图。
- ……

更多关于控制台调试和脚本的信息可参见[脚本](script)和[API列表](api)。

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

[继续阅读下一章：元件说明](element)