Accurate FNAF Clickteam “Panorama”
*NOTE* Dont expect this to work with an actual panoramic image, you will be disapointed.
This is a port of the Clickteam shader used in FNAF 1-5 (specificaly the shader used in the new FNAF mobile ports) compatible with Godot 3 and Godot 4
This shader acts as a sort of lens. Just put it on a ColorRect and youre done!
UPDATE: The shader has been updated to include with a “Smoothed” option. Turning this off will give the “stairstepped” look that the clickteam panorama has. Also fixed the bug that made the zoom amount change depending on the aspect ratio of the window
Shader code
shader_type canvas_item;
uniform int zoom = 75;
uniform bool smoothed = true;
uniform bool vertical = false;
uniform bool noWrap = true;
//Diable this line for Godot 3.x//
uniform sampler2D SCREEN_TEXTURE : hint_screen_texture, filter_linear_mipmap;
void fragment() {
lowp float fB;
lowp float fC;
//Change this if you want to make the stairstepping more/less intense//
const float steps = 230.0;
vec2 posTex;
vec2 uv = SCREEN_UV;
if(vertical == false){
fB = 1.0 - (float(zoom) * .0015);
fC = max(.02, 1.0 + (fB - 1.0) * 4.0 * pow((uv.x - 0.5), 2.0));
if (!smoothed){
fC = float(int(fC * steps)) / steps;
}
posTex = (uv * vec2(1.0, fC) + vec2(0.0, (1.0 - fC) / 2.0));
if(noWrap == false || (posTex.y >= 0.0 && posTex.y <= 1.0)){
COLOR.rgb = texture(SCREEN_TEXTURE, posTex).rgb;
}
} else {
fB = 1.0 - (float(zoom) * .0015);
fC = max(0.05, 1.0 + (fB - 1.0) * 4.0 * pow((uv.y - 0.5), 2.0));
if (!smoothed){
fC = float(int(fC * steps)) / steps;
}
posTex = uv * vec2(fC, 1.0) + vec2((1.0 - fC) / 2.0, 0.0);
if(noWrap == false || (posTex.x >= 0.0 && posTex.x <= 1.0)){
COLOR.rgb = textureLod(SCREEN_TEXTURE, posTex, 0.0).rgb;
}
}
}
There’s a problem, it changes depending on how big your screen is, and it looks super weird when it’s small.
One solution is to change the project settings window resize mode to viewport.
Also, one question I have is how do you change the strength of it?
Ah youre right Ill put this in the description
Sorry for the late response I havent logged in in a while
This is now completely fixed
How would I use this in Godot 4? When I apply it to a TextureRect node it just makes it blank, even if I add
Nice shader! It works well but there’s an important problem: Because the shader will change the shape of the origin image, so the UI collisions cant work with the processed image, and the offset of the collisions depends on the window size.I think PolygonShape2D can solve the problem but it was too hard to write a program to control the colliding shape.And Clickteam Fusion doesnt have this problem.Looking forward to your reply!
This is actually not true, the same thing happens in clickteam due to how the shader works