2D lightning

This shader creates a lightning effect in the middle of the sprite. (Low down the resolution then you will have pixel art lightning effect)

`lightning_color` : specify color
`size`: how thick bolt line should be
`width`: how long the range of the bolt should be
`speed`: how fast the lightning should change
`cycle`: how many cycles the zigzag should be
`time_shift`: because we use the sine function as a random, the same `TIME` will produce the same bolt, so if we create different bolts, we need to shift the time a little bit.

Shader code
shader_type canvas_item;

uniform vec4 lightning_color: hint_color;

uniform float size: hint_range (0.,1.);
uniform float width: hint_range (0.,1.);
uniform float speed;
uniform float cycle;
uniform float ratio;
uniform float time_shift;
const float PI = 3.14159265359;

float rand(float x){
	return fract(sin(x)*100000.0);

void fragment(){
	float bolt = abs(mod(UV.y * cycle + (rand(TIME) + time_shift) * speed * -1., 0.5)-0.25)-0.125;
	bolt *= 4. * width;
	// why 4 ? Because we use mod 0.5, the value be devide by half
	// and we -0.25 (which is half again) for abs function. So it 25%!
	// scale down at start and end
	bolt *=  (0.5 - abs(UV.y-0.5)) * 2.; 
	// turn to a line
	// center align line
	float wave = abs(UV.x - 0.5 + bolt);
	// invert and ajust size
	wave = 1. - step(size*.5, wave);
	float blink = step(rand(TIME)*ratio, .5);
	wave *= blink;
	vec4 display = lightning_color * vec4(wave);
	COLOR = display;
2d, 2d_effect, bolt, lightning, pixel_art
The shader code and all code snippets in this post are under MIT license and can be used freely. Images and videos, and assets depicted in those, do not fall under this license. For more info, see our License terms.

More from vanviethieuanh

Screentone scene transition

Inline Feedbacks
View all comments