PlayCanvas de principio a fin: la versión rápida

Rate this content
Bookmark

En este masterclass, construiremos un juego completo utilizando el motor PlayCanvas mientras aprendemos las mejores prácticas para la gestión de proyectos. Desde el desarrollo hasta la publicación, cubriremos las características más importantes como la gestión de activos, scripting, audio, depuración y mucho más.

121 min
18 Apr, 2022

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Este masterclass cubre los conceptos básicos de Play Canvas y te guía a través de la construcción de un juego en tres fases: configuración de escenas, interactividad y pulido. Play Canvas es un motor de juegos web que se ejecuta en tu dispositivo móvil o navegador, lo que lo hace completamente multiplataforma. Proporciona su propia solución de alojamiento para compartir fácilmente tu juego. El masterclass cubre temas como la importación de activos, scripting, física, animación, depuración, interfaz de usuario, audio y publicación.

Available in English

1. Introducción al Masterclass de Play Canvas

Short description:

Este masterclass cubrirá los conceptos básicos de Play Canvas y te guiará en la construcción de un juego en tres fases: configuración de escena, interactividad y pulido. Aprenderás sobre la importación de activos, scripting, física, animación, depuración, interfaz de usuario, audio y publicación. Play Canvas proporciona su propia solución de alojamiento para compartir fácilmente tu juego.

Hola a todos. Mi nombre es João y este es el masterclass de Play Canvas de principio a fin, la versión rápida. Así que Play Canvas de principio a fin, la versión rápida. Rápida, aunque no tanto, porque durará alrededor de 2 horas de masterclass. Pero sí, aún podremos construir un juego completo en estas 2 horas. La forma en que estructuraremos este masterclass es, primero haremos algunas breves introducciones, pero luego hablaré sobre Play Canvas. Hablaré sobre, ya saben, las características básicas que tenemos, todo lo que puedes hacer en Play Canvas. Y luego pasaremos al núcleo real del masterclass donde construiremos un juego juntos. Lo dividí en 3 fases diferentes. La fase número 1 es la configuración general de la escena, así que comenzaremos importando algunos activos, colocando algunas cosas, algunos obstáculos, algo de terreno. Hablaremos de eso en un segundo. Y hablaremos sobre cómo lanzar y testing tu juego. La fase 2 tratará sobre la interactividad. Hablaremos sobre scripting, scripts de preguntas, sobre el sistema de eventos que tenemos en Play Canvas, también sobre cómo hacer física con cuerpos rígidos. Hablaremos también sobre el sistema de animación. Y luego algunas capacidades de depuración utilizando Chrome. Y la fase 3 será sobre el pulido y la publicación. Haremos algunos toques finales en la interfaz de usuario, cómo hacer audio, y luego podremos publicarlo en el mundo. Podremos hacer eso utilizando la propia solución de alojamiento de Play Canvas, por lo que no necesitas tener nada propio, solo presionas un botón y tendrás un enlace firme a tu versión del juego, y luego puedes compartirlo con quien quieras. Y luego haremos algunas conclusiones al final.

2. Fases del Proyecto Play Canvas

Short description:

Utilizaremos un proyecto fuente de Play Canvas que ya contiene todos los activos y el código de plantilla. Puedes bifurcar el proyecto en cualquier fase si te pierdes y comenzar desde allí. El proyecto final con documentación completa también estará disponible como referencia. Puedes elegir escuchar y aprender o construir junto conmigo.

Ahora, la forma en que haremos las diferentes fases en el juego real es que - He preparado un proyecto fuente de Play Canvas que ya contiene todos los activos y el código de plantilla que necesitaremos, y lo que podrán hacer es realmente tomar eso y hacer una bifurcación, por lo que podrán copiarlo como su propio proyecto y luego hacer lo que quieran con él. Yo haré lo mismo, así que comenzaré desde el mismo proyecto inicial, y luego juntos construiremos hasta el juego final. Ahora, cada una de las fases también tiene un proyecto propio, por lo que digamos que estás en la mitad de la fase uno y te pierdes. No te preocupes, solo espera a la fase dos, y luego puedes clonar, puedes bifurcar un proyecto que comienza en la fase dos, y lo mismo para la fase tres. Si te pierdes en medio de las cosas de scripting en la fase dos, solo espera y enviaré el enlace para la fase tres, y luego puedes bifurcar la fase tres y comenzar desde allí, por lo que tienes estas tres especie de puntos de control a lo largo del camino, y también el proyecto final, como la cosa final, con documentación completa, con todas las características, también estará disponible para que lo vean, por lo que podrán ver todo el proceso completo también. Por lo que también pueden simplemente sentarse, tomar un café, té, agua, lo que prefieran, y simplemente escuchar cómo construir todo, o pueden construir juntos.

3. Introducción a João y Play Canvas

Short description:

Hola, soy João, un ingeniero de software en Play Canvas. Los juegos han sido mi pasión y he lanzado juegos independientes como Step y Menard. Encuéntrame en Twitter y GitHub para más información.

conmigo mientras avanzamos. Primero, hablemos brevemente sobre quién soy. Hola, mi nombre es João, actualmente trabajo en el equipo de Play Canvas como ingeniero de software, también puedes encontrarme en los foros oficiales de Play Canvas como JPaulo, y como dije antes, actualmente trabajo como ingeniero de software en Play Canvas, antes trabajaba en Amazon Alexa y antes de eso trabajaba en SAP. Así que tengo experiencia en el desarrollo de backend, ya sabes, no relacionado con juegos, hasta que me uní a Play Canvas, pero los juegos han sido mi pasión desde el principio. Creo que es una historia que muchas personas comparten en el espacio de los videojuegos. Los juegos son lo que realmente me hizo querer seguir una carrera como ingeniero de software. También he lanzado algunos juegos independientes. Tengo Step y Menard, que tuvieron, ya sabes, un poco más de éxito. Menard llegó a estar entre los 10 mejores juegos de rompecabezas en varios países en iOS cuando se lanzó. Eso fue bastante emocionante. Y Step fue un juego que fue seleccionado para el escaparate de juegos independientes de Google hace unos años. También hubo todo un evento al respecto, lo cual fue genial. Puedes encontrarme en Twitter como John Paul y también en GitHub. Hablaré un poco más sobre por qué GitHub es importante para nosotros en Play Canvas. Pero sí, siéntete libre de seguirme, yo también sigo de vuelta. Ya sabes, como

4. Introducción a PlayCanvas

Short description:

PlayCanvas es un motor de juegos web que se ejecuta en tu dispositivo móvil o navegador, lo que lo hace completamente multiplataforma. El motor de PlayCanvas contiene todas las funcionalidades principales para un juego o aplicación de PlayCanvas, incluyendo vectores, matemáticas, carga de mallas y texturas, y sombreadores de GPU. Es de código abierto y está disponible en GitHub. El editor de PlayCanvas está diseñado para la colaboración, con un potente backend que se encarga del procesamiento y compresión de activos. Admite la edición de código con intellisense incorporado y no requiere tiempo de compilación. También incluye soporte para WebXR, un sistema de control de versiones similar a Git y características gráficas avanzadas. El editor de PlayCanvas tiene un tamaño de archivo pequeño y admite interfaz de usuario, audio, animación, física y más.

todo eso de seguir y seguir de vuelta. Así que sí, genial. Ahora hablemos un poco de PlayCanvas. PlayCanvas es un motor de juegos web. Como puedes ver en el editor, es muy similar a otros motores de juegos que tenemos en el mercado. Pero lo interesante es que se ejecuta al 100% en tu dispositivo móvil o navegador. Esto significa que puedes usarlo en tu dispositivo móvil y también es completamente multiplataforma. Puedes usarlo en Windows, Mac, Linux, cualquier plataforma que admita un navegador. Incluso podría funcionar en Raspberry Pi, aunque no estoy seguro si tiene WebGL. De todos modos, PlayCanvas se divide en dos partes principales. Primero, tenemos lo que llamamos el motor de PlayCanvas. El motor de PlayCanvas contiene todas las funcionalidades principales para que un juego o aplicación de PlayCanvas funcione. Incluye cosas como vectores, matemáticas, cuaterniones, carga de mallas y texturas, y carga de sombreadores de GPU. Todo eso está en el motor de PlayCanvas, que es de código abierto y está en GitHub. Por eso GitHub es importante para nosotros. Puedes contribuir allí mismo en GitHub.com/PlayCanvas/engine. También puedes descargar la versión minificada y usarla en tu proyecto importándola como un solo archivo .js. O puedes construirlo desde el código fuente. Puedes descargar el código fuente abierto, ejecutar npm install, npm run build, y listo. Lo tienes ahí, puedes usarlo desde allí. Ahora, el editor en línea utiliza el motor de PlayCanvas y es lo que alimenta playcanvas.com. Está diseñado para la colaboración. Todo lo que haces en PlayCanvas es muy fácil de colaborar con otras personas. Hablaremos más de esto más adelante cuando realmente comencemos el taller y hagamos cosas. Verás lo fácil que es tener a varias personas trabajando en la misma escena al mismo tiempo. Es colaborativo por diseño. Tenemos un potente backend que alimenta todo. Así que todo lo que haces, como abrir el editor y querer usar una malla o una textura, simplemente arrástrala al editor, se carga en nuestros sistemas y nosotros nos encargamos de todo el trabajo pesado, como la conversión a los formatos adecuados, la compresión, etc. No tienes que preocuparte por nada. Sí, hacemos procesamiento de activos, compresión de texturas y todas las conversiones modernas de los formatos de archivo más comunes. Nuestro formato favorito es GLB. FBX también funciona muy bien. También tenemos una capa gratuita, así que tenemos algunos planes de pago si deseas funcionalidades más avanzadas de gestión de equipos, pero también tenemos una característica muy potente con mucho almacenamiento y la opción de alojamiento propio. Sí, ofrecemos alojamiento ilimitado y gratuito para aplicaciones y juegos publicados, lo cual también te mostraré cómo hacer más adelante. Ahora hablemos un poco sobre algunas de las características de PlayCanvas. Todo el código se edita en línea con intellisense incorporado. En realidad, utilizamos el mismo editor de código que VS Code, pero para la web. Se llama Monaco. Tenemos un backend potente que se encarga de todo el trabajo pesado de los activos. Esto significa que no tienes que esperar mientras importas cosas o cargas el proyecto, todo está ahí, ya está listo. Esto significa que no hay tiempo de compilación. No tienes que esperar a que se compile todo mientras trabajas en PlayCanvas. También tiene soporte para WebXR de forma nativa, tenemos algunos ejemplos para eso también. También tenemos un sistema de control de versiones similar a Git, que te permite hacer bifurcaciones de proyectos, crear puntos de control, crear ramas, fusionar cambios, muy similar a un sistema Git. Hablaré más de esto más adelante. El editor en sí es multiplataforma y cuando lo cargas, es muy pequeño. Solo ocupa 2.1 megabytes, si verificas en la pestaña de Red de tu navegador, verás que solo has descargado 2.1 megabytes. Después de descomprimirlo, ocupa un poco más, alrededor de un megabyte, pero sigue siendo bastante pequeño. Nuestro tamaño de archivo es muy reducido. PlayCanvas admite todas las características que esperamos de un motor de juegos en estos días. Tenemos soporte para interfaz de usuario, soporte para audio, soporte para audio posicional, sistema de animación, física. Puedes crear plantillas, que son como prefabricados en otros motores de juegos. También tenemos características gráficas avanzadas. Tenemos una docena de canales de soporte. Tenemos documentación con tutoriales y referencias completas de la API. También tenemos nuestro propio foro, forums.playcanvas.com, donde puedes publicar preguntas. La comunidad es muy servicial allí. También tenemos nuestro propio canal de Discord, donde a veces estamos para chatear y ayudar cuando la gente lo necesita. Podría estar aquí durante dos horas hablando de todo lo que PlayCanvas puede hacer, pero esto se está volviendo un poco aburrido. Así que sigamos adelante.

El editor de PlayCanvas en sí es muy similar a muchos otros motores de juegos que existen actualmente. Tenemos la lista de jerarquía a la izquierda. También tenemos una barra de herramientas a la izquierda donde puedes seleccionar la herramienta que deseas utilizar. En la parte inferior del frente, tenemos los activos del proyecto, donde se encuentran todos los activos que se han insertado o importado en el proyecto. A la derecha, tenemos el inspector donde puedes inspeccionar la entidad seleccionada. Por ejemplo, en este caso, estoy seleccionando la entidad de la luz. Ahí puedes ver información básica como el nombre y si está habilitada. También puedes agregar texto. Luego tienes la transformación de posición, rotación y escala. Y también tienes los componentes, de los cuales hablaré más adelante. Básicamente, definen el comportamiento. En este caso, agregué un componente de luz y puedes seleccionar qué tipo de luz es, su color, intensidad, si genera sombras o no, y con qué frecuencia se actualiza el mapa de sombras.

5. Enlaces útiles e introducción al juego

Short description:

En esta parte, exploraremos algunos enlaces útiles para PlayCanvas, incluyendo el repositorio de GitHub de PlayCanvas, el navegador de ejemplos, la referencia de la API y los tutoriales. También presentaremos el juego que construiremos, el cual involucra a un personaje que navega obstáculos, come comida y administra el tiempo. El juego incluye física, elementos de comida dinámicos, animaciones y una interfaz de usuario simple. Para comenzar, asegúrate de tener una cuenta de PlayCanvas y bifurca el kit de inicio de Food Run. Luego, abre el editor y navega a la escena del juego.

Todas estas cosas las puedes seleccionar allí en el inspector. Algunos enlaces útiles. Solo, ya sabes, enlaces útiles generales de PlayCanvas. Así que tengo este increíble PlayCanvas GitHub también, que es una lista curada de algunas cosas geniales que puedes hacer con PlayCanvas. Algunos de ellos también tienen código fuente disponible. Así que puedes ver cómo se hicieron esas cosas. Tenemos un navegador de ejemplos donde puedes ver cómo usar el motor y todo tipo de cosas locas. Y tienes la referencia de la API y los tutoriales. También tenemos foros y un Twitter. Así que Twitter también es bastante genial. Nos gusta retuitear y ayudar a la community también. Así que, ya sabes, mencionanos. Si tienes un proyecto genial, asegúrate de mencionarnos y difundiremos la palabra sobre tu proyecto. Genial, ¿verdad? Bien. Con todas esas cosas aburridas fuera del camino, vamos a construir algo de verdad.

