El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia

HOME

En esta lección aprenderás cómo habilitar y utilizar la física en los sprites de tu juego con Phaser. La física es fundamental para crear interacciones realistas, como movimiento, gravedad, colisiones y rebotes. Phaser facilita la integración de motores de física, siendo Arcade Physics el más utilizado por su simplicidad y eficiencia.

Conceptos Clave

Motor de Física: Sistema que simula leyes físicas (gravedad, colisiones, rebotes) en los objetos del juego.
Arcade Physics: Motor de física por defecto en Phaser, ideal para juegos 2D sencillos.
Sprite Físico: Sprite al que se le han habilitado propiedades físicas (velocidad, aceleración, gravedad, etc.).
Cuerpo (Body): Propiedad del sprite que contiene los atributos físicos y métodos para manipularlos.

¿Por qué habilitar física en los sprites?

Permite que los objetos se muevan y colisionen de forma realista.
Facilita la detección de colisiones y la respuesta automática (rebotes, detenciones).
Hace posible implementar mecánicas como saltos, caídas, empujes y más.

Habilitando Física en Phaser: Paso a Paso

Configuración Inicial

Asegúrate de que tu juego está usando el motor de física Arcade. Esto se define en la configuración principal:

const config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    physics: {
        default: 'arcade',
        arcade: {
            gravity: { y: 300 }, // Gravedad global en el eje Y
            debug: true // Muestra los cuerpos físicos para depuración
        }
    },
    scene: {
        preload: preload,
        create: create,
        update: update
    }
};

const game = new Phaser.Game(config);

Explicación:

default: 'arcade': Selecciona el motor de física Arcade.
gravity: { y: 300 }: Aplica gravedad global hacia abajo.
debug: true: Muestra los límites de los cuerpos físicos (útil para depuración).

Habilitando Física en un Sprite

Para que un sprite tenga física, debes crearlo usando el sistema de física de la escena:

function create() {
    // Añadir un sprite con física habilitada
    player = this.physics.add.sprite(100, 450, 'player');
}

Explicación:

this.physics.add.sprite(x, y, key): Crea un sprite en la posición (x, y) con la imagen key y le habilita un cuerpo físico automáticamente.

Propiedades Físicas Comunes

Una vez habilitada la física, puedes modificar varias propiedades del sprite:

Propiedad	Descripción	Ejemplo de uso
`body.velocity`	Velocidad del sprite (x, y)	`player.body.velocity.x = 160`
`body.acceleration`	Aceleración aplicada al sprite	`player.body.acceleration.y = 50`
`body.gravity`	Gravedad individual del sprite	`player.body.gravity.y = 500`
`body.bounce`	Rebote al colisionar (0 = sin rebote, 1 = total)	`player.body.bounce.y = 0.8`
`body.collideWorldBounds`	Colisiona con los límites del mundo	`player.body.collideWorldBounds = true`

Ejemplo Práctico: Sprite con Física

function preload() {
    this.load.image('player', 'assets/player.png');
}

function create() {
    // Crear sprite con física
    player = this.physics.add.sprite(100, 450, 'player');

    // Hacer que rebote al tocar el suelo
    player.setBounce(0.2);

    // Hacer que colisione con los límites del mundo
    player.setCollideWorldBounds(true);

    // Modificar la gravedad solo para este sprite
    player.body.setGravityY(300);
}

Explicación:

setBounce(0.2): El sprite rebotará un poco al colisionar.
setCollideWorldBounds(true): El sprite no saldrá de la pantalla.
setGravityY(300): Aplica gravedad adicional solo a este sprite.

Ejercicios Prácticos

Ejercicio 1: Habilita física en un sprite y haz que rebote

Instrucciones:

Crea un sprite llamado ball en la posición (400, 100).
Haz que rebote completamente (rebote = 1) y que colisione con los límites del mundo.
Aplica gravedad solo a la bola.

Solución:

function preload() {
    this.load.image('ball', 'assets/ball.png');
}

function create() {
    ball = this.physics.add.sprite(400, 100, 'ball');
    ball.setBounce(1);
    ball.setCollideWorldBounds(true);
    ball.body.setGravityY(500);
}

Errores comunes:

Olvidar usar this.physics.add.sprite en vez de this.add.sprite (este último no habilita física).
No llamar a setCollideWorldBounds(true), lo que permite que el sprite salga de la pantalla.

Ejercicio 2: Cambia la velocidad de un sprite al presionar una tecla

Instrucciones:

Crea un sprite llamado box en la posición (200, 300).
Cuando el usuario presione la flecha derecha, mueve la caja hacia la derecha aumentando su velocidad en X.

Solución:

let box;
let cursors;

function preload() {
    this.load.image('box', 'assets/box.png');
}

function create() {
    box = this.physics.add.sprite(200, 300, 'box');
    box.setCollideWorldBounds(true);
    cursors = this.input.keyboard.createCursorKeys();
}

function update() {
    if (cursors.right.isDown) {
        box.setVelocityX(200);
    } else {
        box.setVelocityX(0);
    }
}

Consejo:
Asegúrate de reiniciar la velocidad a 0 cuando no se presione la tecla, para evitar que el sprite siga moviéndose indefinidamente.

Resumen

Habilitar física en un sprite en Phaser es sencillo usando this.physics.add.sprite.
Puedes controlar propiedades físicas como velocidad, gravedad, rebote y colisiones.
Arcade Physics es ideal para juegos 2D simples y es fácil de usar.
Recuerda siempre usar los métodos de física (setBounce, setVelocity, etc.) para manipular sprites físicos.

En la siguiente lección aprenderás cómo detectar y gestionar colisiones y superposiciones entre sprites, lo que te permitirá crear interacciones más complejas y realistas en tu juego.

Habilitando Física en Sprites

Conceptos Clave

¿Por qué habilitar física en los sprites?

Habilitando Física en Phaser: Paso a Paso

Configuración Inicial

Habilitando Física en un Sprite

Propiedades Físicas Comunes

Ejemplo Práctico: Sprite con Física

Ejercicios Prácticos

Ejercicio 1: Habilita física en un sprite y haz que rebote

Ejercicio 2: Cambia la velocidad de un sprite al presionar una tecla

Resumen

Phaser - Desarrollo de Juegos con JavaScript

Módulo 1: Introducción al Desarrollo de Juegos y Phaser

Módulo 2: Fundamentos de Phaser

Módulo 3: Sprites y Animación

Módulo 4: Física e Interactividad en el Juego

Módulo 5: Mundo del Juego y Cámara

Módulo 6: Audio e Interfaz de Usuario

Módulo 7: Arquitectura del Juego y Gestión de Estados

Módulo 8: Características Avanzadas de Jugabilidad

Módulo 9: Despliegue y Optimización

Módulo 10: Proyecto Final