Joystick(Renato Cassino)

npm install phaser-virtual-joystick

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

export class GameScene extends Phaser.Scene {
  private joystick!: VirtualJoystick;
  private player!: Phaser.Physics.Arcade.Sprite;

create() {
 this.joystick = new VirtualJoystick({
   scene: this,
   deadZone: {
   radius: 30,
   fillColor: 0x1a1a1a,
   strokeColor: 0xcccccc,
   alpha: 0.2
  },
   baseArea: {
   radius: 100,
   fillColor: 0x1a1a1a,
   strokeColor: 0xcccccc,
   alpha: 0.1
},
   stick: {
   radius: 50,
   fillColor: 0x666666,
   strokeColor: 0x666666,
   alpha: 0.5
 },
 enableWithoutTouch: true,
 bounds: {
  topLeft: { x: 0, y: 10 },
  bottomRight: {
    x: this.scale.width * 0.8,
    y: this.scale.height,
 },
 },
 stickIcon: this.add.text(-100, 0, '🎮', {
   fontSize: '24px',
   color: '#ffffff',
   }),
 });
 this.joystick.setDepth(1);
 this.add.existing(this.joystick);
        
this.player = this.physics.add.sprite(400, 300, 'player');
this.joystick.on('move', (data) => {
 this.player.setVelocity(
  data.x * 200, // Move speed
  data.y * 200
 );
 });

 this.joystick.on('release', () => {
  this.player.setVelocity(0, 0);
  });
}
update() {
  this.joystick?.update();
  }
}