MakeCode Arcade
MakeCode Arcade is a free Microsoft block programming environment designed specifically to make games, but we can also use it for non-game application development. Learning to use MakeCode is easy & fun.
If you're not already familiar with the basics of MakeCode Arcade, check out this guide on creating a character sprite and moving it with controls.
To start, open a new Chrome browser window (Chrome works best) and go to MakeCode Arcade.
These MakeCode Arcade guides are designed to take you through the fundamentals before tackling more complex games -- even though this NeoPixel Strip Control isn't a game, most of the techniques apply:
For intermediate-level techniques, check out:
Start by launching MakeCode Arcade using the Google Chrome web browser. Then, download the led_strips_arcade-PyGamer-NeoPixel-Controller.png image cartridge file above by right-clicking on the image and saving it to your computer.
Load the CodeThis is a special .png file that contains not only an image, but the entire game is embedded in it as well! Simply drag it from the location to which you saved the image on your computer (such as the desktop as shown here) onto the Chrome browser window that is already running MakeCode Arcade (MCA). Note that the image in this graphic is of a different game, but you'll be dragging the NeoPixel_Strip.png file. This will open the code into the MCA editor. |
Application Design
This is the overview of how the NeoPixel Controller application will work. We'll start with the concept of pages.
PagesWe'll organize the functionality into a settings page, color picker page, and animation page. The user can press the Select, A, and B buttons, respectively, to move between these pages. The thumbstick will control the cursor on all three pages, and by simply hovering over the counter arrows, color swatches, and animation icons, they can adjust things. It's quick, easy, and efficient! |
|
SpritesSince MakeCode Arcade has lots of capabilities around using sprites, that's how we'll develop our user interface (UI) elements. Each arrow, color swatch, and animation icon used will be its own sprite. The player will control the cursor sprite with the thumbstick. By using |
|
ArraysEach time the user switches pages, we need to clear the sprites from the previous page. To facilitate this, we'll create arrays of sprites each time a page is made. Then, we can loop through that array to run the |
Test Drive
Upload the code to you PyGamer. When the PyGamer starts up it'll give you instructions on using the NeoPixel Controller -- you can move the cursor to the up or down arrows on the tens and ones places to specify the number of NeoPixels in your strip -- the default is 30.
Then, press A to switch to the color swatch picker page, then move the cursor to light up your strip.
Press B to use the animation picker page -- the strip will play whichever animation your cursor is hovering over!
ExtensionsThis program makes use of some extensions to MakeCode Arcade: Feather, SevenSeg and Light. If you're starting from scratch, Head to Advanced > Extensions + and then click on those two extensions to add them to your session. If you're opening the provided .png image cartridge there's no need, they're already added to the session. |
|
Feather PinsThe Feather extension gives us access to many digital and analog input and output pins on the PyGamer, including the D3 pin on the JST port we'll use. |
Code Tour
To keep the code organized, function blocks are used throughout the program. You can start with the on start block and look at the code and functions it calls.
Here's what happens on start:
|
At this point, the NeoPixels are setup (and lit white) and the user is on the settings page where they can adjust the strip's LED count.
Pressing A or B will call the pageSetup functions necessary to clean the screen and build the sprites for the next page.
Now, all the user needs to do is hover the cursor over a color swatch or animation and be transported into a magically colorful world of RGB goodness!