El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
HOME Mis cursos Finalizados
◄ Anterior
◄

Añadiendo y Moviendo Sprites

Siguiente ►
►

En esta lección aprenderás cómo añadir sprites a tu juego en Phaser y cómo moverlos, tanto de forma manual como utilizando las herramientas que ofrece el framework. Los sprites son elementos visuales clave en cualquier juego, ya que representan personajes, objetos y otros elementos interactivos.

  1. ¿Qué es un Sprite?

Un sprite es una imagen o animación que se muestra en la pantalla y que puede moverse, rotar, escalar y reaccionar a eventos dentro del juego.

Características principales de los sprites:

  • Representan personajes, enemigos, objetos, etc.
  • Pueden tener físicas y colisiones.
  • Se pueden animar y manipular en tiempo real.

  1. Añadiendo un Sprite en Phaser

Para añadir un sprite, necesitas:

  1. Cargar la imagen del sprite en la escena.
  2. Crear el sprite y posicionarlo en el mundo del juego.

Ejemplo Básico

class MyGame extends Phaser.Scene {
  preload() {
    // Cargar la imagen del sprite
    this.load.image('player', 'assets/player.png');
  }

  create() {
    // Añadir el sprite en la posición (100, 150)
    this.player = this.add.sprite(100, 150, 'player');
  }
}

const config = {
  type: Phaser.AUTO,
  width: 800,
  height: 600,
  scene: MyGame
};

const game = new Phaser.Game(config);

Explicación:

  • this.load.image('player', 'ruta'): Carga la imagen y la asocia con la clave 'player'.
  • this.add.sprite(x, y, 'player'): Añade el sprite en la posición (x, y) usando la imagen cargada.

  1. Propiedades Básicas de un Sprite

Propiedad Descripción Ejemplo de uso
x, y Posición del sprite en el mundo sprite.x = 200
angle Rotación en grados sprite.angle = 45
scaleX, scaleY Escala horizontal y vertical sprite.scaleX = 2
alpha Transparencia (0 a 1) sprite.alpha = 0.5
visible Visibilidad (true/false) sprite.visible = false

  1. Moviendo Sprites Manualmente

Puedes mover un sprite cambiando sus coordenadas x e y en el método update() de la escena.

Ejemplo: Movimiento Horizontal

class MyGame extends Phaser.Scene {
  preload() {
    this.load.image('player', 'assets/player.png');
  }

  create() {
    this.player = this.add.sprite(100, 150, 'player');
  }

  update() {
    // Mover el sprite 2 píxeles a la derecha cada frame
    this.player.x += 2;
  }
}

Explicación:

  • El método update() se llama en cada frame del juego.
  • Al incrementar this.player.x, el sprite se mueve hacia la derecha.

  1. Movimiento con el Teclado

Para hacer que el jugador controle el sprite, puedes usar el teclado.

Ejemplo: Movimiento con Flechas

class MyGame extends Phaser.Scene {
  preload() {
    this.load.image('player', 'assets/player.png');
  }

  create() {
    this.player = this.add.sprite(400, 300, 'player');
    this.cursors = this.input.keyboard.createCursorKeys();
  }

  update() {
    if (this.cursors.left.isDown) {
      this.player.x -= 3;
    }
    if (this.cursors.right.isDown) {
      this.player.x += 3;
    }
    if (this.cursors.up.isDown) {
      this.player.y -= 3;
    }
    if (this.cursors.down.isDown) {
      this.player.y += 3;
    }
  }
}

Explicación:

  • this.input.keyboard.createCursorKeys() crea un objeto para detectar las flechas del teclado.
  • Se verifica si cada tecla está presionada y se ajusta la posición del sprite en consecuencia.

  1. Movimiento Suavizado (Interpolación)

Para un movimiento más suave, puedes usar la función Phaser.Math.Linear para interpolar entre posiciones.

Ejemplo: Movimiento hacia el puntero del ratón

class MyGame extends Phaser.Scene {
  preload() {
    this.load.image('player', 'assets/player.png');
  }

  create() {
    this.player = this.add.sprite(400, 300, 'player');
  }

  update() {
    // Mover el sprite suavemente hacia el puntero del ratón
    this.player.x = Phaser.Math.Linear(this.player.x, this.input.activePointer.x, 0.05);
    this.player.y = Phaser.Math.Linear(this.player.y, this.input.activePointer.y, 0.05);
  }
}

Explicación:

  • Phaser.Math.Linear(a, b, t) mueve el valor a hacia b en un porcentaje t cada frame, creando un efecto de suavizado.

  1. Ejercicios Prácticos

Ejercicio 1: Añade un sprite y muévelo automáticamente

Instrucciones:
Crea una escena donde un sprite se mueva de izquierda a derecha y, al llegar al borde derecho, vuelva al borde izquierdo.

Solución:

class MyGame extends Phaser.Scene {
  preload() {
    this.load.image('ball', 'assets/ball.png');
  }

  create() {
    this.ball = this.add.sprite(0, 300, 'ball');
  }

  update() {
    this.ball.x += 4;
    if (this.ball.x > 800) {
      this.ball.x = 0;
    }
  }
}

Consejo:
Asegúrate de que la imagen esté en la carpeta correcta y que el ancho del juego coincida con el valor de comprobación.

Ejercicio 2: Controla un sprite con el teclado

Instrucciones:
Permite que el usuario mueva un sprite usando las teclas WASD.

Solución:

class MyGame extends Phaser.Scene {
  preload() {
    this.load.image('player', 'assets/player.png');
  }

  create() {
    this.player = this.add.sprite(400, 300, 'player');
    this.keys = this.input.keyboard.addKeys('W,A,S,D');
  }

  update() {
    if (this.keys.A.isDown) {
      this.player.x -= 3;
    }
    if (this.keys.D.isDown) {
      this.player.x += 3;
    }
    if (this.keys.W.isDown) {
      this.player.y -= 3;
    }
    if (this.keys.S.isDown) {
      this.player.y += 3;
    }
  }
}

Errores comunes:

  • Olvidar cargar la imagen antes de crear el sprite.
  • No declarar correctamente las teclas con addKeys.

  1. Resumen

En esta lección aprendiste:

  • Qué es un sprite y cómo añadirlo a tu juego en Phaser.
  • Cómo mover sprites manualmente y con entrada del usuario.
  • Cómo implementar movimiento suavizado.
  • Ejercicios prácticos para reforzar el aprendizaje.

Próximo paso:
En la siguiente lección, aprenderás cómo animar sprites para dar vida a tus personajes y objetos. ¡Sigue practicando y experimentando con el movimiento de tus sprites!

◄ Anterior
◄
Siguiente ►
►

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

El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
© Copyright 2024. Todos los derechos reservados