El juego que construiremos es este. Lo abriré aquí para que puedas ver de qué se trata. Esto es a lo que me refería antes acerca de tener una construcción alojada por PlayCanvas. Este es un sitio web de PlayCanvas.as. Y desde aquí puedes alojar cualquier construcción. Este es el juego que construiremos. Es bastante simple. Así que tienes a tu personaje moviéndose, tienes algunos obstáculos que no puedes realmente cruzar, y luego necesitas comer algo de comida. Y a medida que comes comida, el tiempo aumenta y tienes un tiempo determinado para, bueno, comer toda la comida. Y uno de los juegos, un juego muy tonto, es simplemente comer tanto como quieras. Y si se acaba el tiempo, dejemos que el tiempo se agote un poco. El tiempo se acaba, genial. También hay algunos efectos de audio allí. Simplemente dice que se acabó el tiempo. Y luego presionas el botón para volver a empezar, se reinicia la puntuación y luego comienzas de nuevo. Cosas bastante simples. Pero, ya sabes, tocaremos muchas cosas diferentes aquí. Permíteme volver a las diapositivas. Genial. Entonces, nuevamente, esta es solo una captura de pantalla de lo que construiremos. Si desglosamos de qué se trata realmente este juego. Tenemos una entidad de suelo que tiene algo de física. Tenemos algunos obstáculos que necesitan bloquear de alguna manera al jugador. Así que necesitamos, nuevamente, algunas colisiones físicas en eso. También tenemos algunos elementos de comida que siguen apareciendo. Y como puedes ver, la comida no siempre es la misma. Así que tenemos pasteles, manzanas, plátanos y cosas así. Y se coloca de forma dinámica. Y también tenemos al jugador, que también es dinámico y tiene alguna animación en él. También tenemos una interfaz de usuario muy simple en la parte superior izquierda, que contiene, simplemente, el tiempo restante y un contador de la puntuación. Genial. Ahora, empecemos entonces. Comenzaremos con la fase uno. Espero que a estas alturas, la mayoría de las personas tengan una cuenta de PlayCanvas. Y si no la tienes, simplemente ve a playcanvas.com y crea tu nueva cuenta. Debería ser bastante sencillo. Muy fácil, muy rápido. Y luego comenzaremos con el kit de inicio de Food Run. Así que enviaré este enlace en Discord, y también enviaré este enlace aquí en el chat. Que es este justo aquí. Así que simplemente ábrelo. Es público, por lo que todos deberían poder verlo. Y desde aquí, puedo continuar y bifurcarlo. Para bifurcar un proyecto, simplemente ve aquí y haz clic en el botón de bifurcación. Entonces, el propietario debería ser, como, este debería ser tu nombre, debería ser tu cuenta allí. Y puedes llamarlo como quieras. Así que lo llamaré food run mi propio food run. Simplemente haz clic en bifurcar, espera un momento para que los sistemas de respaldo dupliquen el proyecto. Duplicará todo, escenas, activos, scripts, todo. Y creará tu propia copia del proyecto. Así que aquí lo tenemos. Ahora tengo mi propio food run con el que puedes hacer lo que quieras. Así que cada uno de ustedes tiene el suyo propio. Si tienes algún problema hasta ahora, simplemente envía un mensaje en el chat o en Discord. Estoy viendo eso. No hay nada. Supondré que todos están siguiendo más o menos. No seré demasiado rápido. Les daré un poco de tiempo. Pero una vez que hayas hecho la bifurcación, tengas tu cuenta y hayas hecho la bifurcación, simplemente haz clic aquí en el editor. Solo estoy revisando si hay algo. Así que cerraré mis otras pestañas aquí. No estorban. Solo reviso si hay algo, nada en Discord. Nada en el chat hasta ahora. Genial. Bien. Una vez que-. Esto es lo primero que ves cuando abres el editor de PlayCanvas. Aquí te reciben con la lista de escenas. Por defecto, cuando creas un nuevo proyecto, tendrás una escena en blanco. En este caso, ya tenemos una escena de juego aquí. Así que vamos a abrirlo. Y ahora estamos listos para comenzar.

6. Creando el plano del suelo y aplicando un material

Short description:

Comenzaremos creando el plano del suelo. Lo haremos de 25 por 25 y le aplicaremos una textura. Tenemos primitivas predefinidas para usar y elegiremos el plano. También crearemos un material para el plano y le aplicaremos una textura de patrón de cuadrícula. El material aún no se está utilizando en la malla.

Como dije antes, aquí a la izquierda tenemos la jerarquía, aquí tenemos una barra de herramientas, aquí tenemos todos los activos. A la derecha tenemos el inspector. Aquí tenemos la vista, que es lo que tenemos actualmente, que de nuevo no es nada. En realidad, no, tenemos una cámara y una fuente de luz. ¿Verdad? Ahora, de nuevo, este es como el proyecto inicial para el juego FoodRun, lo que significa que ya se agregaron aquí en FoodRun, ya se agregaron todos los activos que necesitaremos para el proyecto. Por ejemplo, si abres Arena y abres las texturas, ya tienes algunas texturas agradables aquí, algunas texturas de prototipo. Ahora, todos los activos que estamos usando aquí son del increíble Kenny, por supuesto. Creo que la mayoría de las personas aquí pueden saber quién es. Creo que es un creador increíble que hace cosas fantásticas. Y todo es CC0, por supuesto, pero toda la información de licencia y origen está ahí, así que solo para enlazar con su increíble trabajo. Así que tenemos la Arena con algunas texturas. También tenemos algunos archivos de sonido que podemos enlazar más tarde. También tenemos el modelo, que contiene, que tiene el archivo fbx aquí. También tenemos algunos clips de animación. Así que todo está aquí lo que necesitaremos. Y, ya sabes, a medida que avanzamos en el taller, pasaremos por todo eso juntos. Pero siguiendo adelante, también tenemos el script, una carpeta llamada Plantillas de Script aquí. Por supuesto, construir todo el código para eso en dos horas mientras compartimos pantalla puede no ser ideal. Así que ya se ha hecho en su mayoría el código aburrido, ya sabes, conectar los administradores de juego y codificar la lógica del juego simple ya está hecho en su mayoría. Pero tendremos que hacer algunas cosas a lo largo del taller para arreglarlo. Lo haremos juntos. Pero de nuevo, no te preocupes por eso por ahora. Te diré cuándo necesitas usarlos. Por ahora, déjalos ahí en Plantillas de Script. También tengo algunas notas aquí para asegurarme de no perderme. Así que si me ves mirando hacia abajo, escribiendo, solo me aseguro de no perder nada. Así que sí, genial. Con eso, creo que podemos comenzar. Espero que la mayoría de ustedes hayan creado su propia bifurcación y ya la tengan. Déjame revisar el chat. De acuerdo. ¿Puedo obtener al menos un sí, puedo hacerlo? Solo para poder continuar. Quiero estar seguro de que... Genial, gracias. Genial. Gracias, Mike. Gracias, Rick. Oh, genial. Gracias. Ah, increíble. Gran respuesta. Gracias, chicos. Genial. Entonces empecemos. Déjame agarrar mi ratón aquí para que sea un poco más fácil. Genial. Así que comencemos desde lo más grande. Hay otro chat. Lo siento. Solo estoy mirando. Eso está totalmente bien, ¿verdad? Sí, totalmente bien. Me alegra que estés con nosotros. Genial. Así que comencemos creando solo el plano del suelo. Bien. Entonces comencemos creando una nueva entidad aquí. Hijo de raíz. Llamémoslo arena. Así que tenemos la arena aquí y creemos el plano del suelo. Entonces, si vas aquí para una nueva entidad, tenemos muchas cosas predefinidas y una de ellas son las primitivas. Así que tenemos cosas como cajas y cápsulas, conos, etc. Queremos un plano, que de nuevo, son solo dos triángulos, solo una cosa simple para definir un plano. Y hagámoslo grande para cubrir muchas cosas. Lo haremos de 25 por 25, 25 por uno por 25. Así que el plano canvas Y está hacia arriba. Así que tenemos un gran plano aquí. Y creemos también un material para eso, así que apliquemos una textura. Entonces, si vas a Food Run aquí en la arena, ya tenemos algunas texturas agradables aquí, así que creemos un nuevo material allí. Hagamos en realidad una buena gestión de proyectos. Entonces no lo crearemos aquí, en la arena, creemos una nueva carpeta. Llamémosla Materiales. Creemos un nuevo material aquí. Llamémoslo Material del Suelo. Y esto es, como mencioné antes, plane canvas admite PBR completo. Materiales de renderizado basados en física. Así que tenemos cosas como ambiente, difuso, especular, incluso tenemos capa transparente, que es útil para autos y cosas así, bastante genial. Tenemos emisión, opacidad, blah, blah, blah. Este es bastante simple. Solo queremos un bonito- Volvamos a nuestra imagen aquí. Podría ser útil. Así que solo queremos este bonito patrón de cuadrícula aquí. Así que simplemente apliquemos un difuso aquí. Entonces, si abres el cajón de difuso aquí, podemos aplicar cualquier textura aquí. También podemos aplicar algo de tinte, algo de color. Así que abramos- Haz clic en la carpeta de texturas aquí y usemos sector 8. Creo que es una bonita aquí. Porque ya lo hice antes, ¿verdad? Entonces, cuando lo aplicamos aquí- Oh, bueno, por supuesto lo aplicamos al material pero el material aún no se está utilizando en la malla.

7. Personalizando el Plano y Creando un Jugador

Short description:

Para personalizar la apariencia del plano, podemos agregar mosaicos y cambiar su color. Dividiendo el tamaño del plano por dos, podemos lograr un mosaico sin costuras. Para agregar color, podemos ajustar la propiedad de tinte en el material. Un tinte verdoso, representado por el código hexadecimal 59D1DD, le da al plano una apariencia similar a la hierba. Sin embargo, se pueden usar otros colores o texturas. Ahora, creemos un jugador.

Volvamos al plano y asegurémonos de usar el material del suelo en ese plano. Podemos arrastrar y soltar aquí en el mundo para que esto funcione o aquí en la ranura de material en el inspector. Así que dibujemos aquí, soltemos aquí porque esta es una característica bastante genial. ¿Verdad, pero esto se ve muy grande, ya sabes se extiende por todo el lugar. Así que agreguemos algunos mosaicos aquí. Un buen número que funcionará aquí ya que esto es dos por dos es si tomamos entonces el 25 y luego lo dividimos por dos. Así que si tomas 25 y luego lo divides por dos lo cual funciona por cierto aquí, esto se mosaica sin costuras aquí entonces y esto también se alineará perfectamente con nuestra cuadrícula. Así que cada mosaico aquí es exactamente una unidad, un metro, lo que quieras, una unidad a través, lo cual es bastante genial. Ahora tenemos nuestra cosa aquí pero se ve muy blanco, ¿verdad? Esto se ve demasiado soso. Así que démosle algo de color. Entonces, nuevamente, si volvemos al material y luego difuso, podemos hacer clic en tinte y luego podemos agregar cualquier color que desees. Podremos cambiar a cualquier color que desees. Solo multiplicaremos los colores juntos. Un buen número que tenemos allí es ese bonito tinte verdoso, que hace que se vea como hierba. Entonces el número para eso es 59D1DD, lo tengo anotado. Así que este es el mismo color que tenemos allí en el ejemplo, ¿verdad, que tenemos aquí. Entonces, nuevamente, si quieres usar el mismo número es 59D1DD, ese es el código hexadecimal para este bonito tinte verde, pero puedes poner lo que quieras. También puedes usar otra textura si quieres. Incluso no usar una textura, pero genial. Tenemos nuestro plano aquí. Sigamos adelante y creemos un jugador.

8. Creando Entidades de Jugador y Obstáculos

Short description:

Para crear un jugador, crearemos una nueva entidad y le agregaremos una malla. También crearemos un material y lo asignaremos a la malla. El material es un PBR y se puede personalizar con diferentes configuraciones. Crearemos una plantilla para la entidad del jugador, lo cual será útil para colocarlo en múltiples ubicaciones. Seguiremos un proceso similar para crear una entidad de obstáculo, utilizando una forma de caja como el obstáculo más simple.

Para crear un jugador, creemos una nueva entidad. No en la arena, porque la arena contendrá los elementos estáticos. Creemos una nueva entidad, hija de la raíz. Llamémosla jugador. Actualmente, la entidad del jugador no tiene nada. Agreguemos la malla que tenemos. Aquí nuevamente, en pie de carrera, personaje, medio FBX. Esto es lo que sucede si tomas cualquier archivo FBX y simplemente lo arrastras a Play Canvas, no lo modifiqué en absoluto. Estos son los archivos sin procesar descargados del sitio web de Kenny. Esto es lo que crearemos para ti. Se cargará el archivo FBX sin procesar y se convertirá en todos los archivos que Play Canvas necesita internamente. Ahora hay otros dos archivos importantes aquí. Uno de ellos es el material que se utiliza. Este es solo un material sin procesar importante que no tiene esa textura. Pero es el material con la configuración que tenía. Y este con el, este prisma diagonal. Olvidé el nombre de este símbolo ahora mismo. Pero está bien. Cuadrado. Cuadrado rotado. Y esto es importante porque es la plantilla. Hablaremos un poco más sobre las plantillas en un segundo, pero este es el recurso que contiene el modelo y el material. Todo está agrupado en este. Entonces, este es el que querremos usar cada vez que importemos modelos. Usaremos este. Entonces, lo que podemos hacer es tomar este y simplemente arrastrarlo a la escena. Podemos arrastrarlo aquí, pero en realidad quiero que sea hijo del jugador. Así que puedo arrastrarlo aquí. Así que lo arrastraré a la entidad del jugador allí. Ahora tenemos el modelo allí. Ahora, por supuesto, todavía... Por cierto, si la cámara está mal posicionada, puedes presionar F. No puedes verlo realmente, pero acabo de presionar F y te acercas a lo que estás seleccionando. Entonces, si seleccionas la arena y presionas F, te lleva a todo el conjunto. Si presionas... Si usas otro personaje, acércate allí, una función muy útil. Ahora tenemos el recurso R allí, pero por supuesto, aún no tiene el material. Así que creemos un nuevo material también. Nuevamente, hagamos una buena gestión de proyectos. Creemos una nueva carpeta, no la creemos en cualquier lugar. Llamémosla materiales. Creemos un nuevo material allí. Llamémoslo MaterialesJugador. Por supuesto, podríamos tomar el material que ya se importó, este, y simplemente editarlo. Pero creo que para nuestro caso de uso, crearemos el nuestro propio para poder ajustar algunas cosas más. Entonces, asignemos este material a la malla allí simplemente arrastrando y soltando. No se ve muy diferente, pero está bien. Seleccionemos el material. Vamos a Fuse y luego seleccionemos una de las texturas. En este paquete de activos de Kine en particular, vienen con cuatro texturas diferentes y todas ellas ya tienen el mapeo UV correcto para este modelo en particular. Podemos usar la que queramos. Así que usaré Zombie Sea pero creo que se ve bastante bien en realidad. Así que ya tengo este bonito zombie aplicado allí. Y como dije, el material es un PBR, por lo que se renderiza en función física, lo que significa que podemos cambiar muchas configuraciones diferentes para obtener el aspecto que deseamos. Entonces, si abres el cajón de Especular aquí, también podemos hacer algunas cosas más. Podemos tener diferentes tonos especulares si queremos que proporcionan algunos efectos interesantes. Pero lo que quiero tocar en realidad es la brillo. Porque si avanzas hacia adelante, el último parámetro aquí, brillo, y lo colocamos todo el camino allí, parece como una cosa de plástico, como una muñeca de plástico, lo cual podría ser algo que estás buscando, sabes, le da un buen reflejo especular allí para la luz, ¿verdad? Esto es la luz que se refleja. Pero creo que para este, no quiero realmente ese efecto. Quiero algo más difuso, como si, ya sabes, como si fuera una persona o un personaje o algún plástico que estás moviendo por el tablero. Entonces, si bajo el brillo hasta cero, tiene este efecto más difuso, lo cual, nuevamente, es algo que quieres. Adelante, haz lo que quieras. Si quieres ese aspecto de plástico, incluso podría verse bien, de todos modos. Entonces, bien, hemos terminado con eso. Así que creemos una plantilla para esto. Es muy útil mientras desarrollas cosas. Si vas a colocarlas en diferentes lugares, crear plantillas para ello, que en otro motor de juegos, también se llama prefabricado, que es algo que puedes arrastrar y soltar y que ya contiene todos los mapeos de materiales y ya contiene toda la jerarquía que configuraste. Así que creemos una plantilla para el jugador, que actualmente no tiene mucho. Solo tenemos una entidad de jugador con el modelo aquí, pero haremos más cosas más adelante, ¿verdad? En la carpeta de personajes, creemos una nueva carpeta aquí. Llamémosla plantillas. Nuevamente, queremos tener una buena gestión de proyectos aquí. Y la forma de crear plantillas en Play Canvas es la siguiente, seleccionas la entidad de la que quieres crear una plantilla. Así que en este caso, jugador, haz clic derecho, plantilla, nueva plantilla. Esto creará una nueva plantilla en la carpeta en la que te encuentres en el panel de activos en la parte inferior. Así que simplemente crea una nueva plantilla de jugador en mi carpeta de plantillas en la subcarpeta de personajes. Así que nuevamente, está en pie de carrera, plantillas de personajes, tenemos la plantilla de jugador allí. Así que si la eliminamos, oh no, simplemente la volvemos a arrastrar y tenemos todo tal como lo teníamos, como teníamos esta configuración antes. Genial. Ahora, volvamos a lo que estamos construyendo, ¿verdad? Tenemos el, el, el, el jugador allí. Tenemos el suelo. Creemos algunos obstáculos. Ahora para crear un obstáculo. Nuevamente, será similar a lo que acabamos de hacer porque también crearemos una plantilla de eso. Así que creemos una nueva entidad. Llamémosla obstáculo o como quieras llamarla. Y luego a partir de eso, creemos, creemos una forma de caja. Ese es el obstáculo más simple que tenemos, ¿verdad? Así que aquí hay algunas formas de caja. Creemos simplemente una caja con eso. Así que en obstáculo, creemos una nueva caja primitiva.

