METEOR
Presentación
ASIS ZOPIYAXTLE JESUS ABEL
LOPEZ MARTINEZ KEVIN EYMARD
GARCIA VASQUEZ AXEL EMMANUEL
Requerimientos Minimos
Requerimientos Recomendados
Tabla Comparativa
Pasos para un Juego
Paso 1 (Instalación Pasher.io)
Phaser se configura usando un objeto JSON, define tipo, tamaño y escena por defecto, AUTO usa WebGL o Canvas si necesario, tamaño del juego es 800 por 600, se crea con new Phaser.Game(config) normalmente, no necesita variable global en Phaser 3, HTML puede insertarse en un contenedor personalizado.
Phaser se configura usando un objeto JSON,define tipo, tamaño y escena por defecto,AUTO usa WebGL o Canvas si necesario,tamaño del juego es 800 por 600,se crea con new Phaser.Game(config) normalmente,no necesita variable global en Phaser 3,HTML puede insertarse en un contenedor personalizado.
Paso 2 (Creación de los Recursos)
En esta funcion vamos a cargar los recurso que necesitamos para ocupar para la función preload, aqui Phaser buscara automaticamente esta función y la llamara para que se inicie lo cual cargará cualquier cosa definida en ella. Actualmente la funcion esta vacía, Aqui se mostrara de la suiguiente manera.
Paso 2.1(Mostrar una imagen)
Para poder mostrar una imagen tendremos que ocupar el siguiente codigo que es este create: this.add.image(400, 300, 'sky');Aqui los valores 400 y 300 son las coordenadas de X e Y de la imagen.La imagen de fondo tiene un tamaño de 800 x 600 píxels.
Paso 2.3(Explicacion de el codigo)
En la imagen anterior decimos que la funcion preload esta vacía, a continuacion ya hemos puesto los codigos los cuales cargarán 5 recursos: 4 imágenes y un grupo de imágenes (spritesheet). Ente apartado se puede usar cualquier cadena de texto válida en JavaScript como clave para cargar cualquier imagen.
Paso 2.2Sugerencia 1
Podemos usar setOrigin para cambiar esto. Por ejemplo, con el código que tenemos como : this.add.image(0, 0, 'sky').SetOrigin(0, 0) posicionaría la imagen en la esquina superior izquierda. En Phaser 2 se logró a través de la propiedad anchor pero en Phaser 3 usamos las propiedades originX y originY.
Paso 2.3Sugerencia 2
El orden en el que se muestran los objetos del juego coincide con el orden en que se crean. Por lo tanto, si desea colocar una estrella sobre el fondo deberá asegurarse de que se haya añadido en segundo lugar, Si se pone en primero se trabaria la imagen.
paso 3(Construir el Mundo)
Por ahora, construyamos la escena agregando una imagen de fondo y algunas plataformas. Aquí está la función create actualizada, Si observamos el código, veremos un llamado a this.physics. Esto significa que estamos usando el sistema de físicas Arcade para poder generar gravedad en las ecenas del juego en especifico.
paso 3.1Crear la funcion gravedad
Antes de que podamos hacer esto debemos agregarlo a la configuración para que Phaser sepa que nuestro juego lo requiere. Así que vamos a actualizarlo para incluir soporte de físicas. Aquí está la configuración del juego revisada. Se agrego la propiedad physics, aqui ya estara más como un juego.
Paso 4(Creacion de las plataformas)
Los cuerpos dinámicos pueden moverse y chocar.Los estáticos no se mueven ni tienen gravedad.Se usan como suelos o plataformas firmes. Un grupo reúne y controla a varios objetos. Permite manejarlos todos al mismo tiempo. Crea elementos con física ya habilitada. Y facilita colisiones y organización del juego.
Paso 5EL jugadodor
Aqui vamos a crear el diseño del jugador el cual va arecorrer por todas la plataformas y para eso ocuparemos el una variable llamada player y la funcion create. En este código se están haciendo dos cosas; La creación de un Sprite con físicas y algunas animaciones en Player1.
Paso 5.1Sprite con fisicas
La primera parte del código crea el sprite. Esto crea un nuevo sprite llamado player, a 100 x 450 píxeles desde la parte inferior del juego. El sprite se creó a través del sistema de físicas (this.physics.add), lo que significa que tiene un cuerpo de física dinámica por defecto.
Paso 5.2Animaciones
La hoja tiene 9 fotogramas totales distribuidos así: 4 fotogramas muestran al personaje corriendo hacia la izquierda, 1 fotograma lo muestra mirando hacia la cámara en pose estática, y 4 fotogramas lo muestran corriendo hacia la derecha. Definimos dos animaciones, 'left' y 'right'para controlar sus movimientos en pantalla..
Paso 5.3animaciones
La animación 'left' utiliza los siguientes fotogramas 0, 1, 2 y 3, reproduciéndose a 10 fotogramas por segundo. El parámetro 'repeat -1' hace que la animación se reinicie automáticamente al terminar, creando un ciclo continuo. Nuestro ciclo de ejecución estándar y se repetirá para correr en la dirección opuesta.
Paso 6 (Creacion de los cuerpos y la velocidad)
Phaser funciona con distintos sistemas de física.Incluye Arcade, Impact y Matter.js actualmente. Usaremos Arcade por ser simple y ligero. Ideal para juegos en navegadores y móviles. Un sprite con física tiene propiedad body. Body controla su comportamiento físico por completo. Permite aplicar gravedad y otras fuerzas fácilmente.'
Paso 6.1
El personaje cae porque no hay colisión. Phaser necesita un collider para detectar choques. El suelo y plataformas son cuerpos estáticos. Sin collider, el jugador atraviesa todo y cae. Collider supervisa colisiones entre cuerpos en movimiento. Se crea usando this.physics.add.collider. Así el suelo detiene correctamente al personaje.
Paso 7Controlando el personaje
Phaser tiene un gestor de teclado incorporado y uno de los beneficios de usarlo es esta pequeña y práctica función. Esta línea crea el objeto 'cursors' con cuatro propiedades; up, down, left, right (arriba, abajo, izquierda, derecha). Ahora, todo lo que hay que hacer es comprobarlo en bucle update.
Paso 7.1Movimiento para saltar
La parte final del código añade la capacidad de saltar. La tecla de salto es el cursor hacia arriba y se comprueba si está pulsada. También se verifica si el personaje está tocando el suelo, por que de lo contrario estaria saltando 2 veces mientras está en el aire .
Paso 8 (Creacion de estrellas coleccionables)
El proceso es similar al crear plataformasLas estrellas necesitan moverse y también rebotar Usa un grupo con física dinámica en Phaser el json define textura, repetición, posiciones Cada estrella se coloca separada con setXY Rebotan con valores aleatorios hasta detenerse finalmente Collider y overlap controlan colisiones del juego.
Paso 9Puntos y puntuación
Aqui añadiremos una función para lapuntuaciónPara ello usaremos un objeto Phaser de tipo texto. Tambien creamos dos nuevas variables, una para la puntuación real y otra para el propio objeto. La variable scoreText se configura en la siguiente función create.
Paso 9.1Puntos y puntuación
16 x 16 son las coordenadas donde se verá el texto. 'score: 0' es la cadena predeterminada a mostrar y el objeto json que sigue indica el tamaño de fuente y un color de relleno. Al no especificar una fuente, Phaser usará, por defecto, Courier. Modificaremos CollectStar para la puntuación.
Paso 9.2Puntos y puntuación
Cuando el personaje agarre una estrella su puntuación aumente y el texto se actualice.Se suman 10 puntos por cada estrella y se actualiza la variable scoreText para mostrar este nuevo total. En la parte final vamos a añadir algunos enemigos para que pueda esquivar o evitar el personaje.
Paso 10(Generación de trampas y riesgos en niveles)
Utilizamos countActive para saber cuántas estrellas quedanSi no hay ninguna se han recolectado todas Se iteran para reactivar estrellas y posición Y Esto hace que caigan desde la parte superior Se crea una bomba en X aleatoria opuesta Se configura para rebotar con velocidad aleatoria El resultado es un sprite bomba que desafía
Conclusion
Phaser facilita crear videojuegos con físicas realistas.Permite manejar colisiones movimiento de sprites fácilmente. Los colliders evitan que objetos atraviesen superficies. El motor Arcade simplifica detección de choques. Con pocas líneas logra interacción entre cuerpos. Esto da realismo y control al jugador. Aprender Phaser impulsa habilidades básicas de desarrollo.
Esto fue como crear un juego utilizando METEOR
Gracias por su atención
METEOR
AXEL EMMANUEL GARCIA VASQUEZ
Created on October 2, 2025
Start designing with a free template
Discover more than 1500 professional designs like these:
View
Smart Presentation
View
Practical Presentation
View
Essential Presentation
View
Akihabara Presentation
View
Pastel Color Presentation
View
Visual Presentation
View
Relaxing Presentation
Explore all templates
Transcript
METEOR
Presentación
ASIS ZOPIYAXTLE JESUS ABEL
LOPEZ MARTINEZ KEVIN EYMARD
GARCIA VASQUEZ AXEL EMMANUEL
Requerimientos Minimos
Requerimientos Recomendados
Tabla Comparativa
Pasos para un Juego
Paso 1 (Instalación Pasher.io)
Phaser se configura usando un objeto JSON, define tipo, tamaño y escena por defecto, AUTO usa WebGL o Canvas si necesario, tamaño del juego es 800 por 600, se crea con new Phaser.Game(config) normalmente, no necesita variable global en Phaser 3, HTML puede insertarse en un contenedor personalizado.
Phaser se configura usando un objeto JSON,define tipo, tamaño y escena por defecto,AUTO usa WebGL o Canvas si necesario,tamaño del juego es 800 por 600,se crea con new Phaser.Game(config) normalmente,no necesita variable global en Phaser 3,HTML puede insertarse en un contenedor personalizado.
Paso 2 (Creación de los Recursos)
En esta funcion vamos a cargar los recurso que necesitamos para ocupar para la función preload, aqui Phaser buscara automaticamente esta función y la llamara para que se inicie lo cual cargará cualquier cosa definida en ella. Actualmente la funcion esta vacía, Aqui se mostrara de la suiguiente manera.
Paso 2.1(Mostrar una imagen)
Para poder mostrar una imagen tendremos que ocupar el siguiente codigo que es este create: this.add.image(400, 300, 'sky');Aqui los valores 400 y 300 son las coordenadas de X e Y de la imagen.La imagen de fondo tiene un tamaño de 800 x 600 píxels.
Paso 2.3(Explicacion de el codigo)
En la imagen anterior decimos que la funcion preload esta vacía, a continuacion ya hemos puesto los codigos los cuales cargarán 5 recursos: 4 imágenes y un grupo de imágenes (spritesheet). Ente apartado se puede usar cualquier cadena de texto válida en JavaScript como clave para cargar cualquier imagen.
Paso 2.2Sugerencia 1
Podemos usar setOrigin para cambiar esto. Por ejemplo, con el código que tenemos como : this.add.image(0, 0, 'sky').SetOrigin(0, 0) posicionaría la imagen en la esquina superior izquierda. En Phaser 2 se logró a través de la propiedad anchor pero en Phaser 3 usamos las propiedades originX y originY.
Paso 2.3Sugerencia 2
El orden en el que se muestran los objetos del juego coincide con el orden en que se crean. Por lo tanto, si desea colocar una estrella sobre el fondo deberá asegurarse de que se haya añadido en segundo lugar, Si se pone en primero se trabaria la imagen.
paso 3(Construir el Mundo)
Por ahora, construyamos la escena agregando una imagen de fondo y algunas plataformas. Aquí está la función create actualizada, Si observamos el código, veremos un llamado a this.physics. Esto significa que estamos usando el sistema de físicas Arcade para poder generar gravedad en las ecenas del juego en especifico.
paso 3.1Crear la funcion gravedad
Antes de que podamos hacer esto debemos agregarlo a la configuración para que Phaser sepa que nuestro juego lo requiere. Así que vamos a actualizarlo para incluir soporte de físicas. Aquí está la configuración del juego revisada. Se agrego la propiedad physics, aqui ya estara más como un juego.
Paso 4(Creacion de las plataformas)
Los cuerpos dinámicos pueden moverse y chocar.Los estáticos no se mueven ni tienen gravedad.Se usan como suelos o plataformas firmes. Un grupo reúne y controla a varios objetos. Permite manejarlos todos al mismo tiempo. Crea elementos con física ya habilitada. Y facilita colisiones y organización del juego.
Paso 5EL jugadodor
Aqui vamos a crear el diseño del jugador el cual va arecorrer por todas la plataformas y para eso ocuparemos el una variable llamada player y la funcion create. En este código se están haciendo dos cosas; La creación de un Sprite con físicas y algunas animaciones en Player1.
Paso 5.1Sprite con fisicas
La primera parte del código crea el sprite. Esto crea un nuevo sprite llamado player, a 100 x 450 píxeles desde la parte inferior del juego. El sprite se creó a través del sistema de físicas (this.physics.add), lo que significa que tiene un cuerpo de física dinámica por defecto.
Paso 5.2Animaciones
La hoja tiene 9 fotogramas totales distribuidos así: 4 fotogramas muestran al personaje corriendo hacia la izquierda, 1 fotograma lo muestra mirando hacia la cámara en pose estática, y 4 fotogramas lo muestran corriendo hacia la derecha. Definimos dos animaciones, 'left' y 'right'para controlar sus movimientos en pantalla..
Paso 5.3animaciones
La animación 'left' utiliza los siguientes fotogramas 0, 1, 2 y 3, reproduciéndose a 10 fotogramas por segundo. El parámetro 'repeat -1' hace que la animación se reinicie automáticamente al terminar, creando un ciclo continuo. Nuestro ciclo de ejecución estándar y se repetirá para correr en la dirección opuesta.
Paso 6 (Creacion de los cuerpos y la velocidad)
Phaser funciona con distintos sistemas de física.Incluye Arcade, Impact y Matter.js actualmente. Usaremos Arcade por ser simple y ligero. Ideal para juegos en navegadores y móviles. Un sprite con física tiene propiedad body. Body controla su comportamiento físico por completo. Permite aplicar gravedad y otras fuerzas fácilmente.'
Paso 6.1
El personaje cae porque no hay colisión. Phaser necesita un collider para detectar choques. El suelo y plataformas son cuerpos estáticos. Sin collider, el jugador atraviesa todo y cae. Collider supervisa colisiones entre cuerpos en movimiento. Se crea usando this.physics.add.collider. Así el suelo detiene correctamente al personaje.
Paso 7Controlando el personaje
Phaser tiene un gestor de teclado incorporado y uno de los beneficios de usarlo es esta pequeña y práctica función. Esta línea crea el objeto 'cursors' con cuatro propiedades; up, down, left, right (arriba, abajo, izquierda, derecha). Ahora, todo lo que hay que hacer es comprobarlo en bucle update.
Paso 7.1Movimiento para saltar
La parte final del código añade la capacidad de saltar. La tecla de salto es el cursor hacia arriba y se comprueba si está pulsada. También se verifica si el personaje está tocando el suelo, por que de lo contrario estaria saltando 2 veces mientras está en el aire .
Paso 8 (Creacion de estrellas coleccionables)
El proceso es similar al crear plataformasLas estrellas necesitan moverse y también rebotar Usa un grupo con física dinámica en Phaser el json define textura, repetición, posiciones Cada estrella se coloca separada con setXY Rebotan con valores aleatorios hasta detenerse finalmente Collider y overlap controlan colisiones del juego.
Paso 9Puntos y puntuación
Aqui añadiremos una función para lapuntuaciónPara ello usaremos un objeto Phaser de tipo texto. Tambien creamos dos nuevas variables, una para la puntuación real y otra para el propio objeto. La variable scoreText se configura en la siguiente función create.
Paso 9.1Puntos y puntuación
16 x 16 son las coordenadas donde se verá el texto. 'score: 0' es la cadena predeterminada a mostrar y el objeto json que sigue indica el tamaño de fuente y un color de relleno. Al no especificar una fuente, Phaser usará, por defecto, Courier. Modificaremos CollectStar para la puntuación.
Paso 9.2Puntos y puntuación
Cuando el personaje agarre una estrella su puntuación aumente y el texto se actualice.Se suman 10 puntos por cada estrella y se actualiza la variable scoreText para mostrar este nuevo total. En la parte final vamos a añadir algunos enemigos para que pueda esquivar o evitar el personaje.
Paso 10(Generación de trampas y riesgos en niveles)
Utilizamos countActive para saber cuántas estrellas quedanSi no hay ninguna se han recolectado todas Se iteran para reactivar estrellas y posición Y Esto hace que caigan desde la parte superior Se crea una bomba en X aleatoria opuesta Se configura para rebotar con velocidad aleatoria El resultado es un sprite bomba que desafía
Conclusion
Phaser facilita crear videojuegos con físicas realistas.Permite manejar colisiones movimiento de sprites fácilmente. Los colliders evitan que objetos atraviesen superficies. El motor Arcade simplifica detección de choques. Con pocas líneas logra interacción entre cuerpos. Esto da realismo y control al jugador. Aprender Phaser impulsa habilidades básicas de desarrollo.
Esto fue como crear un juego utilizando METEOR
Gracias por su atención