Skip to content

Latest commit

 

History

History
178 lines (124 loc) · 7.88 KB

README.md

File metadata and controls

178 lines (124 loc) · 7.88 KB
Raw

Mario Bros Phaser Typescript Version

Este repositorio no está diseñado para jugar, sino para aprender de forma más sencilla. Es un desarrollo creado con el objetivo de enseñar Phaser.js utilizando TypeScript. Aquí encontrarás un código más organizado y refactorizado en componentes, lo que facilita su comprensión y reutilización. La idea es que explores el código, lo modifiques y aprendas a desarrollar juegos utilizando esta tecnología de una manera más estructurada. Y por supuesto que el código es mejorable.

Demo

Recursos utilizados

Template Phaser Assets obtenidos Super Mario Phaser Ideas desde MiduDev MiduDev video 01 MiduDev video 02

Librerias

Requisitos

Node.js

Comandos

Comando Descripción
npm install Instalar dependencias del proyecto
npm run start:dev Ejecutar de forma local
npm run build Crear build para instalar, output en la carpeta dist

Primera ejecución

Después de clonar el repositorio, ejecute npm install desde el directorio de su proyecto, posteriormente puede iniciar el servidor de desarrollo ejecutando start:dev.

El servidor de desarrollo se ejecuta en http://localhost:8080 de forma predeterminada.

Una vez que el servidor se esté ejecutando, puede editar cualquiera de los archivos en la carpeta src. Webpack recompilará automáticamente su código y luego recargará el navegador. Puede modificar esto en el archivo tsconfig.json

Estructura del proyecto

  • src/assets - Contiene las imagenes, sonidos, fuentes y fuentes tipo bitmap utilizadas
  • src/ts - Todos los archivos typescript del proyecto
  • src/ts/scenes - Archivos de las escenas
  • src/ts/components - Archivos de los componentes
  • src/ts/utilidades - Archivos de los utilidades
  • src/main.ts - El principal punto de entrada. Este contiene la configuración del juego y lo inicia.

Descripción de las escenas

Escena Descripción
BootScene Escena del template que carga las imagenes del background y logo de Phaser
PreloaderScene Escena que carga todos nuestros assets y configura las animaciones
PresentacionScene Efecto inicial del juego
MainMenuScene Escena antes de comenzar donde podremos desactivar el sonido, ver las teclas y comenzar el juego
IndicadoresScene Escena que se sobrepone a la escena del juego, donde se llevan las vidas, monedas y el puntaje
GameScene Escena donde se realiza el juego, es decir donde esta Mario
GameOverScene Escena de Fin de Juego

Descripción de Utilidades

Escena Descripción
Diccionario Aca se realiza la configuracion de todos los assets del juego. Es importante no repetir nombres, por este motivo utilizamos enum y tambien se utilizan diccionarios para identificar los recursos que posteriorment son utilizados en la escena Preloader. En toda la aplicación solo accedemos a traves de enum con esto tendremos menos errores.
UtilSonido Esta utilidad se encarga de ejecutar todos los sonidos de nuestro juego, de una forma sencilla.

Descripción de Componentes

Escena Descripción
BanderaComponent Componente que marca el fin de una etapa
BloqueComponent Bloques que mario puede romper
BloqueMisteriosoComponent Bloque ? donde se obtienen monedas o PowerUps
EscenarioComponent Este componente se utiliza para crear el escenario (suelo, tuberias y bloques inamovibles)
GoombaComponent Componente que representa a un Goomba
MarioComponent Componente que representa a Mario
MonedaComponent Las monedas que podemos distribuir en nuestro escenario
MushroomSuperComponent Champiñon para hacer crecer a Mario
MushroomSuperJumpComponent Champiñon para hacer crecer a Mario y nos da el poder de saltar más alto de lo normal
TuberiaComponent Componente independiente de tuberia, la idea es que entre en esta tuberia (no se utiliza)

🛠️ Ejemplos

🛠️ Crear Goombas

for (let i = 0; i < 3; i++) {
    const goomba = new GoombaComponent(this, 300 + i * 20, pisoAltura - 40, this.escenario);
    this.physics.add.collider(this.mario, goomba, () => {
        this.onHitEnemy(this.mario, goomba);
    });
}

🛠️ Crear infinitos Goombas

this.time.addEvent({
    delay: 1500,
    callback: () => {
        const goomba = new GoombaComponent(this, 400, pisoAltura - 40, this.escenario);
        this.physics.add.collider(this.mario, goomba, () => {
            this.onHitEnemy(this.mario, goomba);
        });
    },
    repeat: -1,
});

🛠️ Crear bloques misteriosos

const listaPosiciones: { x: number, y: number, moneda: boolean, tipoPowerUp?: TipoPowerUp }[] = [
    { x: 190, y: 145, moneda: true },
    { x: 250, y: 145, moneda: false, tipoPowerUp: TipoPowerUp.MushroomSuper },
    { x: 310, y: 145, moneda: true },
    { x: 2750, y: 150, moneda: false, tipoPowerUp: TipoPowerUp.MushroomSuperJump },
];
for (const elem of listaPosiciones) {
    new BloqueMisteriosoComponent(this, elem.x, elem.y, this.escenario, this.mario, elem.moneda, elem.tipoPowerUp);
}

🛠️ Crear Monedas

const moneda = new MonedaComponent(this, 10, 100);
this.physics.add.overlap(this.mario, moneda, () => {
    moneda.recogerMoneda();
    this.mario.addToScore(100);
});

Implementación en producción

Después de ejecutar el comando npm run build, el código generara un solo paquete y se guardará en la carpeta dist.

Para implementar el juego, necesitarás cargar todo el contenido de la carpeta dist en un servidor web público.

Webpack

Si desea personalizar la compilación, se puede modificar el archivo webpack/config.*.js, o puede modificar y/o crear nuevos archivos de configuración. Consulte la [documentación de Webpack] (https://webpack.js.org/) para obtener más información.

IDEAS

  • Agregar el cambio de controles
  • Las monedas y gommba deberia recibir a mario como parametro de entrada y dentro del componente resolver las colisiones con Mario, como se hace en otros componentes.
  • Mario deberia tener una estrategia mas sencilla para sus movimientos, no deberia saltar sin parar al dejar el boton de salto presionado, tampoco deberia aumentar la velocidad (SPACE) estando en el aire.
  • Deberia existir una clase Colision Manager y debería ser de instancia única.

Join the Phaser Community!

We love to see what developers like you create with Phaser! It really motivates us to keep improving. So please join our community and show-off your work 😄

Visit: The Phaser website and follow on Phaser Twitter
Play: Some of the amazing games #madewithphaser
Learn: API Docs, Support Forum and StackOverflow
Discord: Join us on Discord
Code: 2000+ Examples
Read: The Phaser World Newsletter

Created by Phaser Studio. Powered by coffee, anime, pixels and love.

The Phaser logo and characters are © 2011 - 2024 Phaser Studio Inc.

All rights reserved.