Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

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: about 1 month ago
JSON representation

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

Lists

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.