{"id":874,"date":"2026-02-12T17:32:29","date_gmt":"2026-02-12T09:32:29","guid":{"rendered":"https:\/\/edu.circuspi.com\/?p=874"},"modified":"2026-03-09T15:22:39","modified_gmt":"2026-03-09T07:22:39","slug":"5-2-learning-to-use-dialogs-to-interact-with-sprites","status":"publish","type":"post","link":"https:\/\/edu.circuspi.com\/index.php\/gamebit-en\/5-2-learning-to-use-dialogs-to-interact-with-sprites\/","title":{"rendered":"5.2 Learning to Use &#8220;Dialogs&#8221; to Interact with Sprites"},"content":{"rendered":"\n<p>Before starting the <strong>&#8220;Dialog&#8221;<\/strong> function, to keep things clean, please reset your program to its initial state.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1190\" height=\"636\" src=\"https:\/\/edu.circuspi.com\/wp-content\/uploads\/2026\/02\/\u82f105-2_01.png\" alt=\"\" class=\"wp-image-1130\"\/><\/figure>\n\n\n\n<p>The <strong>&#8220;Dialog&#8221;<\/strong> function is also located within the <strong>&#8220;Game&#8221;<\/strong> category in the Block Toolbox. Click it to find the relevant blocks.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1190\" height=\"798\" src=\"https:\/\/edu.circuspi.com\/wp-content\/uploads\/2026\/02\/\u82f105-2_02.png\" alt=\"\" class=\"wp-image-1131\"\/><\/figure>\n\n\n\n<p>The first three blocks are for settings\/configuration, and only the fourth one is for actually displaying content. Regarding the configuration blocks, please place all three of them inside the <strong>&#8220;on start&#8221;<\/strong> block.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1190\" height=\"551\" src=\"https:\/\/edu.circuspi.com\/wp-content\/uploads\/2026\/02\/\u82f105-2_03.png\" alt=\"\" class=\"wp-image-1132\"\/><\/figure>\n\n\n\n<p><strong>set dialog text color to ( ):<\/strong> This block changes the text <strong>color<\/strong>. Clicking the <strong>grey square<\/strong> will pop up a <strong>color palette<\/strong> where you can choose your preferred color.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1190\" height=\"798\" src=\"https:\/\/edu.circuspi.com\/wp-content\/uploads\/2026\/02\/\u82f105-2_04.png\" alt=\"\" class=\"wp-image-1133\"\/><\/figure>\n\n\n\n<p><strong>set dialog cursor to ( ):<\/strong> This block allows you to draw the <strong>cursor icon<\/strong> that appears at the bottom right of the dialog window. Of course, you can also choose one from the Gallery.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1190\" height=\"740\" src=\"https:\/\/edu.circuspi.com\/wp-content\/uploads\/2026\/02\/\u82f105-2_05.png\" alt=\"\" class=\"wp-image-1134\"\/><\/figure>\n\n\n\n<p><strong>set dialog frame to ( ):<\/strong> This block acts like drawing the <strong>background<\/strong> for the dialog window. However, you only draw a small section, and it automatically tiles (repeats) it to fill the window frame. If you want a solid color background, you can fill the whole square. (You can try drawing a simple pattern to experiment).<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1190\" height=\"749\" src=\"https:\/\/edu.circuspi.com\/wp-content\/uploads\/2026\/02\/\u82f105-2_06.png\" alt=\"\" class=\"wp-image-1135\"\/><\/figure>\n\n\n\n<p>After completing the settings in order, let&#8217;s talk about the <strong>&#8220;show long text &#8221; &#8221; at [bottom]&#8221;<\/strong> block. Place it below the blocks we just added. The dropdown menu allows you to choose the <strong>position<\/strong>; here we demonstrate using the default <strong>&#8220;bottom&#8221;<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1190\" height=\"708\" src=\"https:\/\/edu.circuspi.com\/wp-content\/uploads\/2026\/02\/\u82f105-2_07.png\" alt=\"\" class=\"wp-image-1136\"\/><\/figure>\n\n\n\n<p>Next, we can fill in the dialog content we want to present. The editor writes: <strong>&#8220;Hello, I am an orange little dinosaur.&#8221;<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1190\" height=\"488\" src=\"https:\/\/edu.circuspi.com\/wp-content\/uploads\/2026\/02\/\u82f105-2_08.png\" alt=\"\" class=\"wp-image-1137\"\/><\/figure>\n\n\n\n<p>Once finished, test it in the <strong>Game Simulator<\/strong>. When the <strong>&#8220;Dialog Window&#8221;<\/strong> opens, it behaves like the <strong>&#8220;Prompt Window&#8221;<\/strong>\u2014you need to press a button to close it and execute the subsequent code.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"382\" src=\"https:\/\/edu.circuspi.com\/wp-content\/uploads\/2026\/02\/\u82f105-2_09.gif\" alt=\"\" class=\"wp-image-1138\"\/><\/figure>\n\n\n\n<p>You can add more <strong>&#8220;show long text&#8221;<\/strong> blocks to make the conversation richer. With the dialog window, doesn&#8217;t it feel like the little dinosaur has come alive?<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Before starting the &#8220;Dialog&#8221; function, to k [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":352,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[21,23],"tags":[],"table_tags":[],"class_list":{"0":"post-874","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-gamebit-en","8":"category-freeinfo-en","9":"czr-hentry"},"_links":{"self":[{"href":"https:\/\/edu.circuspi.com\/index.php\/wp-json\/wp\/v2\/posts\/874","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/edu.circuspi.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/edu.circuspi.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/edu.circuspi.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/edu.circuspi.com\/index.php\/wp-json\/wp\/v2\/comments?post=874"}],"version-history":[{"count":2,"href":"https:\/\/edu.circuspi.com\/index.php\/wp-json\/wp\/v2\/posts\/874\/revisions"}],"predecessor-version":[{"id":1141,"href":"https:\/\/edu.circuspi.com\/index.php\/wp-json\/wp\/v2\/posts\/874\/revisions\/1141"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/edu.circuspi.com\/index.php\/wp-json\/wp\/v2\/media\/352"}],"wp:attachment":[{"href":"https:\/\/edu.circuspi.com\/index.php\/wp-json\/wp\/v2\/media?parent=874"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/edu.circuspi.com\/index.php\/wp-json\/wp\/v2\/categories?post=874"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/edu.circuspi.com\/index.php\/wp-json\/wp\/v2\/tags?post=874"},{"taxonomy":"table_tags","embeddable":true,"href":"https:\/\/edu.circuspi.com\/index.php\/wp-json\/wp\/v2\/table_tags?post=874"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}