{"author_link":"\/users\/joe-z","author_name":"joe.z","author_uid":"joe-z","comments":[],"epoch":1619826223,"event":"LD48","format":"md","ldjam_node_id":255557,"likes":12,"metadata":{"p_key":"157275","p_author":"joe.z","p_authorkey":"1245803","p_urlkey":"377522","p_title":"How We Created The Monitor Effect For Egress","p_cat":"LDJam ","p_event":"LD48","p_time":"1619826223","p_likes":"12","p_comments":"0","p_status":"WAYBACK","us_key":"1245803","us_name":"joe.z","us_username":"joe-z","event_start":"1619222400","event_key":"109","event_name":"Ludum Dare 48"},"node":{"_collation":{"body_sanitizer":"TextUtils::SanitizeHTML via existing importer","event":"LD48","removed_author":false},"_superparent":233335,"_trust":1,"author":245803,"body":"If you have checked our Ludum Dare entry, [Egress](https:\/\/ldjam.com\/events\/ludum-dare\/48\/egress) you might be wondering how we created the glow and screen-warping effect.  \n  \n![Egress (DEBUG) 2021-04-30 4_11_52 PM.png](\/\/\/raw\/b20\/c3\/z\/41d9f.png)\n\nIf you haven't played it yet, give it a go!  https:\/\/lunatic-games.itch.io\/egress\n## The Glow Effect\nTo create the glow, we applied a [Gaussian Blur](https:\/\/en.wikipedia.org\/wiki\/Gaussian_blur) additively to the screen. By doing it additively, it created a glow effect rather than just blurring the entire screen. While attempting to optimize the shader code, I discovered that if it was applied in steps, 4 pixels in this case, it created a diode look:  \n  \n![egress.png](\/\/\/raw\/b20\/c3\/z\/41da0.png)\n\nThe complete code (written in Godot's native shading language):\n```\nshader_type canvas_item;\n\nuniform float radius = 8.0;  \/\/ Radius of pixels to consider\nuniform float step_size = 4.0;  \/\/ Larger steps give it a more pixel-y look\nuniform float sd = 10.0;  \/\/ See Gaussian Blur algorithm\nuniform float additive_strength = 24.0;  \/\/ How much to include of the blur output\nuniform float center_strength = 1.0;  \/\/ How much to include of the un-blurred pixel color\n\nvoid fragment() {\n\tfloat pi = 3.141592653;\n\tfloat e = 2.71828;\n\tfloat multiplier  = 1.0 \/ (2.0 * pi * pow(sd, 2));\n\tvec4 sum = vec4(0.0);\n\tfor (float x = -radius; x <= radius; x += step_size) {\n\t\tfor (float y = -radius; y <= radius; y += step_size) {\n\t\t\tvec4 value = texture(SCREEN_TEXTURE, SCREEN_UV + SCREEN_PIXEL_SIZE * vec2(x, y));\n\t\t\tfloat p = -(pow(x, 2) + pow(y, 2)) \/ (2.0 * pow(sd, 2));\n\t\t\tsum += value * multiplier * pow(e, p);\n\t\t}\n\t}\n\tCOLOR = sum * additive_strength + texture(SCREEN_TEXTURE, SCREEN_UV) * center_strength;\n}\n```\n\n## The Screen-Warping Effect\nIt took a bit of testing to find the best functions to use for creating a convincing screen warp. We ended up offsetting the UV coordinates of the screen using two different cosine waves: one based off the distance from the horizontal center, and another one using the distance from the vertical center. If the UV coordinates ended up being outside the boundaries, the screen was simply colored black.  \n  \nThe complete code:\n```\nshader_type canvas_item;\n\nuniform float margin;\nuniform vec2 strength = vec2(10.0, 1.0);\nuniform vec4 background_color: hint_color;\n\nvoid fragment() {\n\tfloat x = SCREEN_UV.x - 0.5;\n\tfloat y = SCREEN_UV.y - 0.5;\n\ty *= strength.y * (1.0 - cos(x));  \/\/ How much to offset the y UV coordinate\n\tx *= strength.x * (1.0 - cos(y));  \/\/ How much to offset the x UV coordinate\n\tif (SCREEN_UV.y + y > 1.0 - margin * SCREEN_PIXEL_SIZE.y || \n\t\t\tSCREEN_UV.y + y < margin * SCREEN_PIXEL_SIZE.y || \n\t\t\tSCREEN_UV.x + x > 1.0 - margin * SCREEN_PIXEL_SIZE.x || \n\t\t\tSCREEN_UV.x + x < margin * SCREEN_PIXEL_SIZE.x) {\n\t\tCOLOR = background_color;\n\t} else {\n\t\tCOLOR = texture(SCREEN_TEXTURE, SCREEN_UV + vec2(x, y));\n\t}\n\t\n}\n```\n\nIf you haven't checked out our game yet, we would love for you to give a shot and give some feedback!  \n  \nIt can be played in your browser here: https:\/\/lunatic-games.itch.io\/egress\n  ","comments":2,"comments-timestamp":"2021-04-30T23:47:06Z","created":"2021-04-30T23:08:38Z","files":[],"files-timestamp":0,"id":255557,"love":12,"love-timestamp":"2021-05-01T08:36:04Z","meta":[],"modified":"2021-05-01T08:36:04Z","name":"How We Created The Monitor Effect For Egress","node-timestamp":"2021-04-30T23:44:36Z","parent":245128,"parents":[1,5,9,233335,245128],"path":"\/events\/ludum-dare\/48\/egress\/how-we-created-the-monitor-effect-for-egress","published":"2021-04-30T23:43:43Z","scope":"public","slug":"how-we-created-the-monitor-effect-for-egress","subsubtype":"","subtype":"","type":"post","version":785151},"node_metadata":{"n_key":"255557","n_urlkey":"377522","n_parent":"245128","n_path":"\/events\/ludum-dare\/48\/egress\/how-we-created-the-monitor-effect-for-egress","n_slug":"how-we-created-the-monitor-effec","n_type":"post","n_subtype":"","n_subsubtype":"","n_author":"245803","n_created":"1619824118","n_modified":"1619858164","n_version":"785151","n_status":"WAYBACK"},"source_url":"https:\/\/ldjam.com\/events\/ludum-dare\/48\/egress\/how-we-created-the-monitor-effect-for-egress","text":"If you have checked our Ludum Dare entry, [Egress](https:\/\/ldjam.com\/events\/ludum-dare\/48\/egress) you might be wondering how we created the glow and screen-warping effect.  \n  \n![Egress (DEBUG) 2021-04-30 4_11_52 PM.png](\/\/\/raw\/b20\/c3\/z\/41d9f.png)\n\nIf you haven't played it yet, give it a go!  https:\/\/lunatic-games.itch.io\/egress\n## The Glow Effect\nTo create the glow, we applied a [Gaussian Blur](https:\/\/en.wikipedia.org\/wiki\/Gaussian_blur) additively to the screen. By doing it additively, it created a glow effect rather than just blurring the entire screen. While attempting to optimize the shader code, I discovered that if it was applied in steps, 4 pixels in this case, it created a diode look:  \n  \n![egress.png](\/\/\/raw\/b20\/c3\/z\/41da0.png)\n\nThe complete code (written in Godot's native shading language):\n```\nshader_type canvas_item;\n\nuniform float radius = 8.0;  \/\/ Radius of pixels to consider\nuniform float step_size = 4.0;  \/\/ Larger steps give it a more pixel-y look\nuniform float sd = 10.0;  \/\/ See Gaussian Blur algorithm\nuniform float additive_strength = 24.0;  \/\/ How much to include of the blur output\nuniform float center_strength = 1.0;  \/\/ How much to include of the un-blurred pixel color\n\nvoid fragment() {\n\tfloat pi = 3.141592653;\n\tfloat e = 2.71828;\n\tfloat multiplier  = 1.0 \/ (2.0 * pi * pow(sd, 2));\n\tvec4 sum = vec4(0.0);\n\tfor (float x = -radius; x <= radius; x += step_size) {\n\t\tfor (float y = -radius; y <= radius; y += step_size) {\n\t\t\tvec4 value = texture(SCREEN_TEXTURE, SCREEN_UV + SCREEN_PIXEL_SIZE * vec2(x, y));\n\t\t\tfloat p = -(pow(x, 2) + pow(y, 2)) \/ (2.0 * pow(sd, 2));\n\t\t\tsum += value * multiplier * pow(e, p);\n\t\t}\n\t}\n\tCOLOR = sum * additive_strength + texture(SCREEN_TEXTURE, SCREEN_UV) * center_strength;\n}\n```\n\n## The Screen-Warping Effect\nIt took a bit of testing to find the best functions to use for creating a convincing screen warp. We ended up offsetting the UV coordinates of the screen using two different cosine waves: one based off the distance from the horizontal center, and another one using the distance from the vertical center. If the UV coordinates ended up being outside the boundaries, the screen was simply colored black.  \n  \nThe complete code:\n```\nshader_type canvas_item;\n\nuniform float margin;\nuniform vec2 strength = vec2(10.0, 1.0);\nuniform vec4 background_color: hint_color;\n\nvoid fragment() {\n\tfloat x = SCREEN_UV.x - 0.5;\n\tfloat y = SCREEN_UV.y - 0.5;\n\ty *= strength.y * (1.0 - cos(x));  \/\/ How much to offset the y UV coordinate\n\tx *= strength.x * (1.0 - cos(y));  \/\/ How much to offset the x UV coordinate\n\tif (SCREEN_UV.y + y > 1.0 - margin * SCREEN_PIXEL_SIZE.y || \n\t\t\tSCREEN_UV.y + y < margin * SCREEN_PIXEL_SIZE.y || \n\t\t\tSCREEN_UV.x + x > 1.0 - margin * SCREEN_PIXEL_SIZE.x || \n\t\t\tSCREEN_UV.x + x < margin * SCREEN_PIXEL_SIZE.x) {\n\t\tCOLOR = background_color;\n\t} else {\n\t\tCOLOR = texture(SCREEN_TEXTURE, SCREEN_UV + vec2(x, y));\n\t}\n\t\n}\n```\n\nIf you haven't checked out our game yet, we would love for you to give a shot and give some feedback!  \n  \nIt can be played in your browser here: https:\/\/lunatic-games.itch.io\/egress\n  ","title":"How We Created The Monitor Effect For Egress","wayback_source":[]}