9. Creando Obstáculos y Comida

Short description:

En esta parte, creamos un obstáculo en forma de caja y personalizamos su apariencia. También creamos un nuevo material para la caja y le damos un color naranja. Luego, agregamos la caja como hijo de la entidad Arena y creamos una plantilla. También colocamos algunos obstáculos de manera relativamente aleatoria. A continuación, creamos una entidad de comida que se puede recoger para aumentar el tiempo. La entidad de comida se coloca en la escena y se le agrega un modelo.

Prueba esa caja. Movámosla un poco hacia adelante aquí para que no estorbe. Es más fácil de ver. También puedes ver como el mapa de sombras. Se están actualizando. Muy genial. Levantémosla un poco. Para que esté por encima del suelo. El valor que deseas es 0.5. Por defecto, las primitivas son una por una. Así que si es 0.5, la llevamos a la mitad. Hagámosla un poco más grande. Escalamos dos en X y dos en Z. Solo un poco más grande allí pero tampoco demasiado grande. No queremos que supere porque queremos ver qué hay detrás de los obstáculos. Es solo algo realmente que no podrán cruzar.

Ahora creemos un nuevo material para esto porque en este momento, está utilizando el material predeterminado, que es bastante simple. Vamos a Arena, Materiales. Así como tenemos el material del suelo, creemos un nuevo material para eso. Llamémoslo Naranja Caja o algo así. Será de color naranja, spoiler alerta. Arrastremos eso. No cambia mucho porque es el mismo color. Pero ahora la caja está utilizando nuestro material personalizado. Sigamos adelante y no usaremos una textura para ello pero podemos darle un color. Elige el color que quieras. Aquí quería tener ese bonito color naranja. Creo que funciona muy bien con este fondo verdiazul. Así que el bonito color para eso es FBB057 para darle ese agradable tinte naranja. Pero nuevamente, puedes usar el color que quieras. Este es solo el color que usé FBB057. Y lo tienes ahí. Creemos una plantilla a partir de eso. Así que en Arena... Sí, porque esto será parte de la Arena, ¿verdad? Sí, tiene sentido que sea parte de la Arena. Coloquemos el obstáculo como hijo de la Arena también. Entonces, nuestra Arena ahora tiene el plano del suelo y también tiene un obstáculo. Creemos una plantilla a partir de eso. Así que creemos una nueva carpeta. Llamémosla Plantillas. Y un obstáculo, creemos nuestra plantilla a partir de eso. Ahora ya sabes cómo hacerlo. Ya son expertos en esto. Haz clic derecho en la entidad, Plantilla, Nueva Plantilla, en la carpeta que desees. Si la creas en la carpeta equivocada, simplemente muévela... nosotros nos encargaremos del trabajo pesado. Nosotros, las referencias serán correctas, así que no tienes que preocuparte por eso. Pero sí, si la creas en el lugar equivocado, simplemente muévela a la carpeta correcta. Así que aquí en Arena, luego en plantillas tenemos el obstáculo. Genial. Y por cierto, cuando haces eso, este ya está vinculado a esto. Así que si movemos esto, si cambiamos esta plantilla, se aplicará. Así que no tenemos que preocuparnos por eso. Lo que haremos, aprovechemos también para colocar algunos obstáculos alrededor. Por supuesto, aquí, hice este patrón de... lo que sea. Es bastante agradable, hay una simetría en ello. Pero puedes hacer lo que quieras. En este caso, simplemente los colocaré alrededor de manera relativamente aleatoria. Así que pondré esto aquí. Y luego. Puedes hacer clic derecho y duplicar, o puedes hacer Cmd D, o creo que en Windows es Ctrl D, para duplicar. Y luego puedes moverlo como quieras. Así que simplemente coloquemos algunos alrededor. Y creo que este es un lugar donde puedes dejar que brille tu pasión por el diseño del juego. Así que puedes construir algunos pasillos si quieres. Sabes, puedes construir algunas estructuras agradables de diferentes áreas que desees. En mi caso, es bastante aburrido solo tener algunos alrededor. Pondré uno más allí. Sí, está bien. Genial, ahí vamos. Así que solo algunos dispersos. Será interesante ver qué se les ocurre. Así que nuevamente, una vez que esto esté listo, asegúrate de tomar una captura de pantalla, publicarla en Twitter, y ver qué se les ocurre aquí. Genial, ahora tenemos nuestros obstáculos. ¿Qué más podemos hacer ahora? ¡Creemos la comida, ¿verdad? Así que tenemos las entidades de comida allí, que podemos recoger para aumentar el tiempo. Eso también es muy importante. Así que creemos una de esas. Nuevamente, en la raíz, creemos una nueva entidad. Llamémosla Comida. Puedes llamarla Comida o Coleccionable o como quieras. Ahora mismo está colocada ahí. Movamos un poco hacia atrás al jugador porque está en el centro. Muévelo un poco hacia atrás allí. Está bien, como quieras. Solo para que no esté fuera de lugar. Y luego agreguemos un modelo. Así que en tu carpeta de activos de Comida aquí, tienes la carpeta de Coleccionables. Y dentro de ella, tenemos los modelos. Y nuevamente, estos son los archivos FBX sin procesar.

10. Creando Plantillas y Ajustando la Iluminación

Short description:

Para crear una plantilla para la manzana, la escalamos y creamos una nueva plantilla a partir de ella. También podemos crear plantillas para otros modelos. Para mejorar la apariencia de la escena, podemos ajustar la luz ambiental o usar cubemaps para el mapeo del entorno. Al crear un nuevo recurso de cubemap y definir seis imágenes, podemos dar iluminación y un entorno a nuestra escena.

Si acabas de descargar Kenny, toma el archivo FBX y arrástralo aquí. Esto es exactamente lo que tienes. Crea una carpeta para ti, que contiene todos los activos que necesitas. Tiene la información de malla aquí. Todos los diferentes materiales que también necesitas con toda la información de tinte ya aplicada. Nuevamente, no he cambiado nada de esto. Esto es una importación simple. Y tendrás el diamante. Creo que ese es un buen nombre. Aquí tienes la forma de diamante, que nuevamente es nuestra plantilla. Y esto es lo que queremos. Esto es lo que queremos usar aquí. Así que tomemos... ¿Deberíamos tomar una manzana, un plátano o un pastel? Tomemos una manzana. Es una opción más saludable. Así que tomemos esta. Arrastrémosla como hijo de la entidad comida. Y estará ahí. Se ve un poco pequeña. Y queremos poder verla más tarde. Así que seleccionemos la entidad del modelo aquí. Ampliémosla. Así que en la barra de herramientas de la izquierda, puedes seleccionar la escala. Y luego, si haces clic en... Si haces clic en cualquiera de estos, puedes escalar en cualquiera de los ejes. Pero si haces clic en el medio, puedes escalar todos juntos de una manera diferente. Creo que esto es lo que queremos. Queremos que sea bastante grande. Sí. Creo que esta es una manzana grande. Genial. Ahora, ya que tenemos eso, estamos listos para continuar. Creemos una plantilla a partir de eso. Vamos a la carpeta de coleccionables. Creemos una nueva carpeta. Nuevamente, ya sabes cómo hacerlo. Eres un experto, gestión de proyectos, blah, blah, blah. Plantillas. Luego en comida. En la entidad comida, creemos una nueva plantilla a partir de eso. Genial. Nuevamente, en esta fase estamos configurando el proyecto. Estamos creando todos los diferentes aspectos necesarios para el juego. En un escenario del mundo real, tendrías algo como una imagen de un diseñador o algo que explique la jugabilidad del juego. Sería como descomponer todo eso. Eso es más o menos lo que estamos haciendo. Estamos descomponiendo la jugabilidad principal, creando plantillas para ello. Luego continuaremos con la fase dos. Ahora tenemos nuestra comida. Ahora, nuevamente, agregué algunos otros modelos aquí. Así que puedes seguir adelante y crear algunas nuevas plantillas. No voy a pasar por todas ellas, pero será un proceso bastante similar. Simplemente crea una nueva entidad, agrega tu modelo. Nuevamente, el de forma de diamante. Aumenta un poco el tamaño para que tenga sentido. Y crea una nueva plantilla a partir de eso y colócala en la carpeta de plantillas aquí. Nuevamente, solo usaré la manzana por ahora. Genial. Ahora, si comparamos esto con esto, se ve un poco diferente. Estas sombras aquí... Tenemos las sombras, pero no son tan fuertes como aquí. Estas son sombras bastante fuertes, se ven un poco grises. Además, nuestro fondo es de un solo color. Sí, eso no es realmente lo que queremos. Queremos mejorar la apariencia de eso. Tienes este bonito tono verdoso, que se ve bien. Entonces, la forma en que podemos hacer eso en Play Canvas es... Así que admitimos dos tipos diferentes de luz ambiental. Esto es lo que nos falta, luces de entorno. Así que si abrimos aquí en la barra de herramientas, la última opción allí, configuración, el pequeño engranaje, puedes abrir... Tenemos muchas configuraciones interesantes aquí, como algunas configuraciones del editor, cosas como divisiones de la cuadrícula, cámara, cerca y lejos para el editor, configuraciones de idioma, puedes seleccionar el motor. Muchas cosas interesantes que puedes hacer aquí. Pero lo que quiero mencionar es el apartado de renderizado. En el renderizado, puedes seleccionar tu color ambiental, puedes seleccionar el mapeo de tonos, puedes seleccionar el gamma, también tenemos nieblas, como lineal exponencial, puedes establecer una resolución objetivo en la que se basarán todas tus cosas. Muchas cosas interesantes aquí, muy técnicas. Pero lo que nos preocupa aquí es la luz ambiental, es la luz de entorno, eso es lo que queremos. Entonces, si simplemente, lo más sencillo sería cambiar la luz ambiental, ¿verdad? Porque si simplemente la subes, está empezando a verse mejor, porque ahora las sombras no son tan fuertes. Sabes, si la bajas por completo, solo tenemos la luz principal o no tenemos nada. Así que si la subimos, tenemos algo así, ¿verdad? Pero creo que puedes hacerlo mejor. Así que admitimos cubemaps para el mapeo del entorno, eso es de lo que estamos hablando, mapeo del entorno. Y ya tienes eso aquí. Así que si abres comida, entorno, tenemos... Este cubo con seis caras... Tal vez hayas visto este tipo de imágenes antes. Así que tenemos seis imágenes que definen un cubo que podemos usar para dar iluminación y dar un entorno a nuestra escena. Así que podemos hacerlo muy fácilmente de la siguiente manera. Así que en entorno, creemos un nuevo recurso. Llamémoslo cubemap, nuevo recurso, cubemap. Llamémoslo entornos. Y aquí puedes ver que hay espacios para seis imágenes, que nuevamente definirán ese cubo.

11. Resumen de la Fase Uno e Introducción a la Fase Dos

Short description:

Aprendimos cómo crear y gestionar activos, usar plantillas y utilizar la pestaña de lanzamiento para realizar pruebas. La pestaña de lanzamiento nos permite ver el juego desde la perspectiva de la cámara y realizar cambios en tiempo real. La función de Enlace del Editor conecta todas las pestañas con el enlace launch.playcanvas.com, lo que permite la colaboración y las pruebas en diferentes dispositivos. También discutimos el resumen de la fase uno y proporcionamos un enlace al proyecto para la fase dos, donde exploraremos la física, la programación de scripts y la animación.

¿Verdad? Así que si echas un vistazo a cada una de estas imágenes, sus nombres ya son bastante autoexplicativos sobre lo que representan. Por ejemplo, esta es la parte trasera. Esta es la parte inferior. Esta es la parte frontal, etc., que son exactamente esos nombres aquí. Así que tenemos una parte inferior, una parte trasera, una parte frontal, etc. Si tomamos cualquiera de estas, por ejemplo, la primera es la parte trasera. Si tomamos esta y la arrastramos hacia atrás, automáticamente veremos que hay más imágenes aquí. Todas tienen los mismos nombres. Así que simplemente las aplicaremos todas aquí. Ahora ya tenemos nuestro mapa de cubo configurado. Y una vez que hagamos eso, queremos hacer clic en este botón aquí. Este botón mágico. Es posible que debas desplazarte un poco hacia abajo. Pre-filtrar mapa de cubo. Lo que hará es básicamente crear diferentes MIP maps para esas texturas para que podamos usarlas correctamente. Así que Play Canvas las utiliza correctamente para el mapeo del entorno. Solo haz clic en el botón. Y luego, si alguna de estas texturas cambia, deberá eliminarse y luego volver a generarse sin cambios. Así está bien. Ahora, si volvemos a la configuración aquí, en el pequeño engranaje a la izquierda, podemos usar este mapa de cubo de entorno como skybox. Simplemente lo seleccionamos y lo arrastramos al skybox. Y luego, oh, aquí vamos. Ahora tenemos algo ahí. Así que ahora tenemos esa agradable... Utiliza el entorno para calcular la luz ambiental, por lo que no es un color fijo. Y ya tenemos este bonito fondo aquí. Además, aquí en la configuración puedes cambiar el nivel de MIP. El nivel de MIP es básicamente la cantidad de detalles que habrá. Si usas el nivel de MIP 1, se utilizará la textura sin procesar. Lo cual, si intentas estirarla por toda la escena, necesitarás una textura masiva. Y como puedes ver, esto no se ve muy bien si usas el nivel de MIP 1. Solo necesitas texturas de 8K para que se vea genial, si eso es lo que quieres. Pero en nuestro caso, nuestras imágenes son bastante pequeñas. Así que hagamos trampa un poco y usemos niveles de MIP más pequeños o un nivel de MIP más alto para un tamaño de textura más pequeño. Así que eso es tres. Entonces se difumina y no puedes ver los detalles. Y se ve bastante bien. Genial. Esto es el final de la fase uno, en realidad. Sí, con esto ya tenemos nuestro proyecto configurado. Volvamos aquí a las diapositivas. ¿Qué aprendimos? Aprendimos cómo crear y gestionar activos. Aprendimos sobre la creación y el uso de plantillas. Oh, no usamos la pestaña de lanzamiento. Usemos la pestaña de lanzamiento, en realidad. A medida que construyes cosas, podrás ver qué es lo que estás construyendo. Así que si vas aquí a tu vista, hay un pequeño botón de lanzamiento aquí. Y si haces clic en eso, se abrirá una nueva pestaña y se cargará el juego. Y esto es exactamente lo que ve la cámara. Así que si vamos aquí y luego seleccionamos la cámara... Esto es lo que ve la cámara. Justo ahí. Esto es lo que llamamos la pestaña de lanzamiento. Y esto es como si el juego estuviera en ejecución, ¿verdad? Así que si tienes scripts, una vez que tengas scripts, esto será el juego real en ejecución. Mientras que esto es solo el editor, ¿verdad? Ahora lo genial es que si movemos algunas cosas... Así que digamos que no me gusta este obstáculo aquí. Quiero moverlo. Quiero ponerlo aquí y quiero poner este aquí. A medida que mueves cosas, tu pestaña de lanzamiento también cambiará automáticamente. Vale, no pudimos ver eso muy bien. Movamos la manzana, la comida. Así que si la manzana realmente estaba aquí y saltas hacia atrás, se moverá automáticamente. Esto se llama Enlace del Editor. Así que cada pestaña que tenga esto abierto con el enlace launch.playcanvas.com estará conectada. Y como puedes ver, esta conexión es como en Internet mismo, lo que significa que si estás construyendo un juego para dispositivos móviles y abres exactamente este enlace en tu dispositivo móvil y accedes con Play Canvas allí, es muy fácil. Puedes ver las diferencias en un dispositivo móvil a medida que realizas cambios en el editor. Es en tiempo real. Y esto es, nuevamente, de lo que hablaba antes sobre la colaboración también. Así que si tienes algunas personas testing, algunas personas construyendo, todas estas personas conectadas en la misma escena y todos pueden probar juntos. ¿Qué opinas de esto? ¿Qué tal esto? ¿Este color es mejor? Y luego todos ven en tiempo real cómo se realizan los cambios. Esta es la pestaña de lanzamiento. Sí, lo siento, me olvidé de eso. Bien, ahora tenemos el resumen de la fase uno. Sí, así que hablamos sobre la pestaña de lanzamiento y hablamos sobre el enlace del editor, ¿verdad? Antes de pasar a la siguiente fase, si hay alguna pregunta o algo así, por favor, déjalas en el chat, ya sea aquí en Zoom o en Discord. De lo contrario, creo que estamos listos para continuar. Así que para la fase dos, nuevamente, como prometí antes, tenemos el proyecto solo para eso. Así que dejaré el enlace aquí. También lo pegaré en este código. Así que eso es la fase dos, ¿verdad? Así que para mí, sí, simplemente continuaré desde aquí y para ustedes también, pueden continuar desde su proyecto actual o si creen que no se ve tan bien, también pueden bifurcarlo. Genial, vamos, ¿verdad? Ahora, para la fase dos, introduciremos otras cosas interesantes. Ahora haremos física, programación de scripts y animación. Oh, muchas cosas por hacer, el papel es grande. Genial, así que comencemos con la física. Lo primero que haremos con la física es comenzar desde lo mismo con lo que comenzamos en la fase uno, que es el suelo.

