entrar

// Configuración móvil para WebSim AI (Phaser 3)
class EscenaPrincipal extends Phaser.Scene {
    constructor() {
        super({ key: 'EscenaPrincipal' });
    }

    preload() {
        // Carga el sprite (¡cambia la ruta!)
        this.load.spritesheet('hero', 'assets/sprites/personaje.png', {
            frameWidth: 48,
            frameHeight: 64,
            endFrame: 15  // Para 4 animaciones (12 frames + 3 extras)
        });

        // Carga el plugin de joystick (requiere conexión a internet)
        this.load.plugin('rexvirtualjoystickplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexvirtualjoystickplugin.min.js', true);
    }

    create() {
        // 1. Configuración inicial
        const { width, height } = this.scale;
        this.physics.world.setBounds(0, 0, width, height);

        // 2. Crear personaje
        const hero = this.physics.add.sprite(width / 2, height / 2, 'hero')
            .setCollideWorldBounds(true)
            .setScale(1.8)
            .setDepth(1);

        // 3. Animaciones RPG Maker (4 direcciones)
        this.anims.create({ key: 'walk_down',  frames: this.anims.generateFrameNumbers('hero', { start: 0, end: 3 }),  frameRate: 8, repeat: -1 });
        this.anims.create({ key: 'walk_left',  frames: this.anims.generateFrameNumbers('hero', { start: 4, end: 7 }),  frameRate: 8, repeat: -1 });
        this.anims.create({ key: 'walk_right', frames: this.anims.generateFrameNumbers('hero', { start: 8, end: 11 }), frameRate: 8, repeat: -1 });
        this.anims.create({ key: 'walk_up',   frames: this.anim.generateFrameNumbers('hero', { start: 12, end: 15 }), frameRate: 8, repeat: -1 });

        // 4. Joystick táctil
        const joystick = this.plugins.get('rexvirtualjoystick').add(this, {
            x: 100,
            y: height - 100,
            radius: 60,
            base: this.add.circle(0, 0, 60, 0x333333, 0.6).setDepth(2),
            thumb: this.add.circle(0, 0, 30, 0xffffff, 0.8).setDepth(2),
            dir: '4dir'
        });

        // 5. Botón de acción (opcional)
        const actionBtn = this.add.circle(width - 80, height - 80, 50, 0xff5555, 0.7)
            .setInteractive()
            .setDepth(2)
            .on('pointerdown', () => {
                console.log("Acción secundaria (saltar/atacar)");
                // Añade efectos aquí
            });

        // 6. Guardar referencias
        this.hero = hero;
        this.joystick = joystick;
    }

    update() {
        const hero = this.hero;
        const joystick = this.joystick;
        const speed = 180;

        // Detener movimiento/animation si no hay input
        hero.setVelocity(0);
        if (!joystick.force) {
            hero.anims.stop();
            return;
        }

        // Movimiento con joystick
        const angle = joystick.angle;
        if (angle >= 315 || angle < 45) {
            hero.setVelocityY(-speed).play('walk_up', true); // Arriba
        } else if (angle >= 45 && angle < 135) {
            hero.setVelocityX(speed).play('walk_right', true); // Derecha
        } else if (angle >= 135 && angle < 225) {
            hero.setVelocityY(speed).play('walk_down', true); // Abajo
        } else {
            hero.setVelocityX(-speed).play('walk_left', true); // Izquierda
        }
    }
}

// Inicialización del juego
const gameConfig = {
    type: Phaser.AUTO,
    parent: 'game-container',
    width: '100%',  // Responsivo
    height: '100%',
    scene: EscenaPrincipal,
    physics: { default: 'arcade', arcade: { debug: false } },
    scale: {
        mode: Phaser.Scale.RESIZE,
        autoCenter: Phaser.Scale.CENTER_BOTH
    },
    input: { activePointers: 3 }
};

new Phaser.Game(gameConfig);


Frames 0-3: Caminar abajo  
     Frames 4-7: Caminar izquierda  
     Frames 8-11: Caminar derecha  
     Frames 12-15: Caminar arriba