XBR像素平滑·动森Pattern风格复刻
awsl
起因是在推上看到有个小姐姐问动森pattern的问题,刚好这阵子在做的模拟经营想要整个动森类似的pattern系统→ω→
维基上有张图,比较全面地概括了现有的一些像素画scaling算法。几种主要算法的差异可以看看这个网站。
和动森最相似的是xBR系。
xBR简介
xBR算法的简介(摘自链接):
xBR is a pixel art scaling algorithm that scales by rules. It was developed by Hyllian in 2011 mainly as scaling filters for video game emulators. He introduce his algorithm for the first time in a forum at byuu.org, a Nintendo emulator project. Like Hqx, xBR algorithm family also consist of 2xBR, 3xBR, and 4xBR for scale factors of 2:1, 3:1, and 4:1 respectively.
This algorithm works by detecting edges and interpolating pixels along those edges. It assumpted edges as pixel regions in the image where pixels are very distinct among them along some direction (high color frequency) and very similar perpendicular to that direction (low color frequency).
xBR comes with two variants, one which blending image colors for smoothing the results and other which not blending image colors (xBR (No Blend)) so that the results looks a bit jaggies. However The advantages of xBR (No Blend) are it maintains image sharpness, because it doesn’t produce additional colors, so that the number of unique colors between the original and the results remain same. Thus the xBR (No Blend) can be used recursively for scaling image multiple times without loss of sharpness although only 3xBR NoBlend that can gives optimal results while 2xBR (No Blend) and 4xBR (No Blend) will produce stair effect for 45 degree of lines.
xBR原理
作者大大的亲笔教程(谁爱看谁看吧= -=)
cg代码
作者大大的repo,xbr和xbrz都有(可能所有image effect的cg代码都有吧,细思极恐)。
转Unity尝试
(0606)虽然代码很全但是下午尝试把cg转换到unity里还是失败了。前人的经验如下:
- 某试图将xbr的cg转unity的帖子:代码能跑但是最后没有具体实施方案,跑出来的画面很鬼畜(感觉还能抢救一下…
- 就上面那个帖子提问收到作者回复的另一个帖子:主要阐述了因为开发平台是Retroarch所以有些尺寸参数不一样(主要问题大概就是这里了
- 作者推荐的xBR算法版本其实到现在作者也还在更新…
(0609)找到了4XBR的shaderlab代码,修改后可以作为camera特效使用,效果如下:
但是作为单独材质添加到sprite无法描边(shader问题),显示如下。用Image Resizer也是同样的问题,可能是算法的缘故了…(暂时无能为力.jpg)
现成工具
目前找到image resizer这个软件(还是2013年的软件,得亏win10还能跑,有bug但能用),包含xbr算法的转换。唯一需要注意的是边缘轮廓必须为深色,否则转换图会有黑色杂色边缘。转换效果如下,基本能达到ACNH类似风格。
ps中的海绵滤镜能达到类似效果(如下图),但是无法批量操作,因为根据画面参数需要调整。理论上可能可以制作出类似效果吧(但还是pass