Este juego que veis aquí, que además, pues mira, fíjate que podemos matar a este, que podemos agarrar...
Lo malo es que he quitado... Mira, con musiquita y todo, ¿vale?
Le falta un poquito más de musiquita. Sí, no se escuchaba. No se escuchaba, pero ahora sí, ¿no?
Sí, ahora sí que se escucha. Bueno, no se escuchaba porque la he desactivado yo.
Bueno, pues este juego con todos los sprites. Fijaos que, por ejemplo, el Mario se ve cómo se mueve.
Que se caiga y que se muera también. Mira, fijaos, que se va a morir.
Pum. Vale, pues todo esto lo vamos a ver cómo lo podemos hacer. También que se muere porque tiene colisiones.
Esto lo vamos a hacer hoy. Cuidado con el copy. A ver, no vamos a vender el juego.
Lo estamos haciendo solo por temas de... Al final hay un montón de sitios donde está haciendo eso.
¿Qué juego es ese? ¿Cómo que qué juego es ese? Banead a Manuel Gone Away.
Solo vamos a averiguar cómo hacerlo. Solo vamos a averiguar cómo hacerlo, ¿vale?
Solo vamos a averiguar cómo hacerlo. No vamos a vender el juego ni nada.
Yo os dejaré el código ahí. Cada uno que haga lo que quiera.
De hecho, de hecho, ya existe uno. Alguien tiene un clon más completo que se llama Super Mario Phaser.
Que está hecho exactamente con Phaser también. Que es bastante más avanzado.
Fijaos, este ya es nivel... Este ya es nivel God, ¿eh?
Este ya es nivel bastante trabajado. ¿Vale? Con un montón de cositas más.
Con un montón de cosas más y tal. ¿Vale?
Que no está nada mal. Este, por si queréis ver todo el código, lo tenéis. ¿Por qué?
Porque de este le he robado los recursos. Le he robado los recursos.
Lo que he hecho es copiarme la carpeta assets y utilizarla. Toda la carpeta assets.
Entonces, la carpeta assets que lo tiene aquí, como de código abierto, total.
Él lo ha robado, yo se lo robo al ladrón y quien roba a un ladrón tiene 100 años de perdón.
Y si Nintendo me denuncia, diré, ha sido él. Ha sido él. Y ya está. Y todos contentos.
No, pero a ver, lo único que voy a hacer es la carpeta assets que tiene aquí.
Que ya tiene música, que tiene sprites, que tiene un montón de cosas.
Pues, ¿para qué me voy a poner yo a buscar? Si ya esta persona la ha encontrado y ya tiene todo el sonido y tal.
Pues, pues ya está. Pues ya está. Ya está.
Además, fijaos, a ver, entities creo puede ser... Mira, Mario. El Mario. Mira, aquí tenemos el Mario.
Y os voy a explicar por qué esto funciona así. ¿Vale?
¿Por qué esto es así? ¿Veis esta imagen? Esto es una cosa muy típica.
En este curso que vamos a hacer vais a aprender un montón de cosas sobre videojuegos.
Cómo funcionan, qué magias oscuras se utilizaban, qué técnicas se han utilizado durante mucho tiempo en videojuegos.
Aunque sean de 8 bits, de 16 bits, de un montón de cosas. Y vamos a verlas.
Así que, y vais a ver con JavaScript que, aunque es verdad que JavaScript no es el mejor lenguaje para programar videojuegos,
pero se puede. Y hoy vamos a ver algunos ejemplos de juegos que han facturado millones, millones y millones de euros.
¿Vale? Y que, y que están utilizando JavaScript. Están utilizando JavaScript.
Entonces, lo, lo vamos a ver. De hecho, no sé si lo sabéis. No sé si os sabéis esto, pero Nintendo, sin ir más lejos,
ahora que hablamos un poquito de, de Nintendo. A Nintendo, a ver si lo, si os lo encuentro.
Porque Nintendo, jo, esto no lo voy a encontrar. Eh, no lo voy a encontrar.
Pero es que Nintendo utiliza React.js y páginas web en algunos de sus videojuegos.
Por ejemplo, a ver, Donkey, JavaScript, a ver si os lo encuentro, que está bastante interesante.
Este, este. Mario vs. Donkey. Creo que era este. Creo que era este.
Porque este juego, este Mario vs. Donkey, si no me equivoco, este Mario vs. Donkey,
resulta, resulta que estaba utilizando, es una página web. No sé si lo sabíais.
Pero este juego que salió en Nintendo Switch es una página web.
Ah, no es de, no es de Switch, perdón. Es de Wii U, creo. Es de Wii U.
Mario vs. Donkey, Tippen Stars. Pues este juego es de HTML5. O sea, es un juego de estos,
es un juego que está hecho totalmente con HTML y JavaScript. Esto no lo sabe nadie,
porque la gente se cree que todos los juegos están hechos. Típico, pues con lo de siempre, ¿no?
Pues Unity, no sé qué. Y no, no. Mira, aquí tenéis, por ejemplo,
el juego de Mario vs. Donkey y Tipping Stars de la Wii U. Está escrito con HTML y con JavaScript.
Todo con APIs internas suyas de Switch, pero fijaos que se podía levantar incluso en un servidor, ¿eh?
Es tremendo. O sea, que es verdad que normalmente se utiliza Unity o Unreal o Godot, incluso ahora,
pero que sepáis que hay juegos que vosotros no os dais cuenta, no tenéis ni idea,
y que son páginas web. Y estáis pagando 50 dólares por ello.
O sea, así que luego digáis. Y este es un juego completo que está hecho por Nintendo con HTML y JavaScript.
Así que, no, no, para que veáis que muchas veces, jiji, jaja, y pasan estas cosas, pasan estas cosas.
Obviamente, hoy no vamos a hacer un juego a este nivel, pero solo para que sepáis la potencia que la gente se le olvida
y que se pueden hacer juegos muy exitosos con esto, ¿eh?
Hazte otro juego. Atentamente tu equipo legal. Ya te digo, ¿eh?
Antes de empezar con el curso voy a recordar una cosa sobre todo a toda aquella persona que sea de Colombia, de Medellín y tal, ¿vale?
Porque, amigos, voy a estar en la CityGS de Medellín. Así que si estáis por la ciudad, en Medellín, el 25 y 26 de octubre
voy a estar en Medellín, en Colombia. Y están ahora mismo vendiendo las entradas.
Ya tienen las entradas, las tienen por aquí disponibles. Le podéis dar a Get Your Ticket y ahí las tenéis, ¿vale?
Las entradas. Y especialmente si lo que hacéis es pedirle a vuestra empresa que os la pague, mejor.
Así, eso que os ahorráis. Vosotros le prometéis que vais a aprender un montón, que vais a ser mejores programadores y ya está.
A ver, que es verdad, además. Es verdad, creo que vais a aprender un montón.
Así que no os perdáis la oportunidad y os veo por ahí, ¿vale?
¿Argentina cuándo? Septiembre. Septiembre, ¿vale?
Muy bien. Habían recreado Zelda Wind Waker con JavaScript.
Sí, pero, hombre, no al mismo nivel que el juego, ¿eh?
En este caso es que es el juego en sí. Es exactamente el mismo juego.
¿Ya tengo mi ticket? Bueno, pues nos vemos por ahí.
Vale, pues, amigos, vamos a desarrollar desde cero Super Mario Bros.
Super Mario Bros, para el que no sepa, que ya sería una cosa impresionante.
Aunque, bueno, día de hoy hay gente que nació mucho más tarde, claro.
Yo soy del año que salió Super Mario Bros.
Super Mario Bros. es el primer juego de la saga de Super Mario oficial, digamos, ¿no?
Porque Mario como personaje sí que había aparecido anteriormente, ¿vale?
Había salido antes.
Pero Super Mario Bros. digamos que es el primer juego oficial de plataformas donde Mario Bros. es el protagonista.
Lo que es el protagonista sí que salió antes en otros juegos.
Pero Super Mario Bros. es el primer juego que salió en Nintendo 8-bits en 1985.
El año que yo nací, pues ese es el año que salió.
Y yo tenía esta cajita, esta cajita.
Y este es el juego que vamos a hacer, ¿vale?
Es un juego de plataformas en 2D, pero que tiene un montón de cosas interesantes.
Porque queráis o no, colisiones, animaciones, sprites, morir, resetear el juego.
Hay un montón de cosas, así que lo vamos a usar.
El único Mario que vale la pena.
Hombre, Mercy, ¿qué dices, tío?
¿Qué dices si casi todos los Marios de plataformas son la hostia?
Casi todos.
Y si lo tienes por aquí, mira, el Super Mario Land.
Super Mario Land de Super Nintendo.
Es espectacular este juego, macho.
Super Mario Odyssey.
Bueno, Super Mario Galaxy.
Super Mario Galaxy.
Este juego, tío, yo no pongo notas.
Pero esto es un 14.
El Super Mario Galaxy es un juegazo.
O sea, no sé.
A mí es que me gustan todos los Super Marios.
No tengo ningún problema con los juegos, ¿eh?
Y el Mario 64, que fue increíble también.
Bueno, todos, todos son espectaculares.
Todos los Super Marios, ¿eh?
¿Tienes pensado usar un motor más robusto como Godot, por ejemplo, en un futuro?
Sí.
De hecho, voy a traer a una persona que es muy pro al respecto.
Para que nos haga un tutorial de Godot.
Está en planes.
Hoy vamos a utilizar otro.
Si os interesa.
A lo mejor no os interesa.
Pero si os interesa.
Vamos a hacer también un taller para aprender desarrollo de videojuegos con Godot.
Que está bastante bien.
Y vamos a traer a una persona bastante experta en la materia.
Si os parece.
Alba Majo.
Ojalá.
Alba Majo.
¿Os gustaría Alba Majo?
Pues le digo, le digo.
A ver si...
Además, me gusta mucho el Godot.
Teniendo en cuenta que es de argentinos.
Es algo hispano.
Es súper bonito.
Así que me parece muy bien.
Bueno, pues...
Venga, amigos.
Lo que vamos a hacer.
Vamos a hacer este jueguecito de aquí.
¿Vale?
Fijaos.
Con muerte.
Con...
Con...
Que puedes saltar.
Con musiquita.
Bueno, cuando incluso puedes pillar ahí moneditas.
Que te pueden matar.
Que tiene todo lo que sería la gravedad también.
Que te puedes caer.
Puedes morir.
Todo eso lo vamos a hacer hoy.
Así que venga.
Vamos por faena.
Que si no, luego nos pilla el torito.
Os digo una cosa.
Vamos a intentar hacerlo sin ningún tipo de instalaciones muy bestias y tal.
Y vais a ver que lo vais a poder seguir muy fácil.
Alba es español.
¿Y quién dice que Alba no es español?
Godot es que es argentino.
Godot es un motor que es argentino.
Estamos hablando de Godot, ¿eh?
Vale.
Pues vamos a crear aquí un...
No sé.
¿Cómo lo llamamos?
Super Mario...
O sea, Super Midu Bros.
¿Vale?
Super Midu Bros.
De hecho, si alguien se anima...
¿Sabes una cosa que podríamos hacer?
Si alguien se anima, podríamos cambiar los assets.
Y que realmente no sea un Mario.
Sino que sea directamente...
Sea yo o un Midu o lo que sea.
¿No?
Y que ahí lo tengamos.
Venga.
Vamos a crear el HTML.
Para que veáis que es HTML puro y duro.
¿Vale?
Creamos todo esto.
Vamos a tener aquí el Super Midu Bros.
¿Ok?
Y aquí vamos a tener nuestro juego.
Aquí vamos a mostrar nuestro juego.
Vale.
Se pueden hacer juegos con Canvas.
Se pueden hacer juegos con Canvas.
Canvas HTML5.
Desde cero.
Pero es verdad.
Esto es posible porque lo hemos hecho.
De hecho, nosotros en el JavaScript 100.
Que tenemos 100 proyectos de JavaScript.
Hemos hecho el Tetris.
Hemos hecho el Arkanoid.
Y estos dos juegos lo hicimos desde cero.
Sin dependencias.
Con Canvas.
Un elemento HTML.
Que te permite dibujar de forma muy performante.
Y que puedes hacer juegos.
Está muy pensado para juegos.
Pero en esta ocasión vamos a utilizar un motor.
¿Por qué?
Porque un motor nos va a simplificar un montón el trabajo.
Vamos a poder enfocarnos mucho en el juego.
Y nos va a dar cosas muy fáciles.
Por ejemplo, las colisiones.
Vamos a poder crear colisiones sin necesidad de tener que preocuparnos.
De qué complicados las colisiones.
Calcular y tal.
Y vas a ver que es tan fácil y tan legible.
Que te van a entrar unas ganas de hacer tú el juego y de continuarlo.
Es tremendo.
Es tremendo.
Entonces, vamos a utilizar Phaser.
¿Y qué pasa con Phaser?
¿Qué es esto de Phaser?
Phaser es un framework de código abierto.
Pensado para el desarrollo de videojuegos en 2D.
Especialmente.
Utilizando JavaScript y HTML5.
Porque sí, ya veis aquí que pone HTML5.
Y es que...
¿Cómo se venden?
Estos motores de videojuegos de JavaScript, muchos lo ponen como HTML5.
Porque como en su día, HTML5 englobaba un cambio de paradigma en el mundo del desarrollo web.
Y aquí englobaba HTML5, CSS3, la nueva versión de JavaScript.
Pues se decía así, ¿no?
HTML5.
Entonces, ya tiene bastantes años.
Fijaos, más de una década ya que Phaser existe.
Ahora va por la versión 3.
Y está obviamente diseñado para crear videojuegos que se ejecuten en el navegador.
De hecho, hay incluso un montón de...
Digamos, Ichio.
Ichio, por si no lo conocéis.
Es una plataforma completa de videojuegos.
Muchos gratuitos.
Gratuitos.
Que son juegos que están pensados para el navegador.
Y alucinas.
O sea, flipas.
Yo muchas veces me paso.
Y es tremendo las cosas que hacen.
Hay muchos que están hechos con Phaser.
Otros que no.
Que están hechos a mano.
Pero, no sé.
Es que alucináis, ¿eh?
Alucináis.
Por ejemplo, esto.
Pues mirad.
Aquí tenéis un juego de...
Una aventura gráfica.
Y os los podéis descargar muchos totalmente gratis.
O sea, que está muy, muy bien este recurso.
Os lo recomiendo un montón.
Porque podéis pillar ideas.
Podéis aprender.
Podéis ver de las cosas que son capaces.
Mirad.
Este está hecho, por ejemplo, con Pico 8.
Y también se ejecuta totalmente en el navegador.
Y gratuito.
Los podéis descargar o ejecutar en el navegador.
O sea, es que...
Tremendo.
Bueno.
Ahí veis.
No sé cómo se...
¿Cuál es el botón?
Ahora.
Bueno.
Bueno.
Tremendo.
Que podríamos estar ahí todo el día jugando.
Se llama Ichio...
Ichi...
O sea, Ich.io.
Que es la red social.
Hay muchos que están hechos con Facer.
No todos, ¿no?
Y...
¿En qué se centra sobre todo Facer?
Se centra en proporcionarte herramientas que sean...
Que te permita de forma muy fácil crear tus primeros videojuegos.
Los niveles.
Y todo esto.
Desde principiantes a expertos.
Y ahora verás por qué.
Aunque es verdad que tienes algunas herramientas que son de pago.
Esta de Facer Editor.
Que está muy, muy, muy bien.
El problema es que son de pago.
Hay algunas que son de pago.
Veis aquí que pone Pricing.
Esto es una aplicación de escritorio que te permite fácilmente crear los niveles y tal.
Nosotros no lo vamos a utilizar.
Obviamente.
Pero esto sí que veréis que tiene como una licencia de pago.
No sé qué.
No sé cuánto.
Pero ojo.
No es obligatorio que utilicéis esto ni nada de lo que aparece.
¿Vale?
Podéis utilizar fácilmente el motor con código y tener con eso canvas y también soporte para WebGL.
Que esto va a hacer que tenga mejor rendimiento.
Vamos a tener físicas, sprites, agrupar, animaciones, partículas.
No, desgraciado.
No es un video patrocinado.
¿Cómo es un video patrocinado?
¿Te imaginas?
¿Te imaginas que hago un curso de JavaScript y está patrocinado por JavaScript?
O sea, cada vez que hago un curso me van a patrocinar.
PHP me va a patrocinar.
Python me va a patrocinar.
React.
¿Te imaginas?
React.
No, te patrocina React.
No, no, amigo.
Y menos Nintendo, ¿eh?
Si te lo preguntas, menos Nintendo.
No, hombre, no.
Ojalá, ojalá.
Si estoy a patrocinado no te preocupes que no me importaría decírtelo.
Pero yo te aviso que hay algo de pago pero que no hace falta que pagues.
Si te estoy diciendo, además, que no hace falta que pagues.
Si te dijese, no, tienes que pagar.
Pues, hombre, lo podría entender.
Pero que no.
Más cositas.
Cámara.
Hostia, lo de la cámara.
Eso está muy interesante porque no sé si os habéis fijado en el ejemplo que he hecho yo.
Que ahora lo enseñaremos.
Pero tenemos cámara para que siga el player.
Es increíble.
Input sonido.
Que se escale en diferentes dispositivos.
Sistema de plugins.
Soporte para móvil.
Bueno, es tremendo.
Tiene un montón, un montón de cosas.
Ahora, la pregunta del millón que mucha gente se estará preguntando.
Bueno, pero esto para hacer juegos de juguete.
¿No?
O sea, juegos de juguete porque son para el navegador y ya ves tú.
O sea, bueno, no tiene por qué.
Y os voy a decir un caso de éxito que vais a alucinar.
No sé si conocéis este juego.
Vampire Survivors.
Más de 190.000 reseñas positivas.
Ya son 220.000.
220.000.
Salió el 20 de octubre del 2022.
Vampire Survivors está desarrollado con Phaser.
Está desarrollado con Phaser.
Quizás no lo conoces.
Quizás sí que lo conoces.
Pero es un juego que ha tenido un éxito brutal.
Brutal.
Que ha salido en diferentes dispositivos.
Ya está en Xbox.
Está en Nintendo Switch.
Está en diferentes sitios.
Eso sí.
Aunque lo desarrollaron con Phaser.
Y que llegó a estar en Ichio.
¿Vale?
La primera versión salió aquí.
Fijaos, ¿eh?
Para que os deis cuenta.
La primera versión es totalmente gratuita.
La tenéis aquí.
Fue una página web.
Ich.io.
En la misma red social que os he dicho.
Pues aquí tenéis la primera versión que hicieron.
La primera versión que hicieron la tenéis aquí.
Y si os dais cuenta.
Se parece mucho el juego.
Puede ser que el juego lo veréis.
Lo veréis.
Y diréis.
Vale.
Menuda chorrada.
Pero es que engancha mucho, mucho, mucho, mucho el juego.
¿Vale?
Entonces este juego.
Que parece muy chorra.
Está hecho.
Está hecho con Phaser.
De hecho.
Para que veáis que es verdad.
Porque a lo mejor hay gente que no se lo cree.
Fijaos que ahora sacaron incluso un personaje en el propio juego.
Que tiene la pistolita.
¿Ves?
Que se llama Phaser.
Phaser.
Tiene la pistolita.
Y esta pistolita es la misma de este muñeco.
Esta.
Esta.
Este arma que han añadido.
Es el mismo arma que la del muñequito.
¿Vale?
Para que lo veáis.
Entonces.
Para que os creáis que realmente sí que hay.
Y también sacaron un personaje.
Si no me equivoco.
También sacaron el personaje oficial.
Vamos a ver si lo encuentro.
Mira.
Aquí puede ser.
Mira.
¿Veis?
El personaje.
Pues también sacaron el personaje.
Y ahí podéis ver.
Pues que se pueden hacer juegos muy potentes.
Y fijaos la de items que aparece.
O sea.
Se pueden hacer cosas increíbles.
Increíbles.
Este juego funciona a 60 frames.
Y alucináis con lo bien que va.
Bueno.
Pues este juego es un caso de éxito.
Que se está haciendo con ese motor.
Por ejemplo.
¿Vale?
Para que lo veáis.
Muy bien.
Ahora que ya sabéis un poquito de esto.
¿Por qué deberías aprenderlo?
Aparte de lo obvio.
De que puedes tener éxito.
Uno.
Fácil de aprender y usar.
Dos.
Comunidad y recursos.
Es una comunidad enorme.
Enorme.
Tres.
Flexibilidad y potencia.
Cuatro.
Puedes crear prototipos rápidos.
Porque por ejemplo.
Vampire Survivors.
Que es el caso de éxito.
Ahora.
Ahora.
Una vez que ha tenido éxito.
Lo han estado portando a Unity.
Si no me equivoco.
O a C++.
Ah.
No acuerdo.
No acuerdo.
Pero ¿por qué?
Porque querían llegar a más dispositivos.
Y no todos los dispositivos tienen un navegador.
Por ejemplo.
Nintendo Switch.
No te permite publicar juegos HTML5.
Es una cosa bastante ratada.
Y tienes que hacer.
Pues o lo tienes que envolver en otra cosa.
O lo tienes que portar.
Y sé que lo portaron.
Entonces tú puedes crear un prototipo rápido.
Que una idea con Phaser.
Que lo haces muy rápido.
Y luego si tiene éxito.
Pues ya tendrás tiempo de cambiarlo.
Y lo más interesante para mí.
Es el aprendizaje de conceptos universales.
Por ejemplo.
Hay conceptos que no importa el motor.
La sistema de física.
Gestión de recursos.
Animaciones.
Lógica de juego.
Todo eso.
Lo que vas a aprender con Phaser.
Te lo vas a poder llevar a cualquier sitio.
Así que es bastante interesante.
Que utilices Phaser.
Y que el día de mañana.
Si quieres ir a Unity.
Muchas cosas.
Te van a servir exactamente igual.
¿Qué necesitas?
¿Qué necesitas para seguir el curso?
Bueno.
Aparte de lo obvio.
Visual Studio Code.
¿Vale?
Un editor.
Un navegador.
Y tener instalado Node.js.
Node.js.
¿Para qué?
Pues porque vamos a instalar algún paquete.
Nada grave.
O sea.
Nada muy importante.
Pero bueno.
Todo lo deberíais tener ya.
Que es bastante importante tener Node.js.
Y tener NPM.
No vamos a utilizar el sistema de paquetes de NPM para Phaser.
Ya veréis como lo vamos a hacer.
Pero sí que es interesante.
Pues por ejemplo.
Para instalar el linter.
Para revisar los errores del código.
Y todo esto.
¿Vale?
Esos eran los requisitos.
Y antes de terminar y pasar ya al código.
Y ya empezamos.
Os voy a dar un consejo.
La página de Phaser es muy chula.
Y tiene un montón.
Pero un montón de recursos gratuitos.
Por ejemplo.
Aprender Phaser a base de ejemplos.
Y tienes un montón de ejemplos y tal.
Te tienes que registrar pero gratuito el curso.
¿Vale?
Y también tienes el.
Crea tu primer videojuego.
Y haces tu primer videojuego paso a paso.
Esta guía la tenéis en español.
No sé por qué no aparece aquí la guía en español.
Creo que aquí si le dais.
En algún sitio.
En algún sitio os aparece la guía en español.
Ah no sé por qué aquí no aparece.
Pero está en español.
Os lo puedo asegurar.
Os puedo asegurar que está la guía en español.
No me lo estoy inventando.
A ver.
Empezar con Phaser 3.
A ver si aparece por aquí.
Mira.
¿Cómo crear tu primer juego?
¿Veis?
Está en español.
De forma totalmente oficial.
Y podéis ver cargando recursos.
Construir el mundo y tal.
Que nosotros vamos a hacer algo parecido a lo de hoy.
Pero creo que os puede servir pues para revisar.
Para.
Vamos a hacer una cosa totalmente diferente.
Pero si queréis pues os puede servir.
Y está en español.
Así que os lo dejo en el chat.
Para que no os lo perdáis.
Si luego queréis revisarlo.
Porque encima estando en español.
Pues una maravilla.
¿Vale?
Entonces vamos a empezar.
Para empezar ya veis que tiene aquí un botón bien grande.
Descargar y empezar.
Bueno.
Pues vamos a descargar y empezar.
Aquí nos dicen que podemos empezar dándole aquí.
Download Phaser 3.80.1.
Hay diferentes formas en las que podríais empezar.
Podríais utilizar MPM.
¿Vale?
Instalando.
Podríais utilizar un CDN.
O podríais hacer lo que voy a hacer yo.
¿Qué es lo que voy a hacer yo?
Pues lo que voy a hacer yo.
Es aquí en nuestro proyecto.
Voy a descargarme el archivo minificado.
Minificado de Phaser directamente.
Lo voy a descargar aquí mismo.
Y aquí voy a irme y me lo voy a mover.
¿Vale?
¿Esto qué es?
Esto es toda la biblioteca de Phaser minificada.
No hace falta que entendáis el código ni mucho menos.
Pero sí que lo vamos a tener que cargar.
¿Por qué no utilizo MPM y todo esto?
Lo hago para que lo simplifiquemos.
¿Vale?
Para que no tengamos que estar explicando que es un empaquetador.
Y por qué funciona esto así.
Pero quizás más adelante lo movemos y ya está.
Por ahora lo que quiero demostrar es que con HTML y JavaScript sin necesidad de tener que utilizar una herramienta externa y solo con una dependencia vamos a poder hacer el juego de Super Mario.
¿Vale?
Entonces ya tenemos aquí a Phaser y vamos a tener también un archivo aquí que le vamos a llamar Game.
Y ahí es donde va a empezar nuestra magia.
Así que empezamos aquí.
Creamos nuestro archivo Game.js.
Y aquí es donde vamos a empezar.
Voy a poner aquí un Hello World por ahora.
¿Vale?
Nada raro.
Vamos a inicializar el proyecto.
Yo voy a utilizar Live Preview.
Ya sabéis que a mí me gusta bastante.
Que es esto de aquí.
Live Preview.
Que esto te levanta un proyecto HTML en un servidor.
¿Vale?
Y aquí pues ahora está vacío.
No os preocupéis.
Aquí aparecerán cosas.
¿Veis?
Aquí ya aparece el Hello World.
O sea que ya está funcionando.
Y cada vez que nosotros hagamos un cambio en el editor se verá reflejado.
Esto, Live Preview, es una extensión que es gratuita y es de Microsoft.
Así que vais a extensiones.
Os la descargáis.
Si no, la tenéis ya.
La instaláis y la utilizáis.
Y para utilizarla pues abrís la paleta de comandos y ponéis Live Preview.
¿Vale?
Inicio del servidor y os aparece aquí.
Que si no, no es obligatorio esto.
Esto es para mejorar un poco la experiencia de desarrollo.
¿Vale?
Yo os lo recomiendo.
Pero aquí cada uno que haga lo que quiera.
Yo de hecho, sé que lo voy a dejar aquí.
Lo pondré por aquí.
Luego lo moveremos.
Lo utilizaremos de otra forma.
Pero al menos para tener algo.
Vamos a poner que el body, vamos a hacer que tenga un display grid.
¿Vale?
Vamos a poner que todo se quede centrado.
Vamos a decirle que la altura, vamos a decirle el fondo que sea oscuro.
¿Vale?
Para que no nos queme la retina.
Y el juego, vamos a ponerle un borde de un pixel.
Y vamos a poner white.
Para que cuando iniciemos el juego lo tengamos ahí con un bordecito.
Y ya está.
Así que nada.
Unos estilos mínimos.
Esto es todo el estilo que vamos a hacer.
Todo lo demás vais a ver que lo vamos a hacer realmente con otras cosas.
Y ya está.
Ojo que diga live preview.
Que sea de Microsoft y con el check verificado.
Totalmente.
Totalmente.
Vale.
Pues esto sería como lo mínimo que necesitáis para que funcione.
¿Vale?
Con el HTML mínimo.
La cabecera.
Podemos poner un título.
El script.
Primero el de phaser.
Y luego nuestro archivo del game.js.
Luego unos estilos mínimos que hemos puesto aquí.
Pues para que me centre el jueguecito que hemos puesto ahí.
Que bueno.
Igual lo quito.
Igual no lo centro.
Y os voy a explicar por qué.
Igual no lo centro.
Porque.
Porque.
Porque.
Porque.
A ver.
Igual lo centro.
Pero no.
Igual lo centro.
Estoy pensando.
En lugar de centrarlo.
Sí.
Igual no lo centramos.
Ahora os explico por qué.
Para que lo podamos ver y no aparezca.
Lo voy a dejar por ahora centrado.
Pero luego lo.
Luego lo moveremos.
A ver cómo queda.
¿Vale?
Para que lo podáis ver arriba.
Ya si lo tengáis.
No quede debajo.
Vale.
Pues vamos a empezar ya con nuestro juego.
¿Vale?
Vamos a empezar a crear nuestro juego.
Lo primero.
Para que funcione cualquier juego con phaser.
Lo que necesitamos es crear nuestra configuración del juego.
Tenemos que configurarlo.
Y aquí le vamos a decir.
Por ejemplo.
Qué tipo de juego.
Más que de juego.
De soporte.
De soporte.
Vamos a utilizar.
Vamos a poner aquí que phaser.
Es una global.
¿Vale?
Porque esto viene del cdn.
Y aquí.
Al cargar este script.
Ya nos da un objeto aquí.
Mira para que lo veamos.
Aquí.
Si ponemos window.phaser.
¿Veis?
Ya tenemos acciones.
Animaciones.
Todo esto.
Lo tenemos en un objeto global que se llama phaser.
Así que lo tenemos ya disponible aquí en este archivo game.
Porque primero cargamos esta biblioteca.
Nos da acceso a esta variable global.
Phaser.
Y aquí tenemos que decirle el tipo de videojuego.
Pero más que el tipo de videojuego.
¿Dónde va a renderizar el videojuego?
Por ejemplo.
Podemos decir.
Que lo hagas en un canvas.
Que lo hagas en webgl.
Queremos que sea automático.
¿Vale?
Si es automático.
Primero va a intentar que sea webgl.
Que será lo que tenga mejor rendimiento.
Luego canvas.
Y si no.
Luego.
Luego no sé si intentará nada más.
Pero serían estos.
Hay más valores.
Como por ejemplo.
Headless.
Que significa que no se va a renderizar visualmente.
Aunque sí que va a funcionar el juego.
Pero bueno.
Eso no.
Como en nuestro caso no es importante.
Pero esto sí que son los importantes.
Primero intentará webgl.
Porque tiene mejor rendimiento.
Y luego intentará canvas.
¿Vale?
Luego.
Aquí tenemos que decirle.
El tamaño que va a tener nuestro juego.
Vamos a utilizar exactamente el mismo tamaño.
Que tiene el juego oficial de Super Mario Bros.
El Super Mario Bros. de Nintendo.
Super Mario Bros.
Claro.
Es un juego bastante antiguo.
Y pensad que la resolución que tiene.
Es bastante baja.
Es 256 x 224.
Bueno.
Nosotros lo vamos a ampliar.
A lo mejor un poquito.
Porque fijaos que dice que era posible 240.
Bueno.
Lo vamos a ampliar un poco.
Pero esta es la resolución que tenía.
Nosotros lo podemos ampliar.
Pero para que quede bien el estilo pixelado.
Y que realmente se vea como era exactamente igual.
Vamos a ponerle 256 x 244.
Le vamos a poner como background color.
Podríamos ponerle ahora blanco.
Para ver que realmente empieza nuestro juego.
Y le tenemos que decir.
En qué contenedor vamos a renderizar el juego.
Aquí si os fijáis.
He creado un div.
Con un identificador que se llama game.
¿Vale?
Pues le tenemos que decir.
El parent.
O sea.
Donde se va a renderizar nuestro juego.
Es el elemento con el identificador game.
Y tenemos que también indicar la escena.
Y la escena tiene.
Tres cosas muy importantes.
Pero dos.
Que como mínimo vas a necesitar.
Preload.
Y create.
¿Vale?
Preload.
Va a ser una función.
Una función que se ejecuta.
Para precargar los recursos del juego.
Y luego create.
Que se ejecuta cuando se inicia.
Cuando el juego comienza.
¿Vale?
Cuando queremos ya crear el juego.
Y vamos a querer crear.
En preload.
Vamos a cargar las imágenes.
Los recursos.
Los sprites.
Y todo esto.
Y en create.
Vamos a utilizar esas imágenes.
Esos recursos.
Para dibujar.
¿Vale?
Luego habrá una tercera.
También.
Que va a ser update.
Que es una función.
Que se ejecuta.
En cada frame.
¿Vale?
Se está ejecutando constantemente.
Pero por ahora.
Los dos más importantes.
Que vamos a necesitar.
Va a ser el de preload.
¿Vale?
Y el de create.
Vamos a crear el tercero.
También.
Update.
Para tenerlo por aquí.
Si queréis ver el de update.
Fijaos.
Si aquí yo pongo update.
Pongo un console.log.
Luego cuando inicialicemos el juego.
Tendríamos que ver todo el rato.
Update.
Update.
Update.
Que obviamente no es lo ideal.
Luego lo quitaremos.
Porque no tiene mucho sentido.
Pero así verás que esta función se ejecuta todo el rato.
El create solo se ejecuta una vez.
Y el preload solo se ejecuta una vez.
Primero se ejecutaría este.
Este sería el primero.
Este se ejecutaría después.
Y este se ejecutaría continuamente.
Continuamente.
¿Vale?
Y se ejecutaría el tercero.
Pero ya estaría como en un bucle infinito.
Donde se está ejecutando constantemente.
O sea.
Está todo el rato llamándose.
En cada frame.
Pues lo ejecuta.
Y ya está.
Aquí obviamente es donde vamos a tener que redibujar todas las cosas que hayan ocurrido en nuestro juego.
¿Vale?
Así que nada.
Voy a quitarle el console.
Voy a quitarle el console.
Primero.
Vamos a poner primero aquí el del preload.
El del create.
¿Vale?
Y así lo veremos bien.
Ahora solo nos falta inicializar nuestro juego.
O sea.
Lo que tenemos que hacer es.
¿Vale?
Ahora que tengo el juego.
¿Cómo lo inicializo?
¿Cómo le digo que tengo esta configuración y tal?
Pues muy fácil.
Solo tengo que decir.
New.
Phaser.
Game.
Y le pasamos la configuración.
¿Vale?
Tenemos aquí la config.
Pues la pasamos y ya está.
Vale.
Han pasado cosas.
Han pasado cosas.
Ya habrás visto que ahora de repente el cuadrado este se ha hecho más grande.
De repente por arte de magia se ha hecho como más grande.
Vale.
No estamos viendo ningún juego.
No está pasando absolutamente nada.
Pero sí que vemos que este cuadrado se ha hecho más grande.
¿Por qué?
Porque está inicializando ya.
Está inicializando nuestro juego.
¿Vale?
Ves que aquí ya tenemos el preload.
Aquí tenemos el create.
Es verdad que he puesto aquí white.
Que no sé si a lo mejor es que no le gustan los colores así.
Vale.
No le gustan los colores así con nombre.
Pero fíjate que aquí ahora sí.
¿No?
Ahora sí que está white.
Es que no salía pero es porque he puesto el nombre.
Y teníamos que poner el código hexadecimal.
Voy a quitar ahora ya que tenemos esto.
Ya puedo quitar este borde que no nos sirve de nada.
¿Vale?
Y fíjate que al menos ya tenemos inicializado nuestro juego.
Aquí.
¿Vale?
Con toda su resolución.
Con su fondo.
Y hemos ejecutado tanto el preload como el create.
Los dos métodos.
¿Qué pasa si lo ponemos el console.lock en el update?
Pues que aquí.
Hostia.
No sé por qué.
Se me quita el foco.
Cuando ejecuto.
Cuando ejecuto otra vez.
Voy a hacer algo.
Voy a poner esto por aquí.
¿Vale?
Vale.
Fijaos.
Fijaos aquí lo que está pasando.
¿Qué pasa con este update?
Pues que está ejecutándose en cada frame.
Y aquí tenéis console.lock update.
Pues todo el rato.
Pa, pa, pa.
Esto es normal.
Esto es cómo funcionan todos los juegos del universo.
Todos los juegos del universo.
Conocido y por conocer.
Funcionan con un bucle infinito.
¿Por qué?
Porque todos lo que hacen es que en cada frame tienen que volver a pintar cómo se estaba comportando.
Cómo se tendría que reflejar los cambios del estado en la pantalla.
Todos los juegos funcionan así.
De que constantemente cuando tienen un cambio lo tienen que reflejar en pantalla.
Si tú giras a la izquierda, pues tiene que aparecer.
Entonces, es normal.
Esto es totalmente normal que pase esto.
Esto no es un error.
Es que un juego al final constantemente tiene que estar revisando si ha habido un movimiento del personaje.
Si tú le das a la derecha, en el siguiente frame, el personaje tiene que estar movido a la derecha.
Entonces, y no se detiene.
No se detiene hasta que no para el juego.
No se puede detener.
Tiene que ser constantemente así.
Esto obviamente en videojuegos.
No para que lo hagáis en cualquier página web.
Entonces, por ahora lo voy a quitar porque no nos añade mucha información.
Voy a hacer esto un poquito así.
Y a ver si soy capaz de poner esto.
Esto por aquí.
Esto por acá.
Vale.
Para que esto lo tengamos aquí y esto lo pueda poner aquí, aquí, aquí.
Así tendremos el jueguecito aquí y este editor lo tendremos aquí.
Vale.
Más o menos se ve.
Y si no, ahora lo subiré un poco.
Si le quitamos el center y aquí le vamos a poner margen top 10 píxeles.
20 píxeles.
50 píxeles.
100 píxeles.
Hostia.
A ver qué le está pasando a esto.
Ahora.
Bueno.
Pues no va con el margen top.
Vamos a ponerle un poquito para que lo veáis exactamente que quepa.
Joder.
Que justo.
20.
30.
Es que creo que a veces lo pilla mal y me guarda.
Vale.
Ahí está.
Vale.
Así ahora vais a poder ver correctamente el juego.
Bueno.
El juego que vamos a hacer es el Super Mario.
Por lo tanto, vamos a necesitar toda la carpeta de assets que yo tengo aquí.
Vale.
Agregar carpeta.
Copiar carpeta.
Vale.
Me he copiado esta carpeta assets que esto, ¿qué es lo que tiene?
Esto lo que tiene ya son todas las imágenes que vamos a necesitar.
Los bloques.
Todo, todo.
Si hay bloques vacíos.
Si está en la underground.
Si el...
Por ejemplo, los sonidos también.
Mira.
Sonidos.
Efectos.
¿Vale?
Cuando se rompe un bloque.
Cuando recuperas un icono...
Una moneda.
¿Vale?
Hostia.
Se me ha reventado el tímpano.
También tenemos por aquí...
Entities.
Entities.
Si no me equivoco.
Debemos tener al Mario.
¿Vale?
Aquí tenemos al Mario.
Y esto es muy interesante.
Porque fijaos que tenemos al Mario con...
Como en una sola imagen con todas las posiciones.
Esto es otra cosa que es muy típica en los videojuegos.
A esto se le llama un sprite.
Sprite.
No.
Sprite.
Sprite.
¿Vale?
Empezado por ese.
Sprite.
Que lo que quiere decir es que en una sola imagen tienes todos los movimientos de ese personaje.
Y vas a dividir la imagen para decir...
Vale.
Esto es una posición.
Esta es otra.
Esto luego lo vamos a ver y te lo voy a explicar mejor.
Pero solo para que entiendas que esto es muy importante.
Porque ¿qué pasa?
Que para optimizar los recursos, tú lo que haces es cargar una imagen con todas las posiciones.
En lugar de cargar siete imágenes.
¿Por qué?
Un, dos, tres, cuatro, cinco, seis.
En lugar de cargar seis imágenes diferentes, lo que haces es cargar una imagen con cada una de las posiciones.
Cada posición le podrías llamar que sería un tile.
¿Vale?
Y el sprite sería todo entero.
Toda la imagen sería el sprite o sprite sheet que le llaman muchas veces.
Y una de las posiciones sería el tile.
¿Vale?
Que sería como uno en concreto.
Y eso vamos a ver cómo lo podemos utilizar.
Y vais a ver qué queda.
¿Y por qué eso es mejor?
Porque es mejor cargar una sola imagen que cargar seis o siete.
Porque cuando tienes siete, quieras o no, solo el hecho de cargar una imagen ya ocupa espacio.
Mira, te voy a hacer un ejemplo muy sencillo.
¿Qué es más fácil?
Tener una caja que sea un poquito más grande y que dentro metas cosas o tener siete cajas.
Siete cajas diferentes, aunque sean más chiquititas y que resulta que más o menos cabe lo mismo.
Pues al final, claro, tener las siete cajas te complica.
Te tienes que acordar dónde está cada una de las cajas.
Todo eso, quieras o no, tiene un coste.
Un coste de memoria.
Así que es mucho mejor tener una caja, aunque sea un pelín más grande, porque va a estar como más centralizado.
Vamos con más cositas.
Ya que tenemos el preload y tal, vamos a empezar dibujando una cosa.
Para eso, primero vamos a cargar un recurso.
Los recursos, vamos a ver qué recurso vamos a cargar.
Aquí en escenario, en overworld, creo que tenemos...
Mira, una nube.
Vamos a cargar una nube.
Esta nube de aquí, ¿vale?
La vamos a cargar.
Va a ser la primera que carguemos.
Así que nos vamos aquí.
Y en el preload, lo primero que tendríamos que hacer es cargar los recursos.
Vamos a decirle, this, que this, ¿qué es el this?
Vamos a poner, this es el game, que es el juego que estamos construyendo, ¿vale?
Cuando cada vez que veamos un this, se refiere a sí mismo.
Y así va a poder tener acceso a sus variables, a sus configuraciones, a sus métodos.
Este this se refiere al juego que estamos construyendo.
Así que cada vez que lo veáis, se refiere a esto.
Así que el juego que estamos construyendo, queremos cargar una imagen que le tenemos que dar una ID.
Le vamos a decir nube 1.
Y le tenemos que decir de dónde tiene que sacar este recurso.
Pues en assets, en assets, en scenery, ¿no?
Scenery, ¿vale?
En overworld, aquí, overworld.
Y también tenemos cloud1.png.
Con esto habremos cargado la imagen.
Fijaos que está bien porque aquí en la izquierda tengo que me aparece ya la imagen.
Esto gracias a una extensión que está muy, muy chula también, que os recomiendo un montón.
Que se llama Image Preview, creo que se llama.
Image Preview.
Esta de aquí está muy, muy, muy chula porque os aparece esto.
Y si te quedas encima, también te aparece así.
Que está muy bien.
Porque así sabes si la estás cargando correctamente.
Bueno, entonces ya hemos cargado nuestra primera imagen.
Y ahora lo que queremos es mostrarla.
Pues le decimos, en este juego quiero añadir una imagen en la posición 0, 0.
Y la imagen que quiero utilizar es la de cloud1, ¿vale?
Vale, ya ha aparecido ahí.
Al menos ha aparecido.
No es lo que queremos, pero ha aparecido.
¿Por qué no es lo que queremos?
Por la posición, por el color y todo esto.
No te preocupes que eso lo vamos a arreglar un momento.
Lo primero que vamos a hacer para que queden mejor las imágenes es ponerle el color correcto.
Que es así, ¿vale?
Este es el color correcto de Super Mario Bros.
Que luego en los niveles podríamos cambiarle el color sin ningún problema.
Pero primero hacemos esto.
¿Qué problemas tiene esta imagen?
Ya estarás viendo que tiene unos cuantos problemas.
El primer problema es que no está bien situada.
Y esto es porque el 0, 0 es verdad que se refiere a este punto de arriba a la izquierda.
Este punto de aquí arriba a la izquierda sería el punto 0, 0.
Pero ¿qué pasa?
Que el punto 0, 0 es donde está poniendo la mitad de la imagen.
El centro de la imagen lo está poniendo en el punto 0, 0.
Si quisiéramos moverlo, podríamos hacer dos cosas.
Uno, decirle, oye, el centro de la imagen quiero que lo pongas en el píxel número 100, ¿vale?
Entonces ya estaría moviéndose.
O si la queremos bajar, tenemos que decirle, vale, pues ponlo en el eje Y en el 50.
Así que ya podemos ver que el image este sería X, Y y la ID del asset, ¿vale?
X, la posición X, horizontal, la Y, la vertical y el ID del asset.
Entonces, si lo queremos mover hacia la derecha, tenemos que ir añadiendo aquí más y se va moviendo.
Pero también es verdad que queda como muy grande, ¿no?
¿Cuál es el problema?
El problema es que este recurso es demasiado grande, la imagen es muy grande, así que tendríamos que escalarla.
La podemos hacer como más pequeña, por ejemplo, podemos poner 0,5 y será la mitad.
Pero todavía, para que sea el tamaño real, tenemos que poner 0,15.
Y fíjate que ahora, pues ya aparece más parecida a la original, ¿vale?
Así que 0,15 ya lo tendríamos.
Pero aún así, fíjate que si pongo el 0,0, seguimos teniendo un problema.
Si pongo 0,0, el centro de la imagen es lo que me pone en el punto 0,0.
No está mal, pero se hace difícil de pensar así.
Porque, claro, el problema es que si tú el centro de la imagen lo pones en el 0,0, pues a ver, no va a pasar nada.
Porque cuando lo movamos así, pues quedará por ahí en medio, ¿no?
Si ponemos algo así, pues quedará por ahí en medio y ya está.
Pero ahí es donde le estamos diciendo con esta posición dónde tiene que estar el centro de la imagen.
Si lo que queremos es indicar dónde debería iniciar la imagen, ¿vale?
O sea, en lugar de que sea el centro, decirle, no, quiero indicarte la posición desde la que tienes que empezar a dibujar arriba a la izquierda.
Pues lo que podemos decirle es el setOrigin, setOrigin.
Y podemos utilizar 0,0.
Y ahora fíjate cómo ha cambiado esto.
¿Cómo funciona esto?
Vamos a hacer un croquis para que lo entendáis.
Porque si no la gente se va a volver, ¡ay, esto del setOrigin! ¡Ay, qué muy difícil! ¡Tengo que pensar!
No te preocupes, que te lo voy a explicar.
Mira, vamos a pillar la imagen y lo vas a entender muy fácil.
O, mira, con un cuadrado.
Con un cuadrado lo vas a entender fácilmente.
El origin, por defecto, está aquí.
Aquí está el origin por defecto, ¿vale?
Este sería el origin por defecto.
O el origen, que es más fácil, ¿vale?
Este sería el origen por defecto, en el centro.
En el centro.
¿Y cuál es el origen por defecto?
El origen por defecto, cuando ponemos aquí la imagen, es 0,5.
0,5, 0,5.
Fíjate, ¿ves que se pone en el centro?
Porque el origen de 0,5 y 0,5 significa centro, ¿vale?
O sea que cuando...
A ver, la...
Escalidro.
Cuando tenemos aquí en el centro, esto es el origin por defecto, que es 0,5...
O X, 0,5 y 0,5.
¿Qué quiere decir esto?
Esto quiere decir el centro.
Ahora, si quisiéramos que empiece realmente la imagen a partir de este punto, o sea, queremos que empiece aquí, esto sería el punto 0,0, ¿vale?
0,0.
Esto es súper importante porque en realidad en todos los motores de videojuegos este tipo de origen y tal se lleva bastante.
Entonces, este sería por defecto, por defecto, ¿vale?
Pero si nosotros le cambiamos el origin a 0,0, por ejemplo, setOrigin, 0,0, ¿vale?
Estaríamos haciendo esto, setOrigin, 0,0.
Pasaríamos a tener el X, 0, Y, 0 y entonces empezaría arriba a la izquierda, ¿vale?
Y si lo que queremos es que sea desde el final, o sea, que el origen empiece aquí, ¿vale?
Y entonces, por lo tanto, va a ser más complicado el cómo pensamos y tal, pero bueno, que puede ocurrir.
Tendríamos que hacerlo así, ¿vale?
1, 1.
Y entonces indicaríamos desde dónde tiene que pintarse desde el final, ¿vale?
Y lo tendríamos que tener en cuenta del final.
¿Qué es lo más fácil normalmente para pensar?
Este suele ser, buena idea, el desde el centro, indicar el centro de dónde se tiene que colocar la imagen
y por lo tanto, cuando nosotros le damos la posición, ¿vale?
Cuando le damos aquí la posición, a ver, ¿dónde está el editor?
Aquí.
Aquí, ¿vale?
Cuando le decimos esta posición y le decimos 100 y 50, ¿vale?
Le estamos diciendo 100, la posición X 100 y de la Y 50, esta posición aquí está el centro de la imagen.
Si le ponemos aquí 0, 0, vais a ver que se va a subir un poquito.
Lo que vamos a hacer es que aparezca desde el inicio.
Y si le ponemos el 1, 1, ¿vale?
Va a ser, hostia, lo he dicho al revés, lo he dicho al revés.
Culpa mía, ¿eh?
Que lo he dicho al revés.
O sea, el cómo se dibuja es al revés.
O sea, el 0, 0 va a ser como más a la derecha porque estamos indicándole el punto desde el que se dibuja, ¿eh?
Aquí lo he puesto al revés.
Perdón, perdón, perdón.
Que me vais a matar.
O sea, no, o sea, esto sería así.
Que se dibujaría a partir de aquí, ¿vale?
Se dibujaría a partir de aquí.
Y aquí sería, exacto, sería así.
Vale, vale.
O sea, esto está bien.
Si el 0, 0...
A ver, a ver, ahora me he liado.
Mientras lo estaba explicando, ahora me he liado.
A ver, el 0, 0 y el 1, 1.
El 1, 1 está así.
Vale, sí, sí, sí.
Está bien, está bien.
O sea, es como lo he dicho, es como lo he dicho, ¿vale?
Así que así es como se dibujaría a partir de aquí y aquí se dibujaría a partir de aquí.
¿Vale?
O sea, está bien, está bien.
Es que ahora me ha dado...
Pero con que ya sepáis esto, no os rayéis porque yo creo que lo mejor...
Muchas veces aquí la gente se vuelve loca de...
Ah, es que no sé qué.
Da igual.
O sea, si es que cuando te pongas a dibujar y veas que no te aparece donde te dice que aparece,
lo vas a aprender en un momento.
Lo más interesante son estos dos, ¿vale?
Ya está.
Entonces, venga.
Ya que esto es lo del origen, lo vamos a volver a ver.
Pero solo para que lo tengas aquí, lo tengas muy claro, lo del set de origen.
Ya tenemos aquí el set de scale.
Pues perfecto.
Vamos a mostrar el Super Mario, que yo creo que es lo más interesante, para que además
hagamos la animación del Super Mario.
Así que vamos a cargar, pero no vamos a cargar una imagen, porque si te fijas la imagen del
Mario, ya hemos visto que no es una imagen, es un sprite sheet, ¿vale?
Y es una imagen que tiene más de una posición.
Así que vamos a decirle, vale, sprite sheet, le vamos a dar la ID, que es el Mario, y le vamos
a indicar dónde va a tener que sacar.
Ahora, el Mario, vamos a decirle que lo tenemos en assets entities, ¿vale?
Assets entities mario.png.
Y ya tendríamos el Mario.
Importante, esto es la ID.
Por lo tanto, solo puede haber un sprite sheet, una imagen que tenga ese identificador.
No lo podemos utilizar más veces, ¿vale?
Porque si no, la liamos.
Vale.
Pues ahora que ya tenemos esto, vamos a añadir, pues añadimos un sprite, le decimos en qué
posición, esta sería la X, le podemos decir, por ejemplo, 50, y le vamos a decir aquí,
pues, 200, y que nos añada el bueno del Mario.
Y le ponemos el set origin, origin en 0 y 1.
Vamos a ver que esto, ¿vale?
Ahora, ¿por qué me está petando?
Pues que seguramente este assets entities, vamos a ver el error, que seguro que hay un error
por ahí.
En algún sitio lo hemos liado.
Frame width given at invalid frame width.
Invalid frame width.
Hostia, no me he acordado que había que indicarle un frame width.
¿Vale?
Vamos a ver esto.
Bueno, vale, seguramente tiene sentido.
Aquí tenemos que pasarle el frame width.
¿Por qué?
Ahora vamos a ver qué es esto del frame width.
No sé si era 14.
Ahora miro cuál es el frame width.
Vale.
¿Qué es esto del frame width?
Vamos a sacar la imagen.
Fijaos en esta imagen, ¿vale?
El frame width sería cuánto es que ocupa cada uno de los Marios.
O sea, si nos vamos otra vez aquí al Excalibur, te lo voy a explicar en un momento.
El frame width, fíjate que tenemos este Mario, ¿no?
Pues lo que tenemos que hacer es como dividir el Mario, todas las imágenes del Mario, y el
frame width sería, ¿vale?
¿Cuánto ocupa cada una de estas imágenes?
Yo lo estoy haciendo un poco a ojo, ¿vale?
Pero se supone que tiene que ser exactamente lo mismo.
El frame width sería esto que tenemos aquí.
Entre las puntas de la flecha, esto.
Este ancho de aquí sería el frame width.
Y se lo tenemos que indicar porque es importante.
Tiene que saber qué imagen en concreto es la que tiene que mostrar.
Por lo tanto, le tenemos que decir, vale, que sepas que de todas las imágenes, aquí
hay, pues no sé, ahora lo calcularemos.
Si aquí, si miramos esta imagen y vamos al editor, lo abrimos aquí.
Y lo único que tenemos que hacer para sacar el frame width es muy fácil.
No hace falta hacerlo a mano ni nada raro.
Primero, lo más importante es que tenemos que saber cuál es el ancho total de la imagen.
¿Vale?
Fijaos.
Y aquí nos pone 108.
Vale, pues 108.
Vale, pues si tenemos 108.
¿Utiliza estos sprites midu?
Un, dos, tres, cuatro, cinco, seis.
108 entre seis, 18.
Eso significa que cada una de las imágenes del Mario son 18 píxeles.
En total son 108.
Tengo seis imágenes.
Así que ahora ya sé que aquí el frame width es 18.
Y esto, pues, es el frame width de cada uno.
Ahora aquí, pues, vemos que tenemos un problema.
No pasa nada, pero le podremos ir indicando.
Ahora es porque seguramente, además, me la ha puesto mal.
Pero no pasa nada.
Al menos lo tenemos ahí y luego ya lo pondremos.
Igual que tenemos el frame width, también tenemos el frame height.
¿Vale?
Por si lo tenemos que indicar y tal.
En este caso, el sprite ya va de izquierda a derecha.
O sea que no vamos a tener ese problema.
¿Vale?
Vale.
Pues, bueno, vamos a ir dándole cañita con el sprite.
¿Vale?
Tenemos el frame width 18.
Aunque aquí, ahora estoy flipando porque me ha puesto esto.
El frame width.
Creo que era 16.
Vale.
Ahora sí que lo tenemos bien.
16 sería el tamaño que tenemos de la imagen total.
¿Vale?
No os tenéis que preocupar de hacer cálculos porque al final es lo que ocupa.
¿Veis que ocupa aquí 16?
Pues le ponéis la altura 16.
Y ya tenemos ahí el primer frame puesto perfectamente.
Así que ya tendríamos al Super Mario puesto.
Nos faltaría mostrar el suelo.
Vamos a mostrar el suelo para que no esté flotando.
Y empezaremos a poner ya todo el tema de la gravedad para que quede bien.
Lo mismo.
Vamos a tener que cargar una imagen.
Vamos a cargar una imagen.
En este caso sí que es una imagen.
Le vamos a poner que es el suelo.
Floor Billix.
Floor Bricks.
Vamos a ver cómo es Scenari Overworld.
¿Vale?
Así que Scenari Overworld.
Floor Bricks.
Siempre es exactamente lo mismo.
En el preload cargamos.
Que esto luego lo podremos simplificar para no repetir el código todo el rato y tal.
Pero obviamente ahora es importante que lo hagamos para que nos quede muy claro.
¿Vale?
¿Veis que esto es una imagen así como que se repite y tal?
Esto lo vamos a cargar de otra forma también diferente.
Porque ya hemos visto cómo cargamos imágenes.
Sprite Sheets.
Cargar lo que vamos a cargar igual.
Pero lo vamos a mostrar de forma diferente.
Porque lo que vamos a hacer es crear como una textura.
¿Vale?
Una textura que digamos de alguna forma que se va a expandir.
Así que le vamos a decir.
En lugar de que ponga la imagen y ya está.
Vamos a decirle que utilicemos el tile sprite.
Y le tenemos que decir la posición X que sea cero.
Va a empezar en el cero.
Y la posición Y que también va a empezar en el cero.
Y le tenemos que decir el ancho y el alto de esta textura que queremos utilizar.
¿Los sonidos de los assets son de uso libre?
¿O como podrías saberlo?
Obviamente no.
No son libres porque son de Nintendo y va a buscarte a tu casa como sea.
Para el proyecto de la universidad no te va a pasar nada.
O sea que no te va a pasar absolutamente nada.
Pero te va a intentar perseguir si lo intentas vender.
¿Vale?
Entonces posición X cero.
Porque queremos que empiece abajo a la izquierda.
Posición Y vamos a empezar en config.height.
Vamos a ponerle la altura.
Ahora le tenemos que decir cuál es el ancho que queremos que tenga.
Queremos que ocupe todo el espacio.
¿Vale?
Y luego le vamos a decir la altura.
32 píxeles.
Y vamos a decirle cuál es la idea de lo que queremos que utilice.
Floor Bricks.
Vale.
Floor Bricks que veo que no me lo está pillando.
Porque a ver que este Scenery Overworld.
¿Por qué no me está pillando el Floor Bricks?
Lo he escrito bien.
Floor Bricks.
He puesto Bricks.
Floor Bricks.
Pero lo he escrito bien aquí.
Una cosa que está interesante es que fijaos que cuando no detecta.
Lo has puesto mal.
Ahora.
Cuando está mal el nombre.
Fíjate.
Si pongo que está mal el nombre.
Al menos intenta cargar algo y te pone como la imagen como que no la encuentra.
Y esto está bien porque así visualmente la puedes ver aunque no esté correcta.
Bueno ya veis que ahora no está bien del todo.
Pero vamos a poder estar ajustando aquí como debería verse bien.
Podemos ir jugando.
Por ejemplo aquí veis que la altura pues está bien.
O sea la I parece que está bien.
Pero a lo mejor deberíamos subirlo un poco.
¿Ves?
Aquí estoy usando demasiado.
Ahora sí que está bien ajustado.
¿Por qué?
Porque la mitad de la altura.
Aquí lo que estamos diciendo que la I.
Si lo pone abajo del todo.
Tenemos otra vez el problema del Set Origin este.
Está poniendo en el centro.
¿No?
Aquí.
Entonces le tengo que decir que la mitad de la imagen sea la posición de la I.
Y así aparecerá ahí.
Y lo bueno es que ahora que tenemos un poco esto.
Ya podemos ajustar un poquito mejor el Mario.
Y decirle no.
Baja un poco.
¿Vale?
Y que quede más o menos ahí.
Luego lo ajustaremos bien con gravedad.
Para que no flote.
Pero al menos ya tenemos esto.
La posición X.
Para que empiece la 0.
La I.
Tenemos que ajustar para que como la imagen es un poquito más grande.
Para que vaya un poquito más arriba.
Aquí tendríamos el ancho que queremos que ocupe.
32.
Porque es lo que ocupa esa imagen.
Y la ID.
Y ya tendríamos esto.
Y esto lo podríamos repetir tantas veces como queramos.
Igual que tenemos esto.
Lo podemos hacer.
Lo podemos escalar.
No va a hacer falta escalarlo.
En este caso.
Pero lo podríais escalar.
¿Vale?
En este caso no hace falta.
Podríamos hacerlo un poquito más pequeño también.
Pero en este caso está bien.
En la imagen no hay ningún problema.
Por defecto sería setScale1.
Y otra opción que podemos hacer.
En lugar de hacer este cálculo.
Sería jugar con el setOrigin.
Que hemos visto antes.
Por ejemplo.
En lugar de hacer 0.
Podríamos hacer que la I sea 1.
Y así esto lo podríamos quitar.
Y ya nos quedaría así.
¿Vale?
¿Por qué?
Porque en lugar de ponerlo en el centro.
Le estamos diciendo.
Fijaos.
Que si pongo 0.0.
El problema es que el centro.
Me lo está dejando.
Joder.
Ahora.
A ver.
¿Qué he hecho?
Es que me da la sensación que a veces está pillando los cambios como tarde.
Como que los está pillando como tarde.
Ah.
Porque por defecto 0.5 es 0.5.
0.5.
Este es por defecto.
¿Vale?
Este es por defecto.
Y así es como queda mal.
Pero podremos hacer eso.
¿No?
Que lo haga desde el principio.
Y así sí que lo va a hacer correctamente.
Así empezaremos desde el punto que le estamos diciendo correctamente.
Es que es muy difícil pensar en el centro de la imagen.
Es mucho más fácil si pensáis desde qué punto va a empezar a dibujar.
Así que si hacéis el set origin 0.0.
Os va a ser mucho más fácil decir.
Vale.
Quiero que empiece justamente aquí en este punto.
Y desde ahí que empiece a dibujar.
Y que ocupe lo que tenga que ocupar.
Desde tantos píxeles.
Y todo esto.
Así que haciéndolo así.
Nos queda mucho mejor.
Como le hemos dicho que tiene que ocupar todo el ancho.
Pues ya lo tendríamos así.
Perfectamente.
Y ya está.
Luego haremos de añadir más suelos.
Porque tenemos que mover la cámara.
Pero al menos con esto ya tendríamos el suelo.
Vamos a ver cómo mover el personaje.
Para que al menos no se nos pierda.
¿Vale?
He creado los sprites de SuperMidu Bros.
Hostia.
Neutron.
La madre me parió.
Vale.
Lo añadiremos.
Neutron.
Lo añadiremos.
Es que ahora.
Si no.
Voy a tener que estar cambiando otra vez los píxeles y tal.
Hostia.
Qué bueno.
Qué bueno es esto.
Qué bueno es esto.
¿De dónde sale el config.hide?
El config.hide este que hemos hecho aquí.
Esto es.
Este config.
Es esta configuración que tenemos aquí.
O sea.
Que es la altura justamente.
Que estamos utilizando aquí.
Entonces.
Este config.hide.
Es este valor.
Que ya lo hemos creado por aquí.
Me encanta.
Me encanta.
Está muy muy chulo.
A ver si me los puedo descargar.
Y me los.
Qué bueno.
Qué bueno.
Qué rápidos.
Tío.
O sea.
Sois muy rápidos.
Lo que.
Claro.
Habría que ver que realmente está.
Claro.
El problema es que me vas a fastidiar.
Lo del salto.
Falta el salto.
La muerte.
Claro.
Es que.
Entonces no voy a poder hacerlos todos.
Lo.
Lo utilizaremos.
Cuando los tengamos todos.
Lo utilizaremos.
Lo usaremos.
Lo usaremos.
Lo usaremos.
Lo que pasa es que ya te digo.
Que faltaría la muerte.
Que también la vamos a hacer.
O sea que.
Claro.
Es que si no.
Va a ser un poco raro.
Bueno.
Vamos a mover al personaje.
Para mover al personaje.
Lo primero que tenemos que hacer.
Se puede hacer de muchas formas.
Vale.
Pero vamos a intentar utilizar al máximo.
Phaser.
Para no tener que agobiarnos.
Así que vamos a crear como las.
Las llaves.
Las teclas.
Vale.
Y para eso vamos a decirle.
Que.
El juego.
Vamos a crear.
Del teclado.
El create.
Cursor keys.
Esto es un método.
Que lo que va a hacer es.
Poder visualizar.
Las teclas.
En la función.
Update.
Entonces ahora.
Dentro de update.
Vamos a tener acceso aquí.
Y decirle.
Vale.
Si.
La tecla de la izquierda.
Se está.
Moviendo.
O sea.
Está presionada.
Vamos a mover el Mario.
En el eje X.
Menos 2.
Ahora veremos esto.
Muy rápido.
Si es muy lento.
Y lo mismo.
Podríamos hacer.
Hacia la derecha.
Simplemente con esto.
Ya deberíamos poder.
Mover a nuestro personaje.
Vamos a ver.
Si lo podemos mover.
O si hay algún error.
Vale.
Hay algún error.
Porque.
El update.
Aquí lo hemos puesto.
Sí.
Vale.
Vamos a ver.
Porque.
No le gusta esto.
Vamos a ver.
Pero con eso.
En principio.
Veis que hay un error en la consola.
No puede leer las.
Properties of undefined.
Leyendo la X.
En.
This.
Mario.
X.
This.
Mario.
Y hemos guardado al Mario.
Ah.
No hemos guardado al Mario.
Vale.
Una cosa importante.
Si queremos mover este sprite.
Deberíamos guardar esto.
En un objeto.
Vale.
Así.
Hay un objeto.
Bueno.
En una variable.
Entonces.
Del juego.
Nosotros podemos crear tantas variables.
Esto lo podemos hacer de diferentes formas.
Por ejemplo.
Podríamos guardarlo aquí en una variable.
Entities.
¿No?
Y aquí en Entities.
Guardar al Mario.
Y tal.
Pero dentro del juego.
Podemos guardarlas.
Para simplificar.
Lo vamos a hacer ahora.
Sí.
Pero ya os digo que más adelante.
Porque esto se va complicando.
Vamos a.
Vamos a hacer esto.
De otra forma.
Pero por ahora.
Vamos a meterlo aquí.
En el disc.
Mario.
O sea.
En el juego.
Vamos a guardar en Mario.
No es buena idea.
Porque esto.
Normalmente va a ir creciendo.
Y puede haber colisión.
De llaves que ya existen.
Por eso puede ser mejor idea.
O tener un objeto.
Donde vamos a estar guardando.
Toda esta información.
O incluso.
En el disc.
Tener una.
Una.
Un método.
Una propiedad.
Que sea.
Dis.
Entities.
Por ejemplo.
Vale.
Que hagamos algo así.
Y que en Entities.
Tengamos al Mario.
A los enemigos.
Y todo esto.
Por ahora.
Vamos a dejarlo así.
Para simplificarlo.
Y que lo podamos hacer más rápido.
Vale.
Pero.
Como continuaremos con el Mario.
Lo iremos cambiando.
Y bueno.
Ya tenemos ahí al Mario.
Obviamente.
Se mueve.
Se mueve.
Lo cual no está mal.
Y no está mal la velocidad.
Pero sale.
Es un poco raro.
Vale.
Es un poco raro.
Primero.
Porque no tiene animaciones.
Segundo.
Porque va como el Robocop.
Vale.
Va hacia adelante.
Hacia atrás.
Entonces.
Vamos a crear primero las animaciones.
De que cuando se mueva.
Se mueva.
De verdad.
Que no se ponga ahí como a flotar.
Para que se mueva.
Y veamos.
Todas las posiciones estas.
¿Vale?
Todas estas posiciones de movimiento.
Y así vamos a ver.
Como funcionan exactamente las animaciones.
Las animaciones.
Las tenemos que indicar.
Igual que ya hemos cargado.
El Sprite Sheet.
Que es la imagen.
Que tiene todas las posiciones.
Ahora.
Tenemos que crear una animación.
Entonces.
Phaser.
Tiene una propiedad.
Que se llama.
Anims.
Y aquí podemos crear.
Todas las animaciones.
Que necesitemos.
También igual.
Tenemos que darle.
Una aquí.
Vamos a decirle.
Mario Walk.
Por ejemplo.
Podríamos decirle.
Mario Walk.
Que sea algo muy identificativo.
Que no vamos a repetir.
¿Vale?
Le tenemos que decir.
Todos los frames.
Que vamos a utilizar.
Y aquí.
Muy fácil.
Utilizamos.
El Generate Frame Numbers.
Y le tenemos que decir.
¿Cuál es el Sprite Sheet.
Que queremos utilizar?
Que es este de aquí.
El del Mario.
¿Vale?
Así que le decimos.
Del Mario.
Quiero que.
Me crees.
Una animación.
Que vaya.
Desde el frame.
Del cero.
En este caso.
Sería desde el.
¿Ves?
Este no sería.
El de andar.
Sería.
Uno.
Dos.
Y tres.
¿Vale?
La primera posición.
Sería.
O esta.
Esta.
Y esta.
Por ahora.
Vamos a empezar del cero.
Solo para que lo veas.
Y que veas que está mal.
Pero para que veas.
Le podemos decir.
¿Cuál es el frame?
El primero.
Y le podemos decir.
¿Cuál es el último?
Y lo que va a hacer es.
Ir de uno a otro.
Va a ir.
Va a ir moviéndose.
Entre uno y otro.
Conforme va moviéndose.
¿Vale?
Entonces.
Con esto hemos creado ya la animación.
Le podemos decir.
Además.
Que se repita.
Infinito.
¿Vale?
Le podemos decir.
Cuántas veces se tiene que repetir.
Esta animación.
Conforme se está ejecutando.
Si le decimos.
Menos uno.
Es que sería infinito.
Pero le podemos decir.
No.
Solo lo ejecutas.
Dos veces.
La animación.
Una vez.
Por ejemplo.
Si se muere el Mario.
No hace falta.
Que se repita constantemente.
Con que aparezca una vez la animación.
Y ya se queda quieto.
Pues ya estaría bien.
Pero en este caso.
Si que queremos.
Que conforme van dando.
Se vaya viendo la animación.
Y ahora además.
También tenemos que crear una animación.
Que sería la que.
Bueno.
Vamos a poner la animación.
De que se mueva.
Y ahora veremos otro error.
Las animaciones.
Una vez las hemos cargado.
¿Vale?
Que aquí tengo la animación.
Esta del Mario Walk.
Lo que voy a decirle.
Es bueno.
Pues si se mueve aquí.
Pues voy a decir.
Que el Mario.
La animación que tiene que ejecutar.
Es la del Mario Walk.
¿Vale?
Y ya está.
Mario Walk.
Y le pasamos aquí.
El true.
Que nunca me acuerdo.
A ver.
Anims.play.
No me acuerdo para que era el true.
Yo siempre le pasaba el true.
Face.
Anims.play.
Face.
Igual me lo decís en el chat.
Y más rápido que buscarlo.
No.
No lo han dicho.
Pues el.
Anims.play.
Esto me pasa también.
Por no utilizar el editor.
Porque con el editor.
Te le diría.
Ah.
Ignore if playing.
Claro.
Ignore if playing.
Si ya se está.
Claro.
Si ya se está reproduciendo.
Esa animación.
La ignora.
Eso es lo que.
Pero bueno.
En este caso.
Tampoco pasaría nada.
A ver.
Sí que tendría sentido.
Porque si ya se está ejecutando.
No queremos que vuelva.
Vuelva a reiniciarse.
Así que te dé sentido.
Se le pueden pasar más cosas.
Por ejemplo.
Le puedes decir.
Cuál es.
Le puedes pasar un objeto.
Con el frame rate.
Y todo esto.
Pero este frame rate.
También.
Si queréis por defecto.
Se lo podemos poner.
Aquí.
¿Vale?
Aquí este frame rate.
Ya le podéis decir.
El frame rate.
Es 12.
¿Esto qué quiere decir?
Pues es a la velocidad.
A la que se va a ejecutar la animación.
Ahora iremos cambiando.
Cambiando.
¿Vale?
Para que veáis un poco.
Como cambia esto.
Vale.
A ver ahora.
Vale.
Pues.
Ha sudado totalmente de mí.
¿Vale?
No se está ejecutando.
Vamos a ver.
El Mario Walk.
Anims.
Ah.
Porque solo lo he puesto en el de a la izquierda.
¿Vale?
A ver ahora.
A ver ahora.
Ahora.
Ahora me está fallando otra cosa.
Ahora veremos.
Ahora está fallando otra cosa.
Y no se está moviendo.
Y esto debe ser por.
Otro problema.
A ver.
A ver.
A ver.
A ver.
A ver.
¿Cuál es el problema que tenemos aquí?
Mario Walk.
Este.
Mario Anims.
Play.
Que aquí sí que lo estamos cargando.
El Create.
El Mario Walk.
La key está bien.
Con el Repeat.
Y.
Pero ahora no se lo mueve ni a la izquierda ni a la derecha.
A mí me dice que le falta la propiedad Duration.
En el.
En la animación.
No creo que le falte la.
O sea.
No creo que necesite un Duration.
Sí que es verdad que aquí.
Se le puede pasar el Frame Rate.
Pero no creo que.
No es el Frame Rate tampoco.
Puede ser que.
These Frames Generate.
A ver.
Los Frames están.
El Frame Rate.
El Repeat.
Anims.create.
Yo lo veo todo bien.
La key está bien.
Le estamos diciendo la key.
Le estamos diciendo el número de frames.
Es raro que.
A ver.
No me lo mueva.
O sea.
Mover.
Me lo debería mover.
A ver si movemos esto.
Ah.
Midu.
Para algún otro directo.
Podrías explicar.
Cómo subir documentos.
Como PDF o imágenes a la app.
Y de chat GPT cuarto.
Vi el vídeo donde usaste distintos modelos en local.
Y es bastante bueno.
No.
El Mario.anims está bien.
No es porque se está usando el disc.mario.
No.
Pero este disc.mario está bien.
Lo que.
Si hago aquí en disc.mario.anims.
Esto está bien.
Esto está bien.
Esta está bien.
Texture.
Mario is not found.
Espérate.
Porque.
Mario is not found.
Me dice que este Mario.
Que esta textura del Mario.
Aquí no está encontrada.
¿Por qué me dice que?
Ahora.
Ahora sí que al menos he visto el error.
Fijaos que me está diciendo aquí.
Que no me está encontrando.
La textura del Mario.
No está encontrada.
No encuentra.
Pero estamos cargando aquí el sprite sheet.
Generate frame numbers.
A ver si se me está olvidando aquí el generate frame numbers.
Generate frame numbers.
¿Ves?
Aquí está la ID.
Y esto debería estar bien.
Generate frame numbers.
Le decimos el.
Te faltó asignarla al disc.mario.
A ver.
No.
Eso está bien.
No es anims.create.
Eso también está bien.
Lo de create está bien.
A ver.
La función create no está asignada.
La función create no está asignada.
Pero la función create no hace falta asignarla.
O sea.
Esta está bien.
Dins.anims.create.
Esto está bien.
Tenemos la key.
Esto está bien.
Le tenemos que decir aquí.
La start end.
A ver.
Le voy a decir las correctas.
Pero bueno.
Esto no es.
El frame rate también está bien.
Ahora mover se mueve.
Pero porque aquí también.
A ver.
Mover se mueve.
Pero bueno.
Eso ya se movía.
Y aquí.
Lo es.
Inicializar.
Mario.anims.
Inicializar.
Ta ta ta.
No sé si.
Hostia.
Es que me está diciendo que se tiene que inicializar.
Ajá.
A ver.
¿Me falta alguna tontería?
Usa en el movimiento.
En la línea.
¿No sería dis.mario?
Vale.
Igual hay alguna línea que la he liado.
A ver.
39.
Esto no sería dis.mario.
Aquí hay que poner el.
No lo están moviendo.
Pero a ver.
Que sí.
Que sí.
Que sí.
Que sí.
Que lo estoy moviendo.
¿Veis?
Lo estoy moviendo.
¿Cuál es el problema?
El problema.
Es que cuando aquí.
Que esto debería ser.
Dis.mario.anims.play.
Y decirle.
Qué animación es la que tiene que mover.
No lo está haciendo.
¿Vale?
O sea.
Aquí.
Esto.
Debería ser así.
Entonces.
¿Cuál es el problema?
El problema.
Es que no lo está haciendo.
Sí.
Le podemos decir.
Le vamos a decir a chagepete un momento.
Porque igual es una tontería.
Igual es una tontería.
Vamos a decirle que haga su magia.
Chagepete.
Función.
¿Cuál es el error?
Bueno.
Si supiéramos cuál es el error.
Lo diría ahora mismo.
Dis.mario.
No lo estás asignando.
Pero que sí que está asignado.
Lo tenemos aquí.
El dis.mario.
Lo tenemos justamente aquí.
Asignado.
Pero ahí en el 64 no sería dis.mario.
No.
Porque esto.
Mirad.
Esto.
Lo que le estamos diciendo es que el Mario.
La animación.
La animación que queremos que el Mario tenga.
Es que tiene que ejecutar esta animación de aquí.
O sea.
Esto está bien.
No.
No puede ser.
No puede ser esta.
No puede ser esta.
Porque.
¿Veis?
O sea.
No es.
Le tenemos que decir que Mario.
Tiene que ejecutar una animación en concreto.
Entonces.
Encuentra.
El error.
De por qué.
No.
Se ve.
La animación.
Del Mario.
Andando.
Debe ser una tontería.
Debe ser una tontería.
¿Dónde le dijiste al Mario?
Que la.
Es Mario Walk.
Esta.
Es esta animación.
Esta.
En esta llave.
Es esta la llave.
Es esta llave.
Le invierte los sprites y cambia la izquierda.
No invierte los sprites.
Eso lo veremos ahora.
A ver.
El problema.
Es que no detiene la animación de Mario.
Cuando no se está presionando.
Pero eso no es así.
O sea.
Si.
Esto es.
Eso es importante.
El que no estamos deteniendo la.
La animación.
Pero no es el problema.
Sabes.
Esto de.
Este no es el problema.
Reproducirá la animación de caminar.
Mientras la tecla.
Pero es que este no es el problema.
Lo vamos a añadir.
Pero este no es el problema.
Es una tontería.
En alguna cosa.
Debe ser una tontería.
Es una tontería.
Pero veis.
Este no es el problema.
Le voy a decir.
Ese.
Ese.
No es el problema.
Inútil.
Inútil.
A ver.
A ver qué me dice.
Echa un vistazo a la consola.
La consola me está diciendo que no encuentra la.
La.
No puede.
La de duration.
Aquí me está diciendo la de duration.
Ahí está.
Animation.
Play.
Bueno.
Es verdad.
Es verdad.
Pero fijaos.
Que este es otro problema ya.
Que este es otro problema.
Animes.
Play.
Donde me dice que falta duration.
Ese no es el problema.
Vale.
Me está diciendo que a lo mejor.
Es que porque estoy.
Mira.
Estoy cargando el Mario.
Antes de la animación.
Esto está bien.
Luego creamos la animación aquí.
Que.
La sintaxis.
La veo bien.
A ver.
Al canal.
Hemos corregido el orden de los frames.
El orden de los frames.
Tampoco es un problema.
Luego en el create.
Hostia.
Espérate.
Es que espérate.
Ay.
Ya está.
Ya está.
Ya está.
Ya está.
Me muero.
Medium.
Línea 47.
Creo que es este el problema.
Creo que es este el problema.
El problema es que no se hacía en el preload.
Lo primero.
Lo primero.
ChatGPT no nos ha ayudado a una mierda.
¿Vale?
Lo primero es que ChatGPT no nos ha ayudado a una mierda.
El problema.
No es que esto estuviese.
Estuviese.
O sea.
Estaba mal.
Pero porque no lo hemos utilizado.
No es en el preload que hay que hacer esto.
Había que hacerlo en el create.
Os voy a decir cuál es el problema.
El problema es que muchas veces.
Lo dije tres veces.
Bueno.
Fran Meza.
Pero ve toda la gente que me escribe en el chat.
El problema es que muchas veces.
Tengo la letra tan grande.
Tan grande.
Que.
¿Qué pasa?
Que estaba viendo esto aquí.
Fijado.
O sea.
Me estaba.
Mejor a tu pro.
O sea.
La base de culpa mía.
El tema es.
El tema es que no sé por qué.
Lo estaba viendo mal.
Claro.
Había.
Tenía que estar en el create.
No tenía que estar en el preload.
Ese es el problema.
Estaba todo bien.
El problema es que no estaba en el sitio correcto.
Ya está.
Ya está.
No había que hacer nada más.
Y fijaos que ahora.
Cuando anda.
Ahora anda perfectamente.
El problema obviamente es que va hacia izquierda y a derecha.
Al revés.
Aquí esto es interesante.
El tema de los frames.
Fijaos.
Si yo pongo aquí esto.
Me va a quitar en el frame rate también.
Fijaos.
¿Vale?
Veis que hay como cosas muy raras.
Lo primero es que la animación es como demasiado rápida.
Eso es lo primero.
¿No?
La animación es demasiado rápida.
Entonces para hacer que la animación sea más lenta.
Le podemos cambiar el frame rate.
¿Cuánto tiene que durar cada uno de las imágenes en cada frame?
Y así vais viendo que ahora dura más.
El problema es que fíjate que se cuela la de la muerte.
Porque si vemos al Mario podéis ver que si hacemos todas se cuela esta de aquí en medio.
Que no tiene sentido.
Entonces tenemos que indicarle cuáles son los frames en correcto que tienen que hacer.
Los frames serían el 1, el 2 y el 3.
Y podemos hacer que empiece por el 3.
Pero acabe por el 1.
¿Sabes?
O sea, podemos decirle no.
Empieza a través de este.
Pero luego lo que quiero es que termine ese otro.
O sea, empieza por el 3 y termina en el 1.
O sea, empiezas por el 3 y terminas en este.
Y solo estos dos.
O en el 2.
Podemos hacer 0, 1, 2.
Vamos a probar con el...
Empiece por el 3.
Y acabe por el 2.
O sea, el primer frame sería el 3.
Y luego el 2.
Y vamos a ver.
¿Ves?
Y queda así.
Ahora sí que queda que parece que están dando correctamente.
¿Ok?
Eso es lo que tenemos que hacer.
También podemos probar con el 1 y el 3, por ejemplo.
Y hará la misma animación, solo que empezará diferente.
O sea, que también podéis hacerlo así.
Lo importante es que utilicemos los frames correctos, que son esos 3.
¿Vale?
Así que ahora ya tendríamos esto.
Ahora por fin tenemos bien la animación.
Tendríamos que crear otra animación.
Que sea la del key Mario idl.
O sea, cuando no está haciendo nada.
Que en frames no tenemos que hacer nada raro.
Le podemos decir que utilice el Mario y el frame en concreto.
No hace falta que hagamos el generate frame numbers.
Porque esto sirve para crear el array por ti.
Fíjate que el array que queremos crear en realidad es.
Oye, del sprite Mario quiero que utilices el frame 0.
Y tú aquí lo que puedes hacer.
Esto lo podríamos hacer a mano, por ejemplo.
Esto que hemos hecho aquí.
Esto lo podríamos hacer a mano.
Podríamos decirle.
Los frames que tienes que utilizar son.
Key Mario 1.
Tal, tal.
Esto lo puedes hacer así a mano.
Pero normalmente es un poco rollo.
Y esto pues funcionaría.
Pero como no queremos tener que hacerlo a mano.
Podemos utilizar este método de aquí.
Que nos simplifica bastante el trabajo.
Le decimos.
Genera todos los frames.
Utilizando la key de Mario.
Que es este split sheet.
El sprite que hemos cargado.
Y estos son los frames que tienes que utilizar.
Y si no.
Como en este caso solo necesitamos un frame.
Que es el 0.
El del Mario cuando no está haciendo nada.
Para que cuando esté quieto.
Aparezca así.
Porque si no.
¿Cuál es el problema?
El problema puede ser.
Claro, ahora porque hemos hecho esto.
Ves que pones.
Mario set frame 0.
No pasa nada.
Pero el problema que podríamos tener.
Es que nosotros nos movamos.
Y se quede moviéndose.
Para evitar que se quede moviendo.
Lo que deberíamos hacer.
Es decir.
Oye.
Cuando.
Si no estamos pulsando.
Ni la izquierda.
Ni la derecha.
Le vamos a decir.
Que el Mario.
Ejecute la animación.
Entre comillas.
Del Mario Idle.
Y así cuando terminemos de ejecutar.
¿Vale?
Va a ejecutar otra animación.
Que en este caso es esta.
Pero puede ser una animación de verdad.
En la que el personaje esté respirando.
Por ejemplo.
¿Vale?
Para voltear el sprite.
Esto lo hacemos fácil.
Aquí lo que vamos a hacer es.
Girarlo.
Le podemos decir.
Que si va a la izquierda.
La X nos la gire.
¿Vale?
Le vamos a decir.
Que lo gire.
Y así girará el sprite.
Hacia el otro lado.
Y por otro lado.
Si aquí.
Lo.
Si vamos a la derecha.
Le vamos a decir.
Que lo deje de girar.
Y ya está.
Con esto ahora.
Vamos para la derecha.
Y para la izquierda.
Y estamos girando totalmente el personaje.
Con solo una línea de código.
Ya lo estamos moviendo de izquierda a derecha.
Ahora podríamos añadir.
La animación del salto también.
De lo mismo.
Como hemos hecho todas estas.
Como tenemos al Mario aquí.
Con la del salto.
Copiamos todo esto.
Lo pegamos.
Y le decimos.
Que el frame.
Es el 0.
1.
2.
2.
3.
4.
5.
Pues le decimos.
Que el frame 5.
Es el Mario del salto.
Y aquí.
Entre todas estas.
Que tenemos por aquí.
Pues le podemos decir.
Bueno.
Esto al final.
Como también queremos.
Que.
Que se pueda seguir moviendo.
A izquierda a derecha.
Aunque salte y tal.
Esto lo podemos hacer.
Añadido.
Esto ahora está mal.
Porque no tengo gravedad.
Pero ahora añadiremos gravedad.
¿Vale?
Pero al menos para que veamos.
Que la animación funciona.
Vamos a decir.
Que el Mario.
Ejecute el salto.
¿Vale?
Que se mueva para arriba.
Entonces.
Cuando hagamos así.
¿Vale?
No está bien.
No está bien.
Porque debería bajar.
Pero fijaos que la animación.
La hace bien.
¿No?
Y entonces.
Se sigue moviendo.
Y tal.
Ahora cuando pongamos gravedad.
Esto desaparecerá.
¿Vale?
Pero al menos tendríamos esto.
Ahora vamos a añadir la gravedad.
Que está bastante interesante.
No puede haber dos animaciones a la vez.
En el play.
No puede haber dos animaciones.
Porque solo responde a un sprite.
Entonces no puede haber dos animaciones a la vez.
Sí que en el play.
O sea.
Esta animación.
Se ejecutan a nivel del objeto del Mario.
O sea.
Podemos tener más de una animación en el juego a la vez.
Pero esta animación.
Se la estamos poniendo al Mario.
Luego veremos que tendremos animaciones para las monedas.
Para los enemigos.
Y todo esto.
Lo he comentado de antes.
El repeat menos uno no para de moverse.
Necesito poner repeat uno para que se pare de mover.
Pero es que.
Algo raro estás haciendo.
Porque fíjate.
Que cuando dejo.
Claro.
Lo que te debe faltar en realidad es este código.
En el que una vez que no estás pulsando ni la izquierda ni la derecha.
Tienes que parar la animación.
Y volver a la anterior.
Porque si no.
Se queda ejecutándose la animación de antes.
¿Vale?
¿Se pueden sustituir los eventos de Leaf por Switch?
Sí que lo podéis hacer.
Sin ningún problema.
Aunque aquí lo complicará después bastante.
Si empezáis a cambiar bastante Switch.
Genial.
Llegué un poco tarde.
Pero ya quiero repetir el vídeo.
Gracias.
Cada frame al renderizarse.
No afecta el rendimiento del navegador.
Pero es que.
Afecta el rendimiento.
Pues si haces demasiadas cosas.
En el cada frame.
Afectará el rendimiento.
Pero es que.
Es que es lo que hay.
Es que no hay otra.
Se tiene que ejecutar en cada frame.
Si tú lo que quieres.
Es que.
Se.
Sea fluido.
Tienes que hacerlo.
Si tú lo que quieres.
Es que responda al juego.
Como en tiempo real.
Se tiene que ejecutar en cada frame.
No hay otra.
Lo que sí que vas a tener que hacer.
Es que.
Este optimizado.
Que evites hacer muchas cosas.
Y todo esto.
¿Vale?
Porque si no.
Pues tendrías problemas.
¿Cómo se maneja lo de la cámara.
Para mover los elementos?
Eso lo vamos a ver después.
Así que no te preocupes.
Que lo veremos.
Esto se puede subir a una página.
A ver.
Si este tema es lectivos.
Si es por aprender educación.
No vas a tener problemas.
Si vas a hacer mucha publicidad.
De esto.
Y vas a ganar dinero.
Pues igual vas a tener problemas.
¿Vale?
Pero.
Porque estés aprendiendo con esto.
No te va a pasar nada.
Bueno.
Vamos con el tema de las físicas.
El tema de las físicas.
Por suerte.
Hay una cosa muy chula.
Que tiene.
Que tiene este motor.
Y es que ya tiene.
Unas opciones.
Que son las de físicas.
Y aquí le podemos decir.
Que por defecto.
Se comporte.
Como un arcade.
Pero podéis decir.
Que se comporte.
Como diferentes tipos de juegos.
¿Vale?
Tenéis.
De físicas.
Hay como diferentes.
Predeterminados.
En los que ya.
Os da.
Algunos valores.
¿Vale?
A ver si aquí en la configuración lo enseño.
No me acuerdo de todos.
Pero está.
Arcade.
Impacto.
Materia.
¿Vale?
Hay diferentes.
Son esos tres.
Los que tenéis disponibles.
Y esto lo que te da son unos valores por defecto.
Que ya te sirven.
Para configurar la gravedad.
Y todo esto.
En este caso vamos a ponerle arcade.
Pero aún así.
Aunque pongáis arcade.
Podemos.
Podemos como ampliar.
La configuración.
Podéis poner.
Que la gravedad.
Hacia el eje vertical.
O sea.
Hacia abajo.
Pues tenga una fuerza.
De 300.
Y esto dependiendo de cada juego.
Pues querréis.
Que tenga más.
Que tenga menos.
Para que se sienta como.
Pues más pesado.
Menos pesado.
Esto depende un poco.
De lo que queráis hacer.
Ahí vais jugando con cada uno de los valores.
Y también podéis poner.
El modo debug.
Le podéis poner true.
O false.
Para que.
Os dé más información.
Sobre.
Sobre esto.
Nosotros por ahora.
Vamos a poner false.
Que no vamos a tener ningún problema.
Y vamos a añadirle directamente.
Las físicas.
Al bueno de Mario.
Un problema.
Que al menos yo personalmente.
Le veo a esto de las físicas.
Es que.
Tenéis que cambiar.
Como estáis cargando.
Los personajes.
O sea.
Esto es como lo estamos haciendo antes.
Y ahora.
Vamos a tener que.
Indicarle.
Otra forma diferente.
Ahora.
En lugar de cargarlo así.
Para que tenga físicas.
Lo tenemos que.
Le tenemos que decir.
Que el juego.
En el subsistema de físicas.
Vamos a añadir.
Un sprite.
Vale.
Entonces.
Fijaos que.
Es parecido.
Pero va a cambiar alguna cosa.
Por ejemplo.
Este.
Si que vamos a tener.
Otra vez.
La x.
Y la y.
Vale.
Vamos a decirle.
Exactamente lo mismo.
Como lo teníamos igual.
Vale.
Esto lo vamos a hacer.
Exactamente igual.
Y le podemos decir.
Otra vez.
El origen.
Esto funciona exactamente igual.
Pero le podemos decir ahora.
La gravedad que tendría.
Este personaje.
¿No?
Y lo bueno de esto.
Es que.
Le podríamos llegar a decir.
Por ejemplo.
Pues que tenga más gravedad.
Que otra cosa.
O sea.
El juego en general.
Tiene una gravedad.
Pero este personaje.
Pues por lo que sea.
Es más pesado.
Y queremos que tenga más gravedad.
¿No?
Pues lo podemos hacer.
Luego lo haremos.
Para que veáis un ejemplo.
Vamos a subir.
Ahora el Mario.
Pues veis que desaparece.
Porque como tiene gravedad.
¿Vale?
Pues se cae.
Y no se choca con nada.
Porque ahora mismo.
Hemos puesto gravedad.
Pero no hemos puesto.
No hemos puesto.
Como se tiene que comportar.
Cuando colisione con algo.
Entonces fíjate.
Si lo.
Lo voy a poner más arriba.
¿Vale?
Vamos a ponerlo en el 100.
Y así lo veréis caer.
¿Veis que está cayendo?
Pero claro.
Así.
Si la gravedad.
Le dais 10.000.
Pues debería.
Bueno.
No lo vamos a ver caer.
Porque a lo mejor.
¿Ves?
Cae.
¡Pum!
Inmediato.
Si le ponemos un poquito más.
Pues vamos a ver que cada vez.
Cae un poquito más rápido.
Mira.
Voy a ir.
Voy a ir haciendo.
Subiendo un poco.
Para que veáis.
Pero veis que cada vez.
Como que cae más rápido.
Le vamos subiendo la.
Bueno.
Ahora.
Eso es porque.
Me pilla los cambios tarde.
No es porque no.
Pero veis que ahora cada vez.
Porque habrá pillado.
Un momento.
En el que estaba escribiendo.
Y se ha guardado.
Y lo ha visto.
Pero bueno.
Aquí le estáis diciendo la gravedad.
La gravedad por defecto.
¿Vale?
Pero que sepáis que cada personaje.
Cada bicho.
Que le pongáis.
Le vais a poder cambiar la gravedad.
Sin ningún tipo de problema.
Ahora.
El problema.
Es que.
Nuestro personaje.
Desaparece.
Tenemos que hacer.
Que el suelo.
Tenga.
Tenga colisión.
O sea.
Que tenga una física.
En la que retenga.
Al Mario.
¿No?
Que de alguna forma.
Diga.
Vale.
Esto es.
El suelo.
Y de aquí.
No puede pasar.
Así que.
Vamos a hacer.
Que este tile sprite.
Que tenemos por aquí.
Vamos a crear.
Un disc floor.
Y vamos a crear.
Como el suelo.
Va a ser.
Ahora solo tenemos un suelo.
Pero tendremos más suelos.
¿Por qué?
Porque el suelo.
A veces para.
Y hay un agujero.
En el que puedes saltar.
Y todo esto.
Por ejemplo.
Aquí.
Si le ponemos.
Que el width.
Voy a poner.
200.
Por decir algo.
¿Vale?
O menos.
Vamos a poner 50.
¿Ves?
El suelo.
Debería ser.
Un.
Un múltiplo.
Para que quede bien.
¿Vale?
Fijaos.
Ahí el suelo.
Pero podemos poner.
Otro suelo al lado.
Para que tengas que saltar.
Para llegar.
Entonces.
Por ejemplo.
Vamos a poner este suelo.
Un poquito más adelante.
¿Veis?
Y aquí hay un hueco.
Entonces.
Yo quiero.
Que en el suelo.
Que está.
Sí que se pueda quedar.
Pero en el hueco.
Que se caiga el Mario.
Así que vamos a tener que agrupar.
Todos los suelos.
Para que.
Estén dentro de las físicas.
Pero en lugar de tener que hacerlo.
Uno a uno.
Que va a ser un poco rollo.
Lo que vamos a decir.
Vamos a crear.
El suelo.
Y vamos a decirle.
Que en las físicas.
Vamos a añadir.
Un grupo estático.
Estático.
¿Por qué?
Porque es un grupo.
Que está siempre ahí quieto.
Que no se mueve para nada.
Además.
No vamos a estar añadiendo.
Dinámicamente.
Más suelos.
Queremos que sea un grupo estático.
Y ahí vamos a añadir.
Todos los suelos.
Que vamos a hacer.
Entonces.
Vamos a añadir.
El primer suelo.
¿Vale?
Dis.floor.
Y le decimos.
Vale.
Créame un suelo.
Y le vamos a pasar.
Por la configuración.
Que teníamos justamente.
Aquí.
¿Vale?
Le decimos.
En la posición cero.
En la i.
Esta.
Y le decimos.
Que sea.
El floor bricks.
El origen.
Pues nada.
Exactamente.
El mismo que teníamos antes.
Y ahora veréis otra cosa.
Que es bastante importante.
Pero.
Este sería uno.
¿Vale?
Esto lo quitamos.
Y esto.
Lo volvemos a hacer.
Para.
Este de aquí.
Este de aquí.
Que estaba un poquito.
Más adelante.
¿Vale?
Esto lo añadimos un poquito más adelante.
Así.
Create cero.
Tal.
Vale.
Set origin.
Creo que está bien.
Y ya.
Ahora.
El tema es que.
Espérate.
Porque mi Mario.
Está por aquí.
El.
El floor.
Vale.
Lo tenemos por aquí.
Ya añadimos ahí el.
El Mario.
Vale.
Fíjate que todavía.
Se pasa.
Esto es un poco raro.
Porque.
A ver si con el refresh body.
Ya me lo.
Pues no.
Me lo está pasando.
A ver.
¿Por qué me lo está pasando?
¿Por qué mi Mario.
Se lo está pasando por encima?
¿Se me ha olvidado algo aquí?
Espérate que igual se me ha olvidado algo.
Del disfloor.
Algo se me ha olvidado.
Ah.
Coño.
Se me ha olvidado algo.
Se me ha olvidado algo.
Se me ha olvidado algo.
Aparte de todo esto.
Que sí.
Que esto es interesante.
Además lo del refresh body también.
Porque si no.
A veces hay problemas.
Eso lo añadimos después.
Se me ha olvidado indicarle.
Que tienen que colisionar.
El Mario.
Y el suelo.
Claro.
Que yo he creado todo esto.
Está bien.
He creado el suelo.
En la física.
Pero tenemos que crear las colisiones.
Entonces.
Lo que tenemos que decirle.
Es que en este mundo de físicas.
De nuestro juego.
Vamos a añadir.
Una colisión.
De el Mario.
Con el suelo.
¿Vale?
Entonces.
Todo este grupo.
Ahora.
Bueno.
Ha quedado un poco raro.
Esto seguramente.
Por cómo se está renderizando el suelo.
Eso lo veremos ahora.
Eso lo arreglamos ahora.
En un momentito.
Porque seguramente.
Se está renderizando más.
De lo que debía.
Seguramente aquí.
Vamos a ajustar esto.
Claro.
¿Veis?
Ahí queda bien.
Ahora lo ajustamos.
Eso es lo del centro.
Que os comentaba antes.
Que se está renderizando regular.
Pero no pasa nada.
Eso ahora lo arreglamos.
Y lo ajustamos.
Lo ajustamos bien.
Seguramente.
Aquí en la altura.
Tenemos que hacer algo.
Lo importante es que ahora.
El elemento.
Aunque visualmente.
Parece que está flotando.
En realidad.
El elemento.
Lo está haciendo correctamente.
Lo que vamos a tener que hacer.
Para asegurarnos.
Que esto lo hace bien.
Es ajustar.
Esto.
Esto es en la.
En el cero.
Seguramente.
Claro.
Esto estaría un poco más arriba.
Bueno.
16.
¿Vale?
Eso ya.
Ahora sí que lo tendríamos aquí.
¿Vale?
Y ahora sí que quedaría bien.
Ahora.
Aquí.
Sí que es verdad.
Que esto tendría que estar.
Un poquito más separado.
Y.
Ahí lo tenemos.
Hostia.
Pero aquí todavía está.
Ahí me debería.
Debería caer.
Y está cayendo más adelante.
Puede ser que sea por la escala.
Ahora estoy pensando.
Si es por la resolución.
¿Sabes?
O sea.
La imagen.
Que aunque la imagen.
Parece que es una.
Parece que es una.
Pero claro.
El hecho de que esté pillando.
Aunque nosotros la imagen.
La veamos de una forma.
Ah.
Espérate.
Que esto es lo que os decía.
Del refresh body.
Esto del refresh body.
Puede ser que sea esto.
Efectivamente.
Es eso.
Esto del refresh body.
Es una cosa muy rara.
Porque.
Es como para sincronizar.
¿Ves?
Dice.
Sincroniza la posición.
Y el tamaño.
De.
De ese elemento.
Con el objeto del juego.
¿No?
No necesita llamar esto.
Para.
Cuerpos que sean dinámicos.
Porque ocurre.
De forma automática.
Pero.
Si el cuerpo es estático.
Que es el caso.
Es una forma útil.
De modificar la posición.
De un cuerpo estático.
En un mundo físico.
Claro.
Es un poco raro.
El tema de tener que llamar.
El refresh body.
Y nada más.
Nada más crearlo.
¿Sabes?
Es como.
Como contra.
Contradictorio.
¿No?
Pero.
Se supone que es esto.
Que para.
Porque a lo mejor tarda un momento.
Y ahora sí que.
Ahora sí que lo está pillando correctamente.
¿Vale?
Ahora sí.
O sea que no es un tema tanto visual.
Sino que era un tema del refresh body.
Que para actualizar correctamente esto.
Eh.
Lo tenías que llamar.
Pero.
Ya os digo que es raro.
Porque realmente no hemos cambiado ningún parámetro ni nada.
Sino que realmente lo que hemos hecho.
Es.
Inicializarlo aquí.
Y hay que llamar refresh body.
Para que pille correctamente la posición de las físicas.
¿Vale?
Si no vais a tener algún problema.
Para que lo sepáis.
Vale.
Entonces.
Ya tendríamos lo que serían las colisiones.
Pero hay una colisión.
Que es una tontería.
Pero que se nos ha.
No sé si os habéis dado cuenta.
Que se nos ha escapado.
Y es que.
Sí que es verdad que el Mario.
Hostia.
Otra vez.
Ahora no sé si es que la he liado con algo.
Ahí.
Ahora.
Vale.
Eh.
Fijaos.
Que el Mario.
Si se cae por aquí.
Por aquí.
Sí que se cae.
Pero.
Por aquí.
Se escapa.
Se escapa y desaparece.
Ya no puede volver.
¿Por qué?
Porque aquí.
Si yo me caigo por aquí.
En realidad esto me estoy matando.
Porque debajo no hay suelo.
Entonces.
Tenemos que evitar que el Mario.
Pueda salir del universo.
¿Vale?
Para hacer eso.
Una cosa que podemos hacer aquí.
Que tenemos el Mario.
Es indicarle.
Que se tiene que chocar.
Con los.
Con los límites que tendríamos en nuestro mundo.
¿Vale?
Con nuestro mundo.
Ahora.
El tema.
Es que.
Fijaos.
Que solo con este cambio ya.
Ya no puede pasar.
O sea.
Tan fácil.
Con una línea.
Ya lo que va a hacer.
Es que no pueda salir.
Ni por la izquierda.
Ni por la derecha.
El problema.
Es que tampoco.
Saldrá por abajo.
No hay problema.
Porque esto.
Lo detectaremos.
Cuando vaya a pasar por abajo.
Lo detectaremos.
Lo desactivaremos.
Y mataremos al personaje.
Pero esto al menos.
Lo que nos da.
Es el hecho de que no puede.
No puede salir por los extremos de la pantalla.
Que es una cosa que normalmente.
Hay que hacer un montón de cálculos.
Es bastante complicado.
Pero con esto ya.
Nos lo simplifica.
¿Vale?
Ahora que tenemos esto.
Al menos.
Vamos.
Ya tendríamos aquí.
El tema de.
Fijaos.
Que ahora.
Si que salta.
Lo dejo pulsado.
Y salta un montón.
Pero.
La gravedad.
Lo trae hacia abajo.
O sea.
Ahora sí que es verdad.
Que al menos.
Trae hacia abajo al personaje.
Que esto antes no lo hacía.
Y sabía.
Se iba.
Por los cerros de Úbeda.
Así que.
Es bastante bueno.
Que.
Aunque es verdad.
Que lo dejo pulsado.
Y esto se pone a subir.
Por todos los sitios.
Pero al menos.
Está funcionando correctamente.
¿Cómo hacemos?
El salto bien.
Porque ahora mismo.
Está regulinchis.
Bueno.
Lo que vamos a hacer.
Es.
Aquí.
Que estamos diciendo.
Si pulsábamos abajo.
Esto está bien.
Pero ahora lo bueno.
Es que al activar las físicas.
Y que el Mario tenga físicas.
Vamos a poder detectar.
Si está tocando algo por debajo.
No solo el suelo.
Porque más adelante.
Puede estar debajo.
Puede estar encima de una plataforma.
Por ejemplo.
Pues vamos a decirle.
Que si el Mario.
Está.
Su cuerpo.
O sea.
El elemento.
Está tocando.
Por abajo.
¿Vale?
O sea.
Que está tocando por abajo.
Lo que vamos a hacer.
Es que pueda.
Dar este salto.
El problema.
Es que ahora.
Fíjate.
Que hace esto.
Da un pequeño salto.
Y ya está.
¿No?
Da como un saltito.
Y ya está.
¿Por qué?
Porque el salto.
Solo está indicando.
Cuánta posición.
Se tiene que mover.
Hacia arriba.
Y claro.
Tampoco tiene sentido.
Que haga esto.
¿No?
Que diga.
Ah no.
De repente.
Pum.
Hacia arriba.
O vamos a hacerlo un poco menos.
Esto lo que le está haciendo.
En realidad.
Es cambiar la posición.
¿Vale?
Y fíjate que da.
Como un salto.
No tiene sentido.
Lo que queremos.
En realidad.
Cuando impulsemos.
Al Mario.
No es cambiarle la posición.
Sino darle.
Una velocidad.
Así que lo que le tenemos que decir.
Es que queremos.
Que la velocidad.
De forma vertical.
Hacia arriba.
El salto.
Le vamos a poner.
Menos 300.
Que puede ser.
Porque.
Le hemos puesto 300 a gravedad.
Y esto al final.
Sería como.
Ir contra la gravedad.
Para que vuelva.
Como en un salto.
Bastante normal.
Pero esto lo que va a hacer.
Es dejarme mal.
A ver.
¿Qué he hecho aquí?
Setvelocity.
No sé.
Hay que ponerla.
Yo creo que sí.
Que hay que ponerla ahí.
A ver.
Es 300.
Ahora sí.
Ahora sí.
Lo que pasa.
Es que el salto.
Es un poco bestia.
Vale.
Pero al menos.
Ahora sí que está haciendo el salto.
Vale.
Creo que es que a veces.
El problema que tengo.
Es que a veces.
Como que pilla los cambios.
Regular.
Vale.
Esto que podemos hacer.
Podemos añadirle gravedad.
Al Mario.
Como lo que hemos dicho antes.
Lo de setgravity.
Setgravity.
Para que utilice una gravedad.
Y así.
Ajuste mejor.
¿Ves?
Ahora está mejor.
Podemos hacer.
Lo podemos ir ajustando.
Para que tenga una gravedad.
Que así.
Cuanta más gravedad.
Tiene el personaje.
Más le cuesta.
Más le cuesta saltar.
¿No?
Por eso.
Claro.
Si le ponemos una de mil.
Pues lo que vamos a ver.
Es que salta muy poquito.
Si le ponemos una de cien.
Pues va a parecer que está en la luna.
¿Vale?
Aquí es como podemos ajustar.
De hecho.
Una cosa muy interesante.
Es que a veces.
En muchos juegos.
Se juega con esto.
Para hacer que los personajes.
Salten más o menos.
Seguramente.
Recordarás.
Algunos personajes.
Que dices.
¿Por qué este personaje salta más?
¿Cómo lo hace por detrás?
Pues hay veces.
Que simplemente lo que hacen.
Es ajustarle la gravedad del personaje.
Y ya está.
Y así salta un poquito más.
Es bastante interesante.
Pero para que sepas.
Bueno.
Pues yo creo que.
Algo así.
Con 300.
Ya queda bastante bien.
Y ya tendríamos aquí la animación.
No me acuerdo si.
Bueno.
Ahora la animación.
Fíjate que la animación.
El problema que tenemos.
Es que me está haciendo lo del Mario Walk este.
Porque está diciendo.
Si Mario Walk.
No sé qué.
A ver.
Una cosa que podríamos hacer.
Para asegurarnos.
Que hace el salto correctamente.
Claro.
Porque no sé si.
Cuando salta.
No sé si debería aparecer.
La animación.
Solo la del salto.
O también la de moverse.
Eso lo podríamos ver.
Bueno.
No es muy importante.
Yo creo que la de moverse.
Puede tener sentido.
Pero no lo sé.
Si no.
Aquí jugando con esto.
Se puede.
Se puede llegar.
Ahora la cámara.
La cámara.
¿Vale?
Qué bien está físicamente ese Mario.
No se cansa de correr.
No.
Totalmente.
Si pasa rápido por el sitio.
Se cae.
Da la impresión que solo se cae.
Si se queda quieto en la parte sin el suelo.
Claro.
Como tiene gravedad.
Como tiene gravedad.
Depende de la gravedad.
Si al final.
Claro.
Si te quedas.
Pues sí se caerá.
Pero esto también pasa en el juego del Mario.
Al final.
Si tú vas muy rápido.
Puede ser que va cayendo.
Y resulta que no se cae.
Porque todavía se va suficientemente rápido.
Eso también se podría ajustar.
Yo creo que en este caso.
Está.
Se debería ajustar mejor.
¿Sabes?
Porque creo que.
Debería empezar a caerse antes.
Fíjate que aquí.
Aquí.
Aunque está un pixel.
Seguramente debería caerse un poquito antes.
¿Vale?
Para que no pase lo que dices.
¿No?
Porque hay muy poco espacio.
Entonces creo que.
Debería mejor la colisión.
Que ajustarse un poquito más.
Para hacer que realmente.
Haya ahí un poquito más.
O que haya un poquito más de separación.
¿Vale?
Si no.
Lo que podemos hacer.
Si añadimos un poquito más de separación.
No pasará.
Pero no.
Habría que ajustarlo un poquito más.
En el Mario.
Original pasa.
¿Eh?
Que si está muy cerca.
Y tú vas andando.
Verás que.
Que no se cae.
O sea.
Pasa exactamente lo mismo en el Mario.
Lo que pasa es que creo que aquí habría que ajustarlo un poco más.
La cámara.
Que normalmente es una cosa bastante difícil.
Es bastante fácil.
En un juego de plataformas para phaser.
Porque fijaos.
Ahora mismo.
La cámara es estática.
Está así.
Y no hay nada que hacer.
Pero imagínate.
El Mario.
Mario.
Debería ir hacia la derecha.
Y que la cámara le siga.
Bueno.
Pues vamos a hacer algo.
Nos vamos a ir aquí a create.
Y vamos a hacer.
Diferentes cosas.
Lo primero.
Vamos a añadir.
Que en las físicas.
El mundo.
Vamos a indicarle.
Cuáles son los límites.
Que tenemos este mundo.
Le vamos a decir.
El límite de la horizontal.
Empieza en la X.
¿Vale?
Y le vamos a decir.
Hasta dónde tiene que llegar.
Tiene que llegar.
Pues aquí le podemos decir.
2000.
Le podemos decir lo que queráis.
Como de largo queráis que sea el mundo.
Y luego le podemos decir también la altura.
Nosotros la altura.
Le podemos decir.
Que sea la misma configuración.
Que nuestro juego.
Pero.
Pero.
Hay veces que hay juegos.
Como por ejemplo Super Mario.
Que en realidad.
Más para arriba.
También tienen.
Tienen.
Tienen contenido.
Nosotros.
Ahora.
Lo vamos a limitar.
Pero más adelante.
Quizás tendría sentido.
Que en lugar de poner.
La misma altura que el juego.
A lo mejor.
El límite es 500.
¿Vale?
Porque el mapeado es más grande.
Solo para que lo sepáis.
Que ahora.
Lo estamos limitando.
Pero no tiene por qué ser siempre así.
Entonces.
Lo que le estamos indicando aquí es.
Como.
El punto inicial.
Y el punto final.
De.
Cuáles serían los límites.
De nuestro mundo.
Y esto lo que va a hacer.
Es que.
Va a limitar.
Hasta.
Hasta dónde.
Tiene que moverse el personaje.
Fijaos que ahora.
El personaje.
Sí que se puede mover para la derecha.
¿Por qué?
Porque le hemos dicho que.
El límite.
Va más allá.
Por lo tanto.
Si le quitamos esto.
Fijaos.
Que si se lo quito.
Y le digo.
Venga.
Muévete.
¿Ves?
Como ese es el límite.
Del mundo.
Que estamos viendo.
No puede moverse más allá.
Porque le hemos dicho.
Que va a colisionar.
Con los límites.
De nuestro mundo.
Pero le vamos a decir.
Que el mundo.
Que vamos a crearle.
A nuestro amigo Mario.
Va más allá.
Y que va a terminar.
2000 píxeles.
Hacia la derecha.
Y por lo tanto.
Ahora.
Sí que va a permitirle.
Seguir.
Porque el juego.
Continúa a la derecha.
Y necesitamos que vaya.
¿Vale?
Entonces.
¿Dónde debería estar el límite del 2000?
Pues.
Obviamente.
Después del final.
Donde está el castillo.
Y la banderita.
Pues.
Después de eso.
Ahí tendríamos el límite.
Ahora.
Aparte de eso.
Ahora que ya tenemos los límites.
Lo que le vamos a decir es.
También los límites.
De la cámara.
Porque vamos a decirle.
Que el juego.
Va a tener cámaras.
Y la cámara principal.
Que es la main.
Vamos a decirle.
Cuáles son sus límites.
Los límites van a ser.
Exactamente los mismos.
Que tenemos en nuestro mundo.
O sea.
La cámara va a llegar.
Hasta el final de nuestro mundo.
Pero ahora.
Le tenemos que decir.
Bueno.
Y la cámara.
Cuando se mueve.
¿Qué es lo que tiene que seguir?
Pues muy fácil.
Le decimos que la cámara principal.
Tiene que.
Seguir.
Al Mario.
¿Vale?
Tan fácil.
Como esto.
Ahora.
Si vamos para adelante.
Ya tenemos.
Nuestra cámara.
Perfecta.
Como va hacia adelante.
Y hacia atrás.
Perfectamente.
Sin ningún tipo de problema.
Y cuanto más a la derecha.
Pues se va ajustando.
Porque como sigue nuestro mundo por ahí.
Obviamente aquí debería morir.
No muere.
Pero fijaos.
Que yo podría seguir andando.
Hasta que llegase.
Al límite.
Que le hemos puesto a nuestro mundo.
A la derecha.
¿Vale?
Que llegará.
Eventualmente.
Pero bueno.
Al menos ahora ya tenemos.
¿Ves?
Ahora ha llegado al límite.
Fijaos que la cámara ha parado.
Llega un momento que para de moverse.
Y llegas hasta el límite.
Aquí no llegaremos así.
Pero es increíble.
Que ya tenemos la cámara de nuestro videojuego.
Con dos líneas de código.
En un momentito.
¿Vale?
Entonces.
Para mejorar un momento esto.
Porque vamos a tener que añadir alguna animación.
Y deberíamos poner los personajes a los enemigos y todo esto.
Vamos a hacer algo.
Vamos a crear aquí una carpeta.
Un archivo que sea animations.
¿Vale?
Para tener todas las animaciones estas que hemos creado aquí.
Estas animes.create.
Las vamos a separar.
Y vamos a por export create animations.
Que le pasamos el juego.
¿Vale?
Y así además no utilizamos tanto this.
Y utilizamos game punto.
Y aquí.
En lugar de hacer.
Hacemos esto.
Create animations.
Le pasamos el this.
¿Vale?
Importamos create animations.
Ahora ha petado.
Porque en el index.
Tenemos que decirle que nuestro javascript.
Le vamos a decir que es de tipo módulo.
¿Vale?
Y así ahora también peta.
Porque nos falta la extensión aquí.
Y ahora sí que lo tenemos.
¿Vale?
Al menos así tenemos el create animations del this.
¿Vale?
El Mario Walk.
El Mario Idle.
El Mario Jump.
Vamos a poner también el Mario...
Mario Death.
¿Vale?
Que esto, si no me equivoco, es el frame 4.
¿Vale?
Y así al menos iremos añadiendo unas cuantas animaciones.
La animación de la muerte, lo que podemos hacer aquí en el game es detectar cuando muere.
¿Vale?
Y aquí esto en el update, igual que tenemos esto is down y todo esto, podemos decir, ¿vale?
Si el Mario es mayor que la altura, ¿vale?
Vamos a decirle que el Mario tiene que las animaciones, el Mario Death.
¿Vale?
Como esta es justamente la misma que tiene que hacer.
¿Vale?
El problema es que justo aquí, justo aquí, no va a estar nunca en esta condición.
Porque fíjate que está justo, justo, está exactamente igual.
Si lo ponemos igual, creo que aquí puede ser.
Aquí sí que va a fallar.
¿Veis?
Y aquí sí que ha cambiado ahora el sprite.
Pero obviamente todavía faltaría alguna cosita.
¿Qué vamos a hacer?
Uno, podemos mover al personaje.
Vamos a tener que crearle como un estado.
Vamos a decir, oye, que sepamos que el Mario ha muerto.
¿Vale?
Mario ha muerto.
Que sí, vamos a poner que el Mario está muerto y además vamos a hacer que el Mario desaparezca.
Vamos a decirle que vamos a desactivar los límites de nuestro mundo.
Entonces, cuando ahora cabe aquí, ¿vale?
¿Ves?
Ahora se cae para abajo.
Que esto ahora lo arreglaremos porque al menos todavía lo podemos mover.
Entonces, tenemos que evitar que se pueda mover.
Para evitar que se pueda mover, lo que podemos hacer aquí, ahora lo voy a hacer en un if, pero bueno, luego lo haremos de otra forma.
Podemos decir update.
Le decimos, vale, podemos decir que si el Mario está muerto, hacemos un return, ¿vale?
Directamente porque no hay nada que actualizar de todo esto y ya con esto, pues ya no podemos moverlo.
Y ahora, pues todo esto, ya que tenemos todo esto, esto lo podríamos sacar en un archivo, pero bueno, me lo voy a saltar.
¿Sabéis lo que pasa en el Mario cuando mueres?
Hay una cosa interesante.
Cuando en Super Mario Bros. mueres, cuando mueres, da como un saltito.
A ver si os lo enseño.
Aquí, mirad.
A ver si lo podemos ver.
¿Vale? ¿Veis que da como un saltito?
Cuando muere, da como un saltito.
¿Ves?
Como que da un saltito, ¿no?
Vale, pues eso lo podemos también hacer.
Lo podemos hacer.
Para hacer algo así, podríamos empezar a jugar con todas las cositas que hay por aquí.
Por ejemplo, esto está bien, pero podemos decir, vale, cuando se ha caído, vamos a hacer que pase un momento.
Cuando pasan 100 milisegundos, vamos a hacer que dé un brinco el Mario, ¿vale?
Entonces hacemos el velocity, set velocity.
Como hemos hecho lo del salto, pues exactamente lo mismo.
¿Vale?
Cuando pasan 100 milisegundos, que vaya hacia arriba.
Y luego, bueno, esto lo vamos a añadir solo para que podamos resetear el juego.
Lo ideal es tener una escena en condiciones, pero le podemos decir, oye, cuando pasen dos segundos, resetea la escena.
¿Vale?
Entonces hacemos así.
¿Ves?
Da el salto, se cae y aparece otra vez porque se resetea la escena.
¿Vale?
Ahora lo siguiente sería añadir un enemigo, tener las colisiones con el enemigo.
Podríamos hacer todo esto, pero como no nos va a dar tiempo y para que al menos sí que tengamos una cosa que creo que puede estar muy bien, vamos a añadirle un audio, ¿vale?
El de la muerte.
Podemos añadir también el del juego, pero bueno, vamos a añadir el de la muerte.
Aquí en preload vamos a añadir un audio, vamos a cargar load, audio, igual que hacemos load.image y tal.
Pues vamos a hacer el de game over y vamos a decirle dónde tenemos el assets.
Assets, assets, sound, effects, game over.
No, music será entonces.
Music y game over.mp3.
¿Vale?
Entonces, assets, sound, music, game over.mp3.
¿Vale?
Y con esto ya estamos precargando ese recurso, ¿vale?
Y aquí lo que vamos a hacer, igual que teníamos lo de la velocidad y todo esto, justamente cuando ejecutamos esto, le vamos a decir que el this.mario vamos a ejecutar...
No, el Mario no, perdón.
This.sound vamos a ejecutar el audio del game over.
Y así cuando nos maten...
Está un poco fuerte.
Le podemos bajar, no hay ningún problema, le podemos bajar el sonido.
Para eso podemos decir this.sound.add, le decís el nombre, game over.
Y aquí ya le podéis dar al play, pero lo bueno es que aquí le podéis pasar la información, por ejemplo, el volumen.
¿Vale?
Y así lo bajáis un poquito, 0.2 o lo que queráis.
¿Vale?
Y ahora...
¿Vale?
Y ya tenéis.
Bueno, lo malo es que he salido y por eso la ha parado, ¿vale?
Pero al menos ya tenemos esto aquí, ¿vale?
Vale, pues si os ha gustado, es una cosa que os gustaría que continuásemos porque podríamos...
O sea, mi objetivo sería...
Perdón, perdón por el sonido, que era muy bestia.
Pero mi objetivo sería poner todos los enemigos y hacer la primera fase entera.
La primera fase del Super Mario entera.
Con todos los ítems, con todo.
Y hacerlo de código abierto y que lo tengamos.
Entonces, esto lo subiré a GitHub para que lo tengáis.
Lo voy a...
Bueno, se ha quedado en la música porque, claro, la música se desactiva.
La música se desactiva cuando no estás en la pestaña, se desactiva.
Entonces, voy a poner SuperMidu Bros.
Lo voy a poner, ¿vale?
El desarrollo de videojuegos con JavaScript.
Y lo continuaremos, ¿vale?
Continuaremos esto y os iré indicando ahí cuando lo hacemos y tal.
Voy a subiros el código.
GetInit, Remote, AddOrigin y esto, AddCode, ¿vale?
Os paso el repositorio que he creado por aquí.
Espero que lo hayáis pasado súper bien.
Lo siento que no he estado mucho por el chat, pero bueno, la idea era intentar avanzar bastante de lo que hemos hecho.
A ver, ahora sí.
Vale, pues aquí ya tenéis todo el código.
Y aquí iremos añadiendo semana tras semana, pues iremos haciendo, ¿vale?
Pero bueno, creo que, hombre, no está mal que hemos añadido ya animaciones.
Es una pena.
Tenemos las animaciones, que se gira y tal, que ya tiene los saltos, que ya se muere.
Cosas que haremos en la siguiente.
Haremos animaciones, enemigos, haremos...
¡Qué malo!