gamepad plugin: add custom skin #1802

Summary

@melonjs/gamepad-plugin draws its sticks and buttons with the renderer's own shapes (circles, tinted and semi-transparent), so it needs no images. A game with its own art style will want the controls to match: a stick base and thumb, and buttons, taken from its texture atlas.

#1719 listed this ("sprite regions remain an option for custom skins") and it was left for a later version.

Proposal

Optional per-control regions, used in place of the shapes when given:

plugin.register(GamepadPlugin, "gamepad", {
    skin: atlas, // a TextureAtlas
    sticks: [{ base: "stick_base.png", thumb: "stick_thumb.png" }],
    buttons: [
        { label: "A", region: "button.png", pressed: "button_down.png" },
    ],
});

• Stick: a base region and a thumb region, each scaled to the stick's radius and thumb size, the thumb drawn under the finger as it is now
• Button: a region, and an optional pressed region (otherwise the same region drawn brighter, as now); the label is still drawn on top when given
• Dimmed and hidden buttons, the opacity setting and the hold highlight keep working as they do with shapes
• Layout and hit areas stay as they are: from radius and position, so a skin changes the look and not the feel
• No skin: no change, the shapes are drawn as now

Done when

• the options above, documented in the plugin README with an example
• tests: a skinned stick and button draw their regions (on Canvas and WebGL), pressed and dimmed states included
• the visual test page (pnpm -F @melonjs/gamepad-plugin visual) gets a toggle to switch between shapes and a skin
• works on the Canvas, WebGL and WebGPU renderers