:t-rex: GamepadZilla la la!

January 2, 2025 · View on GitHub

:t-rex: GamepadZilla la la!

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

:octocat: source code: https://github.com/rodrigodornelles/npm-gamepadzilla
:gorilla: demo website: https://rodrigodornelles.github.io/npm-gamepadzilla

:video_game: Preview	:joystick: Features
	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
Pong CapyBird AsteroidsTV	Lua, Gly Engine, WebAssembly, Html, gampadzila.js	:octocat:repo

How to use

import library with npm or cdn. :minibus:
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! :guitar:

bun :rice:

bun run build

nodejs :rage1:

npm install
npm run build

container :whale2:

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.
`gpz-btn4`	virtual set of four action buttons for game controls.

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.