This commit is contained in:
OLDREDSTONE
2025-06-01 11:35:11 +08:00
commit 318bbf3be2
423 changed files with 13900 additions and 0 deletions
+143
View File
@@ -0,0 +1,143 @@
# 使用精灵
## 精灵是什么
实际上回答这个问题之前不如先说一说“在没有精灵功能之前的编辑器版本中能够做些什么”。如果我们需要创造一些小物件放在屏幕上移动或者变化,但是又并不需要对其设计节奏,例如花草树木,云彩鸟儿,爱心,圆圈方块图形等等,那么必须将其作为一个自制人物导入进来。使用**移动轨道**来操作。
但是这样制作小物件并不方便,并且也受轨道最多数量为16个的限制。于是这个功能被单独拿出来作为一个版块了,称之为“**精灵**”。
## 制作一个精灵
从上面的描述我们也能直观地感受到,实际上精灵就是一个简化的自制人物。如果你想到了这一层的话,那么看完第20节也就学会制作精灵了。将制作好的自制人物精灵图和json文件直接作为**精灵**导入进编辑器是没有任何问题的。
不过精灵功能支持一个更为简便的做法:如果你的精灵就只是一张仅有1帧的精灵图,那么是可以不写json文件的,直接导入即可。
导入精灵之后首先要进行基本设置:
![](../images/decoration-menu.png)
**精灵图数据**:右方的文件夹图标即可导入精灵;
**重排序**:和轨道排序一样,决定精灵在画面上的上下层关系;
**房间**:规定精灵所在的房间;
**可见性**:决定精灵在初始状态下是否可见,默认为可见,但建议都选为隐藏;
**深度**:**只能填整数但可以是负数**,决定精灵在画面上的上下层关系,深度判断的优先级高于重排序,也就是说深度不同的两个精灵,深度值越大精灵越处于下层,深度相同的两个精灵,排序越下精灵越处于下层;
这里需要额外介绍的是,每个房间的四个轨道也都是有固定的深度值的,且无法被改变,如果你想要让精灵去到轨道的前方,就要填写比轨道深度值更小的数字。
![轨道、手、击打效果的深度值](../images/decoration-depth.png)
<div class="decoration-depth">
<div class="row">
<div class="character samurai"></div>
<div class="beat">
<div class="b1-left"></div>
<div class="cb"></div>
<div class="cb"></div>
<div class="cb"></div>
<div class="cb"></div>
<div class="cb"></div>
<div class="cb"></div>
<div class="b7"></div>
<div class="cb b7"></div>
<div class="b7"></div>
</div>
</div>
</div>
<!--
| 普通拍子轨道 | 人物  | 前六拍左侧 | 前六拍中段 | 第普通拍左侧 | 第普通拍右侧 | 心脏之前 | 心脏  |
| :--- | :--- | :--- | :--- | :--- | :--- | :--- | :--- |
| 轨道1 | -0.5 | 1 | 0.5 | 1 | 0 | -2 | -2.5 |
| 轨道2 | -10.5 | -9 | -9.5 | -9 | -10 | -12 | -12.5 |
| 轨道3 | -20.5 | -19 | -19.5 | -19 | -20 | -22 | -22.5 |
| 轨道4 | -30.5 | -29 | -29.5 | -29 | -30 | -32 | -32.5|
| 单发拍子轨道 | 人物  | 前六拍左侧 | 前六拍中段 | 第普通拍左侧 | 第普通拍右侧 | 心脏之前 | 心脏  |
| :--- | :--- | :--- | :--- | :--- | :--- | :--- | :--- |
-->
**删除**:删除这个精灵。
## 移动精灵图
移动精灵图的设置和轨道移动如出一辙,仅有少量的区别,详细设置如下:
![](../images/decoration-move.png)
**位置:**将精灵移动到填写的位置,默认参考的是精灵的中心点坐标,`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°`
**轴点:**设置位置和缩放的基准点,相比于轨道,精灵需要设置两个变量,`x: 50% y: 50%`为角色的中心位置,也是默认位置。
**动画时长:**执行动画的时长,单位为节拍。如果此处填写`0`则是瞬间完成移动。填写负数则视为`0`
**缓速:**动画的速度变化,可自行尝试。这东西在很多需要持续一段时间的特效里都会存在,里面会有很多模式,只要把握以下原则就能快速明白了:`In`代表由慢至快,`Out`代表由快至慢,`InOut`代表由慢至快再变慢。后面不同的形式也就是快慢速的细微差距,可以根据自己的需要慢慢尝试。
> 如果你想直观地看看各种移动方式的速度区别,可以[看看这里](https://easings.net/zh-cn)。
## 绘制精灵图
绘制精灵图和轨道涂色如出一辙,仅有少量的区别,详细设置如下:
**边框:**边缘的三种样式。自左向右分别为:无边框,轨道边缘线,轨道阴影(除无边框外均可设置颜色)。
**涂色:**轨道内部全部涂成一个颜色,选择“开启”后可选择要涂色的颜色。
**透明度:**可以直接更改精灵的透明度。
**时长与缓速:**和其他特效中的完全一致,不过多赘述。
> 如果你想直观地看看各种移动方式的速度区别,可以[看看这里](https://easings.net/zh-cn)。
## 播放表情
播放表情仅有一个改变表情的功能。和自制人物的改变表情不同的是,改变精灵的表情只能是持续生效的,没有“一次”的选择。
## 显示/隐藏
显示/隐藏可以更改精灵的显示或隐藏状态。建议在初始状态设置为隐藏,在需要的时候改为可见,用完之后继续隐藏。
## 瓷砖精灵图
瓷砖精灵图可以让精灵直接做成平铺状态,但是保持原像素大小。
**平铺:**把原图平铺成长宽各多少份。
**偏移:**填写0~1的小数进行偏移,偏移的矢量方向为图像右上指向左下。
**速度:**平铺图的移动速度。
**时长与缓速:**同其他事件。
## 精灵的使用技巧
**1、作为场景物体**
最基本的用法,作为场景里的物件,便于做出动画效果。别看一句话就概括完了,仅这一条,加之较多的精灵数量就已经能做到相当复杂的视觉呈现了。
![](../images/decoration-ablackboard.png)
**2、精灵作为文字**
除了使用浮动文字,还可以将文字的图片作为精灵导入,来实现移动文字、染色等更高级的效果。因为是以图片的形式,原理上你是可以自己在绘画软件中写好字再导入的,这就是属于你的专属字体。
![](../images/decoration-text.gif)
**3、作为镜厅遮罩**
将一块纯色的精灵赋予极低的透明度,即可使精灵覆盖的区域不受镜厅影响,保持精灵的颜色,同时保留精灵后面的画面。
![](../images/decoration-mask.png)
**4、用精灵替代轨道**
内置的轨道功能里轨道线总归都是连为一体的,在有了精灵之后,我们能够最直观想到的做法就是,把轨道的每个部分都做成一个精灵,这样每个脉冲单位都可以独自进行移动了,他们随时可以分散,可以整合,可以拼接成各种有趣的形状。
更进一步地想想,轨道其实也不一定非得是轨道的样子,只要做七个一模一样的物件按照节奏变化,那么都可以替代标准的普通拍子。
![将轨道转化为海星](../images/decoration-star.gif)
![将轨道转化为蜡烛](../images/decoration-candle.gif)
![将轨道转化为冰与火之舞](../images/decoration-adofai.gif)
所以当你千辛万苦阅读了二十多个章节来到这里的时候,是时候尝试一次跳出节奏医生玩法本身的框架了,也许能寻找到一个独具一格又眼前一亮的玩法。