https://github.com/endel/pixi-virtual-joystick

🕹 Virtual Touch Joystick for pixi.js
https://github.com/endel/pixi-virtual-joystick

joystick joystick-library pixijs virtual-joystick

Last synced: about 1 month ago
JSON representation

🕹 Virtual Touch Joystick for pixi.js

• Host: GitHub
• URL: https://github.com/endel/pixi-virtual-joystick
• Owner: endel
• License: mit
• Created: 2020-11-27T19:10:50.000Z (almost 4 years ago)
• Default Branch: master
• Last Pushed: 2023-03-12T13:05:46.000Z (over 1 year ago)
• Last Synced: 2024-06-12T09:42:41.443Z (3 months ago)
• Topics: joystick, joystick-library, pixijs, virtual-joystick
• Language: TypeScript
• Homepage: https://gamestdio.github.io/pixi-virtual-joystick/
• Size: 1.31 MB
• Stars: 59
• Watchers: 4
• Forks: 7
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        
# 🕹 pixi-virtual-joystick

Virtual Touch Joystick for [pixi.js](https://github.com/pixijs/pixi.js), tested on both Pixi v5 and Pixi v6.



## Usage

```typescript

import { Joystick } from "pixi-virtual-joystick";

const joystick = new Joystick({

  outer: PIXI.Sprite.from("outer"), // ("images/joystick.png")

  inner: PIXI.Sprite.from("inner"), // ("images/joystick-handle.png")

  outerScale: { x: 0.5, y: 0.5 },

  innerScale: { x: 0.8, y: 0.8 },

  onChange: (data) => {

    console.log(data.angle); // Angle from 0 to 360

    console.log(data.direction); // 'left', 'top', 'bottom', 'right', 'top_left', 'top_right', 'bottom_left' or 'bottom_right'.

    console.log(data.power); // Power from 0 to 1

  },

  onStart: () => {

    console.log('start')

  },

  onEnd: () => {

    console.log('end')

  },

});

app.stage.addChild(joystick);

```

## Similar alternatives

- [nipplejs](https://github.com/yoannmoinet/nipplejs/) (more features, DOM-based)

- [react-nipple](https://github.com/loopmode/react-nipple)

## License

Endel Dreyer © MIT