Support Animate

docs/element.md

@@ -149,6 +149,42 @@ floorId指定的是目标楼层的唯一标识符（ID）。
 
 可以指定time，指定后切换动画时长为指定的数值。
 
+## 动画和天气系统
+
+现在我们的H5魔塔支持播放动画，也支持天气系统了。
+
+要播放动画，你需要先使用“RM动画导出器”将动画导出，放在animates目录下，然后在main.js中定义。
+
+``` js
+this.animates = [// 在此存放所有可能使用的动画，必须是animate格式，在这里不写后缀名
+    // 动画必须放在animates目录下；文件名不能使用中文，不能带空格或特殊字符
+    "hand", "sword", "zone", "yongchang", "thunder" // 根据需求自行添加
+]
+```
+
+!> 动画必须是animate格式，名称不能使用中文，不能带空格或特殊字符。
+
+目前暂时不支持带旋转和翻转的帧。
+
+导出动画时可能会进行一些压缩以节省流量，因此清晰度可能不如原版。
+
+动画播放时，是按照每秒20帧的速度（即50ms/帧）。
+
+定义完毕后，我们可以调用`animate`事件来播放该动画，有关事件的详细介绍请参见[事件](event)。
+
+!> 播放录像时，将默认忽略所有动画。
+
+目前天气系统只支持雨和雪两种天气。
+
+在每层楼的剧本文件里存在一个weather选项，表示该层楼的默认天气。
+
+``` js
+// 该层的默认天气。本项可忽略表示晴天，如果写则第一项为"rain"或"snow"代表雨雪，第二项为1-10之间的数代表强度。
+"weather": ["snow",5] 
+```
+
+我们也可以使用`setWeather`事件来设置当前天气，有关事件的详细介绍请参见[事件](event)。
+
 ## 背景音乐
 
 本塔支持BGM和SE的播放。

docs/event.md

@@ -530,21 +530,43 @@ time为可选的，指定的话将作为楼层切换动画的时间。
 
 使用disableShop可以永久禁用全局商店直到再次被openShop打开为止。有关全局商店的说明可参见[全局商店](#全局商店)。
 
+### animate：显示动画
+
+我们可以使用 `{"type": "animate"}` 来显示一段动画。
+
+有关动画的详细介绍可参见[动画和天气系统](element#动画和天气系统)。
+
+``` js
+"x,y": [ // 实际执行的事件列表
+    {"type": "animate", "name": "yongchang", "loc": [1,3]}, // 在(1,3)显示“咏唱魔法”动画
+    {"type": "animate", "name": "zone", "loc": "hero"}, // 在勇士位置显示“领域”动画
+    {"type": "animate", "name": "hand"} // 可以不指定loc，则默认为当前事件点
+]
+```
+
+name为动画名，**请确保动画在main.js中的this.animates中被定义过。**
+
+loc为动画的位置，可以是`[x,y]`表示在(x,y)点显示，也可以是字符串`"hero"`表示在勇士点显示。
+
+loc可忽略，如果忽略则显示为事件当前点。
+
+在动画播放结束后才会继续执行下一个事件。
+
 ### showImage：显示图片
 
 我们可以使用 `{"type": "showImage"}` 来显示一张图片。
 
 ``` js
 "x,y": [ // 实际执行的事件列表
-    {"type": "showImage", "name": "bg.png", "x": 231, "y": 297}, // 在(231,297)显示bg.png
-    {"type": "showImage", "name": "1.png", "x": 109, "y": 167}, // 在(109,167)显示1.png
+    {"type": "showImage", "name": "bg", "loc": [231,297]}, // 在(231,297)显示bg.png
+    {"type": "showImage", "name": "1", "loc": [109,167]}, // 在(109,167)显示1.png
     {"type": "showImage"} // 如果不指定name则清除所有图片。
 ]
 ```
 
 name为图片名。**请确保图片在main.js中的this.pngs中被定义过。**
 
-x和y为图片左上角坐标，以像素为单位进行计算。
+loc为图片左上角坐标，以像素为单位进行计算。
 
 如果不指定name则清除所有显示的图片。
 

docs/personalization.md

@@ -32,22 +32,24 @@
 要启用这个功能，我们首先需要在`main.js`中将可能的图片进行加载。
 
 ``` js
-this.pngs = [ // 在此存放所有可能的背景图片；背景图片最好是416*416像素，其他分辨率会被强制缩放成416*416
-    // 建议对于较大的图片，在网上使用在线的“图片压缩工具”来进行压缩，以节省流量
-    "bg.png", // "yewai.png",
+this.pngs = [ // 在此存放所有可能使用的图片，只能是png格式，可以不写后缀名
+    // 图片可以被作为背景图（的一部分），也可以直接用自定义事件进行显示。
+    // 图片名不能使用中文，不能带空格或特殊字符；可以直接改名拼音就好
+    // 建议对于较大的图片，在网上使用在线的“图片压缩工具(http://compresspng.com/zh/)”来进行压缩，以节省流量
+    "bg", // 依次向后添加
 ];
 ```
 
 !> 背景素材只支持png格式。
 
-!> 请使用网上的一些[在线图片压缩工具](http://www.asqql.com/gifzip/)对png图片进行压缩，以节省流量。一张500KB的png图片可以被压缩到20-30KB，显示效果不会有太大差异。
+!> 请使用网上的一些[在线图片压缩工具](http://compresspng.com/zh/)对png图片进行压缩，以节省流量。一张500KB的png图片可以被压缩到20-30KB，显示效果不会有太大差异。
 
 之后，我们可以在每层剧本的`"png"`里来定义该层的默认背景图片素材。
 
 ``` js
-"png": [[x,y,"bg.png"]], // 背景图；你可以选择一张或多张png图片来作为背景素材。
+"png": [[x,y,"bg"]], // 背景图；你可以选择一张或多张png图片来作为背景素材。
 "png": [], // 无任何背景图
-"png": [[1,1,"house.png"], [6,7,"house2.png"]] // 在(1,1)放一个house.png，且(6,7)放house2.png
+"png": [[1,1,"house"], [6,7,"house2"]] // 在(1,1)放一个house.png，且(6,7)放house2.png
 ```
 
 png为一个数组，代表当前层所有作为背景素材的图片信息。