Rotary Encoder Basics

Rotary encoders are very useful, and seem a bit mysterious sometimes. They can spin endlessly in either direction. And, both the speed at which they're turned and the direction they're being turned can be detected and used by the microcontroller, in this case the PyGamer. But how?!

Inside the switch are two contact pints, A & B, and a perforated disc of multiple common ground contact points, C. There's no need for resistors or a voltage pin as we'll use the PyGamer's built in pull-up resistors automatically in the encoder extension.

As the disc spins, say, clockwise, one of the C pads touches A causing a square wave pulse to go high on the A pin. Then, a short moment later, the C pad touches B causing an pulse on the B pin. The PyGamer is able to determine the speed of the rotation by sensing the period of time between the two pulses.

When the knob is turned counterclockwise, the B pulse will come first, followed by the A pulse, so it is this way that the PyGamer know which direction the rotary encoder is turning.

It is slightly more complex than this, actually. The two pulse waves are 90° out of phase with each other. So in the clockwise direction, the edge of A is falling as B high, while in the counter clockwise direction the edge of A is rising as B is high.

Here is an excellent explainer video from How to Mechatronics:

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 beta.

These MakeCode Arcade guides are designed to take you through the fundamentals before tackling more complex games:

For intermediate-level techniques, check out:

Only use the Google Chrome browser with MakeCode!

"Crank" in MakeCode Arcade

Partly inspired by the Playdate handheld designed by Panic and Teenage Engineering, the Microsoft MakeCode Arcade team developed a set of "crank" blocks to use rotary encoders.

Here's how to add the blocks and use them.

Add Extensions

First, head to MakeCode Arcade beta editor and click on the setting gear wheel menu and click on Extensions.

From the gallery of extensions, we'll add both controller and feather (you'll need to go to this gallery twice to pick them each individually.)

Now, when we go to the Controller category, we'll see the crank position block and the set crank pinA __ pinB __ block are available.

By adding the Feather extension, we are able to select any of the exposed pins on the back of the PyGamer!

Example Code

Here's a very simple program we can create in order to test the rotary encoder in MakeCode Arcade on the PyBadge.

Note how we've set the crank pinA to A3 and pinB to A2, which is how we wired the encoder on the previous page.

This creates a piece of delicious cake as a player sprite, and sets its horizontal position to be driven by the rotary encoder's position.

Upload the code to your PyGamer and give it a try now!

Want to reverse the direction of the rotary encoder's values? Simply swap the pin definitions in the set crank pins block!

Fishing Reel Crank

Based on the crank design by the Ruiz Bros. found here, I remixed it into a spinning reel style crank to use in our fishing game.

You can download the model here and 3D print it. It prints the arm and handle at the same time, but they aren't touching each other, so the handle is free spinning. The crank is designed to press fit onto the rotary encoder shaft.

I printed the case and followed their build instructions, but decided to leave off the front of the case so I could admire the awesome PyGamer silkscreen!