起因
前阵子沉迷动森,DIY 样式的画风真的超萌(゚д゚)ノ,恰巧在推上看到有个小姐姐在讨论这个像素画转换的算法,就想在 Unity 里整整。
最后实现的镜头特效效果如下图。
像素缩放算法
常见的像素缩放算法对比图如下,摘自维基:
可以看到动森的 DIY pattern 的像素转换效果和 xBR 系 (xBR4x)最相似。
相关原理就不赘述了,作者大大有教程,感兴趣可以看看(不好意思我只是个么得求知欲的搬运工。
cg 源代码在 github 上都有公开。这里我选择了 xBR4x 进行搬运工作。
注意事项
cg 文件转 shaderlab 文件只需要在 unity 着色器文件模板里复制粘贴加上 cg 代码即可,几乎无改动,但是需要手动加上 properties 等 shaderlab 文件必需内容。
注意 cg 文件中用到的包含文件也需要添加到 unity 项目中。
要取得最佳效果,所有图片的 Filter Mode 需设置成 Point。
分辨率会受 camera 距离图片距离、场景大小、像素画大小影响,需要根据实际情况调试。
暂只支持 camera 后期渲染,不支持直接添加材质到 Gameobject,描边有扩大化的问题。
工程文件
llapuras / XbrShader
https://github.com/llapuras/XbrShader
参考
pixel art scaling comparison· 内有大图,可预览几种常用像素转换算法的具体效果
https://www.unindented.org/blog/pixel-art-scaling-comparison-part-2/
相当齐全的 cg shader repo· 理论上这里的 shader 都能搬进 unity 里用
https://github.com/libretro/common-shaders
某试图将 xbr 的 cg 转 unity 的前人的帖子· 帮了大忙!
https://forum.unity.com/threads/how-to-copy-paste-a-cg-shader-found-on-the-internet-in-unity.334772/#post-2181555
image resizer· 一个图片转换工具,转换算法相当齐全,就是版本太老,有报错但是勉强能用
https://code.google.com/archive/p/2dimagefilter/downloads
领取专属 10元无门槛券
私享最新 技术干货