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 have a github address for it.
Enter the Github address into the extension search bar and the extension should appear. 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.
Making it Simple
Not quite ready for GitHub? Extensions can also be loaded using project share links! Simply copy the share link from the project that holds your extension and paste it in to the extension search bar. The project’s tile should show up below.
A couple of words of note on this method:
- It doesn’t matter whether you use the ‘_’ link (snapshot) or the ‘S’ link (persistent). Both will be converted to MakeCode’s own snapshot link…meaning that these extensions cannot be updated simply by republishing the same project. You’ll need to delete and re-add the extension to update (or edit the ‘pub:’ address in the pxt file.)
- Unless you’ve marked your project with
"asset pack":true, everything from that extension will be brought into your project, that includes images, functions, and even all of the blocks that you had in the workspace (although, those won’t show in the new workspace, they’ll just be running behind the scenes via one of the imported files.) - As with other extensions, bringing share links into your project will also bring in all of the extensions utilized in the file being shared. That means you could end up with several extra categories in your toolbox, when your desired extension only uses one.
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.
Removing Extensions
Sometimes an extension interferes with something you’ve already done, or you decide that you want to go a different way. In those cases, you may need to remove an extension.
At the moment, this can only be done by switching over to text mode and deleting the extension from the file explorer.
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.
Get Kiki Prottsman’s stories in your inbox
Join Medium for free to get updates from this writer.
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:
Make sure that the word “export” appears before your function name if you want that function to appear in the toolbox.
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!
