Open nmccamish opened 2 days ago
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:
[dpad]
attribute to jpad-trackpad
that "snaps" and movement to 8 directions.[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?
That sounds like it could work, yes!
It looks like I could perhaps create 4-button D-pads with
jpad-tile
s andjpad-button
s, 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.