{"id":880,"date":"2026-02-13T08:51:13","date_gmt":"2026-02-13T00:51:13","guid":{"rendered":"https:\/\/edu.circuspi.com\/?p=880"},"modified":"2026-03-09T15:39:59","modified_gmt":"2026-03-09T07:39:59","slug":"6-1-designing-game-level-backgrounds","status":"publish","type":"post","link":"https:\/\/edu.circuspi.com\/index.php\/gamebit-en\/6-1-designing-game-level-backgrounds\/","title":{"rendered":"6.1 Designing Game Level Backgrounds"},"content":{"rendered":"\n

First, please enter MakeCode Arcade<\/a> and open your project with your Sprite, as shown below:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

You can see a “Scene<\/strong>” category in the Block Toolbox<\/strong>. Click it to reveal many blocks related to scene settings in the list.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

First, let’s try the “set background color to ( )<\/strong>” block. Drag it into the “on start<\/strong>” block. Clicking the color box at the end of the block opens the Color Palette<\/strong>.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

The “set background color to ( )<\/strong>” 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>\n\n\n\n

However, we often need rich backgrounds to create the game’s atmosphere, so we need to draw them ourselves. Inside the “Scene<\/strong>” list, you can find the “set background image to ( )<\/strong>” block.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Let’s replace the previous “set background color<\/strong>” block with the “set background image to ( )<\/strong>” 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>\n\n\n\n

The background drawing interface also has a “Gallery<\/strong>” to choose from, or you can draw the background yourself.\ud83d\ude1d<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

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’s position to match the background layout.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Let’s look at how big the game screen is and how the coordinates are configured.<\/p>\n\n\n\n

The screen size is 160 x 120 pixels<\/strong>. The top-left corner coordinate is (0, 0)<\/strong>, and the bottom-right corner is (160, 120)<\/strong>. This means our orange dinosaur is currently at the center coordinate (80, 60)<\/strong>.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Once we understand the coordinate configuration, we can find the “set [mySprite] position to x ( 0 ) y ( 0 )<\/strong>” block under the “Sprites<\/strong>” category in the Block Toolbox<\/strong>.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Using this block helps us adjust the Sprite’s position. We can enter numbers in the 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>\n\n\n\n

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>\n","protected":false},"excerpt":{"rendered":"

First, please enter MakeCode Arcade and open your proje […]<\/p>\n","protected":false},"author":1,"featured_media":368,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[21,23],"tags":[],"table_tags":[],"class_list":{"0":"post-880","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\/880","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=880"}],"version-history":[{"count":2,"href":"https:\/\/edu.circuspi.com\/index.php\/wp-json\/wp\/v2\/posts\/880\/revisions"}],"predecessor-version":[{"id":1162,"href":"https:\/\/edu.circuspi.com\/index.php\/wp-json\/wp\/v2\/posts\/880\/revisions\/1162"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/edu.circuspi.com\/index.php\/wp-json\/wp\/v2\/media\/368"}],"wp:attachment":[{"href":"https:\/\/edu.circuspi.com\/index.php\/wp-json\/wp\/v2\/media?parent=880"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/edu.circuspi.com\/index.php\/wp-json\/wp\/v2\/categories?post=880"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/edu.circuspi.com\/index.php\/wp-json\/wp\/v2\/tags?post=880"},{"taxonomy":"table_tags","embeddable":true,"href":"https:\/\/edu.circuspi.com\/index.php\/wp-json\/wp\/v2\/table_tags?post=880"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}