Simulator Support for additional (Makey Makey) keys

[wmacfarl]

The Makey Makey is a popular piece of maker-education hardware that makes it very easy for people to create new input devices out of everyday objects. The Makey Makey board acts as a USB HID interface and maps physical world user-inputs to keypresses.

Making game-controllers with the Makey Makey is a very popular activity, and MakeCode Arcade is a perfect platform for students to use custom game controllers with.

Is your feature request related to a problem? Please describe. The MakeCode Arcade simulator only responds to particular key inputs. These inputs don't correspond to the default Makey Makey keys.

MakeCode Arcade Keys are:

The ideal Makey Makey keymap would be: PLAYER 1: UP -> UP ARROW DOWN -> DOWN ARROW LEFT -> LEFT ARROW RIGHT -> RIGHT ARROW A -> CLICK B -> SPACEBAR

PLAYER 2: UP -> W DOWN -> S LEFT -> A RIGHT -> D A -> F B -> G

Describe the solution you'd like The Makey Makey team would like to build an extension that allows users to remap the keyboard events/bindings that trigger simulator button-press events.

We would like to have the simulator key event-listening/mapping exposed in a way that would allows to make blocks like: or

or

Describe alternatives you've considered An alternative to this model of making an extension could be exposing a UI for remapping keybindings in the MakeCode simulator itself.

This could have a set of drop-downs for popular alternative keymappings including the Makey Makey keys.

Additional context The goal of this feature is really to make the idea of using the Makey Makey with MakeCode arcade both easy and visible.

[eanders-ms]

Hi @wmacfarl, we're thinking of going with your first suggestion. We would add a JavaScript method to set the control mapping for a player, something like:

    namespace sim {
        /**
         * List of key codes for all keyboard keys and mouse buttons.
         */
        enum KeyCode { // (I wonder if we already have an enum like this... will research)
            // First, list all the keyboard keys with ASCII codes here
            A = 65, // etc
            // Then include modifier keys here, mapped to negative values
            LeftShift = -1, // etc
            // Then include special keys for mouse buttons, starting at a larger negative offset
            LeftClick = -100
        }

        /**
         * Sets the simulator's input control mapping for a player.
         */
        function setPlayerKeymap(
            player: number,  // player number is 1-based.
            keys: {
                up: KeyCode,
                down: KeyCode,
                left: KeyCode,
                right: KeyCode,
                A: KeyCode,
                B: KeyCode,
            }
        );
    
        /**
         * Sets the input control mapping for the simulator's system functions.
         */
        function setSystemKeys(keys: {
            screenshot: KeyCode,
            gif: KeyCode
        });
    }

Your team would then be responsible for the creation of a Makey Makey extension that would provide the keymap block you mocked up:

    namespace MakeyMakey {
        //% blockId=set_makeymakey_controls
        //% block="Remap simulator keys to Makey Makey defaults"
        export function setMakeyMakeyInputs() {
            // Configure input for player 1
            sim.setPlayerKeymap(1, {
                up: sim.KeyCode.UpArrow,
                down: sim.KeyCode.DownArrow,
                left: sim.KeyCode.LeftArrow,
                right: sim.KeyCode.RightArrow,
                A: sim.KeyCode.LeftClick,
                B: sim.KeyCode.Space
            });
            // Configure input for player 2
            sim.setPlayerKeymap(2, {
                up: sim.KeyCode.W,
                down: sim.KeyCode.S,
                left: sim.KeyCode.A,
                right: sim.KeyCode.D,
                A: sim.KeyCode.F,
                B: sim.KeyCode.G
            });
        }
    }

Note: By default, player 1 has two mappings: WASD and arrow keys. When overridden by setPlayerKeymap, player one would no longer have an alt mapping. It would only use the override.

@wmacfarl would an approach like this work for you?

---

@riknoll, @jwunderl, I'd love to get your feedback on this design. Also, do we already have a KeyCode enumeration that could be leveraged?

[eanders-ms]

We can use the javascript keycodes, with mouse buttons appended. https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode#value_of_keycode

[jwunderl]

using keycodes + appending mouse buttons seems good to me, but I'd say specifically excluding esc & possibly tab might be good for maintaining keyboard accessibility

[wmacfarl]

This seems perfect to meet our needs!

[eanders-ms]

@wmacfarl, This change is live in beta! Please give it a spin and let us know if it meets your needs.

Beta endpoint: https://arcade.makecode.com/beta

Example usage:

namespace MakeyMakey {
    //% blockId=set_makeymakey_controls
    //% block="Remap simulator keys to Makey Makey defaults"
    export function setMakeyMakeyInputs() {
        // Configure input for player 1
        keymap.setPlayerKeys(
            1,
            keymap.KeyCode.UpArrow,
            keymap.KeyCode.DownArrow,
            keymap.KeyCode.LeftArrow,
            keymap.KeyCode.RightArrow,
            keymap.KeyCode.MouseLeftButton,
            keymap.KeyCode.Space);
        // Configure input for player 2
        keymap.setPlayerKeys(
            2,
            keymap.KeyCode.W,
            keymap.KeyCode.S,
            keymap.KeyCode.A,
            keymap.KeyCode.D,
            keymap.KeyCode.F,
            keymap.KeyCode.G);
    }
}

This will create a new block, to be called at the beginning of the program:

One caveat, the Makey Makey's "click" function mapped to "A" will only work when the mouse cursor is somewhere within the bounds of the simulator (like, over the screen). This is due to the fact the simulator is hosted in an iframe. Making the simulator fullscreen can help.

Let us know what you think!

[eanders-ms]

@wmacfarl Here is an extension to test with: https://github.com/eanders-ms/makey-makey-ext/. Import this extension into your Arcade project to get the "remap simluator keys.." block pictured above.

[abchatra]

This is implemented.