MakeCode Arcade Interface

MakeCode Arcade is a full-featured game development platform for creating arcade-style video games using Blocks, JavaScript, or Python. The diagrams below showcase some of the features of the MakeCode Arcade user interface.

Home Page

The Home Page is where you begin your game coding experience. It offers options to create a new project, open or import an existing project, try a skillmap or tutorial, or explore other learning resources.

• Settings menu - provides options to set the Language and Theme.
• Sign In - is optional, and provides the ability to save projects to the user’s account in the cloud. Learn more.
• My Projects - this first row allows you to create a new blank project or access your recent projects.
• Import - existing projects from a file on your computer, a shared link, or a GitHub repo.
• Skillmaps and Tutorials - are available as well as videos, game examples, courses and other learning resources further down the page.

Editor

The MakeCode Arcade Editor is where you will be coding your games.

The main areas of the interface are:

• Game Window - where you can play, test and debug your games.
• Toolbox - which contains all the game code elements (blocks or code snippets) that you can add to your game. The code elements are organized into different categories, or Toolbox drawers, that you can click on to open. The Toolbox has an Advanced section which includes even more code categories, and the ability to add Extensions, or custom code, to the Toolbox. The Toolbox also acts as a trash bin – you can drag code blocks from the Workspace and drop onto the Toolbox to delete.
• Workspace - is where you can build your program. Drag code elements from the Toolbox into the Workspace and assemble them to form your game code.

Some additional interface features in each of the screen areas include:

Top Bar

On the top bar you can find the Editor toggle buttons which allow you to switch between Blocks, JavaScript, or Python code editors. You can edit your code in any editor and switch between them. The Assets button will show you all the assets (images, animations, songs) in your game. On the right side of the top bar, the Home button will take you back to the Home Page, and the Share button will give you a link to share your game with others.

Game Window

• Game controls - include the on-screen joystick and A and B buttons which allow you to play your game. Note – you will have to move your mouse over the game controls to activate them.
• Game toolbar - includes buttons to:
  • Stop and Start the game
  • Restart the game
  • Run the game in Debug Mode
  • Mute the game
  • Show the keyboard mapping for game controls
  • Take a screenshot of the game
  • Toggle the game to Fullscreen mode

Bottom Bar

• Download - your game onto a hand-held Arcade device. Learn more.
• Name and Save - your game onto your computer in the Downloads folder as a .png file. Note – the code is embedded in the file which you can Import from the Home Page.
• GitHub - store your game in a GitHub repo. Learn more.
• Undo/Redo - buttons undo or redo the last coding actions in the Workspace.
• Zoom - in or out buttons magnify or minimize the size of the Workspace.