rd.rdlevel.cn/pages/floatingtext.md
OLDREDSTONE 318bbf3be2 new
2025-06-01 11:35:11 +08:00

148 lines
7.3 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

# 浮动文字
## 浮动文字基本设置
如果我们要制作一首歌曲的谱面,一般而言都会考虑将歌词显示在画面中,这是一种简单粗暴,但能快速提升整体观感的做法。要在画面中加上字幕,我们需要在紫色的版块中找到**浮动文字**事件。
选择这个事件后我们可以发现最开始的两行很有Word的感觉。
![](../images/floatingtext-fontslyle.png)
**aA**:可以调整字号大小,字号基本上没有上限,如果设置太大的话,文字就会**超出屏幕**。
**旋转**:可以旋转浮动文字框,注意是**整个文本框的旋转**,而不是每个字单独旋转。
**AB**:两个颜色分别是字的颜色和字符描边的颜色,刚才所说的字号里面,**只会包含字符本体的大小**,描边是没有算在里面的。
**↔**:指定浮动文字横向的基准位置。
**↕**:指定浮动文字纵向的基准位置。
![](../images/floatingtext-position.png)
**位置**:指的是基准的位置。可以按一下准星符号再在预览画面窗口中点选位置。有条件精准找到位置的话还是建议在`X``Y`栏中输入具体数值。**点击右边的`%`按键可以切换屏幕像素点和屏幕百分比两种输入方式**。
![不同基准在同一位置下的不同效果](../images/floatingtext-align.png)
**文字**:就是输入文本的地方了。纯英文文本是使用的像素字体,带有中文字符的情况下会全部变成矢量字体,如果你想要纯英文文本也显示矢量字体的话,可以回车键再在第二行输入一些中文,如下图所示。当文字框里没有中文时就无法输入中文,需在游戏外部打好要插入的文本,并通过复制粘贴的方式输入。
![](../images/floatingtext-example.png)
另外,目前已知中文繁体以及日语假名都可以在画面中正常显示。
![二次元歌曲狂喜](../images/floatingtext-jp.png)
**创建文本递进**:如果想要把一整句歌词按歌词节奏一个一个地显示出来,就需要在文本中使用“`/`”将它们隔开。如果想要一个一个地覆盖掉之前显示的内容,就需要在文本中使用`回车键`将他们隔开。之后点击下面的“创建文本递进”,在工作区里面可以拖动右箭头事件来调整时机。如果你做好了又不想要了,那么再把下面的开启改成关闭即可,无需手动删除。如果你又反悔了,还是想要,再改成开启,又会恢复记录。
```rdview 8 3
ea.FloatingText 1 1;
ea.AdvanceText 2 1;
ea.AdvanceText 3 1;
ea.AdvanceText 4 1;
ea.AdvanceText 5 1;
ea.AdvanceText 6 1;
ea.AdvanceText 7 1;
```
音节的消失方式选择**淡出**就是慢慢消失,**立即**就是瞬间消失,音节显示的时长是按创建文本递进的最后一个事件往后数拍子的。
```rdview 13 3
ea.FloatingText 1 1;
g 3 1 4 1;
g 7 1 0 1 #f80;
ea.AdvanceText 3 1;
g 8 1 4 1;
g 12 1 0 1 #f80;
ea.AdvanceText 8 1;
```
## 更丰富的效果和技巧
这个模块的基本功能就是上面那些,但是实际使用起来其实非常灵活。如果想要制作视觉效果更为丰富的字幕,就需要我们打开脑洞,多去深挖这些基础功能。下面我举几个例子给大家做一些启发。
**1、**如果想一次性显示多行,需要在换行的地方加上`\n`。输入`\/`才能打出“/”。
**2、**文本旋转效果是整个文本框的旋转,如果想要做到每个字都旋转,那么同样需要添加多个浮动文字模块,添加相同的旋转角度。如果想要让文本围绕一个中心旋转,那么直接用准星功能去找位置会方便一些。
**3、**如果在同一时刻同一位置有多个不同的浮动文字,那么字在屏幕中的上下层顺序只和你添加事件的先后顺序有关,先加入的事件在下层,后加入的事件在上层。这个机制无法进行修改。
**4、**如果想要给文本做颜色渐变的效果,可以在相同时间相同位置添加两个浮动文字,其中一个消失方式选择淡出,另一个选择立即,这样就获得了渐变效果。
**5、**把文字递进里面添加很多错误的文字,然后全部一个字一个字回车,就可以做到文字在同一位置的乱码效果。
**6、**在文本的最后放一个竖线“\|”或者下划线“\_”就可以做出打字的效果了。
![](../images/floatingtext-typing.gif)
```
ぼ|
ぼく|
僕|
僕の|
僕のゆ|
僕のゆめ|
僕の夢|
僕の夢
そ|
そう、|
そう、わ|
そう、わた|
そう、わたし|
そう、私|
そう、私の|
そう、私のゆ|
そう、私のゆめ|
そう、私の夢|
```
**7、**创建了一组文本递进之后,只需要双击浮动文字事件本身,整组字幕都会被选中。不需要一个个手动去点选了。
**8、**基准的左中右会影响文本递进效果。靠左时从左向右出现文本递进;靠中时从中间挤向两侧出现文本递进;靠右时从右向左出现文本递进。
**9、**在文本框的最后加一个空行,就可以通过文本递进的方式设置文本的结束时间,避免了一点点数格子的烦恼。
**10、**在文字中的个别字符前面加上`<color=#RRGGBBAA>`,后面加上`</color>`可以改变这几个字的颜色和透明度。关于颜色的介绍由于篇幅关系将放在下一小节。
![](../images/floatingtext-rainbow.png)
对应文本框内容为:
```html
<color=red>Wel</color><color=orange>come </color><color=yellow>to </color><color=green>Won</color><color=aqua>der</color><color=blue>land</color><color=purple>!</color>`<br>
<color=red></color><color=orange></color><color=yellow></color><color=green></color><color=aqua></color><color=blue></color><color=purple></color>
```
## 演示关卡
你以为这里会有一个我们制作的关卡?其实并不。在这里我想介绍的是官方联动关卡`MD-2`,不知道你们在游玩这关感受爆炸难度的同时有没有注意到字幕的表现?如果你没有什么印象的话可以先看看下面这个视频:
<div class="bv"><iframe src="https://player.bilibili.com/player.html?aid=374450491&page=55&autoplay=0" title="BPM 与偏移的校对教程" width="100%" height="100%" scrolling="no" frameborder="no" framespacing="0" allowfullscreen="true"></iframe></div>
看完之后我们再来回忆一下其中一段歌词的表现:
> `夜深了 月光也换了颜色`<br>
> 【换了颜色】字体为黑色
>
> `要更迷幻更鲜艳眩目得赤裸`<br>
> 【鲜艳炫目】字体为亮蓝色
>
> `我也将披上褪浅的音色`<br>
> 【褪浅的音色】消失更早
>
> `逃离这个现实的现在时分的陷落`<br>
> 这句意外的正常
>
> `像逆行在通往大人的公路`<br>
> 【像逆行在】四个字是从右往左出现的,也就是位置基准改成了靠右
>
> `粉红的喇叭裤 墨镜里装星空`<br>
> 【粉红】两字为粉红色,【星空】两字为蓝色和紫色
>
> `忽闪忽灭的影子中`<br>
> 【忽】字反复出现和淡出了几次,【影子】是黑色
>
> `撞见了另一个我`<br>
> 【另一个我】有两份文字略微偏移重叠在一起
有没有发现不管是颜色效果还是显示效果,在设计上都和歌词本身有着些许联系,也就让平淡无奇的歌词字幕一下子变得生动起来。