forked from RDCNWebs/rd.rdlevel.cn
179 lines
10 KiB
Markdown
179 lines
10 KiB
Markdown
# 轨道移动
|
||
|
||
## 默认轨道位置
|
||
|
||
|
||
当我们在同一房间里设置了多个轨道的时候，角色位置会自动生成在屏幕上。不同的轨道数量下默认的位置也会不同：
|
||
|
||
* 一根轨道在屏幕的`(9.94%, 50.00%)`处
|
||
* 两根轨道在屏幕的`(9.94%, 60.61%)`,`(9.94%, 39.39%)`处
|
||
* 三根轨道在屏幕的`(9.94%, 71.21%)`,`(9.94%, 50.00%)`,`(9.94%, 28.79%)`处
|
||
* 四根轨道在屏幕的`(9.94%, 81.82%)`,`(9.94%, 60.61%)`,`(9.94%, 39.39%)`,`(9.94%, 18.18%)`处
|
||
|
||
|
||
|
||
> 此图片已过时，正确的请看下面：
|
||
|
||
<div class="theme-positions" id="theme-positions">
|
||
<div class="column ccharacter"></div>
|
||
<div class="column c1"></div>
|
||
<div class="column c2"></div>
|
||
<div class="column c3"></div>
|
||
<div class="column c4"></div>
|
||
<div class="column c5"></div>
|
||
<div class="column ccenter"></div>
|
||
<div class="column c6"></div>
|
||
<div class="column c7"></div>
|
||
<div class="column cheart"></div>
|
||
<div class="row r1"></div>
|
||
<div class="row r2"></div>
|
||
<div class="row r3"></div>
|
||
<div class="row r4"></div>
|
||
<div class="row r5"></div>
|
||
<div class="row r6"></div>
|
||
<div class="row r7"></div>
|
||
<div class="selectbox"></div>
|
||
<div class="infobox">
|
||
<p class="per"><span class="x"></span>, <span class="y"></span></p>
|
||
<p class="px"><span class="x"></span>, <span class="y"></span></p>
|
||
<p class="other"></p>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
此处的坐标原点为屏幕左下角，轨道的参考位置是人物像素画的中心点。如果任其按默认位置排布，会显得有些缺乏设计感。
|
||
|
||
|
||
|
||
## 轨道的移动
|
||
|
||
想要让轨道移动位置，变大变小，以及旋转，都要依靠紫色的版块中的**移动轨道**事件。里面可以设置的项目很多，是这样的：
|
||
|
||
|
||
|
||
> 位置，大小，角度，轴点这四个选项都可以按下这些字所在的位置来激活和关闭。关闭则表示不产生变化。
|
||
|
||
**轨道：**选择需要操作的轨道。
|
||
|
||
**目标：**可以选择移动整个轨道；移动角色与轨道的相对位置；移动心脏与轨道的相对位置。
|
||
|
||
**自定义位置：**选择关闭时无需输入坐标，游戏会为房间内所有非自定义位置的轨道平均分配位置。所有轨道默认均处于自定义位置关闭的状态。
|
||
|
||
**位置：**将轨道移动到填写的位置，默认参考的是轨道人物的中心点坐标，`x`为横坐标，`y`为纵坐标（左下角坐标：`0%, 0%`；右上角坐标：`100%, 100%`），左侧的红十字准星选择后可直接点击视窗选择位置。点击右方的`%`按钮可以改为输入像素值（左下角坐标：`0, 0`；右上角坐标：`352, 198`）。如果填写的值小于`0%`或者大于`100%`轨道会移动到屏幕之外，但是是可行的。
|
||
|
||
**大小：**轨道的大小，分为`x`（轨道宽度，即横向）和`y`（轨道高度，即纵向）两个变量，单位必须为百分比（`%`）而不能是像素，这点需要注意（初始大小为`x: 100%, y: 100%`）。注意，这两个值都是可以填写负数的，例如`x: -100%`即为水平镜像翻转，`y: -100%`即为垂直镜像翻转。
|
||
|
||
**角度：**即旋转的角度（一周`360°`），正数为顺时针转动，负数为逆时针转动。计算规则为与`0°`（初始位置）的夹角，而非与当前位置的夹角。打个比方第一次旋转了`90°`，第二次还想再旋转`90°`的话就应该填写`180°`，第二次想旋转回原始位置的话就应该填写`0°`。
|
||
|
||
**轴点：有关轴点的详细理解见下文。**
|
||
|
||
**动画时长：**执行动画的时长，单位为节拍。如果此处填写`0`则是瞬间完成移动。填写负数则视为`0`。
|
||
|
||
**缓速：**动画的速度变化，可自行尝试。这东西在很多需要持续一段时间的特效里都会存在，里面会有很多模式，只要把握以下原则就能快速明白了：`In`代表由慢至快，`Out`代表由快至慢，`InOut`代表由慢至快再变慢。后面不同的形式也就是快慢速的细微差距，可以根据自己的需要慢慢尝试。
|
||
|
||
**加速/减速：**在一段时间内加速/减速，相当于自定义缓速。如果此处填写`0`则是瞬间完成加速/减速。填写负数则视为`0`。
|
||
|
||
> 如果你想直观地看看各种移动方式的速度区别，可以[看看这里](https://easings.net/zh-cn)。
|
||
|
||
## 轴点
|
||
|
||
轴点影响的是轨道位置的判断和旋转的方式，仅有一个变量，`0%`为轨道的左端角色的中心位置，`100%`为轨道的右端心脏的中心位置；默认不开启则为轨道左侧角色的正中心。
|
||
|
||
**轴点对于轨道位置基准的影响**：你在位置中填写的坐标即为轴点将要移动至的坐标。如果轴点为默认值，则轨道位置按轨道人物的正中心计算。如果轴点设置为`0%`，则填写的坐标为角色的中心位置将要移动至的坐标；如果轴点设置为`100%`，则填写的坐标为心脏的中心位置将要移动至的坐标。
|
||
|
||
由此观之，即使轨道位置坐标不变化，但轴点改变了的话，轨道在画面中的实际位置还是会变化。
|
||
|
||
**轴点对于轨道大小的影响**：没有。
|
||
|
||
**轴点对于轨道旋转效果的影响**：轨道旋转时的旋转中心即为轴点的位置。如果轴点为默认值，则绕轨道角色的中心位置旋转。如果轴点设置为`0%`，则绕轨道角色的中心位置旋转；如果轴点设置为`100%`，则绕轨道心脏的中心位置旋转。
|
||
|
||
当轨道已被旋转后就不要轻易改变轴点，改变轴点后先前的旋转效果都会跟着被牵连，这时运动就会变成异常复杂。例如将轴点设置为`0%`并旋转`90°`，轨道就会绕角色顺时针旋转90度，然后再把轴点改为`100%`，轨道就会变化成绕心脏顺时针旋转90度的样子。
|
||
|
||
既然后续轴点的改变能影响到先前的旋转和缩放的参考位置，这个时候就需要额外添加一个轨道移动来做补偿，以消除改变轴点之后轨道产生的移动，具体的补偿方式需要你在实际应用中慢慢琢磨。如果你能试着复原下面这个四方运动，那相信你已经完全理解轴点的概念了。
|
||
|
||
|
||
|
||
## 移动轨道的技巧
|
||
|
||
这一版块我们介绍一个轨道移动的组合方式，不用把这几个例子作为教科书来看待，这只是为了引导每一个作者开拓自己的脑洞。轨道移动的方式是多种多样的。
|
||
|
||
1、**画弧线：**x和y坐标可以单独设置，如果只想移动x轴，那么可以把y轴空着不填，这个时候再添加一个只移动y轴而把x轴空着不填的移动，它们之间就是互相独立的，允许有不同的时长和缓速方式。
|
||
|
||
这套动作的特点在于y轴上`OutSine`和`InSine`的交替，配合线性的x轴就形成了正弦曲线轨迹。
|
||
|
||
|
||
|
||
如果删掉x轴移动，那么就会变成原地弹跳。
|
||
|
||
如果缩短时长，那么跳跃就会变得更加动感，可以从按下空格的时间点开始设置一套这样的移动，就变成随着按拍小跳一下。`3-1`的末尾就出现了这样的小跳。
|
||
|
||
如果延长时长，那么跳跃就会变得更加顺滑，像是`2-3N`博美犬一样随着节奏上下舞动。
|
||
|
||
2、**横向翻转：**把x坐标设置为`-100%`轨道就横向翻转过来了，这样的设置其实总的来说会给读谱增加一些难度，尤其是正反轨道同时存在的情况下。因为在玩顺了官方谱的情况下我们实际上已经形成一些惯性思维了，从左到右的心跳能够更快地识别，但是从右到左会相对来说慢一些。
|
||
|
||
3、**多轨道：**像画画奖励关那样，有时会需要一个角色多条轨道，甚至一个角色既有单发拍子又有普通拍子，这是怎么做到的呢？
|
||
|
||
其实原理也不复杂，一条轨道正常显示，另一条轨道在隐藏角色中选择“仅显示轨道”或是设置轨道角色时选择<font color="red">×</font>；然后把两个轨道的坐标设置得相同即可。如果想要更为动感，可加入旋转等动画以增添风味。
|
||
|
||
|
||
4、**移动轨道到其他房间：**当移动轨道的距离超过`852.2727%`或者是`3000px`之后，轨道就会被强制移动到相邻的房间去。这种方法可以让轨道超出每个房间最多四条的限制，但是有小概率发生一些问题，非必要情况下最好不要做这种骚操作。
|
||
|
||
5、**移动角色和心脏：**角色和心脏的移动是以他们在轨道中的位置为原点来移动的，比如填写`x: 0, y: 20px`则角色或者心脏向上移动20个像素。你可以使用这个功能把整个轨道挪到屏幕外面去，再以此为原点把心脏挪回来，就可以做到在屏幕内只显示心脏。
|
||
|
||
## 旋转轨道
|
||
|
||
> 目前该事件还不稳定，部分动作可能与轨道移动有冲突。
|
||
|
||
如果想要实现`6-2`马克一人多轨的情况就可以使旋转轨道事件。
|
||
|
||
### 连接
|
||
|
||
|
||
|
||
将`轨道`**连接**`到轨道`。
|
||
|
||
### 断开
|
||
|
||
|
||
|
||
将`轨道`**断开**。
|
||
|
||
### 旋转
|
||
|
||
|
||
|
||
将`轨道`**旋转**`角度`度。
|
||
|
||
### 均速旋转
|
||
|
||
|
||
|
||
`轨道`在每拍**均速旋转**`角度`。
|
||
|
||
### 波动旋转
|
||
|
||
|
||
|
||
`轨道`在每拍`频率`次**波动旋转**`增幅`度。
|
||
|
||
### 合并
|
||
|
||
|
||
|
||
将`轨道`转到`角度`度是**合并**。
|
||
|
||
### 分割
|
||
|
||
|
||
|
||
将`轨道`从主轨道上**分割**出来，并旋转到`角度`度。
|
||
|
||
## 轨道重排序~~重排序：行~~
|
||
|
||
将轨道转移到其他房间，或者改变轨道的层级
|
||
|
||
## 演示关卡
|
||
|
||
版面已经占的有些多了，更多的轨道移动脑洞我们留在演示关卡中间。
|
||
|
||
<div class="bv"><iframe src="https://player.bilibili.com/player.html?aid=209214426&page=4&autoplay=0" title="BPM 与偏移的校对教程" width="100%" height="100%" scrolling="no" frameborder="no" framespacing="0" allowfullscreen="true"></iframe></div> |