12. Añadiendo Componentes de Colisión y Cuerpo Rígido

Short description:

Para añadir colisión al plano, necesitamos agregar el componente de colisión e importar el módulo de física llamado Ammo. Después de añadir la colisión, ajustamos su tamaño para que coincida con el modelo. También añadimos un componente de cuerpo rígido para hacer que la colisión sea rígida. El mismo proceso se aplica a los obstáculos. Al crear un componente de colisión y un componente de cuerpo rígido, nos aseguramos de que los obstáculos no puedan ser atravesados.

Asegurémonos de que el plano tenga una colisión. Porque en este momento, solo tiene un componente de renderizado, ¿verdad? Así que aquí, si seleccionamos la entidad del plano, solo tiene la información de posición, rotación y escala. Tiene un componente de renderizado, tiene información de renderizado, pero no tiene colisión. Así que vamos a añadirla. Ahora, la forma de hacerlo es simplemente añadir componentes, que añadirán comportamientos a esta entidad.

El que queremos es el componente de colisión. Así que si haces clic aquí en componente, puedes ver todos los componentes que soportamos. Tenemos cosas como audio, de las que hablaremos más adelante. Puedes tener cámaras, elementos. Esto es para cosas de interfaz de usuario. Tenemos el modelo para el renderizado. Ya tenemos un componente de renderizado, así que no podemos añadirlo de nuevo. Tenemos scripts, de los que hablaremos más adelante. Lo que queremos es la colisión.

La primera vez que añades una colisión, aparece este botón rojo aterrador, que dice `Módulo ML no encontrado`. Ahora, lo que esto significa es que Play Canvas por sí solo, no tiene un motor de física y no viene con uno porque la mayoría de la gente no usa física, el módulo de física. Si incluyéramos física en todos los juegos, los builds serían demasiado grandes, así que no lo incluimos realmente. Si quieres usar física, necesitas importarla manualmente. Pero importarla manualmente es simplemente hacer clic en un botón. Solo haz clic en `Importar Ammo`. Solo espera un segundo. Verás aquí en tus activos que se ha creado esta nueva carpeta llamada Ammo y algunos archivos allí. Ahora, Ammo es el nombre de un motor de física muy conocido, respetable y con JavaScript. Puedes buscar más información más tarde. También tienes alguna documentación que explica de qué se trata, cómo usarlo, etc. Para nuestros propósitos, esto simplemente significa que hemos importado el módulo de física y ahora podemos usar física en nuestro proyecto.

Ahora, si seleccionamos nuestro plano de nuevo con la colisión, ahora ya no tiene el botón rojo aterrador porque ahora ya tenemos Ammo. Olvídate de eso ahora. Hemos terminado. Estamos configurados. Tenemos Ammo. Ahora asegurémonos de que la colisión de física tenga el mismo tamaño que el modelo mismo porque cuando creamos, podemos ver aquí. Esto es una vista previa de la colisión. Pero necesitamos que cubra todo. Hagámoslo grande también. Utiliza la mitad de las extensiones. Así que la mitad de las extensiones es la mitad de la extensión. Así que si nuestra escala es 25, solo queremos que sea 25 dividido por 2. Así que sería 12.5. Y lo mismo en z. Así que el plano punto dividido por 5. Puedes hacerlo o dentro de esta extensión, oh, lo siento, 25. También vamos a bajar el eje Y. Bájalo. El eje Y puede ser algo. Sí, esto debería estar bien. Así que es muy pequeño. Sí. Así que ahora tenemos una colisión. Ahora, lo que también necesitamos para una colisión es un cuerpo rígido. Porque si solo añades una colisión, se tratará como un disparador, lo que significa que las cosas pasarán a través de él. Pero solo te informará de que ha pasado. Pero en realidad queremos que sea algo rígido que no se pueda atravesar. Así que añadiremos un nuevo componente llamado cuerpo rígido.

Ahora, el cuerpo rígido necesita una colisión para funcionar, ¿verdad? Así que mantengámoslo estático. No moveremos la arena. Pero aumentemos la fricción a 0.5. Así el jugador no se deslizará mientras camina. Pongámoslo en 0.5. La restitución está bien en 0.5, porque las cosas no rebotan realmente. Pero aumentemos la fricción. Si alguna de estas cosas te hace preguntarte, ¿qué es esto? ¿Qué es estático en renderizado? ¿Qué son las capas? Solo tienes que pasar el ratón por encima, y te dará una herramienta que explica qué es, y un enlace a la referencia de la API con más información. Esto es, por ejemplo, la documentación de la capa para el componente de renderizado. Muy fácil, solo pasa el ratón por encima de cualquier cosa que no entiendas. Oh, ¿qué es la fricción? Oh, esto es la fricción. ¿Qué es la restitución? Pasa el ratón, haz clic en la referencia de la API. Te dará una explicación mucho mejor que la que yo podría dar. Así que sigamos adelante.

Ahora tenemos la colisión para el plano. Añadamos también colisión a los obstáculos, porque no se puede atravesarlos, ¿verdad? Así que el obstáculo, cualquiera de los obstáculos que hayas creado, si hiciste una plantilla, esto funcionará perfectamente. Añadamos una colisión allí. Así que lo mismo, crea una colisión. Asegurémonos de que cubra la extensión, ¿verdad? Así que creo que esto debería ser uno. Sí, debería ser uno porque lo hice con dos. ¿Verdad? Genial. Ahí lo tienes. Ahora cubre todo el tamaño del obstáculo, todo el modelo. Pero de nuevo, también queremos añadir el cuerpo rígido. ¿Verdad? Asegurémonos de que sea realmente algo rígido. Solo añadamos un cuerpo rígido. Mantengamos los valores predeterminados de fricción y restitución. Y de nuevo, mantengámoslo estático porque no queremos moverlo realmente. Crearemos nuevos tipos de cuerpos rígidos más adelante. Así que el jugador no será un cuerpo rígido estático. Sigamos adelante. Así que puedes ver que cuando creas cosas nuevas, como esta es una plantilla, se resalta con este tinte azul y te da aquí en la parte superior esta información de anulación de instancia de plantilla. Esto significa que esta instancia de la plantilla tiene algunas modificaciones que la plantilla original no tiene. Y luego podemos mantenerlo así, solo esta tiene estos cambios, o podemos aplicarlo a todas las plantillas duplicadas. Es muy, muy bueno que también puedas presionar ver diferencias aquí para ver exactamente qué ha cambiado.

13. Añadiendo Colisión y Rigidez a las Entidades del Juego

Short description:

Añadimos componentes de colisión y cuerpo rígido a las entidades de obstáculos y comida. El componente de colisión nos permite detectar colisiones con el jugador, mientras que el componente de cuerpo rígido asegura que los obstáculos no puedan ser atravesados. También añadimos un componente de colisión a la entidad del jugador, utilizando una forma de cápsula para permitir la rotación y el movimiento. La entidad del jugador también tiene un componente de cuerpo rígido para interactuar con otros objetos. Aplicamos estos cambios a las plantillas respectivas para garantizar la consistencia. Ahora, pasemos a la escritura de scripts utilizando la plantilla del controlador del jugador.

¡Oh, ahora tenemos colisión y cuerpo rígido, así que hay nuevos componentes allí! Muy bien, esto es exactamente lo que queremos. Cuando presionas aplicar todo, se aplica a la plantilla que luego se aplica a todas las instancias de la plantilla, ¿verdad? Así que ahora, si seleccionas cualquier otro obstáculo allí, todos ellos ahora tendrán colisión y cuerpo rígido lo cual es exactamente lo que queremos, así que es muy fácil aplicarlo a todos ellos.

Genial, ahora añadamos también una colisión a nuestra comida allí porque, de nuevo, refiriéndonos a nuestra jugabilidad, una vez que recojas la manzana o el pastel o lo que sea, algo sucede, así que necesitamos verificar cuándo sucede eso. Así que añadamos una colisión también a nuestra manzana. Entonces, seleccionando la entidad de la comida o como la llames, también añadamos una colisión. Así que lo mismo, añadir componente, colisión. Ahora, para esto, realmente no queremos que el jugador choque con la manzana o el plátano en el suelo y rebote. Queremos recogerlo realmente. Así que no es un cuerpo rígido, solo tendrá una colisión. Pero con esto, podremos añadir un script que nos permitirá saber cuándo el jugador colisionó con eso. Con esto, puedes seleccionar el tipo de colisión que deseas. Creo que para este ejemplo, una esfera funciona muy bien. Solo aumentemos un poco el tamaño de la esfera. Sí. Así cubre un poco más que el tamaño real de la malla pero creo que está bien. Pero por cierto, si quieres que la colisión sea exactamente correcta, puedes usar la malla aquí y luego puedes seleccionar la malla de la manzana real para que sea la colisión, ¿verdad? Si quieres que sea exacto. Es un poco más lento, pero dependiendo de la malla o dependiendo de tu caso de uso, es posible que desees tener la colisión física exacta allí. Pero de nuevo, en nuestro caso de uso, creo que una esfera está más que bien y también puedes comprobar aquí la vista previa de dónde está. Es como si hubiera un halo a su alrededor. Creo que está bien. Y nuevamente, asegurémonos de aplicarlo a nuestra plantilla. Así que aplicar todo. Ahora hemos aplicado a nuestra plantilla de comida. Y nuevamente, si tienes más de una plantilla de comida, asegúrate de hacerlo en todas las plantillas, de lo contrario, algunos alimentos no serán recolectables.

¡Genial! Y ahora, finalmente, así que tenemos colisión en todo excepto en los jugadores. Ahora agreguemos colisión también al jugador. Así que ahora estoy seleccionando una entidad de jugador aquí en la plantilla del jugador mejor, que nuevamente, es la que contiene el personaje medio aquí, que es el modelo. Añadamos colisión allí. Así que aquí, añadamos un nuevo componente, lo mismo, nuevamente, ustedes se están convirtiendo en expertos en esto. Así que añadir una colisión. Ahora es muy común que los personajes como este sean cápsulas. Y una cápsula se ve así. Así que es muy fácil controlar esto, para que sea como un personaje que puede rotar alrededor y chocar y multiplicarse, realmente chocar contra cosas mientras está rotando. Es una forma muy agradable de usar para eso. Y lo que haremos en la cápsula, aumentemos la altura a tres. Y hagamos que el radio sea 0, creo que 0.5 está bien. Ahora, lo que sucede aquí es que la cápsula, la colisión tiene sus límites alrededor del punto central, ¿verdad? Así que ahora está utilizando lo que sea esto. Así que si quieres que el jugador realmente encaje dentro de eso, necesitaremos tomar nuestro modelo de personaje y moverlo hacia abajo un poco. Dado que el tamaño de nuestra colisión es tres, lo que necesitaremos es seleccionar nuestro personaje medio y luego establecer el ancho menos tres dividido por dos. Oh, lo siento, menos tres dividido por dos, lo siento. Menos tres dividido por dos menos tres dividido por dos. Y luego volvamos a ponerlo en el nivel del suelo. Así que eso debería ser alrededor de 1.5 entonces. Así que ahora nuestro personaje está nuevamente en el suelo, pero colocamos la colisión en el lugar correcto. Creo que se ve bien. No hay colisión en la cabeza, pero creo que está bien para nuestro caso de uso. Esto debería estar bien, está bien.

Ahora nuevamente, queremos que el jugador choque contra cosas, así que el jugador es un cuerpo rígido. Así que agreguemos un componente de cuerpo rígido a él, hacia el jugador, así que el mismo que tiene la colisión. Pero este no será estático, este será dinámico. Una vez que cambias de estático a dinámico, se abren muchas nuevas opciones. Y nuevamente, si tienes alguna pregunta sobre qué significan estos números, simplemente pasa el ratón por encima de esto, y luego puedes ver la referencia de la API, puedes ver algunos consejos allí. Esto es similar a otros motores de juegos también, donde en términos de masa, amortiguación lineal, etcétera, etcétera. Te daré los números que usaré, que también podrás ver en los proyectos completos más tarde, pero si quieres usar los mismos números que yo, entonces la masa es 100, la amortiguación lineal es 0.9999, así que cuatro nueves, así que no es exactamente uno, de lo contrario no se movería, pero es casi uno. Esto es para evitar que el jugador se deslice, así que te estás moviendo, y solo se mueve mientras estás agregando fuerza, de lo contrario se detendrá, queremos un número cercano a uno pero no realmente uno, 0.9999 funciona bien. Usaremos ese mismo número para la amortiguación angular, así que 0.999, y también usaremos el mismo número para la fricción. Así que puedes copiar ese mismo número, así que nuevamente 0.99999999 para la amortiguación lineal, la amortiguación angular y la fricción. Ahora, ¿qué hacen estos nuevamente? Aseguran que el jugador se sienta bien en el suelo que has configurado. Siéntete libre de cambiarlo, ya sabes, jugar con esas cosas. Tal vez tu juego tenga algunas mecánicas geniales y delgadas. Tal vez el suelo sea en realidad hielo o algo así. Vuelve locos con estos números. Pero lo importante es el factor angular, queremos poner cero en x y z. ¿Y qué hacen estos? Esto evita que nuestro personaje se caiga porque si lo piensas, si piensas que esto es una cápsula, en el mundo real, y tratas de ponerlo así se caerá, ¿verdad? Pero eso no es realmente lo que queremos. Queremos que el personaje esté de pie así y solo camine así. Debe poder rotar así. Así que es por eso que mantuvimos el y en uno para que pueda rotar en el eje y. Pero no queremos que rote en el eje x o el eje z. Así que lo ponemos a cero en el factor angular. El factor lineal debe ser uno, uno, uno porque puede moverse en todas las direcciones. Tal vez no en y, pero mantengámoslo en uno. Simplemente no queremos que rote en nada más que en y. Así que esta es mi configuración. Nuevamente, siéntete libre de usar tus propios números. Esta es la que se siente bien aquí. Y puedes echar un vistazo a eso más tarde. Ahora apliquemos esos cambios a la plantilla. Así que haré clic en aplicar todo. Sigamos adelante. Necesitamos seguir adelante. Hablo demasiado. Genial, así que ahora comenzaremos a usar la plantilla de script. Así que ahora nos estamos moviendo a la escritura de scripts. Comencemos con algunos scripts que tenemos aquí. En las plantillas de script ya tenemos algunas plantillas nuevamente. Ya sabes, algo de código de plantilla para la mayoría de las funcionalidades. Comenzaremos con el controlador del jugador. Encuentra el controlador del jugador.js en las plantillas de script. Muévelo a algún lugar que tenga sentido.

