Project1

标题: 如何制作pattern fade？ [打印本页]

作者: defisym 时间: 2018-9-8 13:56
标题: 如何制作pattern fade？
本帖最后由 defisym 于 2018-9-8 13:58 编辑

众所周知，rm在xp时代有一个事件指令叫“执行渐变”
后来虽然阉割掉了，但默认进战斗的时候也会做这件事
像这样

这种东西其实蛮常见的，比如你传

好吧其实上面vx的那个就是这张图
rm里把这个功能封装了，没给你看内部实现，不过其实思路很简单，筛选像素rgb，该涂黑涂黑该透明透明就行了，哦，vx里应该还是做了一个求灰度

后来拆别的游戏的包（好吧还是你传），知道这玩意学名叫pattern fade

那么问题来了……这种东西要如何制作呢？

这样的其实还好，但那些猫爪子等等的实在是想不明白怎么做的
果然还是我太菜了

（突然发现不能传视频上来）
（好吧2mb也传不上来）

作者: guoxiaomi 时间: 2018-9-8 20:13
原理可能是，按照transition的时间将阈值参数设置为0-255，然后低于此阈值的点设为透明，其他的设为不透明。可以联想到等高线……

作者: 89444640 时间: 2018-9-10 09:10
试了一下效果

确实是从黑影开始渐变的。
但是各种花样的怎么做就不清楚了，
找只有两种颜色的图查找边缘然后用渐变工具吗？

作者: defisym 时间: 2018-9-10 09:37

89444640 发表于 2018-9-10 09:10
试了一下效果
确实是从黑影开始渐变的。
但是各种花样的怎么做就不清楚了，

RPG maker里面应该是求过灰度，然后算法也没有我这样简单粗暴直接
应该是在边界上有循环来做半透明过渡，目前我还没想到用循环做的好方法
尤其是Pixel Shader的指令数量限制……暴力肯定超了_(:з)∠)_

作者: 89444640 时间: 2018-9-10 09:48

defisym 发表于 2018-9-10 09:37
RPG maker里面应该是求过灰度，然后算法也没有我这样简单粗暴直接
应该是在边界上有循环来做半透明过渡， ...

这个似乎还挺好玩的，好像有很多种方法绘制？渐变工具除了默认的几个也应该有很多吧？

作者: defisym 时间: 2018-9-10 10:51

89444640 发表于 2018-9-10 09:48
这个似乎还挺好玩的，好像有很多种方法绘制？渐变工具除了默认的几个也应该有很多吧？

...

图像间切换其实不难，将涂黑改成获取前景，背景或指定贴图就行了，但最大的问题是，mmf里pixel shader的贴图只能在编辑器里指定，动态读取做不到……似乎是因为用公式指定parameter默认返回的是数值类型，没办法指定一个文件路径，但全都导入进exe里面去维护起来很麻烦，等同于就没什么意义了……
大概想了想，应该是先把不透明度抹了，然后循环指定一级一级自加来实现流畅过渡，只是不知道这样性能开销是不是太大了

作者: defisym 时间: 2018-9-11 20:06
虽然不够平滑，但我尽力了

for(int i=step;i>0;i--)
{
if(Out.Color.r<=(progress+i*RgbStep))
{
a=a+AlphaStep;
}
}

复制代码

Pattern Fade 2.part1.rar (2 MB, 下载次数: 63)

Pattern Fade 2.part2.rar (1.65 MB, 下载次数: 64)

作者: shencao 时间: 2018-9-12 03:49
本帖最后由 shencao 于 2018-9-12 03:53 编辑

是说怎么做图吗？那你还需要ps技术⋯⋯

不知道具体脚本里是怎么实现的，反正从效果来看（我猜）它的过程是：
由黑到白（以灰度作为渐变的顺序？）依次变化为下一张图／场景。
那么如果要自己做，就反着来推：
想要先变化（消失）的部分用深色，后变化的部分用浅色。
想要这两者之间有个平滑的过渡，就拉个渐变色（等于是电脑替你排列灰度）
如果不需要平滑的渐变，也可以用纯色，比如弄个马塞克图，效果就会是一格一格的消失，同色的格子会同时消失。
总之按照自己的需要，画出渐变或者纯色或者杂色。

lz提到的猫脚印那张，先拉一个底色，然后自己画脚印，调整脚印的颜色。
顶楼举例里的那个一块一块的效果，类似（或者就是）ps滤镜－像素化－晶格化。
仿造一下：

（随手调的渐变，它歪了，纯示意不要深究XDDD）

作者: defisym 时间: 2018-9-12 11:56

shencao 发表于 2018-9-12 03:49
是说怎么做图吗？那你还需要ps技术⋯⋯

不知道具体脚本里是怎么实现的，反正从效果来看（我猜）它的过程是 ...

感谢！
具体实现我是写了一个Pixel Shader，循环处理不透明度来做了渐变
虽然边缘过渡还不够流畅（理论上不是直接卡而是应该求梯度，根据梯度决定过渡边沿），但也算是凑合了……

作者: defisym 时间: 2018-9-12 23:45

尽力了_(:з」∠)_

作者: shitake 时间: 2018-9-13 00:13
https://every-tuesday.com/how-to ... ustrator-photoshop/ 滑稽

作者: defisym 时间: 2018-9-14 12:36
每当我觉得做的差不多的时候，就是发现新bug的时候
之前的算法没考虑渐变图透明的场合……
修好了大概是这样的

实装了大概是这样的

虽然立绘不适合做Pattern Fade，但经常出现半透明的也就这里了

欢迎光临 Project1 (https://rpg.blue/)