{"id":298,"date":"2025-12-04T08:19:47","date_gmt":"2025-12-04T08:19:47","guid":{"rendered":"https:\/\/blog.lerk.ing\/?p=298"},"modified":"2025-12-07T12:49:39","modified_gmt":"2025-12-07T12:49:39","slug":"hudright-scene","status":"publish","type":"post","link":"https:\/\/blog.lerk.ing\/index.php\/2025\/12\/04\/hudright-scene\/","title":{"rendered":"Tetris 05 &#8211; HUDRight scene"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Create a new scene with type '<strong>Control<\/strong>'. Rename the '<strong>Control<\/strong>' to \u2018<strong>HUDRight<\/strong>\u2019.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Add a '<strong>VBoxContainer<\/strong>' to '<strong>HUDRight<\/strong>'.<\/p>\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 '<strong>LabelNextTitle'<\/strong>\n<ul class=\"wp-block-list\">\n<li>Set '<strong>Text<\/strong>' property to '<strong>Next<\/strong>'<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Node2D\n<ul class=\"wp-block-list\">\n<li>Rename to '<strong>NextPreview<\/strong>'<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"592\" height=\"528\" src=\"https:\/\/blog.lerk.ing\/wp-content\/uploads\/2025\/12\/image-19.png\" alt=\"\" class=\"wp-image-393\" srcset=\"https:\/\/blog.lerk.ing\/wp-content\/uploads\/2025\/12\/image-19.png 592w, https:\/\/blog.lerk.ing\/wp-content\/uploads\/2025\/12\/image-19-300x268.png 300w\" sizes=\"auto, (max-width: 592px) 100vw, 592px\" \/><\/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>HUDRight<\/strong>' Node and set the layout to '<strong>Top Left<\/strong>':<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Save the scene as \u2018<strong>hud_right.tscn<\/strong>\u2019<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Attach a script to the \u2018<strong>NextPreview<\/strong>\u2019 node and save it as \u2018<strong>next_preview.gd<\/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_right.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=\"556\" height=\"492\" src=\"https:\/\/blog.lerk.ing\/wp-content\/uploads\/2025\/12\/image-36.png\" alt=\"\" class=\"wp-image-534\" srcset=\"https:\/\/blog.lerk.ing\/wp-content\/uploads\/2025\/12\/image-36.png 556w, https:\/\/blog.lerk.ing\/wp-content\/uploads\/2025\/12\/image-36-300x265.png 300w\" sizes=\"auto, (max-width: 556px) 100vw, 556px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Now, with '<strong>HUDRight<\/strong>' selected, Set <strong>Layout.Transform.Position.x<\/strong> to <strong>350.0<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"436\" height=\"1024\" src=\"https:\/\/blog.lerk.ing\/wp-content\/uploads\/2025\/12\/image-25-436x1024.png\" alt=\"\" class=\"wp-image-458\" srcset=\"https:\/\/blog.lerk.ing\/wp-content\/uploads\/2025\/12\/image-25-436x1024.png 436w, https:\/\/blog.lerk.ing\/wp-content\/uploads\/2025\/12\/image-25-128x300.png 128w, https:\/\/blog.lerk.ing\/wp-content\/uploads\/2025\/12\/image-25.png 582w\" sizes=\"auto, (max-width: 436px) 100vw, 436px\" \/><\/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-hudleft-scene\/\">HUDLeft 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\/05\/tetris-game-over-scene\/\">Game Over 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 with type &#8216;Control&#8217;. Rename the &#8216;Control&#8217; to \u2018HUDRight\u2019. Add a &#8216;VBoxContainer&#8217; to &#8216;HUDRight&#8217;. Now add the following controls to the &#8216;VBoxContainer&#8217; Layout Select the &#8216;HUDRight&#8217; Node and set the layout to &#8216;Top Left&#8217;: Save the scene as \u2018hud_right.tscn\u2019 Attach a script to the \u2018NextPreview\u2019 node and save it as \u2018next_preview.gd\u2019 Open [&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-298","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\/298","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=298"}],"version-history":[{"count":21,"href":"https:\/\/blog.lerk.ing\/index.php\/wp-json\/wp\/v2\/posts\/298\/revisions"}],"predecessor-version":[{"id":634,"href":"https:\/\/blog.lerk.ing\/index.php\/wp-json\/wp\/v2\/posts\/298\/revisions\/634"}],"wp:attachment":[{"href":"https:\/\/blog.lerk.ing\/index.php\/wp-json\/wp\/v2\/media?parent=298"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.lerk.ing\/index.php\/wp-json\/wp\/v2\/categories?post=298"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.lerk.ing\/index.php\/wp-json\/wp\/v2\/tags?post=298"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}