14. Creando una Nueva Carpeta y Personalizando el Editor

Short description:

Creemos una nueva carpeta llamada jugador y movamos nuestro script allí. El editor en línea está impulsado por Visual Studio Code y tiene varios temas para elegir. También puedes ajustar el tamaño de fuente para una mejor visibilidad.

Creemos una nueva carpeta. Llamémosla jugador y luego movamos nuestro script allí. Entonces, nuevamente, un controlador de jugador. Movámoslo a esa carpeta de jugador o podemos dejarlo allí. Pero creo que esto... creo que esto funcionará mejor. Y luego... si haces doble clic allí, se abrirá una nueva pestaña con el script. Ahora este es el editor en línea que, nuevamente, está impulsado por Visual Studio Code. Ahora el tema que estoy usando es en realidad el mismo que Visual Studio Code. Pero si ustedes quieren cambiarlo, no estoy seguro de cuál están usando. Pero si van aquí a editar preferencias, también pueden cambiar el tema del editor. Tenemos una variedad de temas diferentes que pueden usar. Y diría que aumenten el tamaño de fuente para que puedan... Aquí pueden verlo mejor. Permítanme aumentarlo aún más para que lo vean un poco mejor. 18. Pero nuevamente, pueden usar el tema que deseen.

15. Scripting and Input

Short description:

Los scripts en Play Canvas son 100% JavaScript y se cargan y aplican a tu sitio web mientras el juego se carga. La clase controladora del jugador se crea utilizando el método PC.createScript. El método initialize se llama antes del primer fotograma, lo que permite la configuración, mientras que el método update se llama una vez por fotograma. La entrada se puede agregar utilizando el método keyboard.isPressed, lo que permite el movimiento basado en las teclas presionadas. El método applyForce se utiliza para aplicar movimiento al cuerpo rígido. Es posible que sea necesario ajustar la escala según la velocidad de movimiento deseada.

Ahora, los scripts en Play Canvas son 100% JavaScript y se cargan... Se descargan y se aplican a tu sitio web, a tu código, mientras el juego se carga. Lo que significa que la forma de crear funciones es definir qué son las funciones. En este caso, tenemos la clase controladora del jugador. Y esto es lo que nos dice la línea 1. La línea 1 nos dice que tenemos una nueva clase llamada variable playerController. Esa es una clase. Y estamos llamando al método PC.createScript. Ahora, esto ocurre cuando creas un nuevo script desde... Desde el principio, si simplemente creas un nuevo script, como este código de plantilla estará allí, que es una breve explicación. Esto significa que estás creando una nueva clase llamada playerController que es un script de PlayCanvas. Esto es lo que está haciendo esto. No es necesario preocuparse demasiado por esto. Ahora, el primer método que tenemos aquí es el método initialize. Esto se llama antes del primer fotograma en el que este script está habilitado. Entonces, si tienes una entidad que está habilitada de forma predeterminada en tu escena y comienzas el juego, esto se llamará justo antes de que comience a renderizarse. Por lo tanto, puedes configurar el estado interno, etc. El segundo método que tenemos aquí es el método update, que se llama una vez por fotograma. Ahora, lo importante es que esto es literalmente una vez por fotograma. Entonces, si tu juego se ejecuta a 30 FPS o si el juego se retrasa un poco y durante unos fotogramas se ejecuta a 10 fotogramas por segundo, esto solo se llamará 10 veces. Por esa razón, tenemos DT. DT es un número que representa el tiempo transcurrido en segundos desde el último fotograma renderizado. Podemos usar este número para escalar el movimiento y asegurarnos de no quedarnos demasiado atrás. Entonces, tenemos los métodos initialize y update. Como puedes ver, nuestro código de plantilla ya tiene algunas cosas. Pero le faltan algunas cosas, ¿verdad? Lo primero que nos falta es la entrada. Entonces, estamos inicializando algunos métodos, algunas variables. Tenemos x y z para el movimiento en x y z. Y luego ya estamos aplicando esa fuerza al cuerpo rígido si algo sucede, ¿verdad? Si hay algún movimiento. Pero no tenemos los movimientos reales. Y también tenemos el cálculo para ver cuál debería ser el ángulo del modelo. Siéntete libre de copiar este código, por cierto, en tus propios proyectos, si lo deseas. Esto es con lo que estamos empezando. Entonces, hagamos lo básico. Agreguemos algo de entrada aquí. Ahora, el método que queremos es lo que queremos hacer es verificar si estoy presionando, usemos WASD. Entonces, W, S, D, al estilo clásico de Doom. Así que veamos si se presiona w, avancemos. Si se presiona s, retrocedamos. Cosas simples como esas. La forma de hacerlo es simplemente, debemos verificar si Play Canvas nota que la tecla está presionada. Lo que debemos hacer es this.app. Ahora, this.app en JavaScript, en los scripts aquí, hace referencia a la aplicación Play Canvas, por lo tanto, a las cosas básicas de Play Canvas que puedes consultar. Ahora, esto, si no estás muy familiarizado con JavaScript, esto es el contexto en el que estás ejecutando actualmente. En este caso, esto será la instancia de este controlador de jugador. Entonces, tenemos this.app. Luego, haremos keyboard. Como puedes ver, tenemos resaltado de sintaxis, y también tenemos un autocompletado muy útil. Muy útil para ver. Ok, entonces, this.keyboard.isPressed. Y luego, si haces comando shift espacio, también puedes ver, también, como el algún controlador, algún autocompletado allí. Entonces, tienes el isPressed. Así que códigos de tecla, clave para probar, así que, la clave subrayada algo, ¿verdad? Entonces, lo que queremos es hacer referencia, como el PC, por ejemplo,.key. Subrayar w. Esto está verificando si se presiona la tecla w. Entonces, esto se. Y dado que se ejecuta en cada fotograma. Cada fotograma en el que se presiona la tecla w, esto es lo que sucederá. Y lo que queremos hacer es aumentar. Queremos decir que en x, nos moveremos uno. Así que usemos uno como una constante. Entonces, si w es verdadero, aumentaremos x. Y ahora simplemente copiemos este código y hagamos lo mismo para s, que es para retroceder. Así que simplemente cambiemos la tecla w por la tecla s. Pero ahora necesitamos ir en la dirección opuesta. Entonces, haremos x menos igual a uno. Esto también significa que si presionas w y s al mismo tiempo, se quedará quieto. Porque estás agregando uno y luego restando uno. Creo que tiene sentido. Y luego, copiemos eso nuevamente, ahora para a. Oh no, lo siento, espera. w debería estar en z, lo siento, no en x. Entonces, w y s deberían estar en z. Esto funcionará mejor. Entonces, w significa z más uno. s significa cero menos uno. Y luego, a significa x más uno. Sí. Y luego, d significará x menos uno. Ahora, esto funcionará bien con la configuración que tenemos actualmente. Así que, confía en estos números por ahora. Genial, ¿verdad? Entonces, ahora, si guardas eso, así que, comando s para guardarlo. Um, si volvemos ahora al editor, necesitamos, um, no, no, lo siento. Mientras aún estamos aquí, una cosa que debemos hacer es, um, estamos aplicando este movimiento a nuestro cuerpo rígido con el método applyForce. Ahora, el applyForce aplica, como, un método que aplica una fuerza inmediata en ese fotograma, en el cuerpo rígido que es posible que necesitemos escalar hacia arriba o hacia abajo. Porque, ya sabes, tal vez se mueve demasiado lento o demasiado rápido. Solo estamos usando uno, pero es posible que necesites, um, escalar eso hacia arriba o hacia abajo.

16. Agregando el Atributo de Potencia al Controlador del Jugador

Short description:

Agregamos un atributo de potencia a la clase controladora del jugador, lo que nos permite cambiar la escala de la fuerza sin modificar el código. Al establecer el tipo del atributo como un número, podemos usar tanto flotantes como enteros. Después de guardar el atributo, debemos hacer clic en el botón de análisis en el editor para actualizar los atributos. El atributo de potencia tiene un valor de 4,500,000, lo que afecta el deslizamiento del movimiento. Multiplicar el vector de movimiento por el atributo de potencia permite un movimiento dinámico. Con estos cambios, el jugador ahora puede moverse por la escena.

Y para hacer eso, necesitaremos agregar un parámetro para eso. Entonces agreguemos un atributo al controlador del jugador ahora. Uh, lo que hará un atributo es lo siguiente. Ahora, si regresas al editor, seleccionamos nuestro jugador, adjuntemos este script a la entidad. La forma de hacerlo es seleccionar la entidad del jugador, agregar componente, obtener un script. Con el script, um, está aquí en la parte inferior. Ahora puedes, um, seleccionar cualquier script que desees, que ya hayas creado, y agregar este comportamiento a él. Entonces aquí simplemente haces clic y seleccionas el controlador del jugador. Una vez que hagamos eso, tenemos el controlador del jugador adjunto allí, lo que significa que funcionará, hará cosas. Pero nuevamente, necesitaremos hacer esa escala de la fuerza. Lo haremos de la siguiente manera. Oh, por cierto, puedes hacer clic en crear y hacer clic aquí en editar para editar rápidamente ese script. Ya estaba abierto, así que solo sube uno. Pero aquí vamos. Um, entonces lo que necesitaremos hacer es crear un nuevo atributo para eso para que no necesitemos volver al código para cambiar ese número. Entonces lo que haremos es decir playerController, que nuevamente es el nombre de nuestra clase, ¿verdad? Pero atributos, los atributos de esta clase, vamos a agregar uno nuevo. Lo llamaremos potencia. Si solo agregas esto, necesitas darle un tipo. La forma en que hacemos el tipo es así. Así que ya nos da una buena documentation aquí. Entonces necesitas abrir y cerrar corchetes y decir tipo. Y luego como un flujo, le das un número. Ahora en JavaScript, si no estás muy familiarizado con JavaScript, no tiene el concepto de un entero o un flotante, solo es un número. Entonces, si haces flotante, esto no funcionará. Si haces entero, tampoco funcionará. Entonces necesitamos usar el número, que abarca tanto flotantes como enteros. Ahora, internamente no lo hace, como sabe qué tipo es, ya sabes, etc., puedes redondearlo, etc., obtener un buen número entero redondeado, pero el tipo es un número. Entonces nuevamente, playerController.attributes.addPower. Y luego le das un tipo y lo llamaremos número. Ahora, si guardamos eso y luego volvemos al editor, no está allí, ¿dónde está nuestra potencia? ¿Dónde está nuestra potencia? Necesitas hacer clic en este botón de análisis aquí, que volverá a procesar ese archivo, bueno, volverá a analizar ese archivo y verificar cualquier atributo que hayas agregado. Así que ahora aquí está. Ahora tenemos Potencia número allí. Entonces, cada vez que cambies los atributos, cambies los valores predeterminados o lo que sea, asegúrate de hacer clic en el análisis, al menos una vez en ese script para actualizar lo que el editor sabe sobre los atributos. Y el número agradable cuatro aquí es un número enorme, por eso era importante. Entonces, este es el 4,500,000. Así que cuatro cinco ceros cero cero cero, así que cuatro ceros. Y esto es importante por las razones del, ya sabes, el, cuánto deslizamiento queremos, etc. Así que juega con estos números si quieres. Ahora, si presionas play nuevamente, 45, cuatro ceros si presionas play aquí, bien, lo tenemos allí. Y luego si usas was, ¿verdad? No está corriendo, ¿verdad? Podríamos necesitar verificar qué está pasando, ¿verdad? Veamos. Veamos. Bien. Si revisamos nuestro código, creamos el atributo de potencia, pero no lo estamos usando en ninguna parte, ¿verdad? No está en las notas que necesitaba agregarlo allí. Lo siento. Entonces necesitamos usar, en realidad, el atributo de potencia que acabas de crear en nuestro código. Entonces aquí en la línea 37, si estás usando el mismo para estar en la línea 37, así que se llama movimiento aquí lo que estamos haciendo aquí es crear un Vec3, ¿verdad? Estamos definiendo nuestro vector de movimiento. Lo estamos normalizando y luego lo estamos escalando. Actualmente, solo lo estamos escalando a dt nuevamente. Entonces es un performance frame. Tiene sentido. Pero lo que necesitamos hacer es multiplicarlo por la potencia. Entonces, solo en dt aquí, simplemente di, veces this dot power. Ahora, nuevamente, esto será sobre la instancia del script y power será exactamente este valor aquí que en este caso será 4,500,000. Creo que eso es correcto. Ahora, si simplemente actualizamos esto, recogemos la nueva cosa. Oh, ahí vamos. Entonces ahora nos estamos moviendo, ¿verdad? Como puedes ver, no está girando demasiado y no tiene animación. Así que lo arreglaremos en un segundo. Pero OK. Nos estamos moviendo, ¿verdad? También es interesante que puedas- OK, este es en realidad este. Si haces esto, es como si estuviera girando. OK, me gusta eso. De todos modos, OK. Tenemos algunas interacciones básicas allí. Sigamos adelante.

17. Configuración de la Rotación del Modelo y Agregando Animación

Short description:

Para configurar la rotación del modelo, necesitamos mover la entidad del modelo, no el cuerpo rígido. Creamos un nuevo atributo llamado 'modelo' en el script y hacemos referencia a la entidad del modelo como su valor. Utilizamos el método 'setEulerAngles' para rotar el modelo en el eje y. Después de guardar y actualizar, el modelo rota. A continuación, creamos un gráfico de estado de animación para las animaciones de reposo y carrera. El editor de gráficos de estado nos permite definir el nodo de inicio, nodos para los estados de reposo y carrera, y transiciones entre ellos basadas en condiciones. El estado de reposo es la animación predeterminada y el estado de carrera se repite en bucle. Agregamos transiciones de reposo a carrera y de carrera a reposo basadas en la velocidad del personaje.

