https://github.com/RodrigoDornelles/npm-gamepadzilla

A plug-and-play gamepad frontend framework for HTML5 mobile games, supporting both virtual and physical joysticks. No scripting required.
https://github.com/RodrigoDornelles/npm-gamepadzilla

gamepad gamepad-library gamepad-viewer gamepadlistener html5-canvas html5-game

Last synced: 3 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/RodrigoDornelles/npm-gamepadzilla
• Owner: RodrigoDornelles
• License: agpl-3.0
• Created: 2023-11-04T13:20:55.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2024-04-24T12:55:28.000Z (6 months ago)
• Last Synced: 2024-07-28T22:38:43.789Z (3 months ago)
• Topics: gamepad, gamepad-library, gamepad-viewer, gamepadlistener, html5-canvas, html5-game
• Language: TypeScript
• Homepage: https://rodrigodornelles.github.io/npm-gamepadzilla/
• Size: 73.2 KB
• Stars: 31
• Watchers: 1
• Forks: 3
• Open Issues: 26
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

• awesome-bun - Gamepadzilla - and-play gamepad frontend framework for HTML5 mobile games, supporting both virtual and physical joysticks. _No scripting required._ (Extensions / Frameworks)

README

        


# :t-rex: GamepadZilla la la!

[![npm](https://img.shields.io/npm/dy/gamepadzilla?logo=npm&logoColor=fff&label=npm%20downloads)](https://www.npmjs.com/package/gamepadzilla)

[![cdn](https://img.shields.io/jsdelivr/npm/hy/gamepadzilla?logo=jsdelivr&logoColor=fff&label=cdn%20downloads)](https://www.jsdelivr.com/package/npm/gamepadzilla)



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

 * :octocat: **source code:** 

 * :gorilla: **demo website:** 

| :video_game: Preview | :joystick: Features  |

| :------------------- | :------------------- |

[![virtual gamepad](https://raw.githubusercontent.com/RodrigoDornelles/RodrigoDornelles/master/media/gamepadzilla-1-0-1.gif)](https://rodrigodornelles.github.io/npm-gamepadzilla) | 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](https://psywave-games.github.io/coco-battle-royale-2) | C, Assembly 6502, WebAssembly, Html, gampadzila.js | [:octocat:repo](https://github.com/psywave-games/coco-battle-royale-2) | 

## How to use

 * import library with [npm](https://www.npmjs.com/package/gamepadzilla) or [cdn](https://www.jsdelivr.com/package/npm/gamepadzilla). :minibus:

 * create html5 **canvas** elements with class `gpz-joy` or `gpz-btn` and configure data attributes.

```html

    

        

    

    

        

        

        

        

    

```

## How to build

if you intend to contribute, let's rock! :guitar:

### bun :rice: ###

```bash

bun run build

```

### nodejs :rage1: ###

```bash

npm install

npm run build

```

### container :whale2: ###

```bash

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

```

```bash

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 | feedback vibration when interact |

| `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](LICENSE) file.