Phaser Virtual Joystick Overview

import { VirtualJoystick } from 'phaser-virtual-joystick';

class GameScene extends Phaser.Scene {
  private joystick?: VirtualJoystick;
  private player?: Phaser.GameObjects.Sprite;

  create() {
    // Create virtual joystick
    this.joystick = new VirtualJoystick(this, {
      x: 150,
      y: this.cameras.main.height - 150,
      radius: 50,
      baseColor: 0x333333,
      thumbColor: 0x666666
    });

    // Create player sprite
    this.player = this.add.sprite(400, 300, 'player');
    
    // Listen for joystick input
    this.joystick.on('update', (data) => {
      if (this.player) {
        this.player.x += data.x * 5;
        this.player.y += data.y * 5;
      }
    });
  }
}