De acuerdo. Ahora, lo siguiente que queremos hacer es configurar realmente la rotación del modelo, ¿verdad? Porque de lo contrario, es como si estuviéramos haciendo esto, ¿verdad? Ahora, la forma en que queremos hacer eso es que no queremos rotar el cuerpo rígido en sí mismo. De lo contrario, afectará las rotaciones del cálculo de la física. Entonces lo que queremos hacer es simplemente mover el modelo. Solo el modelo, no el cuerpo rígido. Para eso, necesitaremos una referencia a la entidad del modelo en el script, que es el hijo del jugador. Solo a este. Y la forma en que lo hacemos es agregar un nuevo atributo para eso. Entonces aquí, creemos un nuevo atributo. Llamémoslo modelo. Luego, para el tipo, esto no será un número. Será una entidad. Ahora, estamos haciendo referencia a otra entidad. Y luego, antes de volver al editor, agreguemos el código para eso. Nuevamente, es un nuevo atributo. Puedes llamarlo como quieras, pero lo importante es que sea de tipo entidad. Y luego aquí, en la línea 43, al menos para mí, tenemos que establecer la rotación en el modelo. Eliminemos eso porque ahora podemos hacerlo. Y luego hagamos esto.modelo de entidad que es a lo que nos referimos con la entidad. Y haremos setEulerAngles. Creo que así se llama. Ahora, para las rotaciones, Play Canvas utiliza cuaterniones para la rotación, pero es muy complicado si quieres establecer cuaterniones tú mismo. Por lo tanto, utiliza rotaciones de cuatro dimensiones para evitar el bloqueo de cardán. Mucha explicación para nada, pero necesitamos usar setEulerAngles, no setRotation. Si usas setRotation, estarás utilizando los cuaterniones, lo cual no queremos, así que usamos setEulerAngles y quieres rotar en y. Pero ya agregué aquí el cálculo para la profundidad. No necesitamos escribirlo a mano. Así que simplemente pon cero para x. No queremos hacer nada en x. Queremos usar un nuevo ángulo para y y también quieres usar cero para z. Ahora, si guardamos eso, volvemos a nuestra pestaña de lanzamiento y luego actualizamos. Oh, okay. Así que puedes ver que es muy útil. Ya nos está dando algunos errores, lo cual es muy útil para debug, pero dice aquí, no se pueden leer las propiedades de null al leer setEulerAngles. Interesante. Volvamos aquí al código así que está tratando de leer setEulerAngles desde null. ¿Qué significa esto? Entonces, la entidad del modelo está nula. Por supuesto, porque olvidamos vincularlos. Si vuelvo al personaje, aquí al jugador, que tiene el script, necesitaré presionar el análisis nuevamente. Y ahora tenemos la entidad del modelo, en realidad aquí mismo, ¿verdad? Entonces lo que hacemos es hacer clic en el personaje medio y simplemente arrastrarlo allí. Ahora tenemos una referencia aquí a la entidad del personaje medio desde nuestro script. Si hacemos clic allí, podemos ver fácilmente dónde está. También se resalta allí. De acuerdo, ahí lo tienes. Bien. Ahora puedes actualizar aquí. Ahí vamos. Correcto. Ahora rota. Ahora es muy repentino, la rotación, pero no tendremos tiempo para, para arreglar eso, para hacer una rotación agradable. Les dejaré eso como tarea para que lo arreglen. O pueden ver cómo lo hicimos en el, en el proyecto completo más tarde. Pero, de acuerdo. Esto funciona por ahora. Sigamos adelante. Hagamos alguna animación ahora, tal vez. Porque eso es divertido. Porque nuevamente, ahora solo estamos en errores y no realmente sucede nada, pero agreguemos algo de animación.

Genial. Ahora, si vamos aquí a food, food random character en la carpeta de animación, ya tenemos idle y run. Así que esos son dos, nuevamente, dos archivos FBX que, nuevamente, simplemente arrastré y solté desde, desde ¿puedes descargar? Eso es todo. Esto es lo que me proporcionó aquí. Como si estuviera listo para generar todos esos archivos por mí. Pero lo que necesitaré hacer primero es crear un gráfico de estado de animación para eso, que define, oh, estoy en reposo o estoy corriendo. Y luego cómo hacerlo, ya sabes cómo hacerlo. Para hacer eso, seleccionemos la animación del personaje y creemos un nuevo gráfico de estado. Entonces nuevamente, en activos ahora, así que ahora estamos creando un nuevo activo, que será un gráfico de estado de animación. Nuevo activo y gráfico de estado instantáneo. Llamémoslo gráfico de personaje. Ahora, si hacemos doble clic en él, cambiaremos al editor de gráficos de estado de animación. Ahora, si alguno de ustedes ha utilizado otros motores de juegos antes, esto es muy similar a otras soluciones en términos de cómo configurar un gráfico de estado de animación. La forma en que funciona es que tienes un nodo de inicio y luego tienes nodos y transiciones entre ellos basadas en condiciones. En nuestro caso aquí, ya hemos creado el esquema básico más simple, que tiene un estado inicial, que actualmente no hace nada. Está en bucle. Es un estado sin animación adjunta. Lo que haremos es cambiar el nombre de este a reposo, por lo que la animación predeterminada... Por defecto, estás en reposo, como respirar, solo así. Y luego creemos un nuevo nodo. Lo siento, nuevo estado... Y llamémoslo correr. Entonces podemos cambiar entre los estados de reposo o carrera. El estado de carrera también se repetirá en bucle, porque estará haciendo esto, ¿verdad? Asegurémonos de hacer clic en bucle allí. Y agreguemos una transición de uno a otro. Hay una condición que hará que desde reposo, comencemos a correr... Y luego, si dejamos de correr, si la velocidad es cero, volveremos a reposo. Entonces haz clic derecho en reposo, agregar transición a correr. Lo mismo alrededor, agregar transición a reposo.

18. Creando el Gráfico de Estado de Animación

Short description:

Para crear el gráfico de estado de animación, agrega un parámetro para la velocidad del jugador y establece condiciones para la transición entre los estados de reposo y carrera. Asigna el gráfico de estado al modelo del jugador y vincula los clips de animación de reposo y carrera. Establece el parámetro de velocidad en 1.22 para una animación de carrera. Aplica los cambios a la plantilla del jugador y ajusta el parámetro de velocidad según la velocidad real del jugador.

Ahora, si solo hacemos esto, solo irá y vendrá y no sucederá nada. Así que necesitaremos agregar un parámetro para que el gráfico sepa en qué estado, ya sabes, cuál es la velocidad del jugador para que podamos movernos realmente. Así que aquí a la izquierda, puedes crear un nuevo parámetro. Así que parámetros, parámetro, y llamémoslo velocidad. Puedes llamarlo como quieras y también puedes elegir el tipo que desees. Tienes enteros, así que puedes forzarlo a ser un entero, flotantes, booleanos, así que verdadero o falso o un disparador. Un disparador será verdadero solo durante un fotograma en el primero y luego volverá a ser falso. Muy útil para cosas como disparar donde algo sucede solo una vez. En nuestro caso, queremos el flotante. Ese es nuestro número flotante, que nos dará un número que representa la velocidad. ¿Cuál es la magnitud del vector de velocidad con el que te estás moviendo? Así que con el parámetro de velocidad, ahora podemos seleccionar nuestras condiciones y luego déjame expandir esto un poco. Y luego aquí, puedo agregar la condición. Así que en reposo, solo quiero que vaya a correr si la condición de velocidad es mayor que 0.1. Así que 0.1 funciona bien en este caso. Queremos que el tiempo de salida sea nada. Así que simplemente borra el tiempo de salida. El tiempo de salida significa que solo hará la comprobación una vez que la animación haya terminado, pero en realidad queremos que pueda interrumpir la animación. Así que si estás en medio de tu reposo y comienzas a correr, dejarás de reposar y comenzarás a correr de inmediato. Así que asegúrate de borrar el tiempo de salida allí. Para la duración, puedes agregar cualquier valor que desees. La duración mezcla los dos estados a medida que la transición avanza en lugar de saltar de uno a otro. Este es el tiempo normalizado en función de la velocidad, en función del tiempo de la animación. Así que 0.2 es un buen número, da una pequeña mezcla. Hagamos lo mismo en el otro. De carrera a reposo, eso tiene una condición, pero solo lo haremos si la carrera es menor que 0.1. Así que si se va a cero, un número muy pequeño, probablemente no está corriendo, así que volverá a reposo. Nuevamente, asegúrate de borrar el tiempo de salida. El tiempo de salida no debe ser cero. El tiempo de salida debe estar en blanco, simplemente borra eso. Y luego, nuevamente, la duración, hagamos 0.2 o lo que sea. Genial, eso es todo en realidad. Esa es la configuración que necesitamos para el gráfico de estado de animación. Ahora, cuando creas el gráfico de estado, aún no asignas las animations. Las asignaremos en un momento. Esto solo define el comportamiento básico, solo el cerebro. Pero las acciones reales estarán bien pronto. Si haces clic aquí, luego en la selección anterior, o si presionas escape, volverás al editor principal de PlayCanvas. Ahora tenemos nuestro gráfico aquí. Lo que queremos es aplicar esa animación a nuestro modelo. Así que si volvemos aquí al jugador y luego seleccionamos el personaje medio aquí, necesitamos agregar ese componente para la animación. Así que agreguemos un componente, anim. Debería ser el primero, no este, anim. Y luego simplemente arrastra el gráfico de estado que acabas de crear. Solo arrástralo. Y ahora aquí, como puedes ver, los estados de reposo y carrera que creamos. Ahora hay algunos espacios para los clips de animación reales que debemos vincular, adjuntar. Pero antes de hacer eso, asegúrate de que en la velocidad, lo pongas en 1.22, porque según las pruebas que estaba realizando, este es un buen número para... Como si se estuviera ejecutando en todas partes. Se ve bastante bien. Entonces, nuevamente, 1.22 debería estar bien. Y luego en root bone, selecciona la entidad raíz aquí. Así que si expandes personaje medio, asegúrate de usar root bone allí. Esto es solo para asegurarnos de que... Esto es un poco técnico en cómo funcionan las animations, pero esto es solo para asegurarnos de que la animación y las entidades en la escena estén haciendo referencia a las mismas transformaciones. Así te aseguras de que todo se alinee correctamente. Solo una buena práctica. Y luego aquí en reposo y carrera, asignemos los clips de animación. Ahora, si abres aquí reposo... En realidad, lo siento, necesitaremos asegurarnos de seleccionar. Así que selecciona el gráfico de personaje, lo siento, selecciona el personaje medio aquí para asegurarte de seleccionar, de tener los espacios aquí. Así que selecciona el personaje medio en tu jerarquía y luego desde aquí, necesitaremos seleccionar esos clips. Verás, es como una placa de las películas. ¿Cuál es el nombre de esa placa? No lo sé. Así que en este caso, necesitamos seleccionar, es rootidle.glb. Así que simplemente arrástralo a reposo. Si no estás seguro de cuál usar, esa es una forma muy agradable de previsualizar, simplemente haciendo clic en él. Si haces clic aquí, verás, okay, esto es solo estar quieto. Hay un personaje aquí. Pero en este, okay, hay una buena animación aquí. Así que esto solo muestra la vista de alambre, pero puedes verificar qué sucede realmente así. Esto parece una animación de reposo. Así que eso es lo que queremos. Así que simplemente lo arrastré aquí y luego lo mismo para correr. Así que solo selecciono la carpeta de correr y quiero el root.run.glb. Simplemente arrástralo. Nuevamente, es el archivo que tiene la placa de película. Y si no estás seguro, simplemente selecciona. Okay, esta es una buena animación de carrera. Okay, genial. Genial. Ahora hemos realizado algunos cambios allí. Asegurémonos de aplicar eso a nuestra plantilla, ¿verdad? Así que aquí en la plantilla del jugador, asegúrate de aplicar todo. Que se aplique a nuestra plantilla. Solo haz clic dos veces allí. Ahora, si presiono play aquí. Okay, ya no está en la pose de T. Eso es bueno. Ahora está usando la animación de reposo pero no estamos cambiando el número de velocidad. Así que incluso si nos estamos moviendo, el gráfico de estado de animación sigue pensando que estamos en reposo. Así que debemos asegurarnos de establecer el parámetro de velocidad según la velocidad real a la que se mueve el jugador.

19. Animando el Modelo y Manejando Colisiones

Short description:

Para hacer referencia al componente de animación en la entidad del modelo, usamos this.modelEntity.anim. Al establecer el atributo de velocidad en la magnitud del vector de velocidad lineal, la animación refleja el movimiento del jugador. Para agregar funcionalidad cuando el jugador colisiona con un objeto coleccionable, creamos un script llamado controlador de coleccionables. Este script escucha el evento triggerEnter en el componente de colisión y proporciona una función de devolución de llamada para manejar el evento. En la función de devolución de llamada, usamos this.entity.destroy para hacer que el objeto coleccionable desaparezca.

Y la forma en que lo hacemos es si abres el editor. Así que aquí hay una bonita animación para hacer. Lo que necesitamos hacer es hacer referencia de alguna manera al componente de animación en el modelo, ¿verdad?, en la entidad y luego establecer el parámetro. Ahora ya tenemos esto configurado, ¿verdad?, la entidad del modelo. Y si miramos nuestra configuración, el modelo... Lo siento, la animación está en la misma entidad que el modelo. Así que podemos hacer referencia directamente al personaje medio y obtener el componente de animación de él, ¿verdad? El componente de animación de él. Así que eso es muy útil. Entonces, nuevamente, entidad del modelo, ¿verdad? O como lo llames aquí. Así que si haces this.modelEntity, que nuevamente hace referencia a la misma entidad que tiene la animación. Y luego dices .anim. Ahora estamos haciendo referencia al componente de animación de esa entidad. Y luego usamos setFloat. Ahora setFloat, necesitas especificar dos cosas. Primero, necesitas el nombre del atributo, así que lo llamamos velocidad. Y el número real, ¿verdad? Ahora el número, podríamos... La forma más fácil es simplemente usar el número real que está usando el Rigidbody. Como si estuviera aplicando fuerza y luego a veces está golpeando, blah, blah... Queremos el número real que está usando el Rigidbody. Y la clave para eso es this.entity.rigidbody. Con esto, obtenemos la referencia al Rigidbody. Y luego queremos la velocidad lineal, que nuevamente es... Así que esa es la velocidad en los ejes X, Y y Z. No la rotación, sino cuánto se está moviendo realmente. Pero esto es un Vec3, así que es como una cosa tridimensional real. Pero queremos la longitud de eso, ¿verdad? Queremos la magnitud, cuánto se está moviendo realmente. Así que podemos decir .length, que es un promedio. Y también puedes verificar la referencia para eso. Con esto, obtenemos la magnitud del vector de velocidad lineal y la pasamos a nuestra animación. Así que si guardamos eso, volvemos al juego. Tenemos que recargar los scripts, porque los scripts ya están cargados. Y luego nos movemos. ¡Genial! Ahora, ¿qué sucede si sigo presionando D para moverme a la derecha y luego choco con esa colisión allí? Veamos qué sucede. Oh, se detuvo porque está usando el Rigidbody real. No se ve como lo clásico en los juegos donde el personaje corre contra la pared así. Esto en realidad tiene un poco más de sentido, lo cual es bastante genial. Lo obtuvimos de forma predeterminada. Genial. Bien, ahora tenemos una integración muy buena aquí ahora.

