I'm making a game where you rotate around a 360 degree room and this is done with just a flat image of the office that loops. To help sell the feeling of rotating around a circular room, I wanna add some sort of distortion to make the sides of the screen curve, like how the office does in the FNAF games. Any idea how I could achieve this effect?
#(SOLVED) FNAF-like circular distortion
thorny narwhal
when it rotates theres just this slight distortion that makes it feel more round
have no idea how to go about achieve something like this.
kindred plinth
https://tenor.com/view/fnaf-door-gif-22997957
Usually you use shaders for something like that.
Funnily enough there is probably exactly the shader tailored for you here: https://godotshaders.com/shader/fnaf-clickteam-perspective-displacement/
Or here: https://godotshaders.com/shader/accurate-fnaf-panorama/.
Maybe one of them works for you
You probably have to use a Colorrect that spans the entire screen as some kind of post processing effect and apply the shader there. (Material -> New Shader Material -> New Shader -> Copy the shader script in there) Then adjust the parameters until it looks good. (https://docs.godotengine.org/en/stable/tutorials/shaders/custom_postprocessing.html)
thorny narwhal
once again, you are my savior sniffi 🫡
how hard would it be to try to make something like this from scratch
i guess thats something i just gotta find out
kindred plinth
oof that´s hard to say.. shaders are a whole different can of worms
thorny narwhal
mm oky
kindred plinth
if youre good with shaders you can do amazing things though and it is worth exploring the link for the site with shaders to see what is possible.
Alot of times i guess it is fine to just use something someone made.
If you have experience you can tailor an already existing shader for your needs.
If youre cracked you write it yourself.
Writing your own shaders i would start really small though and understand what youre doing
thorny narwhal
okyoky
i havent really messed with shaders before, didnt know how complex they were
kindred plinth
Shaders are basically a language where you program "which color should that pixel have" in super simplified terms (godot uses some glsl i think or atleast a variation of that).
the code runs for each pixel on the screen in parallel basically
thorny narwhal
jeez oky
yeah ill probably just use the premade ones lol
didnt realize it was such a whole thing
thank you for the links!!
kindred plinth
If you want i can list some more links for shaders in case you are bored in your free time
thorny narwhal
if you want! id like to look at them
so for these shaders
i see the code for them but what do i attach that script to
ive never messed with shaders before
kindred plinth
You make a colorrect that spans the whole screen
Then on the right site in the inspector of the colorrect you look for the canvas item category
Material -> New Shader Material -> New Shader -> Copy the shader script in there
thorny narwhal
oohhh okyoky thank u sm
kindred plinth
This is basically the workflow for a post processing shader that affects the whole screen. In general you can apply shaders also to sprites or similar.
thorny narwhal
hmmm i wonder how well this will work with my game. its a point and click deal, i wonder how much the hitboxes will get misaligned with where the clickable stuff appears near the edges
im assuming it doesnt correct hitboxes, its purley visual right?
kindred plinth
yup it is purely visual
thorny narwhal
oky
hopefully it doesnt misalign stuff too much
if it does i dont need the filter so its whatever
kindred plinth
There are some parameters to tweak the shader
thorny narwhal
yeh ill mess around with them
kindred plinth
Alright here are some bookmarks from my browser:
Learning Resources for Godot
General good introduction to shaders (unfinished but has a lot of information not godot but concepts transfer over):
https://thebookofshaders.com/
The shaders from the site above but written in godot so you can follow along and dont have to twist your brain to convert the code:
https://github.com/jayaarrgh/BookOfShaders-Godot/tree/4.0
https://jayaarrgh.itch.io/book-of-shaders-godot
Godot docs about shaders:
- https://docs.godotengine.org/en/stable/tutorials/shaders/shader_reference/shading_language.html
For 2D you mostly need CanvasItem shaders: https://docs.godotengine.org/en/stable/tutorials/shaders/shader_reference/canvas_item_shader.html
The docs also have some basic tutorial (maybe start here):
- https://docs.godotengine.org/en/stable/tutorials/shaders/your_first_shader/your_first_2d_shader.html
Some other basic introduction to shaders in godot
The godot shader site where you find alot of things, but there are also some basic guides on the left site in this link:
Other stuff:
Alot of crazy shaders (youd have to convert them to godot to use them):
Some advanced stuff if you like math:
This guy covers cool stuff: https://iquilezles.org/articles/
If something is not covered in the godot docs you probably need to learn from other resources (glsl, opengl):
For example here coordinate transformations:
thorny narwhal
goddamn
thank you haha
think making my own shaders is definitely a bit off in the future for me but its def something im interested in learning one day
thorny narwhal
@kindred plinth one of the shaders you sent works great! but for some reason whenever i use it, suddenly i cant interact with anything with the mouse, clicking on the buttons doesnt work
is there something i need to disable so that the canvaslayer isnt blocking the buttons and stuff under it?
nvm i figured it out
idk why i ping you before just googling stuff i gotta stop doing that 💀
kindred plinth
no worries haha
thorny narwhal
(SOLVED) FNAF-life circular distortion