Screen Shake

Converted from = https://www.shadertoy.com/view/tdSyWz

  1. Create a Canvas Layer.
  2. Create a Color Rect as a child of the Canvas Layer.
  3. On the Color Rect -> Material -> Select “ShaderMaterial” -> Shader -> New Shader
  4. Type: Shader
  5. Mode: Canvas Item
  6. Template: Default
  7. Built-in Shader: false
  8. Load
  9. Copy paste the code into you shader and boom done.
  10. Simply adjust the shake strength to a non zero value to get it working

 

if you then want to call this from a godot script do somthing like this:

Consideration:
In this script the shake strength and time are basically one and the same in a more polished version seperate the two into a shake time and strength varaible and use a lerp based on current time to reduce the current strength.
That way a strength of 60 wont take a minute to stop shaking.

extends CanvasLayer

 

var strength = 2;

var curStrength = 0;

# Called when the node enters the scene tree for the first time.

func _ready():

pass # Replace with function body.

 

 

# Called every frame. ‘delta’ is the elapsed time since the previous frame.

func _process(delta):

curStrength = max(curStrength – delta, 0);

if(Input.is_action_just_pressed(“SpaceBar”)):

curStrength = strength;

 

$ColorRect.material.set_shader_parameter(“ShakeStrength”, max(curStrength,0))

 

Shader code
/*
	Camera Shake Effect Shader by @Near

	MIT License
*/

shader_type canvas_item;
uniform float ShakeStrength = 0;
uniform vec2 FactorA  = vec2(100.0,100.0);
uniform vec2 FactorB  = vec2(1.0,1.0);
uniform vec2 magnitude = vec2(0.01,0.01);
uniform sampler2D SCREEN_TEXTURE : hint_screen_texture, filter_linear_mipmap;

void fragment() {
    vec2 uv = SCREEN_UV;
	uv -= 0.5;
    uv *= 1.0 - 2.0 * magnitude.x;
    uv += 0.5;
	vec2 dt = vec2(0.0, 0.0);
	dt.x = sin(TIME * FactorA.x+FactorB.x) * magnitude.x;
	dt.y = cos(TIME *FactorA.y+ FactorB.y) * magnitude.y;
	COLOR = texture(SCREEN_TEXTURE,uv + (dt*ShakeStrength));
}

Tags
Post Effect, screen, Shake
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.

Related shaders

Doom Screen Melt Effect

Pencil screen space shader

Animated Screen Outline (flaming rainbow)

Subscribe
Notify of
guest

1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Godot User
Godot User
1 month ago

It gives me an error “Redefinition of SCREEN_TEXTURE”