D-pads?

[nmccamish]

It looks like I could perhaps create 4-button D-pads with jpad-tiles and jpad-buttons, but what about 8-button D-pads, like that of the Sega Master System? They still wouldn't look like D-pads, though, just clusters of buttons.

[nostrangerdev]

It sure would be quite messy to use 8 buttons like that.

I actually stumbled on a similar situation recently, for a grid-based movement game.

In that case I used the jpad-trackpad with the attribute [normalize] and then rounded the values to "snap" them to the grid.

<jpad-controller>
    <jpad-trackpad name="movement" normalize slot="left"></jpad-trackpad>
    <!-- Other buttons here... -->
</jpad-controller>

const jpad = document.querySelector('jpad-controller');

// Getting the raw data
const { x, y } = jpad.getAxis('movement');

// Snapping them on the grid
const gridMovement = { x: Math.round(x), y: Math.round(y) };

While this works on a game with only cardinal movements, it doesn't address the need for properly scaled diagonal movements if not normalized after rounding.

---

That said, I can surely add support for dpad-like motion to the trackpad.

Here's my plan:

• A new [dpad] attribute to jpad-trackpad that "snaps" and movement to 8 directions.
• If used alone it snaps while maintaining a smooth increment (based on the distance from the center and capped to 1 like the standard behaviour).
• If used together with [normalize] the increment is snapped to 0 or 1 while maintaining proper diagonal distance.

It would be used like this:

<!-- 8-ways with smooth increment, good for finer controls -->
<jpad-controller>
    <jpad-trackpad name="movement" dpad></jpad-trackpad>
</jpad-controller>

<!-- 8-ways with snap, like in SEGA, GBA, etc. -->
<jpad-controller>
    <jpad-trackpad name="movement" dpad normalize></jpad-trackpad>
</jpad-controller>

const jpad = document.querySelector('jpad-controller');

// Can be used as is, without any extra calculations
const eigthWaysMovement = jpad.getAxis('movement');

What do you think of this solution?

[nmccamish]

That sounds like it could work, yes!