MakeCode Arcade: Retro Gaming, Modern Programming

Posted on January 18, 2019 by the MakeCode team

Microsoft MakeCode Arcade is a web-based beginner-friendly code editor to create retro arcade games for the web and for dedicated hardware. As usual with MakeCode, you can either use blocks or JavaScript to build your program in your browser. There’s nothing to install - the games will just work in the browser! For even more fun, you’ll be able to build your own Arcade-compatible game systems or buy them from our hardware partners. But just to make it clear: hardware is optional – you can get started playing or teaching using only a computer with a web-browser.

What’s in MakeCode Arcade?

MakeCode Arcade supports a 160x120 screen showing 16 colors at a time (you can change the palette though!), a 4-channel retro-appropriate sound system, and a grand total of eight buttons (4 directions, A, B, MENU and RESET). Arcade comes with a 2D game engine with sprites, platformer-style collisions, tile maps, particle systems and more.

Arcade features an incredibly fast on-ramp - just throw a few blocks together and get a simple game:

As shown above, Arcade comes with a set of game APIs to make it simple to get started programming your game, including:

• Sprite physics, effects, collisions, animations and lifetime management;
• Controllers, both single-player and multi-player;
• Music, 4-channel sound, different waveforms and envelopes; no samples;
• Game updates, prompts and dialogs;
• Scene definition, tilemaps, collisions and camera position.

As users learn, they can use our full-featured JavaScript editor with auto-completion and other goodies, to develop arbitrarily complex games. Users also can look under the hood at the game APIs, which make extensive use of classes, interfaces, higher order functions, fixed point arithmetic, and garbage collection. This facilitates learning of modern programming concepts, without worrying about high fidelity graphics or sound, while still being fun and engaging.

Moreover, the system allows extensibility through packages (extensions) pulled from GitHub, the largest source code hosting site in the world. Students can even collaborate on projects, or even their own extensions, using our GitHub integration.

Sprite Editor, Gallery and Animations

A major part of the fun of Arcade is designing your own sprites. To make this easier, Arcade has a sprite editor along with a gallery of specially designed sprites for your use. The sprite editor is available both from the Blocks and JavaScript editors. Sprite sizes range from 8x8 to 32x32, with many other combinations available. A sequence of sprites is used to define an animation.

Images are presented in text in JavaScript. Since Arcade supports 16 colors, images look like a matrix of hexadecimal letters, 0, 1, …, a, … f . We’ve upgraded the Monaco editor with the sprite editor so that you can enjoy designing your sprites in JavaScript as well.

Sharing

Once you have created a game, you can share it with your friends through an anonymous URL (web address). The generated web site will let them play the game (including on their smartphone), and also give them option to look at the code, or make their own version of it.

You can also save screenshots of your games while playing. We call these cartridges, since they contain the sources of the game, hidden steganographically in magical pixels. Once saved, anyone can drag these cartridges to the editor to load them. You can use it for emailing of projects, or sharing them on forums.

Speaking of forums, we have created an experimental forum to share your games.

Compatible Hardware

MakeCode Arcade games run in any modern web browser. This includes the one on your smartphone! But we also have some dedicated hardware with more tactile controls and a more retro look. You can play MakeCode Arcade games on a Raspberry Pi Zero connected to a TV. You can either use a small controller shield, or build your own arcade cabinet using old-school joysticks and buttons. There is also hand-held hardware coming, based on mid-range microcontrollers. You can build your own today and soon you’ll be able to buy pre-made consoles! All options are listed on our hardware page.

MakeCode Arcade currently supports two Cortex-M4F microcontrollers:

• STM32F401RE with 96k of RAM and 512k of flash, running at 84MHz
• ATSAMD51G19A with 192k of RAM and 512k of flash, running at 120MHz

Arcade supports a 1.77” 160x128 SPI screen with 18 bit color, but draws only on 160x120 of these pixels, so we can use 320x240 screens in future with 2x up-scaling; the bottom 8 pixels are used for displaying frames per seconds and other similar debug info (if requested).

Language, Compiler and Runtime

As with other MakeCode editors, Arcade uses a dialect of JavaScript called TypeScript, which adds type information and is suitable for large-scale application development. A user’s TypeScript code is compiled in the browser and saved to a .UF2 file. The user then copies the UF2 file to a drive exposed by the device (both handhelds and the Pi). In supported browsers (currently only Chrome) we can also connect to the handheld device directly using WebUSB, so that no file copying is required from the user.

TypeScript is compiled directly to machine code - there is no interpreter or JIT-compiler involved. For this release, we have optimized the generated code heavily, and also added various previously-missing JavaScript features, in particular mark-and-sweep garbage collection, and more support for duck typing. As a result, the games run at least 10x faster and in a fraction of the memory, compared to various embedded interpreters for JavaScript or Python. This lets us implement various compute-intensive effects directly in TypeScript. This includes particles, which animate hundreds of separate objects in every frame.

Resources

We’ve created a fantastic set of resources for learning how to create your own games, including game design concepts, game tutorials, and a semester-long course.

Questions, feedback, and bug reports

If you have questions or feedback regarding MakeCode Arcade, please use the forum. For live chat, you can use our Discord chat.

Bug are best reported in Arcade GitHub repo. You can also use the forum if you find that easier.

Last, but certainly not least, make sure to share your games, either on the forum, or on social media (best with #MakeCodeArcade hashtag).