Making and Using Extensions in Microsoft MakeCode Arcade
With so many features hiding under the hood, you might find that you aren’t able to take advantage of the most advanced block-based capabilities of Microsoft MakeCode Arcade unless you install some extensions.
Here is a brief tutorial that will help you get the most out of your MakeCode Arcade sessions.
Loading Extensions
Adding new extensions to MakeCode Arcade is simple, as long as you know where to find them. The option to add extensions is located near the end of the toolbox. Click it to go to the extensions library.
Arcade comes with several pre-loaded, pre-approved options to help with common things like scaling, adding darts, working with text, and more. What you might not know is that there are several amazing, pre-approved extensions hidden from view, as well.
To use these, you’ll need to know either their search terms or their location in Github.
Try searching for “carnival,” for example, and you’ll find this:
Sometimes, you’ll come across a “secret” extension in our forum or in a lesson plan and you’ll need the github address to locate it.
Enter the Github address into the search bar and the extension should load. Keep in mind, if the extension has not been pre-approved, it will come with a warning. You are using these at your own risk.
It’s very likely that any extensions you create yourself will also have this warning.
Using Extensions
Once you’ve loaded your extension, you can find the blocks in your toolbox.
Nearly all extensions will have their own categories, like this:
Some might add blocks to existing categories, but that’s an outdated practice that shouldn’t be seen much anymore.
Making Extensions
Making extensions can be as simple, or as complex as you need it to be for your programming level.
Level 1
If you create a function that you would like to use over and over again in different projects, you can move it into a custom.ts file using the text-based editor.
Simply flip to text, create a new file in the explorer window, and it will pre-populate with the name custom.ts.
Once that file is created, it will contain template code that acts as a guide for how to publish your function.
Replace foo with the name of your function, and add the code inside. Make sure to change all of the parameters to the parameters that match your function, as well.
For example, if your function looks like this in your blocks code:
It will look like this in text:
And should look like this in your custom.ts file:
Zooming out, you’ll see that this whole thing is nested inside of a namespace.
This namespace here is “custom” (but we highly recommend that you change it to avoid colliding with other extensions called “custom”.)
You’ll need to know the namespace if you’re going to call the function in text. If you’re using blocks, the namespace is called automatically.
If you want to modify category names, colors, and icons, you can edit those in the comments above the namespace.
Choose your colors from RGB hex, and your icons from free (not Pro) Font Awesome libraries version 5.0 and earlier.
You can play with your settings using our Playground Tool, then transfer them to your custom.ts file when you’re happy.
Exporting Your Extensions
The easiest way to save and export your extension (if you don’t have a Github account) is to save your project as a PNG (using the save icon) then import that PNG to the new project using the “Import” option under “Extensions.”
Level 2
The most common way to use an extension is to save the project to a Github repo (using the Github button)
and import it by typing the project’s Github address into the URL bar of the extension window.
Level 3
If you find yourself creating extensions that you believe will be important and useful to many other Arcade users, you can follow the directions located here to get your repository approved for use by others, without the red warning.
Conclusion
While extensions are definitely more advanced features, using pre-approved extensions can be quite simple and can lend a whole lot of magic to beginner-level projects!
