Hi :eyes:

I want to try something like a “digital” level up, as if my character had a new update.
For now I have my base composition, I’ll try to add a lot more cool stuff like energy flow or data sparks shattering around the character. Also I’ll share a breakdown on the following days :eyes:

Transistor is my main reference for this one and I’m using Unity with URP.

Here’s the first version
你好：眼睛：

我想尝试一些像“数字”升级这样的东西，就好像我的角色有一个新的更新一样。
现在我有了我的基本构图，我会尝试添加更多很酷的东西，比如能量流或数据火花在角色周围破碎。另外，我将在接下来的几天分享细分：眼睛：

晶体管是我的主要参考，我正在将Unity与URP一起使用。

这是第一个版本

更多精彩图片 请登录

更多精彩图片 请登录

Here’s some adjustments :eyes:

I’ve tried to make some data trails collected by the core of the character. I made a perpendicular movement with pre baked lines and a shader that scrolls a texture over the path. I’ve made a specific tool to easily generate this path shape.
以下是一些调整：眼睛：

我试图制作一些由角色核心收集的数据线索。我用预先烘焙的线条和一个着色器做了一个垂直的动作，该着色器在路径上滚动纹理。我制作了一个特定的工具来轻松生成此路径形状。

更多精彩图片 请登录

The datas movement is inspired on this wonderfull artwork :eyes:
数据运动的灵感来自这件奇妙的艺术品

Here’s the tool I’ve made to generate data patterns.

I use the Unity’s line renderer editor to draw a simple path and I scatter points with a noised position, then I generate corners between each points to create the perpendicular shape. Once the point list is generated, I generate a second line render with the final path.
这是我用来生成数据模式的工具。

我使用 Unity 的线条渲染器编辑器绘制一条简单路径，并使用噪声位置分散点，然后在每个点之间生成角以创建垂直形状。生成点列表后，我将使用最终路径生成第二行渲染。

更多精彩图片 请登录

Here’s a small breakdown of the character shader :eyes:

For the voxel and grid effects, there’s a simple way to do this:
下面是字符着色器的一个小细分：眼睛：

对于体素和网格效果，有一个简单的方法可以做到这一点：

更多精彩图片 请登录

By rounding your vertices coordinates, it will snap positions and fake a voxel effect even, it’s not perfect but the animation is really short, so it works pretty well.
通过对顶点坐标进行四舍五入，它会捕捉位置并伪造体素效果，它并不完美，但动画真的很短，所以它工作得很好。

更多精彩图片 请登录

About the grid, I used a texture mapped on the vertices coordinates XY and ZY plans. You can easily reproduce this with triplanar mapping. In my case, i just needed to blend 2 plans.

**Now for the Glitch : **
关于网格，我使用了在顶点坐标 XY 和 ZY 平面上映射的纹理。您可以使用三平面映射轻松重现这一点。在我的情况下，我只需要混合2个计划。

**现在对于故障： **

更多精彩图片 请登录

The best way for me to have a screen mapped glitch without having artefacts and map scrolling on camera movement was to get vertices view coordinates centered on the object pivot.
对于我来说，在没有伪影和相机移动时滚动的屏幕映射故障的最佳方法是获得以对象透视为中心的顶点视图坐标。

更多精彩图片 请登录

Also an efficient way to have a jittering value is to simply map a noise on Time. I remapped this value to have a more glitchy style:
获得抖动值的另一种有效方法是简单地将噪声映射到Time上。我重新映射了这个值，使其具有更故障的样式：

更多精彩图片 请登录

At the end, you just need to multiply Displacement and Glitch value and multiply the output value with a right vector transformed from world to view coordinates to ensure the glitch will always look parallel to your view X axis:
最后，您只需要将位移和毛刺值相乘，并使用从世界转换为视图坐标的右向量将输出值相乘，以确保毛刺始终与您的视图X轴平行：

更多精彩图片 请登录

Here’s the complete shader sample:
下面是完整的着色器示例：

更多精彩图片 请登录

Also, here’s some references I’ve used. Transistor helped me a lot to understand colors and shapes I could use for this kind of effects.

I also used some references from LoL Program skins, Recompiled, Resogun and artworks from Bastien Grivet.
另外，这是我使用的一些参考资料。晶体管帮助我理解了可以用来制作这种效果的颜色和形状。

我还使用了LoL程序皮肤，Recompiled，Resogun和Bastian Grivet的艺术品中的一些参考资料。

更多精彩图片 请登录

Hey there, someone asked me for the source files. Here it is :eyes:

Go to “Code/Download ZIP” to get the files.
嘿，有人问我要源文件。在这里：眼睛：

转到“代码/下载ZIP”以获取文件。

GitHub - Sorangon/Level-Up-Sketch-Open-Project 46
Contribute to Sorangon/Level-Up-Sketch-Open-Project development by creating an account on GitHub.

GitHub - Sorangon/Level-Up-Sketch-Open-Project 46
通过在GitHub上创建一个帐户，为Sorangon/Level-Up-Sketch-Open-Project开发做出贡献。

赞元素币.赞元素币！

我都想学了！

升级

源文件在哪，想学做一个

牛逼