{"id":878,"date":"2026-02-13T08:50:15","date_gmt":"2026-02-13T00:50:15","guid":{"rendered":"https:\/\/edu.circuspi.com\/?p=878"},"modified":"2026-03-09T15:40:19","modified_gmt":"2026-03-09T07:40:19","slug":"6-creating-game-elements","status":"publish","type":"post","link":"https:\/\/edu.circuspi.com\/index.php\/gamebit-en\/6-creating-game-elements\/","title":{"rendered":"6. Creating Game Elements"},"content":{"rendered":"\n<p>To design a simple game, you need Sprites, Game Goals, a Story, and Scenes. After studying the previous units, we can already design our own Sprites, use the controller to move them, and create prompts and dialog boxes.<\/p>\n\n\n\n<p>We have basically achieved the &#8220;Sprite&#8221; and &#8220;Story&#8221; elements, but we are still missing &#8220;<strong>Goals<\/strong>&#8221; and &#8220;<strong>Scenes<\/strong>.&#8221;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\ud83c\udfafGame Goals:<\/strong> These are the conditions to clear a stage, such as defeating a boss\ud83d\ude08 to win or collecting a certain number of gems\ud83d\udc8e to pass a level\ud83e\udd73. They are the source of the player&#8217;s sense of achievement.<\/li>\n\n\n\n<li><strong>\ud83c\udf04Game Scenes:<\/strong> These refer to the background visuals\ud83c\udfdc\ufe0f and sound effects\ud83d\udd0a used to enrich the gameplay process. The right background lets players know where they are\u2014whether exploring a dungeon or shopping in a town. Sound effects assist the sensory experience; for example, playing tense music in a dungeon, or adding sound cues when attacking enemies or picking up treasures.<\/li>\n<\/ul>\n\n\n\n<p>Next, we will start by designing the scene, guiding everyone to draw backgrounds and learn how to add sound effects.<\/p>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">6.1 Designing Game Level Backgrounds<\/h2>\n\n\n\n<p>First, please enter <a href=\"https:\/\/arcade.makecode.com\/beta?hw=n3\">MakeCode Arcade<\/a> and open your project with your Sprite, as shown below:<\/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\/\u82f106-1_01.png\" alt=\"\" class=\"wp-image-1143\"\/><\/figure>\n\n\n\n<p>You can see a &#8220;<strong>Scene<\/strong>&#8221; category in the <strong>Block Toolbox<\/strong>. Click it to reveal many blocks related to scene settings in the list.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1190\" height=\"608\" src=\"https:\/\/edu.circuspi.com\/wp-content\/uploads\/2026\/02\/\u82f106-1_02.png\" alt=\"\" class=\"wp-image-1144\"\/><\/figure>\n\n\n\n<p>First, let&#8217;s try the &#8220;<strong>set background color to ( )<\/strong>&#8221; block. Drag it into the &#8220;<strong>on start<\/strong>&#8221; block. Clicking the color box at the end of the block opens the <strong>Color Palette<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1190\" height=\"774\" src=\"https:\/\/edu.circuspi.com\/wp-content\/uploads\/2026\/02\/\u82f106-1_03.png\" alt=\"\" class=\"wp-image-1145\"\/><\/figure>\n\n\n\n<p>The &#8220;<strong>set background color to ( )<\/strong>&#8221; block is quite simple; it quickly changes the background to a single color. This is suitable for occasions where you need to highlight the Sprite, or for scenes with many characters and items, where a simple background prevents the screen from looking too cluttered.<\/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\/\u82f106-1_04.png\" alt=\"\" class=\"wp-image-1146\"\/><\/figure>\n\n\n\n<p>However, we often need rich backgrounds to create the game&#8217;s atmosphere, so we need to draw them ourselves. Inside the &#8220;<strong>Scene<\/strong>&#8221; list, you can find the &#8220;<strong>set background image to ( )<\/strong>&#8221; block.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1190\" height=\"717\" src=\"https:\/\/edu.circuspi.com\/wp-content\/uploads\/2026\/02\/\u82f106-1_05.png\" alt=\"\" class=\"wp-image-1147\"\/><\/figure>\n\n\n\n<p>Let&#8217;s replace the previous &#8220;<strong>set background color<\/strong>&#8221; block with the &#8220;<strong>set background image to ( )<\/strong>&#8221; block. Clicking the box at the end opens the familiar editor. Just like designing Sprites, we can use these tools to draw backgrounds.<\/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\/\u82f106-1_06.png\" alt=\"\" class=\"wp-image-1148\"\/><\/figure>\n\n\n\n<p>The background drawing interface also has a &#8220;<strong>Gallery<\/strong>&#8221; to choose from, or you can draw the background yourself.\ud83d\ude1d<\/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\/\u82f106-1_07.png\" alt=\"\" class=\"wp-image-1149\"\/><\/figure>\n\n\n\n<p>Some background assets or hand-drawn backgrounds might have concepts of height or depth. For example, in the image below, the scene is outside a spooky castle. The orange dinosaur seems to be standing in a strange position, as if floating in mid-air. In this case, we need to adjust the Sprite&#8217;s position to match the background layout.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"976\" height=\"756\" src=\"https:\/\/edu.circuspi.com\/wp-content\/uploads\/2026\/02\/\u82f106-1_08.png\" alt=\"\" class=\"wp-image-1150\"\/><\/figure>\n\n\n\n<p>Let&#8217;s look at how big the game screen is and how the coordinates are configured.<\/p>\n\n\n\n<p>The screen size is <strong>160 x 120 pixels<\/strong>. The top-left corner coordinate is <strong>(0, 0)<\/strong>, and the bottom-right corner is <strong>(160, 120)<\/strong>. This means our orange dinosaur is currently at the center coordinate <strong>(80, 60)<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1600\" height=\"1080\" src=\"https:\/\/edu.circuspi.com\/wp-content\/uploads\/2023\/09\/06-1_09.png\" alt=\"\" class=\"wp-image-365\"\/><\/figure>\n\n\n\n<p>Once we understand the coordinate configuration, we can find the &#8220;<strong>set [mySprite] position to x ( 0 ) y ( 0 )<\/strong>&#8221; block under the &#8220;<strong>Sprites<\/strong>&#8221; category in the <strong>Block Toolbox<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1190\" height=\"774\" src=\"https:\/\/edu.circuspi.com\/wp-content\/uploads\/2026\/02\/\u82f106-1_10.png\" alt=\"\" class=\"wp-image-1151\"\/><\/figure>\n\n\n\n<p>Using this block helps us adjust the Sprite&#8217;s position. We can enter numbers in the <strong>x and y coordinate fields<\/strong>, or use the pop-up slider to adjust the position. The pop-up window is very user-friendly, providing a visual representation of the coordinates for reference.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1190\" height=\"901\" src=\"https:\/\/edu.circuspi.com\/wp-content\/uploads\/2026\/02\/\u82f106-1_11.png\" alt=\"\" class=\"wp-image-1152\"\/><\/figure>\n\n\n\n<p>After adjustment, the scene looks much more reasonable. The orange dinosaur is now standing on the ground instead of floating in the air, as shown below.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"981\" height=\"757\" src=\"https:\/\/edu.circuspi.com\/wp-content\/uploads\/2023\/09\/06-1_12.png\" alt=\"\" class=\"wp-image-368\"\/><\/figure>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>6.2 Adding Game Level Sound Effects<\/strong><\/h2>\n\n\n\n<p>With a cool background in place, let&#8217;s try adding sound effects. In the <strong>Block Toolbox<\/strong>, there is a &#8220;<strong>Music<\/strong>&#8221; category. Besides the preset sound blocks, you can also customize your own sounds.<\/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\/\u82f106-2_01.png\" alt=\"\" class=\"wp-image-1153\"\/><\/figure>\n\n\n\n<p>Regarding built-in sounds, feel free to experiment with them. They are mainly divided into three playback modes: &#8220;<strong>Play<\/strong>&#8221; (trigger and play from start), &#8220;<strong>Play until done<\/strong>&#8221; (wait until finished before proceeding), and &#8220;<strong>Looping<\/strong>&#8221; (play continuously).<\/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\/\u82f106-2_02.png\" alt=\"\" class=\"wp-image-1154\"\/><\/figure>\n\n\n\n<p>Here, we will teach you how to compose your own music. After all, the number of preset sounds is limited and might not meet everyone&#8217;s needs. There are two common blocks to help you create music, as shown below:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1190\" height=\"602\" src=\"https:\/\/edu.circuspi.com\/wp-content\/uploads\/2026\/02\/\u82f106-2_03.png\" alt=\"\" class=\"wp-image-1155\"\/><\/figure>\n\n\n\n<p>First, let&#8217;s explain the &#8220;<strong>play melody&#8230;<\/strong>&#8221; block. The first field allows you to compose the &#8220;<strong>Melody<\/strong>,&#8221; and the second field sets the &#8220;<strong>Tempo<\/strong>&#8221; (bpm). The pop-up editor is very user-friendly; simply click on the grid to compose a melody. There is also a <strong>Gallery<\/strong> to choose from, and a play button at the bottom to listen to your creation.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1190\" height=\"774\" src=\"https:\/\/edu.circuspi.com\/wp-content\/uploads\/2026\/02\/\u82f106-2_04.png\" alt=\"\" class=\"wp-image-1156\"\/><\/figure>\n\n\n\n<p>How is it? Isn&#8217;t it fun?<\/p>\n\n\n\n<p>However, this melody block has a drawback: it doesn&#8217;t have a built-in function to repeat in the background. Once composed, it can only be used as a standard sound effect, which is a pity.<\/p>\n\n\n\n<p>This is where the second block, &#8220;<strong>start song&#8230;<\/strong>&#8221; (or <strong>play song<\/strong>), comes in. This block includes a background looping function, allowing you to toggle whether it plays on a loop.<\/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\/\u82f106-2_05.png\" alt=\"\" class=\"wp-image-1157\"\/><\/figure>\n\n\n\n<p>Similarly, click on the first setting option of the block. It also has a convenient editor, but it doesn&#8217;t have a ready-made Gallery to use. The sounds are similar to synthesizer effects. <strong>Usage:<\/strong> Select a &#8220;<strong>Sound Option<\/strong>&#8221; from the top row (e.g., the <strong>Duck<\/strong> icon), and left-click on the &#8220;<strong>Staff<\/strong>&#8221; below at the position where you want the sound to play.<\/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\/\u82f106-2_06.png\" alt=\"\" class=\"wp-image-1158\"\/><\/figure>\n\n\n\n<p>If you want a more standard tone, you can choose the <strong>Dog<\/strong> icon (third from the left). The Duck is very suitable for a spooky atmosphere, fitting perfectly with the background we just set.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"797\" height=\"547\" src=\"https:\/\/edu.circuspi.com\/wp-content\/uploads\/2026\/02\/\u82f106-2_07.jpg\" alt=\"\" class=\"wp-image-1159\"\/><\/figure>\n\n\n\n<p>After setting up your background music, don&#8217;t forget to set &#8220;<strong>looping<\/strong>&#8221; to &#8220;<strong>true<\/strong>&#8221; (check the box) in the block settings so the sound effect plays continuously!<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1190\" height=\"602\" src=\"https:\/\/edu.circuspi.com\/wp-content\/uploads\/2026\/02\/\u82f106-2_08.png\" alt=\"\" class=\"wp-image-1160\"\/><\/figure>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>To design a simple game, you need Sprites, Game Goals,  [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":363,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[21,23],"tags":[],"table_tags":[],"class_list":{"0":"post-878","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\/878","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=878"}],"version-history":[{"count":3,"href":"https:\/\/edu.circuspi.com\/index.php\/wp-json\/wp\/v2\/posts\/878\/revisions"}],"predecessor-version":[{"id":1165,"href":"https:\/\/edu.circuspi.com\/index.php\/wp-json\/wp\/v2\/posts\/878\/revisions\/1165"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/edu.circuspi.com\/index.php\/wp-json\/wp\/v2\/media\/363"}],"wp:attachment":[{"href":"https:\/\/edu.circuspi.com\/index.php\/wp-json\/wp\/v2\/media?parent=878"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/edu.circuspi.com\/index.php\/wp-json\/wp\/v2\/categories?post=878"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/edu.circuspi.com\/index.php\/wp-json\/wp\/v2\/tags?post=878"},{"taxonomy":"table_tags","embeddable":true,"href":"https:\/\/edu.circuspi.com\/index.php\/wp-json\/wp\/v2\/table_tags?post=878"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}