Code the NeoPixel Control in MakeCode Arcade

by John Park

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:

Only use the Google Chrome browser with MakeCode!

NeoPixel Strip Control

To begin, let's load the code and check it out.

led_strips_arcade-PyGamer-NeoPixel-Controller.png

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 Code

This 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.
If you're ever unsure where a MakeCode block comes from, you can often find it by matching the block's color to a category on the left side of the editor. You can also use the handy search function!

Application Design

This is the overview of how the NeoPixel Controller application will work. We'll start with the concept of pages.

led_strips_page_0.png

led_strips_page_1.png

led_strips_page_2.png

Pages

We'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!

Sprites

Since 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 on sprite of kind Player overlaps other sprite of kind ___ blocks, we can set up a unique event to occur based on any selection. For example, if the user is on the color picker page, when the Player cursor sprite overlaps the swatch_orange sprite, the NeoPixels will be set to orange.

Arrays

Each 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 destroy sprite block on each sprite.

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!

Extensions

This 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 Pins

The 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:

  • Set the background image to a custom sprite of a NeoPixel strip
  • splash screen with the application title
  • show long text with instructions on the settings page, color picker page, and animation page
  • call pixelCounterSetup function which creates the counter digits
  • set the background image to black
  • create a variable called page with a value of 0
  • call pageSetup function with a parameter value the page variable (in this case 0) which makes the settings page, and then calls the arrowSetup function to create the arrow sprites over and under the digits
  • set bright_strip variable to 60 which will be used to control the strip brightness
  • set bright_onboard variable to 10 which will be used to control the onboard NeoPixel brightness on the board
  • call StripSetup function with a parameter value of the value the myCounter seven segment counter is set to
  • call cursorSetup function

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!

PLUG IN THE NEOPIXELS Update the PyBadge/PyGamer Bootloader
This guide was first published on Jul 26, 2019. It was last updated on Jul 26, 2019. This page (Code the NeoPixel Control in MakeCode Arcade) was last updated on Nov 15, 2019.