# pixi-virtual-joystick

**Repository Path**: ccvv22/pixi-virtual-joystick

## Basic Information

- **Project Name**: pixi-virtual-joystick
- **Description**: pixijs摇杆系统
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2023-04-07
- **Last Updated**: 2024-11-08

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 🕹 pixi-virtual-joystick

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

<img src="screenshot.gif?raw=1" />

## 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