# 自制角色与精灵资源

## 像素画

完全自制一个角色的前提当然是要学会画像素画，因为游戏关卡内的画面都是像素风格的。能画像素画的软件市面上非常多，包括但不限于商业软件[Photoshop](https://www.adobe.com/cn/creativecloud/buying-plans.html)，[SAI](https://www.systemax.jp/ja/sai/)，Steam平台上的[Aseprite](https://store.steampowered.com/app/431730/Aseprite)等。当然免费的软件也是存在的，例如在线像素画软件[Piskel](https://www.piskelapp.com/)，在一票免费软件中，这款的好用程度谁用谁知道。

具体的软件教学和像素画绘画技巧就不在这里献丑了，去[B站](https://search.bilibili.com/all?keyword=%E5%83%8F%E7%B4%A0%E7%94%BB)能找到相当多的教学视频。本节要讲的只是最后一步，导出精灵图（Sprite）。

当然首先得知道精灵图是什么。我们查看游戏的内置人物，会发现它们都不是静止的图片，而是会随着节奏摇摆的（例如武士的点头），也是能做出各种动作的（例如咖啡师左右互搏做咖啡），这些动作在编辑器中并非是以.gif动图的形式来存放的，而是把每一帧都拆出来，并排放在一起保存成.png。这就叫做精灵图。

![](../images/spritesheet-thisisspritesheet.gif)
![](../images/spritesheet-farmer.png)

要注意，每一帧所留出的画布大小都必须是相同的，画多大的人物在绘画之前就应当考虑清楚。在像素画软件里，通常都有直接导出精灵图的功能。

## 导出一个.JSON文件

图片现在是有了，但是想要编辑器识别这个图片，还没有那么简单，我们还需要准备一个.json文件。你可以在[这个网站](https://cc.rdlevel.cn/)里导出.json文件。我们已经将网站进行了汉化，不过具体的操作流程和之前版本给出的原始网站是相同的。下面给出的具体操作流程：

![](../images/spritesheet-step01.png)
![](../images/spritesheet-step02.png)
![](../images/spritesheet-step03.png)
![](../images/spritesheet-step04.png)
![](../images/spritesheet-step05.png)
![](../images/spritesheet-step06.png)
![](../images/spritesheet-step07.png)

## .JSON文件的具体内容

老话说得好，知其然也要知其所以然。json文件也是可以手动写一个的，只要你能明白文件的编排方式就行。如果需要使用，只需要把这一堆复制下来保存到.txt中，数据按自己的来改动，最后把文件后缀名改成.json即可。**注意这个文件的文件名必须和精灵图的完全一致**。模板在下面：

<details><summary><strong>点我展开</strong></summary>
<pre data-lang="json"><code>
{
    "size": [64,64],
    "name":"吾夜犹明",
    "rowPreviewFrame": 1,
    "rowPreviewOffset": [0, 13],
    "clips": [
        {
            "name": "neutral",
            "frames": [0,1,2,3,4,5,6,7],
            "loop": "onBeat",
            "fps": 8,
            "loopStart": 0,
            "portraitOffset": [16,24],
            "portraitSize": [32,32],
            "portraitScale": 2
        },
        {
            "name": "happy",
            "frames": [8,9,10,11,12,13,14,15],
            "loop": "no",
            "fps":12,
            "loopStart": 0,
            "portraitOffset": [16,24],
            "portraitSize": [32,32],
            "portraitScale": 2
        },
        {
            "name": "barely",
            "frames": [16,17,18,19,20,21,22,23],
            "loop": "no",
            "fps": 12,
            "loopStart": 0,
            "portraitOffset": [16,24
            ],
            "portraitSize": [32,32],
            "portraitScale": 2
        },
        {
            "name": "missed",
            "frames": [24,25,26,27,28,29,30,31],
            "loop": "yes",
            "fps": 12,
            "loopStart": 2,
            "portraitOffset": [16,24],
            "portraitSize": [32,32],
            "portraitScale": 2
        },  
    ]
}
</code></pre>
</details>

> 请注意在操作系统中显示文件的拓展名，以Windows10系统举例，在文件窗口上方的【查看】列表里，文件拓展名这一项应该是✔打勾的。 如下图所示。
>
> ![](../images/spritesheet-showextension.png)

至于这段代码里到底要改些什么，我们一个个看。

- **`"size"`**  
    这里填写的数字是精灵图里每一帧图片的像素大小，必须要和自己设计的大小完全一致，编辑器才能把图片正常切分。
- **`"name"`**  
    第一次出现的name里填写的名字会显示在对话中。
- **`"rowPreviewFrame"`**  
    在蓝色版块的缩略图里面显示第几帧画面。
- **`"rowPreviewOffset"`**  
    显示这个缩略图的时候，画面正中心偏移多少像素。
- **`"clips"`**  
    里面是对每个表情分别进行设置。
    - **`"name"`**  
        后续出现的name指的是人物的各个表情，  
        以下四个表情是默认存在的，因为和按拍效果有关，但你也可以在此基础上增加新的表情，自己命名一个其他表情，这会在紫色版块**播放表情**中有效。  
        - `neutral` 表示普通状态下的默认表情，  
        - `happy` 是**击中**时的表情，  
        - `barely` 是**失误**的表情，  
        - `missed` 是**错失**的表情。  
        > `neutral` 表情是**必需**的，无论是轨道角色还是精灵资源。  
            在早期，以上四个表情在轨道角色上时也是必需的，不过在后来的版本中移除了其他三个表情的限制。
        此字段需要满足[这些要求](../pages/spritesheet.md#自定义角色的表情机制)。
    - **`"frames"`**  
        这是每种状态所涉及的帧数。在精灵图里从左往右，从0开始计算。例如：  
        - `[0,1]`：第1张和第2张组合成两帧的动图；  
        - `[3,5]`：第4张和第6张组合成两帧的动图；  
        - `[0,1,1,1]`第1张和第2张组合成四帧的动图，其中第2张播放三次。  
    - **`"loop"`**  
        动图的循环模式
        - `no`：播放一次回到 neutral 状态。
        - `yes`：按 `fps` 值循环。  
        - `onBeat`：按节拍循环。  
        > 当 `loop` 值不为 `onBeat` 且 `neutral` 表情没有帧时会导致精灵缩放效果在播放至第三拍时停止（无论是从哪个小节开始）。这是一个已知 bug。
    - **`"loopStart"`**  
        在每轮循环帧播放完毕后回到 `frames` 中此值所指处的帧继续播放。
        例：一个 5 帧的动画`[5,6,7,8,9]`，loopstart：3，实际效果为 `[5,6,7,8,9,8,9,8,9,8,9,...]`。
    - **`"fps"`**  
        播放帧率，填大于0的帧率，就是按填写的帧率播放；填0就自动随着音乐bpm改变。可以为小数。
    - **`"portaitOffset"`**  
        截取动图中的一部分作为显示对话时的立绘，两个数字表示截取立绘的起始位置。以每一帧画面的左下角作为原点，第一个数字为横坐标，第二个数字为纵坐标。
    - **`"portaitSize"`**  
        截取动图中的一部分作为显示对话时的立绘，两个数字表示截取立绘图片的像素大小。第一个数字为立绘的宽度，第二个数字为立绘的高度。
    - **`"portaitScale"`**  
        图片放大比例，这是显示对话时的立绘用的，因为立绘画面一般都只是人物的头部和上身，且立绘窗口也比较大，这里最好填写大于1的数字。  

## 自定义角色的音效

游戏在运行到**显示对话**事件时，如果遇到对应的表情 [ID](../pages/spritesheet.md#自定义角色的表情机制) 时，会尝试：  

- 寻找此自定义角色的同名 ID 音频文件  
- 若无，寻找此自定义角色的默认 ID 音频文件  
- 若无，设为默认对话音频文件。  

游戏会尝试在对话框内每弹出一个字就播放一次。

## 自定义角色的表情机制

一个自定义角色可以拥有多个表情，每个表情都对应一个 ID，   
为便于理解，这里假设我们的精灵名为 `吾夜犹明`。
ID 的规则如下：

- `neutral` 表情对应无后缀的精灵名，即 `吾夜犹明`。
- 其他表情对应 `[精灵名]_[表情名]`，例如 `happy` 对应 `吾夜犹明_happy`。

此规则会影响**显示对话**事件的角色表情选取和音效文件选取。
这也是为什么表情名不能含有 `_` 和文件名不合法字符。  

## 回到编辑器添加自定义角色

一切准备就绪，现在进入编辑器添加一个自定义角色，然后在人物设置里面点一下文件夹图标，选择刚才我们写好的.json文件。

![](../images/spritesheet-openfile.png)

编辑器会提示你没有找到人物阴影相关的文件，是否自动创建，选择是就可以了。这样人物就被我们成功导入进来了。

当然了，如果你设计好了一个人物需要长期使用，可以将这一堆文件保存在节奏医生自制人物的文件夹里（`C:\用户\你自己的用户名\Documents\Rhythm Doctor\Characters\给你角色取名的文件夹`），就可以在编辑器选择人物下拉界面里面直接选取了。

![](../images/spritesheet-characters.png)


## 播放表情

我们在前面提到了，人物在节奏按对按错时都会自动变化表情。在没有节奏的时候手动变化表情也是允许的。在紫色的版块里面可以找到**播放表情**事件。

![](../images/spritesheet-expression.png)

轨道就是选择需要变化表情的轨道，表情和json文件中的表情名是一一对应的。模式里的“一次”指的是播放新表情一遍之后自动回到原表情，“替换”指的是完全切换为新选择的表情。

## 选择立绘

在[这里](../pages/captions.md#显示对话)我们已经提到过，显示对话的对话框中手动写下立绘名字也是可以插入立绘的。如果我们需要让对话显示立绘，需要在一行中输入 `[表情 ID]:[对话内容]`。表情格式见[表情 ID](../pages/spritesheet.md#自定义角色的表情机制)。  
例如 `吾夜犹明_happy:今天真是美好的一天。`。

如果我们在json文件中自己添加了名为`Error`自定义表情，例如：

```json
{ 
    "name": "Error", 
    "frames": [0, 1, 2, 3, 4, 5], 
    "loop": "onBeat", 
    "fps": 0, 
    "portraitOffset": [10, 20], 
    "portraitSize": [24, 45], 
    "portraitScale": 2 
},
```

那么想要插入对应的立绘，就要在对话框里面写`吾夜犹明_Error:`，依然是下划线加上对应表情的名字。

## 最后的补充

> 好看的自制角色往往在谱面中能形成锦上添花的效果，但自制角色绝不是一个评价一个谱面好坏的唯一指标。想要把一个关卡的整体观感做好，必须是节奏，画面，玩法上的俱佳。要时刻铭记哦！