Phaser Virtual Joystick - Default

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

class GameScene extends Phaser.Scene {
    private joystick?: VirtualJoystick;
    private character?: Phaser.GameObjects.Arc;

    create() {
        // Create a virtual joystick with default settings
        this.joystick = new VirtualJoystick({
            scene: this,
            bounds: {
                topLeft: { x: 0, y: 40 },
                bottomRight: { x: this.cameras.main.width / 2, y: this.cameras.main.height },
            },
            stickIcon: this.add.text(0, 0, '🎮', {
                fontSize: '24px',
                color: '#ffffff'
            }),
            enableWithoutTouch: true,
        });

        // Listen to joystick events
        this.joystick.on('move', (data) => {
            console.log(`Joystick position: ${data.x}, ${data.y}`);
            // Move character based on joystick input
            if (this.character) {
                this.character.x += data.x * 2;
                this.character.y += data.y * 2;
            }
        });

        this.joystick.on('press', () => {
            console.log('Joystick pressed');
        });

        this.joystick.on('release', () => {
            console.log('Joystick released');
        });
    }

    update() {
        this.joystick?.update();
    }
}