Qi aura, outline
Enable texure mipmaps:
Texture file > Import > Generate Mipmaps
Enable any mipmaps filter:
CanvasItem > Filter > LinearMipmaps
In pixel art it looks weird.
Hi, this is a “simple” shader (I mean, I can only change colors :V), after hours of typing, plus about 2 tutorials (there aren’t many, or I don’t know how to search :V) I got this.
I hope you like it and enjoy it.
Hola, este es un sombreador “simple” (quiero decir, solo puedo cambiar colores :V), después de horas de escribir, además de unos 2 tutoriales (no hay muchos, o no sé buscar :V) Tengo esto.
Shader code
shader_type canvas_item;
render_mode unshaded, blend_mix;
uniform vec2 ScaleMult = vec2(1.0);
uniform float AuraProgres :hint_range(0.0, 1.0, 0.1) = 0.0;
uniform float TextureLaodMult :hint_range(0.0, 10.0, 0.01) = 8.0;
uniform float Tilling :hint_range(0.0, 60.0, 0.01) = 26.0;
uniform vec2 MovementDirSpeed = vec2(-0.6, 1.0);
uniform vec2 MovementDirSpeed2 = vec2(0.6, 1.0);
uniform sampler2D color_gradiant :repeat_enable, filter_linear_mipmap;
uniform vec2 Noise_Seed = vec2(1.0);
vec2 random(vec2 uv){
uv += Noise_Seed;
uv = vec2( dot(uv, vec2(127.1,311.7) ),
dot(uv, vec2(269.5,183.3) ) );
return -1.0 + 2.0 * fract(sin(uv) * 43758.5453123);
}
float noise(vec2 uv) {
vec2 uv_index = floor(uv);
vec2 uv_fract = fract(uv);
vec2 blur = smoothstep(0.0, 1.0, uv_fract);
float bottom_left = dot(random(uv_index + vec2(0.0, 0.0)), uv_fract - vec2(0.0, 0.0));
float bottom_right = dot(random(uv_index + vec2(1.0, 0.0)), uv_fract - vec2(1.0, 0.0));
float top_left = dot(random(uv_index + vec2(0.0, 1.0)), uv_fract - vec2(0.0, 1.0));
float top_right = dot(random(uv_index + vec2(1.0, 1.0)), uv_fract - vec2(1.0, 1.0));
float bottom_mix = mix(bottom_left, bottom_right, blur.x);
float top_mix = mix(top_left, top_right, blur.x);
float final_value = mix(bottom_mix, top_mix, blur.y);
// Ajustamos para que el resultado esté en el rango de 0.0 a 1.0
return (final_value + 1.0) * 0.5;
}
vec4 AuraEffect(vec2 uv, vec4 CurrentColor, sampler2D OriginTexTure){
vec2 TimeUV = MovementDirSpeed * TIME;//direction
vec2 TimeUV2 = MovementDirSpeed2 * TIME;//direction
vec2 ScaleMultFractment = (1.0 - ScaleMult)/2.0;//Scale the outline
vec2 compos_uv = uv * ScaleMult + ScaleMultFractment; //Scale the outline
//I don't know about shaders but I got this, this was the key.----> noise(uv * Tilling + TimeUV) * 8.0
vec4 alpha = textureLod(OriginTexTure, compos_uv, noise(uv * Tilling + TimeUV) * TextureLaodMult);
vec4 GradientColors = texture(color_gradiant, fract( vec2(-uv.y, uv.x) + (TimeUV * 0.4)) ) * 3.0;
vec4 sil = GradientColors * noise(uv * Tilling - TimeUV);
sil.a = alpha.a * noise(uv * Tilling + TimeUV) * noise(uv * Tilling + TimeUV2) * 5.0;
//return sil;
return mix(CurrentColor, sil * AuraProgres, (1.0 - CurrentColor.a));
}
void fragment() {
// Called for every pixel the material is visible on.
COLOR = AuraEffect(UV, COLOR, TEXTURE);
}
//void light() {
// Called for every pixel for every light affecting the CanvasItem.
// Uncomment to replace the default light processing function with this one.
//}
How to set Color Gardient to achieve the effect in the picture? thanks
…Just add a 1D gradient with multiple colors in the parameters section XD.
It should be set exactly as in the image by default, although it may vary depending on whether you use a single texture or a sprite sheet.
Also the smaller “ScaleMult” is, the bigger it should make the aura.
I changed the description maybe that helps you.
Useful, very cool!
not valid
Why is it not valid? To improve it, I mean.
I changed the description maybe that helps you.
Thank you for your work. I still can’t get my head around it though
Can you come up with a video demonstration
For me this shader doesn’t look like your screenshot at all, the edges are just a sharp outline that follow the exact shape of the texture the shader is on
Hey this is my first shader and I don’t know much about it. But I tried it with a pixelart texture and it doesn’t work at all, I’ll put it in the description.
Are you using it in pixelart? If not, increase the tilling and reduce the scale, that might help you.
I changed the description maybe that helps you.