{"id":289,"date":"2025-12-04T07:48:32","date_gmt":"2025-12-04T07:48:32","guid":{"rendered":"https:\/\/blog.lerk.ing\/?p=289"},"modified":"2025-12-07T12:49:59","modified_gmt":"2025-12-07T12:49:59","slug":"tetris-hudleft-scene","status":"publish","type":"post","link":"https:\/\/blog.lerk.ing\/index.php\/2025\/12\/04\/tetris-hudleft-scene\/","title":{"rendered":"Tetris 04 &#8211; HUDLeft scene"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Create a new scene of type '<strong>Control<\/strong>'.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"339\" src=\"https:\/\/blog.lerk.ing\/wp-content\/uploads\/2025\/12\/image-10-1024x339.png\" alt=\"\" class=\"wp-image-379\" srcset=\"https:\/\/blog.lerk.ing\/wp-content\/uploads\/2025\/12\/image-10-1024x339.png 1024w, https:\/\/blog.lerk.ing\/wp-content\/uploads\/2025\/12\/image-10-300x99.png 300w, https:\/\/blog.lerk.ing\/wp-content\/uploads\/2025\/12\/image-10-768x254.png 768w, https:\/\/blog.lerk.ing\/wp-content\/uploads\/2025\/12\/image-10.png 1312w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Rename the '<strong>Control<\/strong>' node to \u2018<strong>HUDLeft<\/strong>\u2019.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"572\" height=\"472\" src=\"https:\/\/blog.lerk.ing\/wp-content\/uploads\/2025\/12\/image-11.png\" alt=\"\" class=\"wp-image-380\" srcset=\"https:\/\/blog.lerk.ing\/wp-content\/uploads\/2025\/12\/image-11.png 572w, https:\/\/blog.lerk.ing\/wp-content\/uploads\/2025\/12\/image-11-300x248.png 300w\" sizes=\"auto, (max-width: 572px) 100vw, 572px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Add a '<strong>VBoxContainer<\/strong>' to '<strong>HUDLeft<\/strong>'.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"835\" src=\"https:\/\/blog.lerk.ing\/wp-content\/uploads\/2025\/12\/image-12-1024x835.png\" alt=\"\" class=\"wp-image-381\" srcset=\"https:\/\/blog.lerk.ing\/wp-content\/uploads\/2025\/12\/image-12-1024x835.png 1024w, https:\/\/blog.lerk.ing\/wp-content\/uploads\/2025\/12\/image-12-300x245.png 300w, https:\/\/blog.lerk.ing\/wp-content\/uploads\/2025\/12\/image-12-768x626.png 768w, https:\/\/blog.lerk.ing\/wp-content\/uploads\/2025\/12\/image-12-1536x1252.png 1536w, https:\/\/blog.lerk.ing\/wp-content\/uploads\/2025\/12\/image-12.png 1842w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"580\" height=\"384\" src=\"https:\/\/blog.lerk.ing\/wp-content\/uploads\/2025\/12\/image-13.png\" alt=\"\" class=\"wp-image-382\" srcset=\"https:\/\/blog.lerk.ing\/wp-content\/uploads\/2025\/12\/image-13.png 580w, https:\/\/blog.lerk.ing\/wp-content\/uploads\/2025\/12\/image-13-300x199.png 300w\" sizes=\"auto, (max-width: 580px) 100vw, 580px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Now add the following controls to the '<strong>VBoxContainer<\/strong>'<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Controls -&gt; Label\n<ul class=\"wp-block-list\">\n<li>Rename to 'LabelScoreTitle\n<ul class=\"wp-block-list\">\n<li>Set 'Text' property to 'Score'<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"580\" height=\"392\" src=\"https:\/\/blog.lerk.ing\/wp-content\/uploads\/2025\/12\/image-14.png\" alt=\"\" class=\"wp-image-383\" srcset=\"https:\/\/blog.lerk.ing\/wp-content\/uploads\/2025\/12\/image-14.png 580w, https:\/\/blog.lerk.ing\/wp-content\/uploads\/2025\/12\/image-14-300x203.png 300w\" sizes=\"auto, (max-width: 580px) 100vw, 580px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"546\" height=\"730\" src=\"https:\/\/blog.lerk.ing\/wp-content\/uploads\/2025\/12\/image-15.png\" alt=\"\" class=\"wp-image-384\" srcset=\"https:\/\/blog.lerk.ing\/wp-content\/uploads\/2025\/12\/image-15.png 546w, https:\/\/blog.lerk.ing\/wp-content\/uploads\/2025\/12\/image-15-224x300.png 224w\" sizes=\"auto, (max-width: 546px) 100vw, 546px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Controls -&gt; Label\n<ul class=\"wp-block-list\">\n<li>Rename to 'LabelScoreValue'\n<ul class=\"wp-block-list\">\n<li>Set 'Text' property to '0'<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Controls -&gt; Label\n<ul class=\"wp-block-list\">\n<li>Rename to 'LabelHighScoreTitle'\n<ul class=\"wp-block-list\">\n<li>Set 'Text' property to 'Highscore'<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Controls -&gt; Label\n<ul class=\"wp-block-list\">\n<li>Rename to 'LabelHighScoreValue'\n<ul class=\"wp-block-list\">\n<li>Set 'Text' property to '0'<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Controls -&gt; Label\n<ul class=\"wp-block-list\">\n<li>Rename to 'LabelLinesTitle'\n<ul class=\"wp-block-list\">\n<li>Set 'Text' property to 'Lines'<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Controls -&gt; Label\n<ul class=\"wp-block-list\">\n<li>Rename to 'LabelLinesValue'\n<ul class=\"wp-block-list\">\n<li>Set 'Text' property to '0'<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"542\" height=\"680\" src=\"https:\/\/blog.lerk.ing\/wp-content\/uploads\/2025\/12\/image-24.png\" alt=\"\" class=\"wp-image-430\" srcset=\"https:\/\/blog.lerk.ing\/wp-content\/uploads\/2025\/12\/image-24.png 542w, https:\/\/blog.lerk.ing\/wp-content\/uploads\/2025\/12\/image-24-239x300.png 239w\" sizes=\"auto, (max-width: 542px) 100vw, 542px\" \/><\/figure>\n\n\n\n<p class=\"has-large-font-size wp-block-paragraph\">Layout<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Select the '<strong>HUDLeft<\/strong>' node and set the layout to '<strong>Center Left<\/strong>':<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"342\" src=\"https:\/\/blog.lerk.ing\/wp-content\/uploads\/2025\/12\/image-17-1024x342.png\" alt=\"\" class=\"wp-image-388\" srcset=\"https:\/\/blog.lerk.ing\/wp-content\/uploads\/2025\/12\/image-17-1024x342.png 1024w, https:\/\/blog.lerk.ing\/wp-content\/uploads\/2025\/12\/image-17-300x100.png 300w, https:\/\/blog.lerk.ing\/wp-content\/uploads\/2025\/12\/image-17-768x257.png 768w, https:\/\/blog.lerk.ing\/wp-content\/uploads\/2025\/12\/image-17-1536x513.png 1536w, https:\/\/blog.lerk.ing\/wp-content\/uploads\/2025\/12\/image-17-2048x684.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Save the scene as \u2018<strong>hud_left.tscn<\/strong>\u2019<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Open the '<strong>main.tscn<\/strong>' scene.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Right-click '<strong>GameRoot<\/strong>' node and select '<strong>Instantiate Child Scene...<\/strong>' - Select '<strong>hud_left.tscn<\/strong>'.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">At this point, our '<strong>main.tscn<\/strong>' should look like this.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"550\" height=\"462\" src=\"https:\/\/blog.lerk.ing\/wp-content\/uploads\/2025\/12\/image-35.png\" alt=\"\" class=\"wp-image-531\" srcset=\"https:\/\/blog.lerk.ing\/wp-content\/uploads\/2025\/12\/image-35.png 550w, https:\/\/blog.lerk.ing\/wp-content\/uploads\/2025\/12\/image-35-300x252.png 300w\" sizes=\"auto, (max-width: 550px) 100vw, 550px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Now, with '<strong>HUDLeft<\/strong>' selected, adjust <strong>Layout.Transform.Position.y<\/strong> to <strong>150.0<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"419\" height=\"1024\" src=\"https:\/\/blog.lerk.ing\/wp-content\/uploads\/2025\/12\/image-26-419x1024.png\" alt=\"\" class=\"wp-image-463\" srcset=\"https:\/\/blog.lerk.ing\/wp-content\/uploads\/2025\/12\/image-26-419x1024.png 419w, https:\/\/blog.lerk.ing\/wp-content\/uploads\/2025\/12\/image-26-123x300.png 123w, https:\/\/blog.lerk.ing\/wp-content\/uploads\/2025\/12\/image-26.png 554w\" sizes=\"auto, (max-width: 419px) 100vw, 419px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Save '<strong>main.tscn<\/strong>'.<\/p>\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\/04\/tetris-board-scene\/\">Board scene<\/a><\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-buttons is-content-justification-right is-layout-flex wp-container-core-buttons-is-layout-bf881693 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\/04\/hudright-scene\/\">HUDRight scene<\/a><\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/blog.lerk.ing\/index.php\/codingpirates\/godot-tetris\/\" data-type=\"page\" data-id=\"595\">Introduction<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Create a new scene of type &#8216;Control&#8217;. Rename the &#8216;Control&#8217; node to \u2018HUDLeft\u2019. Add a &#8216;VBoxContainer&#8217; to &#8216;HUDLeft&#8217;. Now add the following controls to the &#8216;VBoxContainer&#8217; Layout Select the &#8216;HUDLeft&#8217; node and set the layout to &#8216;Center Left&#8217;: Save the scene as \u2018hud_left.tscn\u2019 Open the &#8216;main.tscn&#8217; scene. Right-click &#8216;GameRoot&#8217; node and select &#8216;Instantiate Child Scene&#8230;&#8217; [&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,77,72],"class_list":["post-289","post","type-post","status-publish","format-standard","hentry","category-coding-pirates","category-gdscript20","category-godotgameengine","tag-codingpirates","tag-gdscript20","tag-godotgameengine","tag-godot_tertris","tag-programming"],"_links":{"self":[{"href":"https:\/\/blog.lerk.ing\/index.php\/wp-json\/wp\/v2\/posts\/289","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=289"}],"version-history":[{"count":19,"href":"https:\/\/blog.lerk.ing\/index.php\/wp-json\/wp\/v2\/posts\/289\/revisions"}],"predecessor-version":[{"id":635,"href":"https:\/\/blog.lerk.ing\/index.php\/wp-json\/wp\/v2\/posts\/289\/revisions\/635"}],"wp:attachment":[{"href":"https:\/\/blog.lerk.ing\/index.php\/wp-json\/wp\/v2\/media?parent=289"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.lerk.ing\/index.php\/wp-json\/wp\/v2\/categories?post=289"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.lerk.ing\/index.php\/wp-json\/wp\/v2\/tags?post=289"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}