How to Make a Wobbling Screen Effect in Unity

Today, I am going to show you how to wobble … or at least how to make a screen wobble effect in Unity.

To create this wobble effect, we are going to write a simple shader (after having gone through all the math needed to understand this effect *cough*) to make our screen pixel colors move in a wave like way. For that I am going to show you two methods to create this effect. One will work in Unity’s Built-in Renderer (using the OnRenderImage function), and the other one will work with the Universal Render Pipeline (using the ScriptableRenderPass API).

Now, without further ado, have fun with the video!


CHAPTERS:

[0:00] Introduction
[1:01] Title card
[1:07] The math part
[3:21] Creating the WobbleEffectShader – Part 1
[5:24] Why does our wobble mirror our sine wave?
[6:30] Creating the WobbleEffectShader – Part 2
[7:18] Creating the WobbleEffect script
[10:30] Writing a WobbleTestManager script
[10:53] Disabling the script does not disable it?!
[11:45] Testing the “base” wobble effect
[11:57] Fixing unwanted behavior – When Wobble On was pressed too often
[12:39] Implementing a smooth transition between Wobble On and Off
[14:16] Testing the smoother wobble effect
[14:25] Fixing unwanted behavior – When trying to warm up while cooling down (and vice versa)
[17:03] What happens when _shift gets too big? And how to fix it!
[17:55] Final result of our wobble effect (Built-in)
[18:05] How to make our wobble effect work in URP
[20:26] Final result of our wobble effect (URP)
[20:33] Outro


MUSIC:

Evan King (Context Sensitive) – Pocket Universe
   / contextsensitive  
https://contextsensitive.bandcamp.com/


RESOURCES:

Function graphs generated at:
https://rechneronline.de/funktionsgra...


REFERENCES:

[1] Unity Technologies. (Latest Publication Date: 2023, April 7). MonoBehaviour.
Unity Documentation Version: 2021.3.
https://docs.unity3d.com/ScriptRefere...
(Last checked: 2023, April 17)

[2] Unity Technologies. (Latest Publication Date: 2023, March 24). MonoBehaviour.OnRenderImage(RenderTexture,RenderTexture).
Unity Documentation Version: 2021.3.
https://docs.unity3d.com/ScriptRefere...
(Last checked: 2023, March 30)

[3] Bill. (2020, August 8). Full Screen Shaders in HDRP, URP, and Built In Renderer. Game Dev Bill. https://gamedevbill.com/full-screen-s...
(Last checked: 2023, March 30)

[4] Cyan. (2020, June 22). Post Processing in the Universal RP. CYAN Game Development Blog. https://cyangamedev.wordpress.com/202...
(Last checked: 2023, March 30)

---------------------------------------------------------------------------------------------

Check out my first mobile game Flight to the Rescue: Blackbird Ore!

Download for free on:
iOS: https://apple.co/2ZWVtFp
Android: https://bit.ly/36BF7TI


And also check out my other videos:

How I Make a Retro Shattering Screen Battle Transition [UNITY + BLENDER] – PART 1
   • How I Make a Retro Shattering Screen ...  

How I Make a Retro Shattering Screen Battle Transition [UNITY + BLENDER] – PART 2
   • How I Make a Retro Shattering Screen ...  

Flight to the Rescue: Blackbird Ore - Full Original Soundtrack
   • Flight to the Rescue: Blackbird Ore -...  

Flight to the Rescue: Blackbird Ore - Official Story Trailer
   • Flight to the Rescue: Blackbird Ore -...  

Flight to the Rescue: Blackbird Ore - Official Gameplay Trailer
   • Flight to the Rescue: Blackbird Ore -...  








#gamedev #indiegame #gamedevelopment #unity3d #madewithunity #indiedev #unitytutorial