forked from RDCNWebs/rd.rdlevel.cn
Merge branch 'new'
This commit is contained in:
OLDREDSTONE
commit
2d6125b082
24
_sidebar.md
24
_sidebar.md
@ -11,23 +11,22 @@
|
||||
|
||||
- [<img src="/indexicon/Intro.png"/><p>序</p>](/pages/intro.md)
|
||||
- [<img src="/indexicon/changelog.png"/><p>更新信息</p>](/pages/changelog.md)
|
||||
- 入门：基础
|
||||
- 基础：熟悉编辑器
|
||||
- [<img src="/indexicon/changegameversion.png"/><p>修改游戏版本</p>](/pages/changegameversion.md)
|
||||
- [<img src="/indexicon/importandexport.png"/><p>导入与导出</p>](/pages/importandexport.md)
|
||||
- [<img src="/indexicon/createbuiltincharacter.png"/><p>创建游戏内置角色</p>](/pages/createbuiltincharacter.md)
|
||||
- [<img src="/indexicon/editorinterface.png"/><p>编辑器界面与快捷键</p>](/pages/editorinterface.md)
|
||||
- 入门：基础机制
|
||||
- [<img src="/indexicon/importandexport.png"/><p>导入与导出</p>](/pages/importandexport.md)
|
||||
- 基础：游戏机制
|
||||
- [<img src="/indexicon/createbuiltincharacter.png"/><p>创建游戏内置角色</p>](/pages/createbuiltincharacter.md)
|
||||
- [<img src="/indexicon/classicbeat.png"/><p>普通拍子</p>](/pages/classicbeat.md)
|
||||
- [<img src="/indexicon/oneshotbeat.png"/><p>单发拍子</p>](/pages/oneshotbeat.md)
|
||||
- [<img src="/indexicon/holdbeat.png"/><p>长按</p>](/pages/holdbeat.md)
|
||||
- 基础：文字
|
||||
- [<img src="/indexicon/floatingtext.png"/><p>浮动文字</p>](/pages/floatingtext.md)
|
||||
- [<img src="/indexicon/captions.png"/><p>其他文字事件</p>](/pages/captions.md)
|
||||
- 基础：轨道特效
|
||||
- 基础：基本特效
|
||||
- [<img src="/indexicon/moverow.png"/><p>轨道移动</p>](/pages/moverow.md)
|
||||
- [<img src="/indexicon/settheme.png"/><p>场景与主题</p>](/pages/settheme.md)
|
||||
- [<img src="/indexicon/rowfx.png"/><p>轨道视效</p>](/pages/rowfx.md)
|
||||
- 进阶：节奏设计
|
||||
- [<img src="/indexicon/settheme.png"/><p>场景与主题</p>](/pages/settheme.md)
|
||||
- [<img src="/indexicon/captions.png"/><p>文字事件</p>](/pages/captions.md)
|
||||
- [<img src="/indexicon/vfx.png"/><p>视觉效果</p>](/pages/vfx.md)
|
||||
- 进阶：关卡设计
|
||||
- [<img src="/indexicon/moreclassicbeats.png"/><p>普通拍的衍生节奏型</p>](/pages/moreclassicbeats.md)
|
||||
- [<img src="/indexicon/moreoneshotbeats.png"/><p>单发拍的衍生节奏型</p>](/pages/moreoneshotbeats.md)
|
||||
- [<img src="/indexicon/beatpatterndesign.png"/><p>采音和节奏设计</p>](/pages/beatpatterndesign.md)
|
||||
@ -36,15 +35,12 @@
|
||||
- [<img src="/indexicon/twoplayers.png" width="64px"/><p>双人模式设计</p>](/pages/twoplayers.md)
|
||||
- [<img src="/indexicon/accessibledesign.png"/><p>无障碍设计</p>](/pages/accessibledesign.md)
|
||||
- 进阶：视觉特效
|
||||
- [<img src="/indexicon/room.png"/><p>房间</p>](/pages/room.md)
|
||||
- [<img src="/indexicon/camera.png"/><p>镜头移动</p>](/pages/camera.md)
|
||||
- [<img src="/indexicon/roomfx.png"/><p>房间视效</p>](/pages/roomfx.md)
|
||||
- [<img src="/indexicon/camerafx.png"/><p>镜头带来的额外视效</p>](/pages/camerafx.md)
|
||||
- [<img src="/indexicon/camerafx.png"/><p>摄像机视效</p>](/pages/camerafx.md)
|
||||
- [<img src="/indexicon/hallofmirror.png"/><p>镜厅</p>](/pages/hallofmirror.md)
|
||||
- [<img src="/indexicon/vfx.png"/><p>视觉干扰</p>](/pages/vfx.md)
|
||||
- [<img src="/indexicon/windowmove.png"/><p>窗口移动</p>](/pages/windowmove.md)
|
||||
- [<img src="/indexicon/hand.png"/><p>手</p>](/pages/hand.md)
|
||||
- 进阶：自制素材
|
||||
- [<img src="/indexicon/character.png"/><p>自制角色与精灵资源</p>](/pages/spritesheet.md)
|
||||
- [<img src="/indexicon/decoration.png"/><p>使用精灵</p>](/pages/decoration.md)
|
||||
- [<img src="/indexicon/assets.png"/><p>场景资源</p>](/pages/assets.md)
|
||||
|
||||
@ -86,6 +86,7 @@
|
||||
<script src="/script/docsify-copy-code.min.js"></script>
|
||||
<script src="/script/switchLightDarkMode.js"></script>
|
||||
<script src="/script/otto.js"></script>
|
||||
<script src="/script/custommethod-search.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/prismjs@1/components/prism-yaml.js"></script>
|
||||
<script type="module" src="/script/special.js"></script>
|
||||
</body>
|
||||
|
||||
@ -1,44 +1,5 @@
|
||||
# 场景资源
|
||||
|
||||
## 背景和前景图片
|
||||
|
||||
在房间的前后关系里我们提到了背景图片和前景图片这两个概念，也就是说，除了使用编辑器内自带的一些主题之外，其实自己也是可以自定义画面的背景和前景图案的。这个功能同样十分灵活，但是如果想要完全靠自己来原创或是临摹背景图片的话，可能需要对画像素画有一些掌握。
|
||||
|
||||
选择紫色的版块，放置一个**设置背景**的事件，发现里面有两种形式，一种是纯色，这个比较好理解，唯独要注意的是**纯色的默认值是黑色而不是透明**，另一种是插入图片。
|
||||
|
||||
> 插入的图片必须是.png格式，如果你是自己画背景图，建议使用画布大小为352\*198像素。
|
||||
|
||||
颜色选项，看似意义不明，但其实也有一定的用处。如果你导入的图片只有纯白和透明两种颜色，这个功能就可以为纯白的部分染色，染成你自己设置的颜色。但是因为一次只能设置一种颜色，使用起来也有些限制。
|
||||
|
||||
缩放功能其实类似于操作系统里壁纸的填充方式，具体效果点开小箭头查看。
|
||||
|
||||
<details><summary><strong>填充方式</strong></summary>
|
||||
<img src="../images/assets-fillmode.png" alt="填充方式图例" />
|
||||
<ul>
|
||||
<li><strong>填满：</strong>将画面拉伸到横纵全部填满屏幕。要注意的是，如果你塞进去一张高清图，编辑器也会把它缩小到352\*198像素来适应画面，而且这个缩放机制是像素化的，画面会变得非常模糊。</li>
|
||||
<li><strong>拉伸：</strong>将画面等比拉伸直到左右垂直线对齐屏幕。</li>
|
||||
<li><strong>等比拉伸：</strong>将画面等比拉伸直到上下水平线对齐屏幕。</li>
|
||||
<li><strong>居中：</strong>就是按原画面大小放在正中间。</li>
|
||||
<li><strong>平铺：</strong>像铺瓷砖一样铺满屏幕。</li>
|
||||
</ul>
|
||||
</details>
|
||||
|
||||
> 如果你想做一个动图效果，需要把.gif拆解成一连串的.png图片，在选择图片时同时选择所有的图点击确定。接下来就会多出一个设置帧数的选项，来确定动图的播放速度。帧数 = \(背景图总画面数 / 一个循环占节拍数量\) \* 曲速/60。
|
||||
设置背景一样，但使用这个功能的主要目的还是为了能产生一个图片覆盖轨道和手的效果，这样在画面效果的处理上可以更加灵活。
|
||||
|
||||
## 平铺背景
|
||||
|
||||
唯独平铺选项会多冒出来一个速度设置，它可以让背景图片始终保持设置的速度移动。
|
||||
|
||||
* 在滚屏模式下，效果类似于<code>4-2</code>的天空在慢慢移动，速度和缓速则是调整背景从静止到目标速度的变化过程。
|
||||
* 在脉冲模式下，背景的移动速度变化就是周期性的，用<code>间隔</code>来调整周期。另外，如果你想设计这样的移动背景，在作画的时候也需要考虑画面左右两端和上下两端的连续，否则画面运动起来会感觉到割裂。
|
||||
|
||||
举个例子，公路，山坡，白云，蓝天的运动速度都不一样，毕竟在画面中的远近关系不一样，把他们分别画在四个背景图片里，放在四个房间，然后设置四个移动房间事件，把位置都改为`(50%, 50%)`，把大小都改为`(100%, 100%)`，设置四个背景图片，使用平铺的方式，设置不同的水平移动速度，就得到了在公路上慢慢前进的效果。
|
||||
|
||||
|
||||
|
||||
另外，使用小图片像地砖一样平铺才是更为原本的用法。
|
||||
|
||||
## 还原PV效果
|
||||
|
||||
有些音乐是自带PV/MV/BGA的，直接将原视频的风格或内容搬运到节奏医生中也不失为一种选择。但编辑器也有其自己的像素风格，有节奏医生自己的游戏特色，还原时也要讲究融合。
|
||||
|
||||
@ -1,4 +1,88 @@
|
||||
# 镜头移动
|
||||
# 房间与镜头
|
||||
|
||||
完全掌握了节奏医生的节奏设计之后，我们要把目光放在谱面的视觉呈现上了，这一节我们就从理解“房间”的概念开始。
|
||||
|
||||
编辑器总共支持四个房间，你可以想象成一栋房子有四层楼，每层楼最多住四个人，同时，每层楼的装修可以随意摆设互不干扰。这四层楼不一定刚刚好叠在一起，可以随时移动，互不交叠，只是高度不同。我们飞在空中从上往下看，就能看到目视所及范围内的大楼景象。同时，如果空中飘扬着其他物件，也会被我们的眼睛捕捉到，如果大楼的天花板和地板是透明的，那么地基里有什么东西也会被看到。
|
||||
|
||||
当我们使用**排列显示房间**事件时，房间就只能从上到下地排列在屏幕上，而如果使用**移动房间**事件，则可以随便移动。
|
||||
|
||||
## 排列显示房间
|
||||
|
||||
|
||||
|
||||
将左边的可见房间点亮为黄色，屏幕上就会显示这个房间，高度可以自定义，填写数据后房间高度将自动分配。详细的分配规则点击下方箭头展开。如果你懒得理解分配规则，只需永远保证 **不点亮多余的房间，并且将存在的房间高度总和设置到100%** 即可。
|
||||
|
||||
### 房间分配规则
|
||||
- 如果全部不填，那么
|
||||
所有房间高度为 `25%`；
|
||||
- 否则
|
||||
- 计算已填房间高度的总和 `Sum`
|
||||
- 如果 `Sum = 100%`，那么
|
||||
按实际数据设置房间高度，未填写的视为 `0%`；
|
||||
- 如果 `Sum < 100%`，那么
|
||||
- 如果有未填写房间高度的房间，设个数为 `n`，那么
|
||||
未填写高度的房间高度 `height = (100% - Sum) / n`，即均分未分配的房间高度；
|
||||
- 否则
|
||||
每个房间的房间高度 `height = height * 100% / Sum`，即等比例拉伸房间高度至高度总和为 `100%`；
|
||||
- 如果 `Sum > 100%`，那么
|
||||
每个房间的房间高度 `height = height * 100% / Sum`，即等比例缩小房间高度至高度总和为 `100%`；
|
||||
|
||||
下面还留有一个时长和缓速的选项，这个和轨道移动的时所介绍的设置规律是完全相同的。如果填写0拍就是瞬间完成房间分配。
|
||||
|
||||
> 如果你想直观地看看各种移动方式的速度区别，可以[看看这里](https://easings.net/zh-cn)。
|
||||
|
||||
## 房间的前后关系
|
||||
|
||||
但实际上很多时候我们并不想就让房间这样死板地上下排布，甚至想让这些房间交叠在一起。要做到这一点，我们得先明确各个房间叠在一起的时候，它们的前后关系是怎样的。
|
||||
|
||||
|
||||
|
||||
首先看一个房间内，各种事件的由前往后关系是：
|
||||
|
||||
> [浮动文字]
|
||||
[弹幕效果]
|
||||
[前景图片]
|
||||
[轨道4]
|
||||
[轨道3]
|
||||
[轨道2]
|
||||
[轨道1]
|
||||
[背景图片(图片)]
|
||||
[背景图片(颜色)]
|
||||
|
||||
它们的前后顺序是不可改变的。
|
||||
|
||||
各个房间整体之间又有前后顺序，默认由前往后关系是：
|
||||
|
||||
> [显示状态牌]
|
||||
[应用到:顶部]
|
||||
[房间1]
|
||||
[房间2]
|
||||
[房间3]
|
||||
[房间4]
|
||||
|
||||
四个房间的顺序是可以改变的，只需要在黄色版块内添加一个**重新排序房间**事件，把前后顺序拖动到想要的即可。
|
||||
|
||||
|
||||
|
||||
## 激活其他房间
|
||||
|
||||
在刚打开编辑器的状态下，实际上只能看到房间1。并不是另外三个房间不存在，而是房间大小被设置成了`0%`。在黄色版块中找到**移动房间**事件，事件放置在工作区的哪一行，就是对应的哪个房间被移动。创建三个移动房间事件置于234行，将“大小”设置为`(100%,100%)`，这样所有的房间都以屏幕大小叠在一起了。
|
||||
|
||||
还记得[这里](../pages/settheme.md)提到了**设置主题**事件吗，我们再添加一个“花房·昼”。由于黄色版块不再是空白的，设置主题的事件的右上角出现了新的按钮，这是将事件设置到具体房间的功能。
|
||||
|
||||
|
||||
|
||||
将带有花房·昼主题的事件选择房间4，预览效果会发现我们看到的依然是武士电子，因为现在不透明的房间1完全遮住了房间4。删掉武士电子主题，会发现背景全黑，依然看不到花房。这是因为默认状态下房间并不是透明背景，而是纯黑背景。
|
||||
|
||||
在紫色的版块找到**设置背景**事件，将背景颜色选择为纯透明，应用到123房间。再次预览，终于能看到房间4了。“应用到”选项是可以多选的。
|
||||
|
||||
|
||||
|
||||
有时还会有第五个按钮“顶部”，如果你理解了本节最开头的比喻的话，应用到顶部的事件是直接在大楼与你之间的空中生效的。房间怎么移动都不会影响到顶部。
|
||||
|
||||
|
||||
|
||||
经此示例，相信你已经能理解房间的基本运作原理了。
|
||||
|
||||
## 概述
|
||||
移动房间应该是整个编辑器内灵活性最高的功能之一了。它的灵活性本身并不是基于对编辑器功能的理解的，而是更类似于对摄影或是视频制作手法的理解。我们观看电影也总是会说“镜头语言”，这话同样适用于作谱。合理的镜头运用可以极大程度提升谱面的视觉观感。
|
||||
@ -54,11 +138,6 @@
|
||||
|
||||
|
||||
|
||||
**3、房间透明度**
|
||||
**淡入淡出房间**事件倒是没有太多可说的，调节的是房间整体的透明度。同样也可以选择时长和缓速模式。
|
||||
|
||||
最基本的用法就是把一个房间的透明度从`0`调到`100`，另一个从`100`调到`0`，完成淡入淡出的转场。
|
||||
|
||||
**4、排列显示房间**
|
||||
|
||||
在[这一节](../pages/room.md)我们介绍过这个功能，但是使用这个软件自带的排列显示房间有一个略显僵硬的限制：房间的上下关系是不可变更的。如果想要自己定义谁在上谁在下，那就不能再使用这个默认功能了，需要我们添加移动房间功能来实现。
|
||||
|
||||
@ -1,4 +1,151 @@
|
||||
# 其他文字事件
|
||||
# 文字事件
|
||||
|
||||
## 浮动文字基本设置
|
||||
|
||||
如果我们要制作一首歌曲的谱面，一般而言都会考虑将歌词显示在画面中，这是一种简单粗暴，但能快速提升整体观感的做法。要在画面中加上字幕，我们需要在紫色的版块中找到**浮动文字**事件。
|
||||
|
||||
选择这个事件后，我们可以发现最开始的两行很有Word的感觉。
|
||||
|
||||
|
||||
|
||||
**aA**：可以调整字号大小，字号基本上没有上限，如果设置太大的话，文字就会**超出屏幕**。
|
||||
|
||||
**旋转**：可以旋转浮动文字框，注意是**整个文本框的旋转**，而不是每个字单独旋转。
|
||||
|
||||
**AB**：两个颜色分别是字的颜色和字符描边的颜色，刚才所说的字号里面，**只会包含字符本体的大小**，描边是没有算在里面的。
|
||||
|
||||
**↔**：指定浮动文字横向的基准位置。
|
||||
|
||||
**↕**：指定浮动文字纵向的基准位置。
|
||||
|
||||
|
||||
|
||||
**位置**：指的是基准的位置。可以按一下准星符号再在预览画面窗口中点选位置。有条件精准找到位置的话还是建议在`X`和`Y`栏中输入具体数值。**点击右边的`%`按键可以切换屏幕像素点和屏幕百分比两种输入方式**。
|
||||
|
||||
|
||||
|
||||
**文字**：就是输入文本的地方了。纯英文文本是使用的像素字体，带有中文字符的情况下会全部变成矢量字体，如果你想要纯英文文本也显示矢量字体的话，可以回车键再在第二行输入一些中文，如下图所示。当文字框里没有中文时就无法输入中文，需在游戏外部打好要插入的文本，并通过复制粘贴的方式输入。
|
||||
|
||||
|
||||
|
||||
另外，目前已知中文繁体以及日语假名都可以在画面中正常显示。
|
||||
|
||||
|
||||
|
||||
**创建文本递进**：如果想要把一整句歌词按歌词节奏一个一个地显示出来，就需要在文本中使用“`/`”将它们隔开。如果想要一个一个地覆盖掉之前显示的内容，就需要在文本中使用`回车键`将他们隔开。之后点击下面的“创建文本递进”，在工作区里面可以拖动右箭头事件来调整时机。如果你做好了又不想要了，那么再把下面的开启改成关闭即可，无需手动删除。如果你又反悔了，还是想要，再改成开启，又会恢复记录。
|
||||
|
||||
```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、**在文本的最后放一个竖线“\|”或者下划线“\_”就可以做出打字的效果了。
|
||||
|
||||
|
||||
|
||||
```
|
||||
ぼ|
|
||||
ぼく|
|
||||
僕|
|
||||
僕の|
|
||||
僕のゆ|
|
||||
僕のゆめ|
|
||||
僕の夢|
|
||||
僕の夢
|
||||
|
||||
そ|
|
||||
そう、|
|
||||
そう、わ|
|
||||
そう、わた|
|
||||
そう、わたし|
|
||||
そう、私|
|
||||
そう、私の|
|
||||
そう、私のゆ|
|
||||
そう、私のゆめ|
|
||||
そう、私の夢|
|
||||
```
|
||||
|
||||
**7、**创建了一组文本递进之后，只需要双击浮动文字事件本身，整组字幕都会被选中。不需要一个个手动去点选了。
|
||||
|
||||
**8、**基准的左中右会影响文本递进效果。靠左时从左向右出现文本递进；靠中时从中间挤向两侧出现文本递进；靠右时从右向左出现文本递进。
|
||||
|
||||
**9、**在文本框的最后加一个空行，就可以通过文本递进的方式设置文本的结束时间，避免了一点点数格子的烦恼。
|
||||
|
||||
**10、**在文字中的个别字符前面加上`<color=#RRGGBBAA>`，后面加上`</color>`可以改变这几个字的颜色和透明度。关于颜色的介绍由于篇幅关系将放在下一小节。
|
||||
|
||||
|
||||
|
||||
对应文本框内容为：
|
||||
|
||||
```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>
|
||||
> 【另一个我】有两份文字略微偏移重叠在一起
|
||||
|
||||
有没有发现不管是颜色效果还是显示效果，在设计上都和歌词本身有着些许联系，也就让平淡无奇的歌词字幕一下子变得生动起来。
|
||||
|
||||
## 显示对话
|
||||
|
||||
|
||||
@ -90,6 +90,11 @@
|
||||
|
||||
`排位顺序`：同一时间设置多个自定义方法时，你可能需要让这些事件按一定顺序生效，这个时候就需要设置这个参数了。这个参数支持负数，数字越小，事件越早生效。
|
||||
|
||||
## 快捷查询
|
||||
|
||||
<div class="custommethods-search">
|
||||
</div>
|
||||
|
||||
## 我知道你还想问什么
|
||||
|
||||
你也许会有这种疑问：为什么官方要设置一个“调用自定义方法”，像写代码一样完成一些明明是很成熟的功能和特效？为什么不把它们也做成普通的事件直接添加就好了？
|
||||
|
||||
@ -1,148 +0,0 @@
|
||||
# 浮动文字
|
||||
|
||||
## 浮动文字基本设置
|
||||
|
||||
如果我们要制作一首歌曲的谱面，一般而言都会考虑将歌词显示在画面中，这是一种简单粗暴，但能快速提升整体观感的做法。要在画面中加上字幕，我们需要在紫色的版块中找到**浮动文字**事件。
|
||||
|
||||
选择这个事件后，我们可以发现最开始的两行很有Word的感觉。
|
||||
|
||||
|
||||
|
||||
**aA**：可以调整字号大小，字号基本上没有上限，如果设置太大的话，文字就会**超出屏幕**。
|
||||
|
||||
**旋转**：可以旋转浮动文字框，注意是**整个文本框的旋转**，而不是每个字单独旋转。
|
||||
|
||||
**AB**：两个颜色分别是字的颜色和字符描边的颜色，刚才所说的字号里面，**只会包含字符本体的大小**，描边是没有算在里面的。
|
||||
|
||||
**↔**：指定浮动文字横向的基准位置。
|
||||
|
||||
**↕**：指定浮动文字纵向的基准位置。
|
||||
|
||||
|
||||
|
||||
**位置**：指的是基准的位置。可以按一下准星符号再在预览画面窗口中点选位置。有条件精准找到位置的话还是建议在`X`和`Y`栏中输入具体数值。**点击右边的`%`按键可以切换屏幕像素点和屏幕百分比两种输入方式**。
|
||||
|
||||
|
||||
|
||||
**文字**：就是输入文本的地方了。纯英文文本是使用的像素字体，带有中文字符的情况下会全部变成矢量字体，如果你想要纯英文文本也显示矢量字体的话，可以回车键再在第二行输入一些中文，如下图所示。当文字框里没有中文时就无法输入中文，需在游戏外部打好要插入的文本，并通过复制粘贴的方式输入。
|
||||
|
||||
|
||||
|
||||
另外，目前已知中文繁体以及日语假名都可以在画面中正常显示。
|
||||
|
||||
|
||||
|
||||
**创建文本递进**：如果想要把一整句歌词按歌词节奏一个一个地显示出来，就需要在文本中使用“`/`”将它们隔开。如果想要一个一个地覆盖掉之前显示的内容，就需要在文本中使用`回车键`将他们隔开。之后点击下面的“创建文本递进”，在工作区里面可以拖动右箭头事件来调整时机。如果你做好了又不想要了，那么再把下面的开启改成关闭即可，无需手动删除。如果你又反悔了，还是想要，再改成开启，又会恢复记录。
|
||||
|
||||
```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、**在文本的最后放一个竖线“\|”或者下划线“\_”就可以做出打字的效果了。
|
||||
|
||||
|
||||
|
||||
```
|
||||
ぼ|
|
||||
ぼく|
|
||||
僕|
|
||||
僕の|
|
||||
僕のゆ|
|
||||
僕のゆめ|
|
||||
僕の夢|
|
||||
僕の夢
|
||||
|
||||
そ|
|
||||
そう、|
|
||||
そう、わ|
|
||||
そう、わた|
|
||||
そう、わたし|
|
||||
そう、私|
|
||||
そう、私の|
|
||||
そう、私のゆ|
|
||||
そう、私のゆめ|
|
||||
そう、私の夢|
|
||||
```
|
||||
|
||||
**7、**创建了一组文本递进之后，只需要双击浮动文字事件本身，整组字幕都会被选中。不需要一个个手动去点选了。
|
||||
|
||||
**8、**基准的左中右会影响文本递进效果。靠左时从左向右出现文本递进；靠中时从中间挤向两侧出现文本递进；靠右时从右向左出现文本递进。
|
||||
|
||||
**9、**在文本框的最后加一个空行，就可以通过文本递进的方式设置文本的结束时间，避免了一点点数格子的烦恼。
|
||||
|
||||
**10、**在文字中的个别字符前面加上`<color=#RRGGBBAA>`，后面加上`</color>`可以改变这几个字的颜色和透明度。关于颜色的介绍由于篇幅关系将放在下一小节。
|
||||
|
||||
|
||||
|
||||
对应文本框内容为：
|
||||
|
||||
```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>
|
||||
> 【另一个我】有两份文字略微偏移重叠在一起
|
||||
|
||||
有没有发现不管是颜色效果还是显示效果，在设计上都和歌词本身有着些许联系，也就让平淡无奇的歌词字幕一下子变得生动起来。
|
||||
@ -1,18 +1,45 @@
|
||||
# 镜厅
|
||||
|
||||
> 预警放在最前面：观看本节教程图片可能会引发光敏性癫痫，在编辑器中使用此功能也请慎重处理。
|
||||
游戏的画面是一帧一帧地播放的。为了确保游戏的画面一直在更新，在绘制一帧画面之前，游戏会将已经绘制过的画面重置为全黑。
|
||||
**但是如果不重置呢？**
|
||||
|
||||
> 本节动图较多，如遇加载卡顿，请耐心等待。
|
||||
## 基础效果
|
||||
|
||||
所谓的镜厅效果，就是画面在变化的时候并不清除变化过程中产生的效果，画面效果会一直叠加，然后逐渐变得混乱。
|
||||
相信你已经有了初步的感觉。镜厅就是这样，原来一帧的画面仍然保留在屏幕上，只是游戏重新绘制的画面直接覆盖在了原画面之上，从而造成一种“拖影”的效果。
|
||||
这本是一种“bug”，但如果稍加利用，或许会有出其不意的效果。
|
||||
|
||||
<div class="bv"><iframe src="https://player.bilibili.com/player.html?bvid=BV1vW411t7NF&page=18&autoplay=0" title="BPM 与偏移的校对教程" width="100%" height="100%" scrolling="no" frameborder="no" framespacing="0" allowfullscreen="true"></iframe></div>
|
||||
## 抑制方法
|
||||
|
||||
镜厅一共能在两个地方找到，一是设置主题中的 “镜厅”，二是预设特效中的“镜厅”。**但最好使用预设特效中的**。
|
||||
### 画面的覆盖
|
||||
|
||||
既然画面是一层一层叠在上面，如果要“修复这个 bug”，那就得咱们手动去将整个屏幕更新。
|
||||
但是如果直接覆盖一个特定的颜色或者背景，那好像和直接设置背景没什么区别，镜厅就没有存在的意义了。
|
||||
那半透明呢？
|
||||
画面会被覆盖，但是覆盖程度取决于透明度。
|
||||
我们来做个小实验：假设现在有一个像素的亮度为 100，每一帧向右移动 1 像素，在镜厅的效果下会导致它在每一帧一直留存，但是现在有一个手段，能够在每一帧画完之前整个画面的亮度降为原来的一半，那这个像素的实际亮度是怎样的呢？
|
||||
|
||||
| 帧 | 亮度 ||||
|
||||
|-|-:|-:|-:|-:|
|
||||
|1|100|
|
||||
|2|50|100|
|
||||
|3|25|50|100|
|
||||
|4|12.5|25|50|100|
|
||||
|
||||
理解了这个之后，你就可以着手做出这样的效果：
|
||||
|
||||
|
||||
|
||||
### 画面的扭曲
|
||||
|
||||
同样的，也可以
|
||||
|
||||
---
|
||||
|
||||
|
||||
镜厅一共能在两个地方找到，一是设置主题中的 “镜厅”，二是预设特效中的“镜厅”。**但最好使用预设特效中的**。
|
||||
|
||||
如果只是直接使用镜厅加上预设特效，效果一般只会越来越阴间，所以我们一般会使用预设特效里的“晕影”和“闪烁晕影”或者半透明的背景或半透明的后背景板闪光（由于设备性能差别，镜厅的效果显示可能每个人会有所不同，我一般使用20的透明度）来起到抑制的效果，同时这样也能直接做出最简单的拖尾效果。
|
||||
|
||||
|
||||
|
||||
拖尾效果（可以注意到镜厅留下了痕迹 ，如果想去除就需要再加上其他的效果，比如-1强度的高光）。这里再附上一些特效在遮罩后的组合（默认都已经打开了镜厅）。
|
||||
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
<div class="intro"></div>
|
||||
|
||||
# 节奏医生中文编辑器教程
|
||||
|
||||
> 此网页正在活跃维护中。
|
||||
|
||||
@ -1,18 +1,47 @@
|
||||
# 轨道移动
|
||||
|
||||
## 轨道的显示与隐藏
|
||||
## 默认轨道位置
|
||||
|
||||
轨道在关卡进行的过程中是可以随时调整其显示和隐藏状态的，这个功能可在紫色版块的**隐藏轨道**中找到。打开后有三个设置项：
|
||||
|
||||
|
||||
当我们在同一房间里设置了多个轨道的时候，角色位置会自动生成在屏幕上。不同的轨道数量下默认的位置也会不同：
|
||||
|
||||
**轨道**：要显示/隐藏的是哪条轨道。注意一次只能选择一个，所以如果需要大批量地显示和隐藏只能一点点加入事件了。
|
||||
* 一根轨道在屏幕的`(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%)`处
|
||||
|
||||
**动作**：四个选项（显示/隐藏/仅显示角色/仅显示轨道），显示和隐藏比较好理解；仅显示角色的意思是没有中间的横线和右边的心脏；仅显示轨道的意思是没有左边的人物图。
|
||||
|
||||
|
||||
> 如果你想要不显示心脏，最简单的办法是使用移动轨道事件将心脏移到屏幕外。如果想要隐藏所有轨道的心脏，也可以通过调用自定义方法 invisibleHeart = true 来实现，参考[自定义方法](../pages/custommethod.md)。
|
||||
<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>
|
||||
|
||||
**过渡方式**：顺滑（有烟雾特效）；即刻（瞬间显示/隐藏）；全动画（仅限“动作”中选择“显示”，有完整的出场及轨道延伸动画）。
|
||||
|
||||
此处的坐标原点为屏幕左下角，轨道的参考位置是人物像素画的中心点。如果任其按默认位置排布，会显得有些缺乏设计感。
|
||||
|
||||
|
||||
|
||||
## 轨道的移动
|
||||
|
||||
|
||||
@ -1,85 +0,0 @@
|
||||
# 房间
|
||||
|
||||
完全掌握了节奏医生的节奏设计之后，我们要把目光放在谱面的视觉呈现上了，这一节我们就从理解“房间”的概念开始。
|
||||
|
||||
编辑器总共支持四个房间，你可以想象成一栋房子有四层楼，每层楼最多住四个人，同时，每层楼的装修可以随意摆设互不干扰。这四层楼不一定刚刚好叠在一起，可以随时移动，互不交叠，只是高度不同。我们飞在空中从上往下看，就能看到目视所及范围内的大楼景象。同时，如果空中飘扬着其他物件，也会被我们的眼睛捕捉到，如果大楼的天花板和地板是透明的，那么地基里有什么东西也会被看到。
|
||||
|
||||
当我们使用**排列显示房间**事件时，房间就只能从上到下地排列在屏幕上，而如果使用**移动房间**事件，则可以随便移动。
|
||||
|
||||
## 排列显示房间
|
||||
|
||||
|
||||
|
||||
将左边的可见房间点亮为黄色，屏幕上就会显示这个房间，高度可以自定义，填写数据后房间高度将自动分配。详细的分配规则点击下方箭头展开。如果你懒得理解分配规则，只需永远保证 **不点亮多余的房间，并且将存在的房间高度总和设置到100%** 即可。
|
||||
|
||||
### 房间分配规则
|
||||
- 如果全部不填，那么
|
||||
所有房间高度为 `25%`；
|
||||
- 否则
|
||||
- 计算已填房间高度的总和 `Sum`
|
||||
- 如果 `Sum = 100%`，那么
|
||||
按实际数据设置房间高度，未填写的视为 `0%`；
|
||||
- 如果 `Sum < 100%`，那么
|
||||
- 如果有未填写房间高度的房间，设个数为 `n`，那么
|
||||
未填写高度的房间高度 `height = (100% - Sum) / n`，即均分未分配的房间高度；
|
||||
- 否则
|
||||
每个房间的房间高度 `height = height * 100% / Sum`，即等比例拉伸房间高度至高度总和为 `100%`；
|
||||
- 如果 `Sum > 100%`，那么
|
||||
每个房间的房间高度 `height = height * 100% / Sum`，即等比例缩小房间高度至高度总和为 `100%`；
|
||||
|
||||
下面还留有一个时长和缓速的选项，这个和轨道移动的时所介绍的设置规律是完全相同的。如果填写0拍就是瞬间完成房间分配。
|
||||
|
||||
> 如果你想直观地看看各种移动方式的速度区别，可以[看看这里](https://easings.net/zh-cn)。
|
||||
|
||||
## 房间的前后关系
|
||||
|
||||
但实际上很多时候我们并不想就让房间这样死板地上下排布，甚至想让这些房间交叠在一起。要做到这一点，我们得先明确各个房间叠在一起的时候，它们的前后关系是怎样的。
|
||||
|
||||
|
||||
|
||||
首先看一个房间内，各种事件的由前往后关系是：
|
||||
|
||||
> [浮动文字]
|
||||
[弹幕效果]
|
||||
[前景图片]
|
||||
[轨道4]
|
||||
[轨道3]
|
||||
[轨道2]
|
||||
[轨道1]
|
||||
[背景图片(图片)]
|
||||
[背景图片(颜色)]
|
||||
|
||||
它们的前后顺序是不可改变的。
|
||||
|
||||
各个房间整体之间又有前后顺序，默认由前往后关系是：
|
||||
|
||||
> [显示状态牌]
|
||||
[应用到:顶部]
|
||||
[房间1]
|
||||
[房间2]
|
||||
[房间3]
|
||||
[房间4]
|
||||
|
||||
四个房间的顺序是可以改变的，只需要在黄色版块内添加一个**重新排序房间**事件，把前后顺序拖动到想要的即可。
|
||||
|
||||
|
||||
|
||||
## 激活其他房间
|
||||
|
||||
在刚打开编辑器的状态下，实际上只能看到房间1。并不是另外三个房间不存在，而是房间大小被设置成了`0%`。在黄色版块中找到**移动房间**事件，事件放置在工作区的哪一行，就是对应的哪个房间被移动。创建三个移动房间事件置于234行，将“大小”设置为`(100%,100%)`，这样所有的房间都以屏幕大小叠在一起了。
|
||||
|
||||
还记得[这里](../pages/settheme.md)提到了**设置主题**事件吗，我们再添加一个“花房·昼”。由于黄色版块不再是空白的，设置主题的事件的右上角出现了新的按钮，这是将事件设置到具体房间的功能。
|
||||
|
||||
|
||||
|
||||
将带有花房·昼主题的事件选择房间4，预览效果会发现我们看到的依然是武士电子，因为现在不透明的房间1完全遮住了房间4。删掉武士电子主题，会发现背景全黑，依然看不到花房。这是因为默认状态下房间并不是透明背景，而是纯黑背景。
|
||||
|
||||
在紫色的版块找到**设置背景**事件，将背景颜色选择为纯透明，应用到123房间。再次预览，终于能看到房间4了。“应用到”选项是可以多选的。
|
||||
|
||||
|
||||
|
||||
有时还会有第五个按钮“顶部”，如果你理解了本节最开头的比喻的话，应用到顶部的事件是直接在大楼与你之间的空中生效的。房间怎么移动都不会影响到顶部。
|
||||
|
||||
|
||||
|
||||
经此示例，相信你已经能理解房间的基本运作原理了。
|
||||
@ -1,5 +1,10 @@
|
||||
# 房间视效
|
||||
|
||||
## 房间透明度
|
||||
**淡入淡出房间**事件倒是没有太多可说的，调节的是房间整体的透明度。同样也可以选择时长和缓速模式。
|
||||
|
||||
最基本的用法就是把一个房间的透明度从`0`调到`100`，另一个从`100`调到`0`，完成淡入淡出的转场。
|
||||
|
||||
## 房间遮罩
|
||||
|
||||
### 图片遮罩
|
||||
|
||||
@ -56,6 +56,21 @@
|
||||
|
||||
|
||||
|
||||
|
||||
## 轨道的显示与隐藏
|
||||
|
||||
轨道在关卡进行的过程中是可以随时调整其显示和隐藏状态的，这个功能可在紫色版块的**隐藏轨道**中找到。打开后有三个设置项：
|
||||
|
||||
|
||||
|
||||
**轨道**：要显示/隐藏的是哪条轨道。注意一次只能选择一个，所以如果需要大批量地显示和隐藏只能一点点加入事件了。
|
||||
|
||||
**动作**：四个选项（显示/隐藏/仅显示角色/仅显示轨道），显示和隐藏比较好理解；仅显示角色的意思是没有中间的横线和右边的心脏；仅显示轨道的意思是没有左边的人物图。
|
||||
|
||||
> 如果你想要不显示心脏，最简单的办法是使用移动轨道事件将心脏移到屏幕外。如果想要隐藏所有轨道的心脏，也可以通过调用自定义方法 invisibleHeart = true 来实现，参考[自定义方法](../pages/custommethod.md)。
|
||||
|
||||
**过渡方式**：顺滑（有烟雾特效）；即刻（瞬间显示/隐藏）；全动画（仅限“动作”中选择“显示”，有完整的出场及轨道延伸动画）。
|
||||
|
||||
## 适合配合轨道或节拍一起使用的特效
|
||||
|
||||
**闪烁：**屏幕白色闪烁，分为短，中，长三种。
|
||||
|
||||
@ -1,45 +1,5 @@
|
||||
# 场景与主题
|
||||
|
||||
当我们在同一房间里设置了多个轨道的时候，角色位置会自动生成在屏幕上。不同的轨道数量下默认的位置也会不同：
|
||||
|
||||
* 一根轨道在屏幕的`(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>
|
||||
|
||||
|
||||
此处的坐标原点为屏幕左下角，轨道的参考位置是人物像素画的中心点。如果任其按默认位置排布，会显得有些缺乏设计感。
|
||||
|
||||
|
||||
|
||||
所以在设计全程静止不动的轨道位置的时候，我们应该在一开始就让他们站在合适的位置上，并且最好能契合背景画面。下面我们拿官方自带的一些场景来举例子。使用这些场景需要在紫色版块里面添加**设置主题**，再选择“花房·昼”。然后在时间轴最开始的位置设好三个人物的轨道移动。
|
||||
|
||||
这样三个角色都**站在地上**并且有一定的交错。没错，这就是`3-1`沉睡花园。
|
||||
@ -57,3 +17,42 @@
|
||||
甚至轨道可以大部分位置都不可见。比如制作只显示脉冲心跳部位的单发拍子，并做成纯色等。
|
||||
|
||||
> 调用自定义方法`invisibleHeart = true`可以让轨道上的心脏消失。如果不选择角色，那么就只剩下一根线了，在一些极简色块画风的关卡里效果拔群。
|
||||
|
||||
## 背景和前景图片
|
||||
|
||||
在房间的前后关系里我们提到了背景图片和前景图片这两个概念，也就是说，除了使用编辑器内自带的一些主题之外，其实自己也是可以自定义画面的背景和前景图案的。这个功能同样十分灵活，但是如果想要完全靠自己来原创或是临摹背景图片的话，可能需要对画像素画有一些掌握。
|
||||
|
||||
选择紫色的版块，放置一个**设置背景**的事件，发现里面有两种形式，一种是纯色，这个比较好理解，唯独要注意的是**纯色的默认值是黑色而不是透明**，另一种是插入图片。
|
||||
|
||||
> 插入的图片必须是.png格式，如果你是自己画背景图，建议使用画布大小为352\*198像素。
|
||||
|
||||
颜色选项，看似意义不明，但其实也有一定的用处。如果你导入的图片只有纯白和透明两种颜色，这个功能就可以为纯白的部分染色，染成你自己设置的颜色。但是因为一次只能设置一种颜色，使用起来也有些限制。
|
||||
|
||||
缩放功能其实类似于操作系统里壁纸的填充方式，具体效果点开小箭头查看。
|
||||
|
||||
<details><summary><strong>填充方式</strong></summary>
|
||||
<img src="../images/assets-fillmode.png" alt="填充方式图例" />
|
||||
<ul>
|
||||
<li><strong>填满：</strong>将画面拉伸到横纵全部填满屏幕。要注意的是，如果你塞进去一张高清图，编辑器也会把它缩小到352\*198像素来适应画面，而且这个缩放机制是像素化的，画面会变得非常模糊。</li>
|
||||
<li><strong>拉伸：</strong>将画面等比拉伸直到左右垂直线对齐屏幕。</li>
|
||||
<li><strong>等比拉伸：</strong>将画面等比拉伸直到上下水平线对齐屏幕。</li>
|
||||
<li><strong>居中：</strong>就是按原画面大小放在正中间。</li>
|
||||
<li><strong>平铺：</strong>像铺瓷砖一样铺满屏幕。</li>
|
||||
</ul>
|
||||
</details>
|
||||
|
||||
> 如果你想做一个动图效果，需要把.gif拆解成一连串的.png图片，在选择图片时同时选择所有的图点击确定。接下来就会多出一个设置帧数的选项，来确定动图的播放速度。帧数 = \(背景图总画面数 / 一个循环占节拍数量\) \* 曲速/60。
|
||||
设置背景一样，但使用这个功能的主要目的还是为了能产生一个图片覆盖轨道和手的效果，这样在画面效果的处理上可以更加灵活。
|
||||
|
||||
## 平铺背景
|
||||
|
||||
唯独平铺选项会多冒出来一个速度设置，它可以让背景图片始终保持设置的速度移动。
|
||||
|
||||
* 在滚屏模式下，效果类似于<code>4-2</code>的天空在慢慢移动，速度和缓速则是调整背景从静止到目标速度的变化过程。
|
||||
* 在脉冲模式下，背景的移动速度变化就是周期性的，用<code>间隔</code>来调整周期。另外，如果你想设计这样的移动背景，在作画的时候也需要考虑画面左右两端和上下两端的连续，否则画面运动起来会感觉到割裂。
|
||||
|
||||
举个例子，公路，山坡，白云，蓝天的运动速度都不一样，毕竟在画面中的远近关系不一样，把他们分别画在四个背景图片里，放在四个房间，然后设置四个移动房间事件，把位置都改为`(50%, 50%)`，把大小都改为`(100%, 100%)`，设置四个背景图片，使用平铺的方式，设置不同的水平移动速度，就得到了在公路上慢慢前进的效果。
|
||||
|
||||
|
||||
|
||||
另外，使用小图片像地砖一样平铺才是更为原本的用法。
|
||||
|
||||
@ -16,6 +16,6 @@
|
||||
|
||||
官方在 v0.18.0 时重新设计了大量关卡的双人模式版本。
|
||||
在设计双人模式关卡时，最核心的要点就是：需要让玩家分清他所控制的轨道。这同时也适用于在关卡中将某个轨道托付给 Otto 时的情况。
|
||||
在为单发拍使用护士提示时需要用两种护士音效以区分玩家，通常为 P1 使用的语音为**护士**，P2 使用的语音为**伊恩**。你也可以根据实际场景交换这两者。
|
||||
在为单发拍使用护士提示时需要用两种护士音效以区分玩家，通常为 P1 使用的语音为**护士**，P2 使用的语音为**伊恩**。你也可以根据实际场景灵活变通。
|
||||
轨道的音效使用左右声道作区分（例如左声道只播放 P1 需要操控的轨道的音效而右声道相反）也是一个不错的选择。
|
||||
当 P1、P2 交换轨道控制权时，需要使用护士语音 `Switch` 以提示即将交换轨道控制权。
|
||||
|
||||
73
pages/vfx.md
73
pages/vfx.md
@ -1,72 +1,11 @@
|
||||
# 视觉干扰
|
||||
# 基础 VFX 效果
|
||||
|
||||
> 在关卡中出现对比度较高画面快速交替，如红蓝、黑白快速闪烁，必须开启癫痫警告。使用“放克”特效，必须开启癫痫警告。使用“干扰”特效较多，建议开启癫痫警告。一秒出现3次以上快速闪烁，建议开启癫痫警告。
|
||||
## 震动
|
||||
|
||||
> 即使开启了癫痫警告，也不要设计出会伤害视力的干扰效果。
|
||||
## 闪光
|
||||
|
||||
## 综述
|
||||
## 预设 VFX
|
||||
|
||||
视觉干扰效果算是节奏医生做谱的一大特色了。因为游戏玩法本身是可以做到纯音押的，所以在视觉上对玩家进行考验不仅可以增大难度，同时又可以有很新奇的观赏效果。在剧情模式中，视觉干扰主要集中在`1-X 东方失眠夜`，`1-XN 超·东方失眠夜`两关，其余还有关卡的小部分环节用到了视觉干扰，效果都极具震撼。
|
||||
## 反色
|
||||
|
||||
需要注意的是，**视觉干扰不等于读谱不能**，更不等于塞爆。这些干扰是为重复或单一的节奏增添趣味与挑战性而添加的，虽然一定意义上增加了读谱难度，但是仍应当给玩家留有恰当的反应时间。如果节奏设计本身就有难度，还刻意阻挡玩家进行识谱，效果将会是适得其反的。
|
||||
|
||||
另外，视觉干扰设计的主要原则依然是采音。音乐具有这样的特色，且不好转变为轨道节奏的话，就把这部分采音对应到视觉的同步变化和卡顿，完美地解决节奏设计与画面设计两个问题。
|
||||
|
||||
## 卡带效果
|
||||
|
||||
如果你对剧情关卡`1-X`东方不眠夜还有印象的话，或许能回忆起节奏配合着音乐一卡一卡的效果，这就是靠**卡带效果**做到的，它可以让心跳在某一拍卡住。
|
||||
|
||||
|
||||
|
||||
这样看图似乎也不够直观，我们举几个实例来看看是怎么做到的：
|
||||
|
||||
|
||||
|
||||
能看到其中一个单发拍子拍下空格之后蓝条是**反复闪烁了3次**的，这就是循环的作用；而这三次闪烁之间的**时间间隔均为0.25拍**，这就是长度的作用；循环的是该小节**第2拍起头时的画面**，这就是拍子源的作用。
|
||||
|
||||
|
||||
|
||||
这里的音乐段是一个密集的鼓点，于是就按照鼓点的节奏同步地设计了卡带效果，并且反复。这个卡带的位置刚好放置了一个轨道的旋转，进而做到了轨道卡壳转不动的效果。
|
||||
|
||||
这似乎也给了我们一个很好的提示：卡带效果往往都是和音乐中的配器节奏同步的，画面跟随着音乐一起卡才能卡在一个最爽的位置。密集的采音往往本身也就不适合用来做节奏，将其转化为卡带效果反而能够出奇制胜。
|
||||
|
||||
## 设置速度
|
||||
**设置速度**事件修改的是画面的播放速度，但注意，音乐速度并不会跟着改变，改变的只有设置主题里的动画速度，平铺背景的移动速度，所有带有“动画时长”设置的事件的变化速度等。
|
||||
|
||||
其中带有“动画时长”设置的事件（例如轨道移动，浮动文字）是要特别注意的，例如你填写了动画时长为`2拍`，同时又设置速度为`2倍`，那么该事件就在1拍的时间里完成了。
|
||||
|
||||
设置速度事件可以填写小数，并且最低可以修改为`0`。当速度为0时画面就会静止，但很邪门的是轨道上的人物和节奏脉冲是对此免疫的，要注意考虑好是否隐藏这些轨道以免造成违和感。
|
||||
|
||||
|
||||
|
||||
## 预设特效的多重叠合
|
||||
|
||||
很多预设特效都自带一点画面干扰的倾向，而将这些效果叠加就能加剧干扰效果，如果再叠加上一节所述的镜厅效果则会更加一发不可收拾。堆预设特效可以玩玩，但也要适度。
|
||||
|
||||
除镜厅外，放克特效也是要谨慎使用的，过大的饱和度会让眼部急剧不适，往往可以放在整个场景的最底层空区域进行一个小面积适度的铺设。
|
||||
|
||||
下面举几个例子：
|
||||
|
||||
**竖直滚屏+VHS+电影噪点+高光**
|
||||
|
||||
带来信号干扰、丢失的感觉
|
||||
|
||||
**顶部镜厅+摄像头/房间动画**
|
||||
|
||||
旋转，跳跃，残影，你画面拉出了完美的拖尾
|
||||
|
||||
**屏幕翻转+颜色反转+滚屏**
|
||||
|
||||
画面你别乱跑
|
||||
|
||||
**短暂的噪点/干扰**
|
||||
|
||||
默数拍子开启
|
||||
|
||||
**放克+落雨+灰度+慢游戏速度**
|
||||
|
||||
听话，别把灰度去掉
|
||||
|
||||
**25%白色前景闪烁+暴风雪+雪花+VHS+关闭竖直滚屏+电影噪点+JPEG失真+落雨+快游戏速度**
|
||||
|
||||
最后的绝望（《冰与火之舞》 “XH-X 最后的希望”类似效果）
|
||||
## 镜像
|
||||
72
pages/vfxpro.md
Normal file
72
pages/vfxpro.md
Normal file
@ -0,0 +1,72 @@
|
||||
# 视觉干扰
|
||||
|
||||
> 在关卡中出现对比度较高画面快速交替，如红蓝、黑白快速闪烁，必须开启癫痫警告。使用“放克”特效，必须开启癫痫警告。使用“干扰”特效较多，建议开启癫痫警告。一秒出现3次以上快速闪烁，建议开启癫痫警告。
|
||||
|
||||
> 即使开启了癫痫警告，也不要设计出会伤害视力的干扰效果。
|
||||
|
||||
## 综述
|
||||
|
||||
视觉干扰效果算是节奏医生做谱的一大特色了。因为游戏玩法本身是可以做到纯音押的，所以在视觉上对玩家进行考验不仅可以增大难度，同时又可以有很新奇的观赏效果。在剧情模式中，视觉干扰主要集中在`1-X 东方失眠夜`，`1-XN 超·东方失眠夜`两关，其余还有关卡的小部分环节用到了视觉干扰，效果都极具震撼。
|
||||
|
||||
需要注意的是，**视觉干扰不等于读谱不能**，更不等于塞爆。这些干扰是为重复或单一的节奏增添趣味与挑战性而添加的，虽然一定意义上增加了读谱难度，但是仍应当给玩家留有恰当的反应时间。如果节奏设计本身就有难度，还刻意阻挡玩家进行识谱，效果将会是适得其反的。
|
||||
|
||||
另外，视觉干扰设计的主要原则依然是采音。音乐具有这样的特色，且不好转变为轨道节奏的话，就把这部分采音对应到视觉的同步变化和卡顿，完美地解决节奏设计与画面设计两个问题。
|
||||
|
||||
## 卡带效果
|
||||
|
||||
如果你对剧情关卡`1-X`东方不眠夜还有印象的话，或许能回忆起节奏配合着音乐一卡一卡的效果，这就是靠**卡带效果**做到的，它可以让心跳在某一拍卡住。
|
||||
|
||||
|
||||
|
||||
这样看图似乎也不够直观，我们举几个实例来看看是怎么做到的：
|
||||
|
||||
|
||||
|
||||
能看到其中一个单发拍子拍下空格之后蓝条是**反复闪烁了3次**的，这就是循环的作用；而这三次闪烁之间的**时间间隔均为0.25拍**，这就是长度的作用；循环的是该小节**第2拍起头时的画面**，这就是拍子源的作用。
|
||||
|
||||
|
||||
|
||||
这里的音乐段是一个密集的鼓点，于是就按照鼓点的节奏同步地设计了卡带效果，并且反复。这个卡带的位置刚好放置了一个轨道的旋转，进而做到了轨道卡壳转不动的效果。
|
||||
|
||||
这似乎也给了我们一个很好的提示：卡带效果往往都是和音乐中的配器节奏同步的，画面跟随着音乐一起卡才能卡在一个最爽的位置。密集的采音往往本身也就不适合用来做节奏，将其转化为卡带效果反而能够出奇制胜。
|
||||
|
||||
## 设置速度
|
||||
**设置速度**事件修改的是画面的播放速度，但注意，音乐速度并不会跟着改变，改变的只有设置主题里的动画速度，平铺背景的移动速度，所有带有“动画时长”设置的事件的变化速度等。
|
||||
|
||||
其中带有“动画时长”设置的事件（例如轨道移动，浮动文字）是要特别注意的，例如你填写了动画时长为`2拍`，同时又设置速度为`2倍`，那么该事件就在1拍的时间里完成了。
|
||||
|
||||
设置速度事件可以填写小数，并且最低可以修改为`0`。当速度为0时画面就会静止，但很邪门的是轨道上的人物和节奏脉冲是对此免疫的，要注意考虑好是否隐藏这些轨道以免造成违和感。
|
||||
|
||||
|
||||
|
||||
## 预设特效的多重叠合
|
||||
|
||||
很多预设特效都自带一点画面干扰的倾向，而将这些效果叠加就能加剧干扰效果，如果再叠加上一节所述的镜厅效果则会更加一发不可收拾。堆预设特效可以玩玩，但也要适度。
|
||||
|
||||
除镜厅外，放克特效也是要谨慎使用的，过大的饱和度会让眼部急剧不适，往往可以放在整个场景的最底层空区域进行一个小面积适度的铺设。
|
||||
|
||||
下面举几个例子：
|
||||
|
||||
**竖直滚屏+VHS+电影噪点+高光**
|
||||
|
||||
带来信号干扰、丢失的感觉
|
||||
|
||||
**顶部镜厅+摄像头/房间动画**
|
||||
|
||||
旋转，跳跃，残影，你画面拉出了完美的拖尾
|
||||
|
||||
**屏幕翻转+颜色反转+滚屏**
|
||||
|
||||
画面你别乱跑
|
||||
|
||||
**短暂的噪点/干扰**
|
||||
|
||||
默数拍子开启
|
||||
|
||||
**放克+落雨+灰度+慢游戏速度**
|
||||
|
||||
听话，别把灰度去掉
|
||||
|
||||
**25%白色前景闪烁+暴风雪+雪花+VHS+关闭竖直滚屏+电影噪点+JPEG失真+落雨+快游戏速度**
|
||||
|
||||
最后的绝望（《冰与火之舞》 “XH-X 最后的希望”类似效果）
|
||||
31
script/custommethod-search.js
Normal file
31
script/custommethod-search.js
Normal file
@ -0,0 +1,31 @@
|
||||
|
||||
|
||||
|
||||
const customMethods = [
|
||||
{ type: 'mod',}
|
||||
]
|
||||
|
||||
const editDistance = (a, b) => {
|
||||
if (a.length === 0) return b.length;
|
||||
if (b.length === 0) return a.length;
|
||||
const matrix = [];
|
||||
for (let i = 0; i <= b.length; i++) {
|
||||
matrix[i] = [i];
|
||||
}
|
||||
for (let j = 0; j <= a.length; j++) {
|
||||
matrix[0][j] = j;
|
||||
}
|
||||
for (let i = 1; i <= b.length; i++) {
|
||||
for (let j = 1; j <= a.length; j++) {
|
||||
if (b.charAt(i - 1) === a.charAt(j - 1)) {
|
||||
matrix[i][j] = matrix[i - 1][j - 1];
|
||||
} else {
|
||||
matrix[i][j] = Math.min(
|
||||
matrix[i - 1][j - 1] + 1,
|
||||
Math.min(matrix[i][j - 1] + 1, matrix[i - 1][j] + 1),
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
return matrix[b.length][a.length];
|
||||
}
|
||||
32
script/custommethod-search.ts
Normal file
32
script/custommethod-search.ts
Normal file
@ -0,0 +1,32 @@
|
||||
class CustomMethods{
|
||||
type: "mod"|"surgery"|"comment"|"custom_method";
|
||||
}
|
||||
|
||||
function editDistance(a: String, b: String): number {
|
||||
if (a.length === 0) return b.length;
|
||||
if (b.length === 0) return a.length;
|
||||
const matrix: number[][] = [];
|
||||
for (let i = 0; i <= b.length; i++) {
|
||||
matrix[i] = [i];
|
||||
}
|
||||
for (let j = 0; j <= a.length; j++) {
|
||||
matrix[0][j] = j;
|
||||
}
|
||||
for (let i = 1; i <= b.length; i++) {
|
||||
for (let j = 1; j <= a.length; j++) {
|
||||
if (b.charAt(i - 1) === a.charAt(j - 1)) {
|
||||
matrix[i][j] = matrix[i - 1][j - 1];
|
||||
} else {
|
||||
matrix[i][j] = Math.min(
|
||||
matrix[i - 1][j - 1] + 1,
|
||||
Math.min(matrix[i][j - 1] + 1, matrix[i - 1][j] + 1),
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
return matrix[b.length][a.length];
|
||||
}
|
||||
|
||||
|
||||
|
||||
export { editDistance };
|
||||
Loading…
x
Reference in New Issue
Block a user