diff --git a/_sidebar.md b/_sidebar.md index 0608f98..5ea62f6 100644 --- a/_sidebar.md +++ b/_sidebar.md @@ -41,7 +41,7 @@ - [

视觉干扰

](/pages/vfxpro.md) - [

摄像机视效

](/pages/camerafx.md) - [

镜厅

](/pages/hallofmirror.md) - - [

窗口移动

](/pages/windowmove.md) + - [

窗口相关的动画

](/pages/WindowDance.md) - [

](/pages/hand.md) - [

自制角色与精灵资源

](/pages/spritesheet.md) - [

使用精灵

](/pages/decoration.md) diff --git a/images/Window_Content.png b/images/Window_Content.png new file mode 100644 index 0000000..3f9434b Binary files /dev/null and b/images/Window_Content.png differ diff --git a/images/Window_Dance_169ratio.png b/images/Window_Dance_169ratio.png new file mode 100644 index 0000000..9b55b75 Binary files /dev/null and b/images/Window_Dance_169ratio.png differ diff --git a/images/Window_Dance_169ratio_pivot.png b/images/Window_Dance_169ratio_pivot.png new file mode 100644 index 0000000..bcad01a Binary files /dev/null and b/images/Window_Dance_169ratio_pivot.png differ diff --git a/images/Window_Dance_229ratio.png b/images/Window_Dance_229ratio.png new file mode 100644 index 0000000..83b03a9 Binary files /dev/null and b/images/Window_Dance_229ratio.png differ diff --git a/images/Window_Dance_229ratio_pivot.png b/images/Window_Dance_229ratio_pivot.png new file mode 100644 index 0000000..53865da Binary files /dev/null and b/images/Window_Dance_229ratio_pivot.png differ diff --git a/images/Window_Dance_All_or_One.png b/images/Window_Dance_All_or_One.png new file mode 100644 index 0000000..d7d6270 Binary files /dev/null and b/images/Window_Dance_All_or_One.png differ diff --git a/images/Window_Dance_Always_Active.png b/images/Window_Dance_Always_Active.png new file mode 100644 index 0000000..ab353d6 Binary files /dev/null and b/images/Window_Dance_Always_Active.png differ diff --git a/images/Window_Dance_Coordinate_of_All_Room.png b/images/Window_Dance_Coordinate_of_All_Room.png new file mode 100644 index 0000000..4db5c47 Binary files /dev/null and b/images/Window_Dance_Coordinate_of_All_Room.png differ diff --git a/images/Window_Dance_Window_Hidden.png b/images/Window_Dance_Window_Hidden.png new file mode 100644 index 0000000..9eafae7 Binary files /dev/null and b/images/Window_Dance_Window_Hidden.png differ diff --git a/images/Window_Dance_Window_Resize.gif b/images/Window_Dance_Window_Resize.gif new file mode 100644 index 0000000..4e3d7b3 Binary files /dev/null and b/images/Window_Dance_Window_Resize.gif differ diff --git a/images/Window_Dance_fill.gif b/images/Window_Dance_fill.gif new file mode 100644 index 0000000..3af6da0 Binary files /dev/null and b/images/Window_Dance_fill.gif differ diff --git a/images/Window_Dance_fit.gif b/images/Window_Dance_fit.gif new file mode 100644 index 0000000..37e687b Binary files /dev/null and b/images/Window_Dance_fit.gif differ diff --git a/images/Window_Dance_none.gif b/images/Window_Dance_none.gif new file mode 100644 index 0000000..f484d4f Binary files /dev/null and b/images/Window_Dance_none.gif differ diff --git a/pages/WindowDance.md b/pages/WindowDance.md new file mode 100644 index 0000000..addb1cc --- /dev/null +++ b/pages/WindowDance.md @@ -0,0 +1,92 @@ +# 窗口相关的动画 + +在1.0正式版更新后,窗口被单独提取成了一个独立的板块:**窗口板块**。为了避免剧透,这个板块默认是隐藏的,要让这个板块显示出来,我们需要在动作板块先放一个窗口动效事件,或者在编辑器设置中的显示窗口标签栏设置为**总是报告**,这个板块才会显示出来。 + +![“总是报告”设置](../images/Window_Dance_Always_Active.png) + +我们可以看到,窗口事件比以前多了很多。而且4个窗口都像房间板块一样每个窗口都占了一行。所有事件都只会对其所在行对应的窗口生效。接下来将会介绍这些事件的作用和使用方法。 + +## 隐藏窗口 + +窗口的显示和隐藏都在这个事件中,窗口默认只有窗口1是显示,其他窗口默认都是隐藏的,所以如果你需要操作其他窗口,需要把窗口显示出来再进行操作。 + +窗口板块中隐藏状态的窗口会显示灰色,可以通过这个判断你的窗口有没有忘记显示出来。 +![默认状态下只有窗口1是显示的,其他窗口都是隐藏的,所以呈现灰色](../images/Window_Dance_Window_Hidden.png) + +## 窗口动效 + +(谁会,来补充一下,我只用过移动2333) + +## 窗口大小重置 + +想要让窗口大小发生变化,或调整窗口的轴点,都需要借助**窗口大小重置**事件。这个事件的设置项目是这样的: +![](../images/Window_Dance_Window_Resize.gif) + +**大小:** 窗口的目标大小,最大可以设置为`200%, 200%`,如果`x`和`y`同时被设置为了0,则窗口会立刻被重置为初始的大小(即`100%, 100%`)。 + +**缩放模式:** 窗口大小发生变化时内容的缩放模式,具体如下: + + +![填充模式](../images/Window_Dance_fill.gif) +![适应模式](../images/Window_Dance_fit.gif) +![无模式](../images/Window_Dance_none.gif) + +> 如果你的窗口在大小发生变化前后长宽比不变,那么**填充**和**适应**在效果上没有区别。 + +**轴点模式:** 有**默认**和**锚点边缘**两种模式,选择**默认**即和房间移动的轴点没有区别,选择**锚点边缘**则表示选择一条边缘固定不动的情况下进行大小的缩放。 + +> 实际上选择锚点边缘的情况下就是由系统计算轴点的位置,因此在锚点边缘选择左或右时不要把`x`设置为`0%`,在锚点边缘选择上或下时不要把`y`设置为`0%`,否则会出现bug,表现为对应窗口会消失且**无法被任何方式**移动回来,即使通过事件恢复了窗口的大小和轴点。 + +**轴点:** 设置位置和缩放的基准点,类似于精灵图和房间的轴点,此处不再赘述。 + +**动画时长和缓速:** 见过多次了,不再赘述。 + +> 如果你想直观地看看各种移动方式的速度区别,可以[看看这里](https://easings.net/zh-cn)。 + +### 轴点的使用技巧 +我们知道,在窗口大小发生变化时,调整轴点可以改变其缩放的中心。但是实际上,即使窗口不需要缩放,我们也可以通过调整轴点来改变窗口的位置,那么这种操作从效果上看和直接使用窗口移动看似没有什么区别,实际上在一些特殊的需求中,这个方法可以被很巧妙地使用。 + +窗口在移动时,使用的坐标是相对整个屏幕的,而由于不同设备的屏幕分辨率不同,导致有些效果如果用窗口移动来做会在不同分辨率下有不同效果,尤其是当多个窗口之间的位置有配合的时候(如两个窗口紧贴的效果)。 +如在16:9的分辨率下制作的两个窗口紧挨着的效果: +![16:9分辨率下两个窗口紧贴](../images/Window_Dance_169ratio.png) +在其他分辨率下,即使不改变窗口的位置,也可能会有不同的效果(如在22:9分辨率下): +![在更宽的屏幕下,两个窗口无法紧贴](../images/Window_Dance_229ratio.png) +如果想要做出在类似`2-XN`中两个窗口相撞的效果,窗口中间有距离会导致表演效果大打折扣。这时我们可能会想,能不能不以屏幕为基准定位,而是以窗口的大小为基准定位,是不是就可以做到了呢?事实上,**轴点**就解决了这样的问题。 +试想,如果两个窗口在同一个位置,而一个窗口的轴点在左边缘,另一个窗口在右边缘,就可以保证无论在什么样的分辨率下,这两个窗口都一定是紧挨着的。 +![](../images/Window_Dance_169ratio_pivot.png) +![使用轴点后,无论在哪个分辨率下两个窗口都是紧挨的](../images/Window_Dance_229ratio_pivot.png) +所以当你的动画需要多个窗口之间的位置配合时,不妨试试用轴点的移动来代替直接移动窗口。 + +## 设置窗口数量 + +首先需要纠正一个翻译问题,这个事件的正确翻译应为**设置窗口内容**(英文原文: Set Window Content)。真正可以设置窗口数量的事件是前面提到的**隐藏窗口**事件(显示或者隐藏窗口),请大家不要搞错了。 + +这个事件的设置项目是这样的: +![](../images/Window_Content.png) +**内容模式:** 可以选择**一个房间**或**全部房间**,在选择**一个房间**时,下面会出现**房间目录**选项,可以从4个房间里面选择一个,随后这个窗口中只会显示这个房间的内容。在选择全部房间时,这个窗口将会像平常一样显示全部4个房间的内容。 + +> 注意,在选择**一个房间**时,这个房间中的所有房间事件都不会在这个窗口中生效,包括房间移动,淡入淡出房间,房间遮罩等。 + +![左侧窗口是全部房间,右侧房间是一个房间(房间1),可以发现房间移动和房间遮罩在右侧房间都没有生效](../images/Window_Dance_All_or_One.png) + +**位置,缩放和角度:** 类似于摄像头移动的对应参数。在内容模式为**一个房间**时,位置是对应房间区域的对应坐标(左下角是`(0%, 0%)`,右上角是`(100%, 100%)`),在选择**全部房间**时,位置是在一个**长宽均为一个房间默认长宽的2倍的大区域**中的位置(如果需要定位到一个处于默认位置和默认大小的房间的左下角,位置是`(25%, 25%)`,右上角则是`(75%,75%)`,正中心依然是`(50%, 50%)`),但是由于窗口默认大小和一个窗口的默认大小是相同的,因此如果不改变窗口的大小,依然只能显示一个房间大小的区域。 +![上图中黄色区域是一个处于默认位置和默认大小的房间,蓝色区域是全部房间的坐标区域](../images/Window_Dance_Coordinate_of_All_Room.png) +无论选择哪种内容模式,超出区域范围的内容都会被裁剪。 + +**时长和缓速:** 略 + +## 重新排列窗口 +类似于房间板块的**重新排列房间**,可以设置窗口的上下关系。 + +## 设置主窗口 +将对应的窗口设置为主窗口,对话,顶部护士灯光,状态牌等内容将在主窗口显示。 + +## 设置窗口名称 +修改窗口的标题。在动作选择**设置**的时候,会直接设置窗口的标题;在动作选择**增补**的时候,会在原来标题的后面增加内容;在动作选择**重置**的时候,会将标题重置为`Rhythm Doctor`。 + +## 设置桌面颜色 +修改模拟移动时桌面的颜色,如果不打开起始颜色,则表示从当前颜色渐变为结束颜色,如果打开起始颜色,效果将类似于**自定义闪烁**。 \ No newline at end of file