Ahora, si tomamos a este jugador y vamos sobre la manzana aquí, no sucede nada, porque no agregamos nada para hacer eso. Así que agreguemos eso. Agreguemos un desencadenador para que cuando un jugador pase sobre el objeto coleccionable, haga algo. Volviendo al editor aquí, seleccionemos nuestra comida. Entonces necesitaremos agregar un script para eso, ¿verdad? Agreguémoslo aquí en coleccionables. Creemos una nueva carpeta. Llamémosla scripts. Luego, dentro de la carpeta de scripts en coleccionables, llamémoslo controlador de coleccionables. Esto es lo que mencioné, que crearemos algunos nuevos scripts en lugar de simplemente usar las plantillas de script, ¿verdad? Este es el único script que crearemos desde cero. Pero esto es interesante porque si creamos un nuevo script y simplemente lo editamos, esto es lo que viene con cada nuevo script de PlayCanvas, ¿verdad? Así que ya contiene el código de plantilla para crear y adjuntar un PC, que es como un script de PlayCanvas, y ya tenemos el método de inicialización y el método de actualización. Ahora este es un tema para otro taller sobre cambio en caliente, recarga en caliente. Así que lo dejo a ustedes para que lo vean más tarde. Simplemente lo eliminaré porque no lo necesitaremos. Y también estábamos moviendo el método de actualización. No necesitamos el método de actualización. Lo que necesitamos es una forma de decir cada vez que una entidad, cada vez que un colisionador pasa por esto, como si fuera recogido, ¿verdad?, y necesitamos hacer algo al respecto. Entonces, la forma en que lo haremos es ya que este script se agregará a la misma entidad que tiene la colisión, solo tenemos que escuchar un evento en la colisión. Este es un tema muy importante en PlayCanvas, que son los eventos. Los eventos en PlayCanvas se disparan y se activan por todos los diferentes componentes y todo está documentado. Pero es muy importante entender que los eventos impulsan el comportamiento de diferentes cosas. Lo que quiero decir con eso es el componente de colisión, por ejemplo, cada vez que otro colisionador entra o está allí, dispara un evento. Y si alguien está escuchando ese evento, puedes hacer cosas en función de eso. Así que no necesitas estar constantemente verificando si ha colisionado, si ha colisionado. No necesitas hacer eso, solo necesitas suscribirte a diferentes eventos. Y esto es lo que haremos. Nos suscribiremos al evento, lo llamaré adjuntando. Nos adjuntaremos al evento en el componente de colisión que dice que algo ha entrado en este colisionador. La forma en que lo hacemos es en el método de inicialización. Entonces nos adjuntaremos justo cuando comience el juego. Diremos this.entity.collision. Con esto, estamos haciendo referencia a la colisión de la entidad porque esta es la... Nuevamente, este es el controlador de coleccionables, este es el propio script. No estamos hablando del script, estamos hablando de la entidad a la que se adjunta el script. Entonces this.entity.collision. Ahora estamos hablando de la colisión. Ahora nos adjuntaremos a ese evento. Y para adjuntar decimos."on". Así que ese on, literalmente significa que cada vez que esto sucede en este evento, hagamos algo. El nombre del evento es triggerEnter todo en minúsculas todo junto. Y nuevamente, todo esto está documentado en PlayCanvas, una referencia sobre, ¿cuáles son los eventos que desencadenan la colisión y cómo puedo usarlos, etc.? Así que cada vez que haya una entrada de desencadenador en esta colisión en particular, podemos proporcionar una devolución de llamada. Ahora las devoluciones de llamada en JavaScript se pueden hacer simplemente haciendo referencia a otra función, o podemos crear una aquí mismo. Así que podemos crear una nueva función, una función anónima, haciendo la siguiente sintaxis. Así que son corchetes abiertos y cerrados, porque no hay, así que esta no tendrá ningún parámetro. Y hacemos igual más que, así una flecha. Y puedes proporcionar cualquier código que desees aquí. Así que este es el código, ¿verdad?. Esta es la función que se llamará cada vez que el colisionador que está adjunto a esta entidad tenga un desencadenador, ¿verdad?. Y lo que haremos aquí es, así que una cosa es que desaparezca, ¿verdad?. Así que hacemos this.entity.destroy. Así que desaparecerá.

20. Creando Controlador de Objetos Coleccionables y Gestor de Juego

Short description:

Para crear un controlador de objetos coleccionables, necesitamos disparar un evento cuando ocurra un desencadenador y destruir el objeto coleccionable. Luego, agregamos el script del controlador de objetos coleccionables a la entidad de la comida y lo aplicamos a las plantillas. Se crea una entidad de gestor de juego para manejar la funcionalidad general del juego, incluyendo la gestión del tiempo y la escucha de eventos. El script del gestor de juego ya está configurado para funcionar con el controlador de objetos coleccionables. También modificamos el código de generación de objetos coleccionables para hacer referencia a la plantilla de comida e instanciarla dinámicamente en la posición deseada.

Pero más que eso, también necesitábamos hacerle saber al juego, oh, has recogido algo. Ahora, las plantillas de script que hemos configurado allí también están escuchando eventos. Por lo tanto, los eventos pueden provenir de componentes, ¿verdad? Por ejemplo, el componente de colisión, o podemos disparar nuestros propios eventos. Así que puedes decirle a todos en la escena, puedes decirle a todos en la aplicación, decir, oh, por cierto, esto sucedió. Y la forma en que lo hacemos es decir, esto.startup, así que recuerda que esto.startup se refiere a la aplicación PlayCanvas. Y decimos, eso dispara. Con esto, estamos disparando un evento. Para que si alguien está escuchando este evento en particular, como nosotros que estamos escuchando el evento de desencadenador, el evento de finalización del desencadenador en la colisión. Recibirán inmediatamente ese mensaje. Y podemos decir, recógelo. Este es el nombre de la cosa que llamamos. Podemos obtener más información al respecto más adelante. Pero si simplemente decimos esto.app.fire, recógelo, cualquier cosa que esté escuchando en this.app, por ejemplo, si hacen this.app.collected, si hacen esto, recibirán el mensaje. Genial. Así que eso es todo. Este es el código que necesitamos para el controlador de objetos coleccionables. Cada vez que haya un desencadenador, disparamos ese evento. Y luego lo destruimos. Luego, lo que hacemos en la comida aquí es que necesitamos agregar ese script ahora. Entonces vamos aquí, agregar componente script. Y luego agregamos nuestro nuevo script llamado controlador de objetos coleccionables. Y nuevamente, necesitamos aplicarlo, para asegurarnos de aplicarlo a las plantillas. Y si creaste más de una plantilla, como tener plátanos y pasteles, e importaste tus propios activos y quieres usarlos, asegúrate de agregarlos al controlador de objetos coleccionables, a todo eso. Y probémoslo. Presiona play. Casi hemos terminado con la Fase Dos, no te preocupes. Y luego camino hacia la manzana. Oh, genial. Correcto. Desapareció. No sucedió nada más porque no hicimos nada más. Actualmente, nuestro juego consiste en acercarse a la manzana. Genial. Correcto. No sucedió nada. Así que sigamos adelante ahora mismo. Genial. Ahora, lo que queremos ahora es usar las plantillas de script que tenemos aquí. Correcto. Porque nuevamente, contiene código de plantilla para el juego real que puedes ver más tarde, copiar y hacerlo tuyo. Pero lo que necesitamos hacer es crear un gestor de juego. Así que tenemos una entidad de gestor de juego. Creemos en la raíz. Creemos un gestor de juego. Se llama gestor de juego. Script y agreguemos el script del gestor de juego. Que nuevamente, ya está allí, ¿verdad? Echemos un vistazo a lo que hace este gestor de juego. Asegúrate de hacer clic en analizar, por cierto, porque tiene algunas configuraciones allí. Entonces, si abres el script del gestor de juego, ya tiene un montón de cosas que no tendré tiempo de explicar aquí. Pero básicamente hace cosas como, oh, ¿estoy jugando? ¿La ronda ha terminado? Cosas como contar el tiempo, etc. Por ejemplo, están en el método de actualización. Disminuye el tiempo a medida que pasa el tiempo y luego dispara un evento. Cuando el tiempo se acaba, etc. Ahora, este gestor de juego ya contiene, como, la mayor parte del código que necesitamos para que funcione. Y si recuerdas, ya está escuchando el evento de recogida que acabamos de crear en nuestros recolectores en nuestro controlador de objetos coleccionables. Sí, como puedes ver, ya nos estamos adjuntando a este evento. Por lo tanto, el gestor de juego funcionará perfectamente con el controlador de objetos coleccionables que acabamos de crear. Entonces, bien, estamos listos para continuar. Ahora el gestor de juego está recibiendo el mensaje como queremos ahora, por cierto. El gestor de juego es un nombre interesante para darle exactamente a este es el script que no maneja nada en particular en tu juego. Solo maneja tu cosa general, ¿verdad? De acuerdo, he recogido algo. Los jugadores están allí, estoy comenzando un nuevo juego. Estoy reiniciando el juego. Acabo de ver aquí. Y si hacemos un comando F o control F para hacer, hay una cosa más, que es en la generación de objetos coleccionables. Ahora, la generación de objetos coleccionables ya tiene algún código aquí, que básicamente lo que hace es buscar una posición aleatoria en el tablero para un lugar que no tenga un obstáculo. Por lo tanto, esto ya está implementado para nosotros. Puedes echar un vistazo, echar un vistazo aquí hoy para ver cómo está implementado. Puedes hacerlo por tu cuenta. Puedes copiarlo. Pero lo que no está haciendo es generar. Entonces, si juegas esto y lo compruebas, no generará nada. Necesitamos agregar esa funcionalidad nosotros mismos porque quiero mostrarles cómo hacerlo. Quiero decir, ya, en este punto, en la línea 92, ya tenemos el nuevo X y el nuevo Z, que es exactamente la posición en la que queremos, queremos generar, pero necesitamos hacer eso. Ahora, para hacer eso, primero necesitamos una referencia a las plantillas que creamos. Y por eso quería crear una plantilla a partir de los elementos de comida que creaste. Correcto, por ejemplo, el manzana que tenemos es un vacío, es una plantilla que guardamos aquí, comida, ¿verdad? Entonces lo que queremos es en el game engine vamos a agregar un atributo para poder hacer referencia a esa plantilla y luego podemos instanciarla dinámicamente, ya sabes, a medida que recogemos cosas. Entonces lo que haremos es decir GameManager porque ahora es un GameManagerScript.attributes.add y llamémoslo plantilla de comida. Y luego, para el tipo, no es número, será un activo. Ahora, en lugar de nuevo, esto significa que no vamos a hacer referencia a nada que esté en la escena en este momento. Vamos a hacer referencia a algo que está en el activo del proyecto. Ahora no queremos hacer referencia a ningún activo, no puedes instanciar una textura, pero solo puedes instanciar una plantilla. Entonces vamos a decir que el tipo de activo es plantilla. Esto significa que la plantilla de comida solo puede aceptar referencias de tipo activo, que son plantillas. Así que estás seguro de que es solo una plantilla. Por cierto, si han creado más de una, si han creado varias plantillas de comida, tienen plátanos, tienen manzanas, etc., pueden decir, y los argumentos, pueden decir array equals true. Si hacen array true, esto significa que pueden agregar más de una plantilla de comida, y luego la plantilla de comida se convertirá en un array, y pueden hacer como dot length para ver cuántas se agregaron, o pueden hacer referencia con la cosa de las comillas. En nuestro ejemplo, solo hay una, así que lo mantendremos sin la cosa del array. Luego, lo que haremos, así que tengo la plantilla de comida aquí, volvamos aquí a la posición de generación de nuevos objetos coleccionables. Lo que haremos es decir, vamos a decir this.food template, ¿verdad?, punto resource punto instantiate, oh, lo siento, instanciar.

21. Fase Tres: Interfaz de Usuario y Publicación

Short description:

Creamos una nueva entidad a partir de la plantilla utilizando la API 'dot resource dot instantiate'. Luego, establecemos la posición de la nueva entidad y la agregamos a la jerarquía de la escena. Podemos usar las herramientas de desarrollo de Chrome para inspeccionar y depurar nuestro código, agregar puntos de interrupción y verificar variables. La pestaña de consola y de red son herramientas poderosas para depurar y monitorear las descargas de archivos. En la fase tres, nos enfocaremos en la interfaz de usuario y la publicación. Continuemos desde donde estamos y trabajemos en la interfaz de usuario.

Ahora, necesitamos hacer 'dot resource' porque queremos la plantilla cruda real de ella, como los datos reales que contiene de la referencia del activo, y luego queremos instanciar eso, así que esta es la API para hacerlo, 'dot resource dot instantiate'. Esto creará una nueva entidad, que es una copia de esa plantilla. Ahora, queremos hacer cosas con ella, queremos moverla donde queremos, así que vamos a hacer referencia a ella en algún lugar. Entonces digamos const nuevaEntidad igual a la instancia, y digamos nuevaEntidad dot establecer posición y UX0 hacer eso. Ahora vamos a posicionar la nueva entidad que acabamos de crear en esa posición que ya encontramos antes, ¿verdad? El código ya está hecho. Pero si solo hacemos eso, creamos una nueva entidad, pero aún no se agrega a la escena, en realidad. Necesitamos hacer que forme parte de la escena, de lo contrario estará oculta y se eliminará posteriormente. Así que necesitamos agregarla en algún lugar. Necesitamos agregarla a la jerarquía. Simplemente agreguémosla como hija de la entidad actual. Entonces digamos this dot entidad dot agregar hijo, nuevaEntidad. Ahí lo tienes. Ahora, con esto, estamos creando una nueva entidad, que es una instancia de la plantilla, estableciendo la posición y luego agregándola a la escena. Ahora, si presionamos play en esto, ahora, oh, no, en el gestor de juego, necesitamos analizar el script y debes hacer referencia a nuestra plantilla aquí. Entonces, dondequiera que hayas guardado la plantilla de comida, simplemente haz referencia a ella allí. Si configuraste todo correctamente, deberías poder, como, se resaltará y podremos simplemente arrastrar y soltar allí. Ahora, juega aquí. Si presionas play aquí. De acuerdo. Podemos caminar, ¿verdad? Entonces todo esto funciona, pero luego cuando lo recogemos, enviará un mensaje al gestor de juego. El gestor de juego luego lo destruirá y el gestor de juego generará uno nuevo. Así que generó uno justo allí. Entonces, si lo recojo, de acuerdo. Ahora generé uno allí. Así que puedes ver cómo el juego está casi listo, ¿verdad? Como estamos avanzando, ¿verdad? Ahora, una cosa rápida de la que quiero hablar, es muy importante. Esta es la última parte de la fase dos, la fase tres será bastante rápida. Luego, si puedes abrir las herramientas de desarrollo de Chrome yendo a Ver, Ver consola de JavaScript para desarrolladores, y luego desde aquí, puedes verificar cualquier cosa que suceda en tu código y agregar puntos de interrupción a medida que avanzas. Entonces, si ves aquí en Fuentes y abres Archivos de activos de API, puedes ver que aquí tenemos la misma jerarquía exacta que tenemos en el editor. Tenemos scripts de comida de ejecución de plantillas. Todos los scripts están aquí en la misma estructura de carpetas exacta. Entonces, si quieres ver qué está sucediendo en el controlador de jugadores, digamos que hay un error allí. Bueno, quiero saber qué está sucediendo allí. Puedes inspeccionar el código, asegurarte de que el código sea correcto. Y puedes agregar el punto de interrupción. Y luego esto sucederá solo cuando presione W. Así que presionemos W. De acuerdo. Se detuvo. Fue un punto de interrupción. Y podemos verificar cuál es el valor de DT. ¿Sabes en qué sección está eso? ¿Qué teclas se están presionando? ¿Sabes cuál es el estado de nuestra entidad? Puedes verificar todo aquí mismo desde las herramientas de depuración. Y simplemente presiona nuevamente para continuar. Vamos, estaba presionando W, así que vamos, movámonos allí. Oh, de acuerdo. Salí del mundo del juego. Genial. Sí, eso es bastante genial. Entonces, las cosas están aquí, ¿verdad? También puedes verificar en la pestaña de red. Exactamente. ¿Qué archivos has descargado? Y también puedes usar la consola para hacer más cosas. Entonces, si quieres, por ejemplo, disparar un evento, puedes hacerlo, puedes usar this.app.fire, ¿verdad? Lo siento, es pc.app.fire. Entonces dices, si disparo, si disparo el evento recogido, sí, simplemente, es uno nuevo porque piensa que el gestor de juego cree que algo fue recogido pero no lo fue. Entonces puedes hacer todo tipo de cosas locas aquí desde la consola y desde las fuentes. Es una herramienta muy poderosa para depurar cosas como de inmediato. Genial. De acuerdo. Finalmente, tenemos, así que esta es la fase tres. Volvamos a las diapositivas rápidamente. Así que, esa fue la fase dos. Lo siento, pasaremos a la fase tres. La fase dos fue grande. Aprendimos sobre la creación utilizando scripts. Aprendimos sobre eventos. Aprendimos sobre física. Aprendimos sobre animaciones. Aprendimos sobre todo tipo de cosas locas. Simplemente, no estoy seguro de cuánto podemos hacer en los últimos cinco minutos, pero veamos hasta dónde llegamos. Así que pasemos a la fase tres. Ahora, en la fase tres, también tenemos la misma configuración que antes, que tenemos el proyecto listo para la fase tres. Permíteme abrirlo. Permíteme enviarlo a ustedes. Esto es la fase tres. Nuevamente, si te perdiste en algún lugar y quieres continuar desde ahora, simplemente bifurca desde este punto y también envíalo en Discord o simplemente puedes continuar desde donde estás. Continuaré desde donde estamos actualmente porque casi hemos terminado. Creo que no tendremos tiempo para hacer audio. Creo que es posible que no tengamos tiempo para hacer eso, pero hagamos la interfaz de usuario. Al menos hagamos la interfaz de usuario. Ahora, si bifurcaste desde la fase tres o estás siguiendo con nosotros hasta ahora, tienes una configuración muy similar a esta y también tienes cosas en las pestañas de scripts.

