{"id":551,"date":"2025-12-06T15:03:24","date_gmt":"2025-12-06T15:03:24","guid":{"rendered":"https:\/\/blog.lerk.ing\/?p=551"},"modified":"2025-12-07T19:17:41","modified_gmt":"2025-12-07T19:17:41","slug":"tetris-extras-gameover-tweak","status":"publish","type":"post","link":"https:\/\/blog.lerk.ing\/index.php\/2025\/12\/06\/tetris-extras-gameover-tweak\/","title":{"rendered":"Tetris Extras 01 &#8211; GameOver tweak"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">We will be updating our GameOver routine as follows.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Blur background (GameRoot)<\/li>\n\n\n\n<li>Show GameOver in 2x size<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">Let's begin with blurring the '<strong>GameRoot<\/strong>'.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Open '<strong>main.tscn<\/strong>'.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Select '<strong>UILayer<\/strong>'. Set '<strong>Layer<\/strong>' -&gt; '<strong>Layer<\/strong>' = 1.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Select '<strong>UIRoot<\/strong>'. Add a <strong>ColorRect<\/strong> node. Rename it to '<strong>BlurOverlay<\/strong>'.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">With '<strong>BlurOverlay<\/strong>' selected, set the following properties.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Layout to '<strong>Full Rect<\/strong>'.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"562\" height=\"706\" src=\"https:\/\/blog.lerk.ing\/wp-content\/uploads\/2025\/12\/image-40.png\" alt=\"\" class=\"wp-image-555\" srcset=\"https:\/\/blog.lerk.ing\/wp-content\/uploads\/2025\/12\/image-40.png 562w, https:\/\/blog.lerk.ing\/wp-content\/uploads\/2025\/12\/image-40-239x300.png 239w\" sizes=\"auto, (max-width: 562px) 100vw, 562px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>'<strong>Color<\/strong>' -&gt; White with alpha 1 (#ffffffff)<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"384\" height=\"1024\" src=\"https:\/\/blog.lerk.ing\/wp-content\/uploads\/2025\/12\/image-39-384x1024.png\" alt=\"\" class=\"wp-image-554\" srcset=\"https:\/\/blog.lerk.ing\/wp-content\/uploads\/2025\/12\/image-39-384x1024.png 384w, https:\/\/blog.lerk.ing\/wp-content\/uploads\/2025\/12\/image-39-112x300.png 112w, https:\/\/blog.lerk.ing\/wp-content\/uploads\/2025\/12\/image-39-576x1536.png 576w, https:\/\/blog.lerk.ing\/wp-content\/uploads\/2025\/12\/image-39.png 604w\" sizes=\"auto, (max-width: 384px) 100vw, 384px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>'<strong>Mouse<\/strong>' -&gt; '<strong>Filter<\/strong>' to <strong>Ignore<\/strong> (to prevent it from taking focus)<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"481\" height=\"1024\" src=\"https:\/\/blog.lerk.ing\/wp-content\/uploads\/2025\/12\/image-41-481x1024.png\" alt=\"\" class=\"wp-image-556\" srcset=\"https:\/\/blog.lerk.ing\/wp-content\/uploads\/2025\/12\/image-41-481x1024.png 481w, https:\/\/blog.lerk.ing\/wp-content\/uploads\/2025\/12\/image-41-141x300.png 141w, https:\/\/blog.lerk.ing\/wp-content\/uploads\/2025\/12\/image-41.png 548w\" sizes=\"auto, (max-width: 481px) 100vw, 481px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>'<strong>Visible<\/strong>' to <strong>unchecked<\/strong><\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"369\" height=\"1024\" src=\"https:\/\/blog.lerk.ing\/wp-content\/uploads\/2025\/12\/image-42-369x1024.png\" alt=\"\" class=\"wp-image-557\" srcset=\"https:\/\/blog.lerk.ing\/wp-content\/uploads\/2025\/12\/image-42-369x1024.png 369w, https:\/\/blog.lerk.ing\/wp-content\/uploads\/2025\/12\/image-42-108x300.png 108w, https:\/\/blog.lerk.ing\/wp-content\/uploads\/2025\/12\/image-42.png 538w\" sizes=\"auto, (max-width: 369px) 100vw, 369px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Our '<strong>Main<\/strong>' scene now looks like this.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"574\" height=\"810\" src=\"https:\/\/blog.lerk.ing\/wp-content\/uploads\/2025\/12\/image-38.png\" alt=\"\" class=\"wp-image-552\" srcset=\"https:\/\/blog.lerk.ing\/wp-content\/uploads\/2025\/12\/image-38.png 574w, https:\/\/blog.lerk.ing\/wp-content\/uploads\/2025\/12\/image-38-213x300.png 213w\" sizes=\"auto, (max-width: 574px) 100vw, 574px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Save '<strong>main.tscn<\/strong>'.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Now we add a blur shader to the '<strong>BlurOverlay<\/strong>'.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Right-click '<strong>res:\/\/<\/strong>' select '<strong>Create New<\/strong>' -&gt; '<strong>Folder<\/strong>...'<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Name the new folder '<strong>shaders<\/strong>'<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"407\" src=\"https:\/\/blog.lerk.ing\/wp-content\/uploads\/2025\/12\/image-43-1024x407.png\" alt=\"\" class=\"wp-image-558\" srcset=\"https:\/\/blog.lerk.ing\/wp-content\/uploads\/2025\/12\/image-43-1024x407.png 1024w, https:\/\/blog.lerk.ing\/wp-content\/uploads\/2025\/12\/image-43-300x119.png 300w, https:\/\/blog.lerk.ing\/wp-content\/uploads\/2025\/12\/image-43-768x305.png 768w, https:\/\/blog.lerk.ing\/wp-content\/uploads\/2025\/12\/image-43-1536x611.png 1536w, https:\/\/blog.lerk.ing\/wp-content\/uploads\/2025\/12\/image-43-2048x814.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Now right-click your new '<strong>shaders<\/strong>' folder. Select '<strong>Create New<\/strong>' -&gt; '<strong>Resource...<\/strong>'.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"759\" src=\"https:\/\/blog.lerk.ing\/wp-content\/uploads\/2025\/12\/image-45-1024x759.png\" alt=\"\" class=\"wp-image-560\" srcset=\"https:\/\/blog.lerk.ing\/wp-content\/uploads\/2025\/12\/image-45-1024x759.png 1024w, https:\/\/blog.lerk.ing\/wp-content\/uploads\/2025\/12\/image-45-300x222.png 300w, https:\/\/blog.lerk.ing\/wp-content\/uploads\/2025\/12\/image-45-768x570.png 768w, https:\/\/blog.lerk.ing\/wp-content\/uploads\/2025\/12\/image-45.png 1076w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Select '<strong>Shader<\/strong>'.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"621\" src=\"https:\/\/blog.lerk.ing\/wp-content\/uploads\/2025\/12\/image-44-1024x621.png\" alt=\"\" class=\"wp-image-559\" srcset=\"https:\/\/blog.lerk.ing\/wp-content\/uploads\/2025\/12\/image-44-1024x621.png 1024w, https:\/\/blog.lerk.ing\/wp-content\/uploads\/2025\/12\/image-44-300x182.png 300w, https:\/\/blog.lerk.ing\/wp-content\/uploads\/2025\/12\/image-44-768x466.png 768w, https:\/\/blog.lerk.ing\/wp-content\/uploads\/2025\/12\/image-44-1536x931.png 1536w, https:\/\/blog.lerk.ing\/wp-content\/uploads\/2025\/12\/image-44-2048x1242.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Name the new shader '<strong>res:\/\/shaders\/blur_overlay.gdshader<\/strong>'.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"786\" height=\"758\" src=\"https:\/\/blog.lerk.ing\/wp-content\/uploads\/2025\/12\/image-46.png\" alt=\"\" class=\"wp-image-561\" srcset=\"https:\/\/blog.lerk.ing\/wp-content\/uploads\/2025\/12\/image-46.png 786w, https:\/\/blog.lerk.ing\/wp-content\/uploads\/2025\/12\/image-46-300x289.png 300w, https:\/\/blog.lerk.ing\/wp-content\/uploads\/2025\/12\/image-46-768x741.png 768w\" sizes=\"auto, (max-width: 786px) 100vw, 786px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Now select you new shader.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"628\" src=\"https:\/\/blog.lerk.ing\/wp-content\/uploads\/2025\/12\/image-47-1024x628.png\" alt=\"\" class=\"wp-image-562\" srcset=\"https:\/\/blog.lerk.ing\/wp-content\/uploads\/2025\/12\/image-47-1024x628.png 1024w, https:\/\/blog.lerk.ing\/wp-content\/uploads\/2025\/12\/image-47-300x184.png 300w, https:\/\/blog.lerk.ing\/wp-content\/uploads\/2025\/12\/image-47-768x471.png 768w, https:\/\/blog.lerk.ing\/wp-content\/uploads\/2025\/12\/image-47.png 1090w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Add this code to it.<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>shader_type canvas_item;\n\nuniform sampler2D SCREEN_TEXTURE : hint_screen_texture, filter_linear_mipmap;\n\n\/\/ Radius in pixels\nuniform float blur_radius : hint_range(0.0, 32.0) = 8.0;\n\/\/ Number of samples in each direction\nuniform int samples : hint_range(1, 20) = 6;\n\/\/ 0 = no blur, 1 = fully blurred\nuniform float blur_strength : hint_range(0.0, 1.0) = 0.6;\n\/\/ Optional slight dimming of background\nuniform float dim_amount : hint_range(0.0, 0.5) = 0.1;\n\nvoid fragment() {\n    vec4 original = textureLod(SCREEN_TEXTURE, SCREEN_UV, 0.0);\n\n    vec2 pixel = SCREEN_PIXEL_SIZE * blur_radius;\n\n    vec4 blurred = vec4(0.0);\n    int count = 0;\n\n    for (int x = -samples; x &lt;= samples; x++) {\n        for (int y = -samples; y &lt;= samples; y++) {\n            vec2 offset = vec2(float(x), float(y)) * pixel;\n            blurred += textureLod(SCREEN_TEXTURE, SCREEN_UV + offset, 0.0);\n            count++;\n        }\n    }\n\n    blurred \/= float(count);\n\n    \/\/ Blend between original and blurred\n    vec4 color = mix(original, blurred, blur_strength);\n\n    \/\/ Slight dimming, if wanted\n    color.rgb *= (1.0 - dim_amount);\n\n    COLOR = color;\n}<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #D8DEE9\">shader_type<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">canvas_item<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9\">uniform<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">sampler2D<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">SCREEN_TEXTURE<\/span><span style=\"color: #D8DEE9FF\"> : <\/span><span style=\"color: #D8DEE9\">hint_screen_texture<\/span><span style=\"color: #D8DEE9FF\">, <\/span><span style=\"color: #D8DEE9\">filter_linear_mipmap<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">\/\/<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">Radius<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">in<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">pixels<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9\">uniform<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">float<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">blur_radius<\/span><span style=\"color: #D8DEE9FF\"> : <\/span><span style=\"color: #88C0D0\">hint_range<\/span><span style=\"color: #ECEFF4\">(<\/span><span style=\"color: #B48EAD\">0.0<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">32.0<\/span><span style=\"color: #ECEFF4\">)<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">8.0<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">\/\/<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">Number<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">of<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">samples<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">in<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">each<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">direction<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9\">uniform<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">int<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">samples<\/span><span style=\"color: #D8DEE9FF\"> : <\/span><span style=\"color: #88C0D0\">hint_range<\/span><span style=\"color: #ECEFF4\">(<\/span><span style=\"color: #B48EAD\">1<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">20<\/span><span style=\"color: #ECEFF4\">)<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">6<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">\/\/<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">0<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">no<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">blur<\/span><span style=\"color: #D8DEE9FF\">, <\/span><span style=\"color: #B48EAD\">1<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">fully<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">blurred<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9\">uniform<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">float<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">blur_strength<\/span><span style=\"color: #D8DEE9FF\"> : <\/span><span style=\"color: #88C0D0\">hint_range<\/span><span style=\"color: #ECEFF4\">(<\/span><span style=\"color: #B48EAD\">0.0<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">1.0<\/span><span style=\"color: #ECEFF4\">)<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">0.6<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">\/\/<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">Optional<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">slight<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">dimming<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">of<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">background<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9\">uniform<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">float<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">dim_amount<\/span><span style=\"color: #D8DEE9FF\"> : <\/span><span style=\"color: #88C0D0\">hint_range<\/span><span style=\"color: #ECEFF4\">(<\/span><span style=\"color: #B48EAD\">0.0<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">0.5<\/span><span style=\"color: #ECEFF4\">)<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">0.1<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">void<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #88C0D0\">fragment<\/span><span style=\"color: #ECEFF4\">()<\/span><span style=\"color: #D8DEE9FF\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #D8DEE9\">vec4<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">original<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #88C0D0\">textureLod<\/span><span style=\"color: #ECEFF4\">(<\/span><span style=\"color: #81A1C1\">SCREEN_TEXTURE<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">SCREEN_UV<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">0.0<\/span><span style=\"color: #ECEFF4\">)<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #D8DEE9\">vec2<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">pixel<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">SCREEN_PIXEL_SIZE<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">*<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">blur_radius<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #D8DEE9\">vec4<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">blurred<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #88C0D0\">vec4<\/span><span style=\"color: #ECEFF4\">(<\/span><span style=\"color: #B48EAD\">0.0<\/span><span style=\"color: #ECEFF4\">)<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #8FBCBB\">int<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">count<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">0<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">for<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">(<\/span><span style=\"color: #8FBCBB\">int<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">x<\/span><span style=\"color: #D8DEE9FF\"> = -<\/span><span style=\"color: #D8DEE9\">samples<\/span><span style=\"color: #D8DEE9FF\">; <\/span><span style=\"color: #D8DEE9\">x<\/span><span style=\"color: #D8DEE9FF\"> &lt;= <\/span><span style=\"color: #D8DEE9\">samples<\/span><span style=\"color: #D8DEE9FF\">; <\/span><span style=\"color: #D8DEE9\">x<\/span><span style=\"color: #D8DEE9FF\">++<\/span><span style=\"color: #ECEFF4\">)<\/span><span style=\"color: #D8DEE9FF\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #81A1C1\">for<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">(<\/span><span style=\"color: #8FBCBB\">int<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">y<\/span><span style=\"color: #D8DEE9FF\"> = -<\/span><span style=\"color: #D8DEE9\">samples<\/span><span style=\"color: #D8DEE9FF\">; <\/span><span style=\"color: #D8DEE9\">y<\/span><span style=\"color: #D8DEE9FF\"> &lt;= <\/span><span style=\"color: #D8DEE9\">samples<\/span><span style=\"color: #D8DEE9FF\">; <\/span><span style=\"color: #D8DEE9\">y<\/span><span style=\"color: #D8DEE9FF\">++<\/span><span style=\"color: #ECEFF4\">)<\/span><span style=\"color: #D8DEE9FF\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">            <\/span><span style=\"color: #D8DEE9\">vec2<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">offset<\/span><span style=\"color: #D8DEE9FF\"> = <\/span><span style=\"color: #88C0D0\">vec2<\/span><span style=\"color: #ECEFF4\">(<\/span><span style=\"color: #8FBCBB\">float<\/span><span style=\"color: #ECEFF4\">(<\/span><span style=\"color: #D8DEE9\">x<\/span><span style=\"color: #ECEFF4\">),<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">float<\/span><span style=\"color: #ECEFF4\">(<\/span><span style=\"color: #D8DEE9\">y<\/span><span style=\"color: #ECEFF4\">))<\/span><span style=\"color: #D8DEE9FF\"> * <\/span><span style=\"color: #D8DEE9\">pixel<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">            <\/span><span style=\"color: #D8DEE9\">blurred<\/span><span style=\"color: #D8DEE9FF\"> += <\/span><span style=\"color: #88C0D0\">textureLod<\/span><span style=\"color: #ECEFF4\">(<\/span><span style=\"color: #81A1C1\">SCREEN_TEXTURE<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">SCREEN_UV<\/span><span style=\"color: #D8DEE9FF\"> + <\/span><span style=\"color: #D8DEE9\">offset<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">0.0<\/span><span style=\"color: #ECEFF4\">)<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">            <\/span><span style=\"color: #D8DEE9\">count<\/span><span style=\"color: #D8DEE9FF\">++;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    }<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #D8DEE9\">blurred<\/span><span style=\"color: #D8DEE9FF\"> \/= <\/span><span style=\"color: #8FBCBB\">float<\/span><span style=\"color: #ECEFF4\">(<\/span><span style=\"color: #D8DEE9\">count<\/span><span style=\"color: #ECEFF4\">)<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    \/\/ <\/span><span style=\"color: #8FBCBB\">Blend<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">between<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">original<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">and<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">blurred<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #D8DEE9\">vec4<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">color<\/span><span style=\"color: #D8DEE9FF\"> = <\/span><span style=\"color: #88C0D0\">mix<\/span><span style=\"color: #ECEFF4\">(<\/span><span style=\"color: #D8DEE9\">original<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">blurred<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">blur_strength<\/span><span style=\"color: #ECEFF4\">)<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    \/\/ <\/span><span style=\"color: #8FBCBB\">Slight<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">dimming<\/span><span style=\"color: #D8DEE9FF\">, <\/span><span style=\"color: #81A1C1\">if<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">wanted<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #D8DEE9\">color<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">rgb<\/span><span style=\"color: #D8DEE9FF\"> *= <\/span><span style=\"color: #ECEFF4\">(<\/span><span style=\"color: #B48EAD\">1.0<\/span><span style=\"color: #D8DEE9FF\"> - <\/span><span style=\"color: #D8DEE9\">dim_amount<\/span><span style=\"color: #ECEFF4\">)<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">COLOR<\/span><span style=\"color: #D8DEE9FF\"> = <\/span><span style=\"color: #D8DEE9\">color<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Save the shader <strong>Ctrl+S<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Now we need to apply the shader to our '<strong>BlurOverlay<\/strong>' node in the '<strong>Main<\/strong>' scene.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Add a new '<strong>ShaderMaterial<\/strong>'.<br><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"373\" height=\"1024\" src=\"https:\/\/blog.lerk.ing\/wp-content\/uploads\/2025\/12\/image-48-373x1024.png\" alt=\"\" class=\"wp-image-566\" srcset=\"https:\/\/blog.lerk.ing\/wp-content\/uploads\/2025\/12\/image-48-373x1024.png 373w, https:\/\/blog.lerk.ing\/wp-content\/uploads\/2025\/12\/image-48-109x300.png 109w, https:\/\/blog.lerk.ing\/wp-content\/uploads\/2025\/12\/image-48.png 554w\" sizes=\"auto, (max-width: 373px) 100vw, 373px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"413\" height=\"1024\" src=\"https:\/\/blog.lerk.ing\/wp-content\/uploads\/2025\/12\/image-49-413x1024.png\" alt=\"\" class=\"wp-image-567\" srcset=\"https:\/\/blog.lerk.ing\/wp-content\/uploads\/2025\/12\/image-49-413x1024.png 413w, https:\/\/blog.lerk.ing\/wp-content\/uploads\/2025\/12\/image-49-121x300.png 121w, https:\/\/blog.lerk.ing\/wp-content\/uploads\/2025\/12\/image-49.png 554w\" sizes=\"auto, (max-width: 413px) 100vw, 413px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Now we need to attach our shader. Click the <strong>ShaderMaterial<\/strong> and select '<strong>Shader<\/strong>' -&gt; '<strong>Load...<\/strong>'<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"313\" height=\"1024\" src=\"https:\/\/blog.lerk.ing\/wp-content\/uploads\/2025\/12\/image-50-313x1024.png\" alt=\"\" class=\"wp-image-568\" srcset=\"https:\/\/blog.lerk.ing\/wp-content\/uploads\/2025\/12\/image-50-313x1024.png 313w, https:\/\/blog.lerk.ing\/wp-content\/uploads\/2025\/12\/image-50-92x300.png 92w, https:\/\/blog.lerk.ing\/wp-content\/uploads\/2025\/12\/image-50-470x1536.png 470w, https:\/\/blog.lerk.ing\/wp-content\/uploads\/2025\/12\/image-50.png 568w\" sizes=\"auto, (max-width: 313px) 100vw, 313px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">In the file dialog, navigate to '<strong>res:\/\/shaders<\/strong>' and select your shader.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"717\" src=\"https:\/\/blog.lerk.ing\/wp-content\/uploads\/2025\/12\/image-51-1024x717.png\" alt=\"\" class=\"wp-image-569\" srcset=\"https:\/\/blog.lerk.ing\/wp-content\/uploads\/2025\/12\/image-51-1024x717.png 1024w, https:\/\/blog.lerk.ing\/wp-content\/uploads\/2025\/12\/image-51-300x210.png 300w, https:\/\/blog.lerk.ing\/wp-content\/uploads\/2025\/12\/image-51-768x538.png 768w, https:\/\/blog.lerk.ing\/wp-content\/uploads\/2025\/12\/image-51-1536x1076.png 1536w, https:\/\/blog.lerk.ing\/wp-content\/uploads\/2025\/12\/image-51-2048x1435.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"328\" height=\"1024\" src=\"https:\/\/blog.lerk.ing\/wp-content\/uploads\/2025\/12\/image-52-328x1024.png\" alt=\"\" class=\"wp-image-571\" srcset=\"https:\/\/blog.lerk.ing\/wp-content\/uploads\/2025\/12\/image-52-328x1024.png 328w, https:\/\/blog.lerk.ing\/wp-content\/uploads\/2025\/12\/image-52-96x300.png 96w, https:\/\/blog.lerk.ing\/wp-content\/uploads\/2025\/12\/image-52-492x1536.png 492w, https:\/\/blog.lerk.ing\/wp-content\/uploads\/2025\/12\/image-52.png 560w\" sizes=\"auto, (max-width: 328px) 100vw, 328px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Now set the '<strong>Shader Parameters<\/strong>'.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>'<strong>Blur Radius<\/strong>' = 8.0<\/li>\n\n\n\n<li>'<strong>Samples<\/strong>' = 7<\/li>\n\n\n\n<li>'<strong>Blur Strength<\/strong>' = 0.7<\/li>\n\n\n\n<li>'<strong>Dim Amount<\/strong>' = 0.15<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"494\" height=\"926\" src=\"https:\/\/blog.lerk.ing\/wp-content\/uploads\/2025\/12\/image-53.png\" alt=\"\" class=\"wp-image-574\" srcset=\"https:\/\/blog.lerk.ing\/wp-content\/uploads\/2025\/12\/image-53.png 494w, https:\/\/blog.lerk.ing\/wp-content\/uploads\/2025\/12\/image-53-160x300.png 160w\" sizes=\"auto, (max-width: 494px) 100vw, 494px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Now open '<strong>main.gd<\/strong>' so we can modify it.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Start by adding a reference to our new '<strong>BlurOverlay<\/strong>'.<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>extends Node2D\n\nconst GAME_OVER_SCENE := preload(\"res:\/\/game_over.tscn\")\n\n@onready var game_root: Node2D = $GameRoot\n@onready var board: Node2D = $GameRoot\/Board\n@onready var hud_left: Control = $GameRoot\/HUDLeft\n@onready var hud_right: Control = $GameRoot\/HUDRight\n@onready var ui_root: Control = $GameRoot\/UILayer\/UIRoot\n@onready var blur_overlay: ColorRect = $GameRoot\/UILayer\/UIRoot\/BlurOverlay # New node<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #81A1C1\">extends<\/span><span style=\"color: #8FBCBB; font-weight: bold\"> Node2D<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">const<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">GAME_OVER_SCENE<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">preload<\/span><span style=\"color: #ECEFF4\">(<\/span><span style=\"color: #A3BE8C\">&quot;res:\/\/game_over.tscn&quot;<\/span><span style=\"color: #ECEFF4\">)<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #88C0D0\">@onready<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">var<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">game_root<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">Node2D<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">$<\/span><span style=\"color: #EBCB8B\">GameRoot<\/span><\/span>\n<span class=\"line\"><span style=\"color: #88C0D0\">@onready<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">var<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">board<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">Node2D<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">$<\/span><span style=\"color: #EBCB8B\">GameRoot\/Board<\/span><\/span>\n<span class=\"line\"><span style=\"color: #88C0D0\">@onready<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">var<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">hud_left<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">Control<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">$<\/span><span style=\"color: #EBCB8B\">GameRoot\/HUDLeft<\/span><\/span>\n<span class=\"line\"><span style=\"color: #88C0D0\">@onready<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">var<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">hud_right<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">Control<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">$<\/span><span style=\"color: #EBCB8B\">GameRoot\/HUDRight<\/span><\/span>\n<span class=\"line\"><span style=\"color: #88C0D0\">@onready<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">var<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">ui_root<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">Control<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">$<\/span><span style=\"color: #EBCB8B\">GameRoot\/UILayer\/UIRoot<\/span><\/span>\n<span class=\"line\"><span style=\"color: #88C0D0\">@onready<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">var<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">blur_overlay<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">ColorRect<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">$<\/span><span style=\"color: #EBCB8B\">GameRoot\/UILayer\/UIRoot\/BlurOverlay<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #616E88\"># New node<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Then we replace '<strong>_on_game_over()<\/strong>' and '<strong>reset_game()<\/strong>' with these.<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>func _on_game_over(score: int, highscore: int, total_lines: int) -> void:\n\t# 1) Turn on blur behind the overlay\n\tif blur_overlay:\n\t\tblur_overlay.visible = true\n\n\t# 2) Show the GameOver UI on top\n\tvar game_over_layer := GAME_OVER_SCENE.instantiate()\n\n\tgame_over_layer.final_score = score\n\tgame_over_layer.final_highscore = highscore\n\tgame_over_layer.total_lines = total_lines\n\n\tui_root.add_child(game_over_layer)\n\tgame_over_layer.set_anchors_preset(Control.PRESET_FULL_RECT)\n\nfunc reset_game() -> void:\n\t# Hide blur again\n\tif blur_overlay:\n\t\tblur_overlay.visible = false\n\n\tif board.has_method(\"reset_game\"):\n\t\tboard.reset_game()\n<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #81A1C1\">func<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #88C0D0\">_on_game_over<\/span><span style=\"color: #ECEFF4\">(<\/span><span style=\"color: #D8DEE9\">score<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">int<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">highscore<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">int<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">total_lines<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">int<\/span><span style=\"color: #ECEFF4\">)<\/span><span style=\"color: #D8DEE9FF\"> -&gt; <\/span><span style=\"color: #81A1C1\">void<\/span><span style=\"color: #ECEFF4\">:<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t<\/span><span style=\"color: #616E88\"># 1) Turn on blur behind the overlay<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t<\/span><span style=\"color: #81A1C1\">if<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">blur_overlay<\/span><span style=\"color: #D8DEE9FF\">:<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t<\/span><span style=\"color: #D8DEE9\">blur_overlay<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">visible<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">true<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t<\/span><span style=\"color: #616E88\"># 2) Show the GameOver UI on top<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t<\/span><span style=\"color: #81A1C1\">var<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">game_over_layer<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">GAME_OVER_SCENE<\/span><span style=\"color: #D8DEE9FF\">.<\/span><span style=\"color: #88C0D0\">instantiate<\/span><span style=\"color: #ECEFF4\">()<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t<\/span><span style=\"color: #D8DEE9\">game_over_layer<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">final_score<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">score<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t<\/span><span style=\"color: #D8DEE9\">game_over_layer<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">final_highscore<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">highscore<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t<\/span><span style=\"color: #D8DEE9\">game_over_layer<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">total_lines<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">total_lines<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t<\/span><span style=\"color: #D8DEE9\">ui_root<\/span><span style=\"color: #D8DEE9FF\">.<\/span><span style=\"color: #88C0D0\">add_child<\/span><span style=\"color: #ECEFF4\">(<\/span><span style=\"color: #D8DEE9\">game_over_layer<\/span><span style=\"color: #ECEFF4\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t<\/span><span style=\"color: #D8DEE9\">game_over_layer<\/span><span style=\"color: #D8DEE9FF\">.<\/span><span style=\"color: #88C0D0\">set_anchors_preset<\/span><span style=\"color: #ECEFF4\">(<\/span><span style=\"color: #8FBCBB\">Control<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">PRESET_FULL_RECT<\/span><span style=\"color: #ECEFF4\">)<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">func<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #88C0D0\">reset_game<\/span><span style=\"color: #ECEFF4\">()<\/span><span style=\"color: #D8DEE9FF\"> -&gt; <\/span><span style=\"color: #81A1C1\">void<\/span><span style=\"color: #ECEFF4\">:<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t<\/span><span style=\"color: #616E88\"># Hide blur again<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t<\/span><span style=\"color: #81A1C1\">if<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">blur_overlay<\/span><span style=\"color: #D8DEE9FF\">:<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t<\/span><span style=\"color: #D8DEE9\">blur_overlay<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">visible<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">false<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t<\/span><span style=\"color: #81A1C1\">if<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">board<\/span><span style=\"color: #D8DEE9FF\">.<\/span><span style=\"color: #88C0D0\">has_method<\/span><span style=\"color: #ECEFF4\">(<\/span><span style=\"color: #A3BE8C\">&quot;reset_game&quot;<\/span><span style=\"color: #ECEFF4\">)<\/span><span style=\"color: #D8DEE9FF\">:<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t<\/span><span style=\"color: #D8DEE9\">board<\/span><span style=\"color: #D8DEE9FF\">.<\/span><span style=\"color: #88C0D0\">reset_game<\/span><span style=\"color: #ECEFF4\">()<\/span><\/span>\n<span class=\"line\"><\/span><\/code><\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Save '<strong>main.gd<\/strong>'. Run the game, and force a GameOver. You should now see something like this.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"589\" src=\"https:\/\/blog.lerk.ing\/wp-content\/uploads\/2025\/12\/image-54-1024x589.png\" alt=\"\" class=\"wp-image-576\" srcset=\"https:\/\/blog.lerk.ing\/wp-content\/uploads\/2025\/12\/image-54-1024x589.png 1024w, https:\/\/blog.lerk.ing\/wp-content\/uploads\/2025\/12\/image-54-300x173.png 300w, https:\/\/blog.lerk.ing\/wp-content\/uploads\/2025\/12\/image-54-768x442.png 768w, https:\/\/blog.lerk.ing\/wp-content\/uploads\/2025\/12\/image-54.png 1418w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">We have a blurred background and a crisp GameOver overlay.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Now we can continue with enlarging the GameOver overlay. This is an easy task.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Start by opening '<strong>game_over.tscn<\/strong>'. Select the '<strong>GameOver<\/strong>' node.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In the <strong>Inspector -&gt; Layout -&gt; Transform<\/strong>. Set <strong>Scale.x\/Scale.y<\/strong> to 2.0<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"306\" height=\"1024\" src=\"https:\/\/blog.lerk.ing\/wp-content\/uploads\/2025\/12\/image-55-306x1024.png\" alt=\"\" class=\"wp-image-578\" srcset=\"https:\/\/blog.lerk.ing\/wp-content\/uploads\/2025\/12\/image-55-306x1024.png 306w, https:\/\/blog.lerk.ing\/wp-content\/uploads\/2025\/12\/image-55-90x300.png 90w, https:\/\/blog.lerk.ing\/wp-content\/uploads\/2025\/12\/image-55.png 538w\" sizes=\"auto, (max-width: 306px) 100vw, 306px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Save '<strong>game_over.tscn<\/strong>'.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Now open '<strong>main.gd<\/strong>'. Add 2 new lines to '<strong>func _on_game_over()<\/strong>'.<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>func _on_game_over(score: int, highscore: int, total_lines: int) -> void:\n\t# 1) Turn on blur behind the overlay\n\tif blur_overlay:\n\t\tblur_overlay.visible = true\n\n\t# 2) Show the GameOver UI on top\n\tvar game_over_layer := GAME_OVER_SCENE.instantiate()\n\tgame_over_layer.set_anchors_preset(Control.PRESET_CENTER)\t# New\n\tgame_over_layer.scale = Vector2(2, 2)\t# New\n\n\tgame_over_layer.final_score = score\n\tgame_over_layer.final_highscore = highscore\n\tgame_over_layer.total_lines = total_lines\n\n\tui_root.add_child(game_over_layer)\n\tgame_over_layer.set_anchors_preset(Control.PRESET_FULL_RECT)<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #81A1C1\">func<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #88C0D0\">_on_game_over<\/span><span style=\"color: #ECEFF4\">(<\/span><span style=\"color: #D8DEE9\">score<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">int<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">highscore<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">int<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">total_lines<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">int<\/span><span style=\"color: #ECEFF4\">)<\/span><span style=\"color: #D8DEE9FF\"> -&gt; <\/span><span style=\"color: #81A1C1\">void<\/span><span style=\"color: #ECEFF4\">:<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t<\/span><span style=\"color: #616E88\"># 1) Turn on blur behind the overlay<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t<\/span><span style=\"color: #81A1C1\">if<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">blur_overlay<\/span><span style=\"color: #D8DEE9FF\">:<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t<\/span><span style=\"color: #D8DEE9\">blur_overlay<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">visible<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">true<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t<\/span><span style=\"color: #616E88\"># 2) Show the GameOver UI on top<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t<\/span><span style=\"color: #81A1C1\">var<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">game_over_layer<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">GAME_OVER_SCENE<\/span><span style=\"color: #D8DEE9FF\">.<\/span><span style=\"color: #88C0D0\">instantiate<\/span><span style=\"color: #ECEFF4\">()<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t<\/span><span style=\"color: #D8DEE9\">game_over_layer<\/span><span style=\"color: #D8DEE9FF\">.<\/span><span style=\"color: #88C0D0\">set_anchors_preset<\/span><span style=\"color: #ECEFF4\">(<\/span><span style=\"color: #8FBCBB\">Control<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">PRESET_CENTER<\/span><span style=\"color: #ECEFF4\">)<\/span><span style=\"color: #D8DEE9FF\">\t<\/span><span style=\"color: #616E88\"># New<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t<\/span><span style=\"color: #D8DEE9\">game_over_layer<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">scale<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">Vector2<\/span><span style=\"color: #ECEFF4\">(<\/span><span style=\"color: #B48EAD\">2<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">2<\/span><span style=\"color: #ECEFF4\">)<\/span><span style=\"color: #D8DEE9FF\">\t<\/span><span style=\"color: #616E88\"># New<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t<\/span><span style=\"color: #D8DEE9\">game_over_layer<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">final_score<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">score<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t<\/span><span style=\"color: #D8DEE9\">game_over_layer<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">final_highscore<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">highscore<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t<\/span><span style=\"color: #D8DEE9\">game_over_layer<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">total_lines<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">total_lines<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t<\/span><span style=\"color: #D8DEE9\">ui_root<\/span><span style=\"color: #D8DEE9FF\">.<\/span><span style=\"color: #88C0D0\">add_child<\/span><span style=\"color: #ECEFF4\">(<\/span><span style=\"color: #D8DEE9\">game_over_layer<\/span><span style=\"color: #ECEFF4\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t<\/span><span style=\"color: #D8DEE9\">game_over_layer<\/span><span style=\"color: #D8DEE9FF\">.<\/span><span style=\"color: #88C0D0\">set_anchors_preset<\/span><span style=\"color: #ECEFF4\">(<\/span><span style=\"color: #8FBCBB\">Control<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">PRESET_FULL_RECT<\/span><span style=\"color: #ECEFF4\">)<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Save '<strong>main.gd<\/strong>'.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Run the game and force a GameOver. You will now get something like this.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"596\" src=\"https:\/\/blog.lerk.ing\/wp-content\/uploads\/2025\/12\/image-56-1024x596.png\" alt=\"\" class=\"wp-image-579\" srcset=\"https:\/\/blog.lerk.ing\/wp-content\/uploads\/2025\/12\/image-56-1024x596.png 1024w, https:\/\/blog.lerk.ing\/wp-content\/uploads\/2025\/12\/image-56-300x174.png 300w, https:\/\/blog.lerk.ing\/wp-content\/uploads\/2025\/12\/image-56-768x447.png 768w, https:\/\/blog.lerk.ing\/wp-content\/uploads\/2025\/12\/image-56.png 1410w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">This concludes this mod of our Tetris game.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Next you could play around with adding color to your strings.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Make the '<strong>GAME OVER<\/strong>' string red.<\/li>\n\n\n\n<li>Add colors to the buttons to make them stand out a bit more from the background.<\/li>\n\n\n\n<li>Advanced\n<ul class=\"wp-block-list\">\n<li>Make a 'glow' effect to the <strong>GameOver<\/strong> scene.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-3a88641f wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/blog.lerk.ing\/index.php\/2025\/12\/05\/tetris-extras\/\">Tetris Extras<\/a><\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/blog.lerk.ing\/index.php\/codingpirates\/godot-tetris\/\">Introduction<\/a><\/p>\n\n\n<div class=\"wp-block-post-author\"><div class=\"wp-block-post-author__avatar\"><img alt='' src='https:\/\/secure.gravatar.com\/avatar\/ea6dfb9dc4a5852f1a3635e4cb2c81deba1b9e5a2fec2c492f0abd9df8882821?s=48&#038;d=mm&#038;r=g' srcset='https:\/\/secure.gravatar.com\/avatar\/ea6dfb9dc4a5852f1a3635e4cb2c81deba1b9e5a2fec2c492f0abd9df8882821?s=96&#038;d=mm&#038;r=g 2x' class='avatar avatar-48 photo' height='48' width='48' \/><\/div><div class=\"wp-block-post-author__content\"><p class=\"wp-block-post-author__name\">Jan Lerking<\/p><\/div><\/div>","protected":false},"excerpt":{"rendered":"<p>We will be updating our GameOver routine as follows. Let&#8217;s begin with blurring the &#8216;GameRoot&#8217;. Open &#8216;main.tscn&#8217;. Select &#8216;UILayer&#8217;. Set &#8216;Layer&#8217; -&gt; &#8216;Layer&#8217; = 1. Select &#8216;UIRoot&#8217;. Add a ColorRect node. Rename it to &#8216;BlurOverlay&#8217;. With &#8216;BlurOverlay&#8217; selected, set the following properties. Our &#8216;Main&#8217; scene now looks like this. Save &#8216;main.tscn&#8217;. Now we add a [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[70,74,71],"tags":[67,75,69,78,72],"class_list":["post-551","post","type-post","status-publish","format-standard","hentry","category-coding-pirates","category-gdscript20","category-godotgameengine","tag-codingpirates","tag-gdscript20","tag-godotgameengine","tag-godot_tetris_extras","tag-programming"],"_links":{"self":[{"href":"https:\/\/blog.lerk.ing\/index.php\/wp-json\/wp\/v2\/posts\/551","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.lerk.ing\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.lerk.ing\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.lerk.ing\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.lerk.ing\/index.php\/wp-json\/wp\/v2\/comments?post=551"}],"version-history":[{"count":16,"href":"https:\/\/blog.lerk.ing\/index.php\/wp-json\/wp\/v2\/posts\/551\/revisions"}],"predecessor-version":[{"id":644,"href":"https:\/\/blog.lerk.ing\/index.php\/wp-json\/wp\/v2\/posts\/551\/revisions\/644"}],"wp:attachment":[{"href":"https:\/\/blog.lerk.ing\/index.php\/wp-json\/wp\/v2\/media?parent=551"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.lerk.ing\/index.php\/wp-json\/wp\/v2\/categories?post=551"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.lerk.ing\/index.php\/wp-json\/wp\/v2\/tags?post=551"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}