{"id":853,"date":"2026-02-12T17:00:48","date_gmt":"2026-02-12T09:00:48","guid":{"rendered":"https:\/\/edu.circuspi.com\/?p=853"},"modified":"2026-03-10T14:28:33","modified_gmt":"2026-03-10T06:28:33","slug":"3-1-getting-to-know-the-interface","status":"publish","type":"post","link":"https:\/\/edu.circuspi.com\/index.php\/gamebit-en\/3-1-getting-to-know-the-interface\/","title":{"rendered":"3.1 Getting to Know the Interface"},"content":{"rendered":"\n

MakeCode Arcade is primarily divided into three main sections. From left to right, they are the Game Simulator<\/strong>, the Block Toolbox<\/strong> , and the Workspace<\/strong>.<\/p>\n\n\n\n

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

3.1.1 The Game Simulator<\/h3>\n\n\n\n

As the name suggests, this is where you can instantly play your game. It allows you to verify if your code is working correctly\u2014for example, checking if the character moves when a button is pressed, or if a projectile follows the intended path.<\/p>\n\n\n\n

First, let’s follow the method taught in the previous unit and open the example program “Space Destroyer” to demonstrate.<\/p>\n\n\n\n

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

Once the webpage finishes initializing, we can click the buttons and joystick on the simulator to start enjoying the game. However, before you even play, your first impression might be: “The screen is too small, isn’t it?” Playing games shouldn’t be a struggle. Below the console image, there is a row of Control Buttons. The rightmost one is the “Toggle Full Screen” button. Please click it. The game screen will expand to fit your browser window size. You can adjust the window size yourself after finishing your game design.<\/p>\n\n\n\n

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

Although the screen is bigger, you will immediately realize the next problem: we only have one mouse cursor, making it impossible to operate the joystick and buttons simultaneously. Can we use a keyboard?<\/p>\n\n\n\n

In the Control Buttons bar<\/strong>, there is a “Keyboard Shortcut<\/strong>” button. Clicking this will open a help window showing how the game buttons map to your keyboard keys. It even supports two-player battles on the same keyboard.<\/p>\n\n\n\n

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

The remaining Control Buttons<\/strong>, from left to right, are “Stop\/Start”,<\/strong> “Restart”,<\/strong> “Debug”,<\/strong> and “Screenshot”.<\/strong> We will have a separate chapter dedicated to explaining the “Debug” function later. Feel free to test the other buttons now.<\/p>\n\n\n\n

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

3.1.2 The Block Toolbox<\/h3>\n\n\n\n

This area stores all our code blocks. Click on any category to explore; for example, if you click “Sprites”, a list of code blocks related to “Sprites” will pop out on the right.<\/p>\n\n\n\n

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

The “Advanced<\/strong>” section at the bottom contains even more options, which you can click through to explore one by one.<\/p>\n\n\n\n

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

If we categorize the needs for creating a simple game, we require “Eight Major Functions”.<\/strong> These include “Sprites”<\/strong>, “Controller”<\/strong>, “Game”<\/strong>, and “Music”<\/strong> for the game’s presentation elements; and “Loops”<\/strong>, “Logic”<\/strong>, “Variables”<\/strong>, and “Math”<\/strong> for the underlying logic.<\/p>\n\n\n\n

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

Options outside these “Eight Major Functions”<\/strong> are used to enrich the game, enhance effects, or add extensions. The “Extensions” category, which wasn’t detailed above, offers flexibility. You can add blocks written by others or official providers, or choose not to extend and simply design games using the built-in interface functions.<\/p>\n\n\n\n

\n\n\n\n

3.1.3 The Workspace<\/h3>\n\n\n\n

The Workspace takes up the largest area of the interface. This is where you implement game functions by “assembling”<\/strong> code blocks. Once you drag a block into the Workspace, it becomes active.<\/p>\n\n\n\n

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

3.1.4 Additional Features<\/h3>\n\n\n\n

At the top and bottom of the interface, there are various operation options. Those who have used MakeCode<\/strong> before should be familiar with these: “Download”, “Save”, “Zoom Controls”, “Undo\/Redo”, “Share Project”, and others.<\/p>\n\n\n\n

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

If you are a beginner, don’t worry. We will frequently use these options in future tutorials, so you will get familiar with them gradually.<\/p>\n","protected":false},"excerpt":{"rendered":"

MakeCode Arcade is primarily divided into three main se […]<\/p>\n","protected":false},"author":1,"featured_media":277,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[21,23],"tags":[],"table_tags":[],"class_list":{"0":"post-853","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\/853","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=853"}],"version-history":[{"count":3,"href":"https:\/\/edu.circuspi.com\/index.php\/wp-json\/wp\/v2\/posts\/853\/revisions"}],"predecessor-version":[{"id":1542,"href":"https:\/\/edu.circuspi.com\/index.php\/wp-json\/wp\/v2\/posts\/853\/revisions\/1542"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/edu.circuspi.com\/index.php\/wp-json\/wp\/v2\/media\/277"}],"wp:attachment":[{"href":"https:\/\/edu.circuspi.com\/index.php\/wp-json\/wp\/v2\/media?parent=853"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/edu.circuspi.com\/index.php\/wp-json\/wp\/v2\/categories?post=853"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/edu.circuspi.com\/index.php\/wp-json\/wp\/v2\/tags?post=853"},{"taxonomy":"table_tags","embeddable":true,"href":"https:\/\/edu.circuspi.com\/index.php\/wp-json\/wp\/v2\/table_tags?post=853"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}