22. Creando Pantallas y Elementos de Interfaz de Usuario

Short description:

En esta parte, crearemos pantallas de interfaz de usuario reales para el juego. Comenzaremos creando una pantalla 2D y agregando un elemento de texto para la puntuación. Personalizaremos la posición y el anclaje del elemento de texto. Luego, agregaremos un elemento de imagen para la barra de tiempo y configuraremos los anclajes para que coincidan con el tamaño del padre. También personalizaremos el color de la imagen. Por último, agregaremos un script a la pantalla 2D y haremos referencias a la entidad del gestor de juego y a la entidad de la barra de tiempo.

Ahora lo que haremos es crear pantallas de interfaz de usuario reales primero. Así que si volvemos a, lo siento, esto es muy molesto. Si volvemos aquí al ejemplo, la interfaz de usuario básicamente es así, tienes esta cosa de tiempo aquí, un texto de puntuación. Y si recuerdas cuando perdemos, hay una pantalla grande que dice, oh, se acabó el tiempo, ya sabes, ronda terminada, y luego un botón para comenzar de nuevo. Así que hagamos eso rápidamente. Veamos si podemos hacerlo a tiempo. Eso sería un desafío.

Entonces, en la raíz, creemos una nueva entidad y crearemos una interfaz de usuario. Crearemos una pantalla 2D. Ahora, todo lo que quieras que esté en el espacio de la pantalla, debe estar bajo una pantalla 2D. De lo contrario, estará en el mundo 3D. Así que creemos una pantalla 2D. Como siempre hay espacio en la pantalla, puedes moverla hacia arriba. Así que no estará en el medio de tu jerarquía. Puedes moverla hacia arriba donde quieras. Siempre estará en el espacio de la pantalla. Y agreguemos, comencemos agregando un texto que será la puntuación. Así que aquí, creemos una nueva interfaz de usuario. Elemento de texto. ¿Dónde está? Ahí. Asegúrate de que esté orientado hacia el lado derecho. Si no lo ves, probablemente esté en el otro lado. Espera un minuto. Cuando creas un nuevo elemento de texto, ya asigna una fuente aleatoria, no aleatoria, pero la primera fuente que tienes en tu proyecto. Así que en el juego de comida, aquí ya tenemos muchas fuentes interesantes configuradas. Elegiste la primera, Kenny Blocks, pero podemos elegir cualquier otra. Elijamos esta, cualquiera, Kenny Mini, Kenny Mini Squarer, sí. Elegí esta. Nuevamente, simplemente arrastra y suelta. Y luego podemos moverlo donde queramos en la pantalla. Por defecto, el elemento estará anclado al centro de la pantalla, lo que significa que si juego, déjame hacerlo así. Si juego, las áreas de texto estarán en el medio y si giro así, si hago algo en la pantalla, juego en un dispositivo móvil, siempre estará allí en el centro de la pantalla, lo cual puede tener sentido si eres nuevo en el caso de uso. Pero queremos que esté en la esquina superior izquierda, ¿verdad? Así que si está en la esquina superior izquierda, lo que hacemos es en el texto, podemos establecer el anclaje allí. Ya tenemos algunos ajustes preestablecidos aquí. Así que en preestablecido, si simplemente presionas el anclaje superior izquierdo, establecerá automáticamente el pivote y el anclaje en la esquina superior izquierda. Y luego podemos moverlo hacia abajo así o algo así. Llamémoslo texto de puntuación, ¿establecer puntuación a la derecha? Genial. Ahora tenemos el texto listo para el script que realmente colocará las puntuaciones a medida que avanzamos.

Ahora casi se nos acaba el tiempo. Si están contentos de continuar, continuemos por ahora. Sigamos adelante por ahora. Si necesitan irse, está bien. Pero creo que podemos, sigamos adelante por ahora, veamos hasta dónde podemos llegar. Iré tan rápido como antes. Pero nuevamente, creo que la grabación estará disponible más tarde también. Así que pueden echarle un vistazo más tarde. Y también nuevamente, el proyecto completo estará disponible. Sí, comenzamos unos minutos antes. Veamos, ¿qué vas a hacer en cinco minutos, Jorn? Veamos. Y el proyecto completo nuevamente estará disponible más tarde si quieren ver todo el proceso con un poco más de tranquilidad. Así que tenemos el texto de puntuación. Ahora agreguemos este tiempo aquí, esta barra, eso es bastante bueno. La forma en que lo haremos es la siguiente. También crearemos una nueva entidad, una nueva interfaz de usuario. Llamémosla elemento de imagen. Así que este elemento de imagen. También pongamos el ajuste en el anclaje superior izquierdo y mantengámoslo allí. Por cierto, esto significa que a medida que movemos las cosas, siempre estará en la esquina superior izquierda. Muy útil para crear una interfaz de usuario receptiva para dispositivos móviles que se pueden rotar o no. Sí, esta es una característica bastante buena. Si seleccionas aquí en el componente de redimensionamiento del elemento, puedes cambiar fácilmente el tamaño. Así que creemos ese fondo. Este es el fondo aquí, esa cosa blanca en la parte posterior, en el fondo. Y luego creemos una nueva entidad para ser la parte central, ¿verdad? Ahora coloquemos el color verde en este, que tenemos allí. Ahora queremos que ocupe todo el tamaño del tiempo, ¿verdad? Pero a medida que pasa el tiempo, debería ir así, ¿verdad? O así para ustedes. La forma en que lo hacemos es muy fácil, configurar los anclajes para que coincida con el tamaño del padre. Así que podemos hacer coincidir el tamaño del padre estableciendo los anclajes en todas las esquinas. Así que podemos seleccionar este gizmo aquí y luego ir aquí, así debería estar aquí. Esto debería estar allí. Esto debería estar allí. Y esto significa que el anclaje es 0, 0, 1, 1. Ahora tiene un margen, que no queremos. Así que está ocupando más espacio. Así que restablezcamos el margen allí. Así que todo es cero. Ahora está ocupando todo el espacio, pero si el margen disminuye así, puedes ver que esto es lo que queremos. Como el tiempo pasa, queremos que el margen aumente. Tenemos toda la configuración que necesitamos para hacer que esto suceda ahora. Tomemos el texto de puntuación aquí. Coloquémoslo allí ahora. Ahora, en realidad, esto es todo lo que necesitamos. Ahora, por supuesto, necesitamos agregar la etiqueta, el texto dice Simon, etc. No hagamos eso. Pero lo que haremos es en la pantalla 2D aquí, agreguemos un script y agreguemos el script del controlador de interfaz de usuario. Ahora, el script del controlador de interfaz de usuario ya tiene todo el código que necesitamos para configurar todas estas cosas correctamente, exactamente como las necesitamos. Pero solo necesitamos hacer las referencias a las entidades correctas. La primera que necesitamos es la entidad del gestor de juego. Así que esta es la entidad que contiene el script del gestor de juego, así que pongámoslo. Ahora necesitamos la entidad de la barra de tiempo. Así que esa es la verde.

23. Proyecto Final y Publicación

Short description:

Echemos un vistazo al proyecto completo, que incluye todos los controladores de interfaz de usuario y una configuración final del juego. Siéntete libre de usar los activos CC0 de Kenny y agregar los créditos correspondientes. Para publicar en Play Canvas, haz clic en el botón 'publicar/descargar', dale un nombre y presiona 'publicar ahora'. El enlace resultante es permanente y se puede compartir. Play Canvas se puede jugar en dispositivos móviles y en múltiples plataformas. Eso es todo por hoy. Gracias por unirte y lamento haberme extendido.

De acuerdo, genial. La entidad de texto de puntuación. Bien, pongámoslo ahí. Ahora, si recuerdas aquí en el ejemplo había un inicio, estaba ese 'Eat Me' ahí, una cadena que estaba ahí. Por ahora, omitámoslo. Eso no está creado. En la entidad de pantalla de fin de ronda e inicio de ronda, así que estas son las de fin de juego, ¿verdad? Por ahora, no hagamos nada con ellas, de lo contrario, tomará demasiado tiempo. Pero ahora, si presionas jugar en esto y ves lo que acabamos de hacer, hagamos otro. Oh no, ¿puedo establecer propiedades de nulo, habilitando? Probablemente porque no configuré una de las cosas. Arreglemos eso. Esto es muy útil, por cierto, tener estas cosas aquí. Si haces clic en el botón, se abrirá automáticamente el editor de código para ti con resaltado de sintaxis y resaltando exactamente dónde salió mal. Ahora está usando esto, ¿verdad? Verifiquemos si esto no es nulo, luego haz lo que sea. De lo contrario, simplemente verifiquemos. Guardémoslo. Actualicemos. Bien, ahora solo comienza cuando recoges algo, ¿verdad? Así que recojamos algo, veamos qué sucede. Oh, ahí vamos. De acuerdo, ahora tenemos las puntuaciones. Ahora podemos ver que el tiempo está disminuyendo. Y luego, si lo recoges, va, oh sí, de acuerdo. Así que ahora habríamos perdido. Pero nuevamente, no terminamos de configurar todas las cosas diferentes. Ahora, si quieres ver la configuración completa, todo lo que necesitas hacer, hagámoslo ahora mismo porque ya no tienes tiempo. Veamos ahora el proyecto completo. Nuevamente, lo enviaré pronto. Proyectos completos. Déjame enviártelo por el chat. Este es el proyecto completo que puedes revisar y también puedes bifurcar si quieres. La configuración final es básicamente configurar todos los diferentes controladores de interfaz de usuario que hay y crear esta pantalla aquí, que tiene este botón en la parte inferior, que ya contiene algunas pistas de desplazamiento y presión. Entonces, a medida que pasas por encima, hace cosas diferentes. Y ya tiene el listener también para cuando haces clic para reiniciar. Así que tienes todo lo que necesitamos allí. Y este es el proyecto completo. Adelante, chicos, vuelvan loco con él. Puedes ver todo lo que se ha hecho. Siéntete libre de usar, quiero decir, todos los activos son CC0 de Kenny. Dale un saludo si usas alguno de ellos. Asegúrate de agregar los créditos correspondientes. Y este es el juego final. Veamos si tienes algo más allí en las diapositivas. Pero creo que eso fue todo. Así que, sí. Entonces, no aprendimos cómo usar audio, pero creo que eso es para la próxima. Asegúrate de revisar el script del administrador de audio allí. Podrás ver exactamente cómo se hace. Y esto está concluido. Oh, oh, oh, una cosa más. Si quieres publicar en Play Canvas, esto es súper importante, en la barra de herramientas aquí, la última barra de herramientas aquí, publicar/descargar. Solo haz clic en él. Publicar en Play Canvas. Dale un nombre. Dale una descripción. Eso es opcional. Solo se requiere el título. Presiona publicar ahora. Se está construyendo. Ahí está. Se está construyendo. Haz clic. Este es un enlace permanente a tu compilación en particular. Esto es tuyo para siempre. Nunca se te quitará a menos que lo descargues, a menos que elimines el proyecto o elimines la aplicación. De lo contrario, puedes enviar esto a todos. Puedes enviar esto a cualquiera para que juegue con tu juego. Y también asegúrate de tuitearlo. Si lo haces, asegúrate de tuitearlo. Lo retuitearé. Nos ayudaremos mutuamente, nos seguiremos mutuamente para ayudar a los desarrolladores de juegos. Porque, nuevamente, esto se puede jugar para todos. Puedes jugarlo en dispositivos móviles, puedes jugar en múltiples plataformas. Listo de inmediato, ahí lo tienes. Así es como se hace la publicación en Play Canvas. Me tomó unos 30 segundos o algo así hacerlo. Ahí lo tienes. Y sí, eso es Play Canvas. Muchas gracias, lamento haberme extendido un poco. Creo que fui un poco optimista cuando estaba preparando esto. Lo practiqué dos veces, logré hacerlo a tiempo. Pero creo que hablé demasiado hoy. Espero que haya sido genial.

Watch more workshops on topic

JSNation 2023JSNation 2023
116 min
Make a Game With PlayCanvas in 2 Hours
Featured WorkshopFree
In this workshop, we’ll build a game using the PlayCanvas WebGL engine from start to finish. From development to publishing, we’ll cover the most crucial features such as scripting, UI creation and much more.
Table of the content:- Introduction- Intro to PlayCanvas- What we will be building- Adding a character model and animation- Making the character move with scripts- 'Fake' running- Adding obstacles- Detecting collisions- Adding a score counter- Game over and restarting- Wrap up!- Questions
Workshop levelFamiliarity with game engines and game development aspects is recommended, but not required.
JS GameDev Summit 2022JS GameDev Summit 2022
86 min
Introduction to WebXR with Babylon.js
Workshop
In this workshop, we'll introduce you to the core concepts of building Mixed Reality experiences with WebXR and Balon.js.
You'll learn the following:- How to add 3D mesh objects and buttons to a scene- How to use procedural textures- How to add actions to objects- How to take advantage of the default Cross Reality (XR) experience- How to add physics to a scene
For the first project in this workshop, you'll create an interactive Mixed Reality experience that'll display basketball player stats to fans and coaches. For the second project in this workshop, you'll create a voice activated WebXR app using Balon.js and Azure Speech-to-Text. You'll then deploy the web app using Static Website Hosting provided Azure Blob Storage.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

JS GameDev Summit 2022JS GameDev Summit 2022
33 min
Building Fun Experiments with WebXR & Babylon.js
Top Content
During this session, we’ll see a couple of demos of what you can do using WebXR, with Babylon.js. From VR audio experiments, to casual gaming in VR on an arcade machine up to more serious usage to create new ways of collaboration using either AR or VR, you should have a pretty good understanding of what you can do today.
Check the article as well to see the full content including code samples: article. 
React Summit 2023React Summit 2023
32 min
How Not to Build a Video Game
In this talk we'll delve into the art of creating something meaningful and fulfilling. Through the lens of my own journey of rediscovering my passion for coding and building a video game from the ground up with JavaScript and React, we will explore the trade-offs between easy solutions and fast performance. You will gain valuable insights into rapid prototyping, test infrastructure, and a range of CSS tricks that can be applied to both game development and your day-to-day work.