Skip to content

A plug-and-play gamepad frontend framework for HTML5 mobile games, supporting both virtual and physical joysticks. No scripting required.

License

Notifications You must be signed in to change notification settings

RodrigoDornelles/npm-gamepadzilla

Repository files navigation

🦖 GamepadZilla la la!

npm cdn

A plug-and-play gamepad frontend framework for HTML5 mobile games, supporting both virtual and physical joysticks. No scripting required.

🎮 Preview 🕹️ Features
virtual gamepad gpz is fast. (no DOM manpulation)

gpz is easy. (no Javascript needed, use only html5 attributes)

gpz is pure. (made with only typescript without dependencies)

gpz hates the van's old-man!

showcase

post your open-source game using gamepadzilla!

game stack source
Coco Battle Royale 2 C, Assembly 6502, WebAssembly, Html, gampadzila.js :octocat:repo

How to use

  • import library with npm or cdn. 🚐
  • create html5 canvas elements with class gpz-joy or gpz-btn and configure data attributes.
<!DOCTYPE html>
<html>
    <head>
        <script src='https://cdn.jsdelivr.net/npm/gamepadzilla@1/dist/gamepadzilla.js'></script>
    </head>
    <body style="touch-action: none">
        <canvas
            class="gpz-joy"
            data-gpz-bind="ArrowUp ArrowLeft ArrowDown ArrowRight">
        </canvas>
        <canvas
            class="gpz-btn"
            data-gpz-bind="KeyF">
        </canvas>
    </body>
</html>

How to build

if you intend to contribute, let's rock! 🎸

bun 🍚

bun run build

nodejs :rage1:

npm install
npm run build

container 🐋

podman run --rm -v $(pwd):/app -w /app  -it oven/bun bun run build
docker run --rm -v $(pwd):/app -w /app  -it ove/bun bun run build

Cheatsheet

main classes

html5 class description
gpz-dpad virtual digital pad for directional input.
gpz-joy virtual stick or gamepad analog for directional input.
gpz-btn virtual circle buttons with various console layouts.

data attributes

html5 attribute html5 class description
data-gpz-bind * keyboard to emulate
(follows anti-clockwise button pattern like:WASD)
data-gpz-vibrate * vibration animation when pressed for feedback
data-gpz-color gpz-dpad
gpz-btn
button colors when is not pressed
data-gpz-color-action gpz-dpad
gpz-btn
buttons colors when is pressed
data-gpz-size gpz-dpad size of shapes elements
data-gpz-offset gpz-dpad size of gap in elements

This project is licensed under GNU Affero General Public License 3.0, please read the LICENSE file.