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

Hola a todos. Mi nombre es João y esta es la workshop de Play Canvas de principio a fin, la versión rápida. Entonces, Play Canvas de principio a fin, la versión rápida. Rápida, no tan rápida, porque durará alrededor de 2 horas de workshop. Pero sí, aún podremos construir un juego completo en estas 2 horas. Entonces, la forma en que estructuraremos esta workshop es, solo para hacer algunas breves introducciones, pero luego hablaré sobre Play Canvas. Así que solo hablaré sobre, ya sabes, las características básicas que tenemos, ya sabes, como todo lo que puedes hacer en Play Canvas. Y entraremos en el núcleo real de la workshop donde construiremos un juego juntos. Así que dividí eso en 3 fases diferentes. La fase número 1 es solo una configuración general de la escena, así que comenzaremos simplemente importando algunos activos, colocando algunas cosas alrededor, algunos obstáculos, algo de suelo. Hablaremos de eso en un segundo. Y hablaremos sobre el lanzamiento y como testing tu juego. La fase 2 será sobre interactividad. Así que repasaremos scripting, scripts de preguntas, hablaremos sobre el sistema de eventos que tenemos en Play Canvas, también sobre cómo hacer física con cuerpos rígidos. Hablaremos sobre el sistema de animation también. Y luego algunas capacidades de debugging usando Chrome. Y luego la fase 3 será sobre pulido y publicación. Así que crearemos solo algunos toques finales en user interface, cómo hacer audio, y luego podremos publicar eso para el mundo. Podremos hacer eso usando la propia solución de alojamiento de Play Canvas, por lo que no necesitas tener nada por tu cuenta, solo presionas un botón y tendrás un enlace de firmware a tu versión del juego, y luego puedes compartirlo con quien quieras. Y luego haremos algunas conclusiones hacia el final.

Ahora, la forma en que haremos las diferentes fases en el juego real es que usaremos - Preparé un Play Canvas, como un proyecto fuente que ya contiene todos los activos y las cosas de plantilla que necesitaremos, y lo que ustedes podrán hacer es tomar eso y hacer un fork de él, así que podrán copiar eso como su propio proyecto y luego hacer lo que quieran con él. Yo estaré haciendo lo mismo, así que empezaré desde el mismo proyecto inicial, y luego juntos construiremos hasta el juego final. Ahora, cada una de las fases, también tenemos un proyecto para ellas, así que digamos que estás en la mitad de la fase uno y te pierdes un poco. Está bien, solo espera a la fase dos, y luego puedes clonar, puedes hacer fork de 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 hacer fork de la fase tres y reiniciar desde allí, así que tienes estos tres tipos de puntos de control que podemos seguir en el camino, y también el proyecto final, como el producto final, con la documentación completa, con todas las características, también estará disponible para que ustedes le echen un vistazo, así que verán todo el proyecto terminado también. Así que también puedes simplemente sentarte, tomar un café, té, agua, lo que prefieras, y solo escuchar cómo construir todo el proyecto, o puedes construir junto conmigo

Ahora el editor en línea, por supuesto, utiliza el motor PlayCanvas, y esto es lo que alimenta playcanvas.com. Y realmente hacemos colaborativo por diseño. Así que todo lo que haces en PlayCanvas es muy fácil de colaborar con otras personas. Hablaremos de ello en un segundo una vez que realmente entremos en la masterclass y hagamos cosas, verás lo fácil que es tener a varias personas trabajando en la misma escena al mismo tiempo. Pero es colaborativo por diseño. Tenemos un potente backend que alimenta todo, así que todo lo que haces en términos de que abres el editor, y estás como, oh, quiero usar esta malla, quiero usar esta textura, todo lo que tienes que hacer es arrastrarlo al editor, se sube a nuestros sistemas, y luego hacemos todo el trabajo pesado, como convertir a las cosas adecuadas, hacer la compresión, blah, blah, blah. Así que no tienes que preocuparte por nada. Sí, como dije, hacemos procesamiento de activos, compresión de texturas, y toda la conversión moderna excepto la mayoría de los principales formatos de archivo. GLBs es nuestro favorito. FBX también funciona bastante bien. Tenemos un nivel gratuito también, así que tenemos algunos planes de pago si quieres más funcionalidad de gestión de equipos pero también tienes una característica muy potente, con mucho almacenamiento, y con auto hospedaje, también. Sí, así que alojamiento gratuito ilimitado para aplicaciones y juegos publicados también, que, de nuevo, te mostraré cómo hacerlo más tarde. Así que hablemos un poco, algunas de las características que tiene Lick Canvas. Así que toda la edición de código para tus propios scripts se hace en línea también con intellisense incorporado. Así que usamos en realidad el mismo, lo siento, usamos el mismo editor de código que VS Code, pero es para la web, pero está alimentado por el mismo motor, se llama Monaco. Tenemos el potente backend de nuevo que hace todo ese trabajo pesado para los activos para nosotros, lo que significa entonces, que mientras estás construyendo cosas, tienes cero tiempo de construcción. Así que necesitas esperar a que importes cosas, sabes, estás cargando el proyecto, ya está todo ahí. Es como que básicamente se carga. Eso es un poco del potente backend, pero también un poco sobre JavaScript en sí que no es realmente un lenguaje compilado, ya sabes. Así que cuando estás construyendo cosas con Play Canvas, codificamos en JavaScript, así que no necesitas, como, compilar todo mientras haces cosas. Eso significa un tiempo de construcción cero entonces. Viene con soporte para WebXR de serie, tenemos algunos ejemplos de eso también. También tenemos un sistema de control de versiones totalmente funcional similar a Git, que de nuevo, como yo hablé allí al principio, seremos capaces de, como, bifurcar proyectos. Así que esto es sólo una parte de eso. Así que podemos, como, bifurcar proyectos, pero también puedes crear puntos de control, puedes crear ramas, fusionar de nuevo, muy parecido a un sistema tipo Git, que de nuevo, hablaré sobre más tarde. Y el editor en sí. Multiplataforma. Y cuando lo cargas, es super pequeño solo. Es sólo, como, 2.1 megabytes, si revisas en, como, la pestaña de Red, cuánto has realmente descargado? Son sólo 2.1 megabytes. De nuevo, se descomprime, ya sabes, se comprime más tarde. Pero lo principal es sólo 2.1 megabytes. Y soporta todas las cosas que esperamos de un motor de juegos estos días. Tenemos interfaz de usuario, soporte de audio, soporte de audio posicional, sistema de animación física. Puedes crear plantillas, que prefabs, como se llama en otros motores de juegos. También tenemos características gráficas avanzadas. Así que tenemos un mapeador de tiempo obligatorio y un mapeador de luz en tiempo real, renderizado basado en físicas, sombras, sombras agrupadas, todas esas cosas de serie usando Play Canvas. Y tenemos una docena de canales de soporte. Así que tenemos documentaciones con tutoriales, referencias completas de la API. También tenemos nuestro propio foro, forums.playcanvas.com, donde puedes, como, hacer preguntas. Así que la gente es muy, muy servicial allí. Un saludo a la gente en los foros, son increíbles. Y también tenemos nuestro propio canal de Discord también, donde a veces estamos allí sólo para charlar y ayudar cuando la gente lo quiere. Y podría quedarme aquí durante dos horas sólo hablando de cosas que Play Canvas puede hacer, pero esto se está volviendo un poco aburrido. Así que sigamos.

El editor de PlayCanvas en sí, muy similar, de nuevo, a muchos otros motores de juegos que actualmente están ahí fuera. Así que tenemos la lista de jerarquía a la izquierda. Tenemos una barra de herramientas también allí a la izquierda donde puedes simplemente seleccionar qué herramienta quieres usar. Tienes los activos del proyecto allí en el fondo del frente, donde tienes todos los activos que fueron insertados, que fueron importados en ese proyecto. Tienes el inspector allí a la derecha donde puedes inspeccionar tu entidad seleccionada. Así que, por ejemplo, en este caso, estoy seleccionando la entidad de luz. Así que tienes la información básica como el nombre. ¿Está habilitado? Puedes añadir algún texto. Luego tienes la transformación de posición, rotación, y escala. Y luego también tienes los componentes, de los que hablaré más tarde. Pero básicamente definen el comportamiento. Así que en este caso, añadí un componente de luz y luego puedes seleccionar qué tipo de luz es. Color intensidad. ¿Hace sombras? ¿No hace sombras? ¿Con qué frecuencia actualiza el mapa de sombras?

Todas estas cosas puedes seleccionarlas en el inspector. Algunos enlaces útiles. Solo, ya sabes, enlaces generales útiles de PlayCam. Así que tengo este increíble GitHub de PlayCanvas también, que es una lista seleccionada de algunas cosas geniales que puedes hacer con PlayCanvas. Algunos de ellos tienen fuentes también. Así que puedes ver cómo se hicieron esas cosas. Tenemos un navegador de ejemplos donde puedes ver de nuevo cómo usar el motor y todo tipo de cosas locas. Y tienes la referencia de la API y los tutoriales. Tienes los foros y tienes un Twitter también. Así que Twitter es bastante genial también. Nos gusta retuitear y ayudar a la community también. Así que, ya sabes, solo danos un grito. Si tienes un proyecto genial, me aseguraré de retuitear y difundir la palabra sobre tu proyecto. Genial, ¿verdad? OK, con todas esas cosas aburridas fuera del camino, vamos a seguir adelante y construir algo.

Así que el juego que vamos a construir es este. Lo abriré aquí para que puedas ver qué es. Así que esto es lo que estaba hablando antes acerca de tener una construcción alojada por PlayCanvas. Así que este es un sitio web de PlayCanvas.as. Y desde aquí puedes alojar cualquier aldea. Este es el juego que vamos a construir. Es bastante simple. Así que tienes a tu personaje moviéndose, tienes algunos obstáculos que realmente no puedes cruzar, y luego necesitas comer algo de comida. Y luego, a medida que estás comiendo alimentos, el tiempo aumenta y tienes un cierto tiempo para, bueno, comer todos los alimentos. Y uno de los juegos, muy tonto, es simplemente comer tanto como quieras. Y si se acaba el tiempo, vamos a dejar que el tiempo se agote un poco. Se acaba el tiempo, se acaba el tiempo, bien. Hay algunos efectos de audio allí también. Simplemente dice que se acabó el tiempo. Y luego presionas el botón para volver a empezar, se reinicia la puntuación y luego empiezas de nuevo. Cosas bastante simples. Pero, ya sabes, estaremos tocando muchas cosas diferentes aquí. Déjame volver a las diapositivas. Genial. Así que, de nuevo, esta es solo una pantalla de lo que vamos a construir. Así que si desglosamos lo que realmente es este juego. Así que tenemos una entidad de terreno allí que tiene algo de física. Tenemos algunos obstáculos que necesitan de alguna manera bloquear al jugador de ir. Así que necesitamos, de nuevo, algunas colisiones de física en eso. También tenemos algunos elementos de comida que siguen apareciendo. Y como puedes ver allí, la comida no siempre es la misma. Así que tenemos pasteles y manzanas y plátanos y cosas así. Así que, y está colocado dinámicamente. Y también tenemos al jugador que es, por supuesto, dinámico también y tiene algo de animation en él. También tenemos una UI muy simple allí en la parte superior izquierda, que contiene, solo tiene el tiempo restante y un recuento de la puntuación. Genial. Ahora vamos a empezar entonces. Así que empezaremos en la fase uno. Así que espero que para ahora, la mayoría de las personas tengan la cuenta de PlayCanvas. Y luego si no, solo ve a playcanvas.com y crea tu nueva cuenta. Debería ser bastante sencillo. Muy fácil, muy rápido. Y luego empezaremos 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 aquí mismo. Así que solo ábrelo. Es público, así que todos deberían poder ver eso. Y desde aquí, déjame cerrar el chat, bien. Así que desde aquí, podemos seguir adelante y hacer un fork. Así que para hacer un fork de un proyecto, simplemente ve aquí y haz clic en el botón de fork. Así que 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. Solo haz clic en fork, solo espera un rato para que los sistemas de respaldo dupliquen el proyecto. Así que duplica todo, escenas, activos, scripts, todo. Y creará tu propia copia del proyecto. Así que aquí lo tenemos. Así que ahora tengo mi propio food run que puedes hacer lo que quieras con él. Así que, como, cada uno de ustedes tiene el suyo. Si tienes algún problema hasta ahora, solo envía un mensaje en el chat o en Discord. Estoy viendo esos. No hay nada. Asumiré que todos están siguiendo más o menos. No seré demasiado rápido en eso. Les daré a ustedes algo de tiempo. Pero una vez que hayas hecho el fork, tienes tu cuenta, y has hecho tu fork, solo haz clic aquí en el editor. Así que solo está comprobando si hay algo. Así que cerraré mis otras pestañas aquí. No se interponga en el camino. Solo comprobar si hay algo, nada en Discord. Nada en el chat hasta ahora. Genial. Bien. Así que una vez que-. Así que esta es la primera cosa que ves cuando abres el editor de Uplay Canvas. Así que te recibes aquí con la lista de escenas. Así que 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 seguir adelante y abrirlo. Y ahora estamos listos para empezar.

Como dije antes, aquí a la izquierda tenemos la jerarquía, tenemos una barra de herramientas aquí, 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. Tenemos en realidad-. No, tenemos una cámara y tenemos una fuente de luz. ¿Verdad? Ahora de nuevo, esto es como el proyecto inicial para el juego FoodRun, lo que significa que ya añadido aquí en FoodRun, ya añadido todos los activos que necesitaremos para el proyecto. Así que por ejemplo, si abres Arena y abres texturas, ya tienes algunas texturas bonitas aquí, algunas texturas prototipo. Ahora todos los activos que estamos usando aquí son del increíble Kenny, por supuesto. Creo que la mayoría de la gente aquí podría saber quién es. Creo que es un creador increíble haciendo cosas fantásticas. Y todo es CC0, por supuesto, pero toda la información de licencia y fuente está allí, así que solo para enlazar con su increíble trabajo. Así que tenemos la Arena con algunas texturas. Ya tenemos algunos archivos de sonido también que podemos enlazar más tarde. Ya tenemos el modelo también, que contiene, que tiene el archivo fbx aquí. Tenemos algunos clips de animation también. Así que todo está aquí que necesitaremos. Y ya sabes, a medida que avanzamos en la masterclass, iremos a través de todos ellos juntos. Pero siguiendo adelante, también tenemos el script, una carpeta llamada Plantillas de Script aquí. Así que por supuesto, como construir todo el code para eso en dos horas juntos mientras compartimos pantalla podría no ser ideal. Así que ya, tenemos el aburrido code está en su mayoría hecho, ya sabes, como enganchando a los gestores de juegos y como codificando la simple lógica del juego está en su mayoría ya allí. Pero necesitaremos hacer algunas cosas a lo largo de la masterclass para arreglarlo. Lo haremos juntos. Pero de nuevo, no te preocupes por esos por ahora. Te diré cuando necesites usar esos. Por ahora, solo déjalos allí en Plantillas de Script. También, tengo algunas notas aquí solo para no perderme. Así que si me ves mirando hacia abajo, escribiendo, solo estoy asegurándome de que no pierdo nada. Así que sí, genial. Con eso, creo que podemos empezar. Espero que la mayoría de ustedes hayan creado su propio fork y ya lo tengan. Déjame revisar el chat. Vale. ¿Puedo obtener al menos un sí, soy capaz de hacerlo? Solo para poder seguir adelante. Quiero estar seguro de que... Genial, gracias. Genial. Gracias, Mike. Gracias, Rick. Oh, genial. Gracias. Ah, increíble. Gran respuesta. Gracias, chicos. Genial. Así que empecemos entonces. Déjame agarrar mi ratón aquí para que sea un poco más fácil. Genial. Así que empecemos por lo más grande. Hay un chat más. Lo siento. Solo estoy mirando. Eso está totalmente bien, ¿verdad? Sí, totalmente bien. Me alegra que estés con nosotros. Genial. Así que empecemos creando solo el plano de suelo. Correcto. Así que empecemos creando una nueva entidad aquí. Hijo de la raíz. Lo llamaremos arena. Así que tenemos la arena aquí y vamos a crear el plano de suelo. Así que si vas aquí para una nueva entidad, tenemos un montón de 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 nosotros para definir un plano. Y hagámoslo grande para cubrir muchas cosas. Lo haremos en realidad 25 por 25, 25 por uno por 25. Así que el lienzo del plano Y es hacia arriba. Así que tenemos un gran plano aquí. Y vamos a crear un material para eso también, así que vamos a aplicar una Textura a él. Así que si vas en Food Run aquí en arena, ya tenemos algunas texturas bonitas aquí, así que vamos a crear un nuevo material allí. Vamos a hacer una buena gestión de proyectos. Así que no lo crearemos aquí, en arena, vamos a crear una nueva carpeta. Llamémosla Materiales. Vamos a crear un nuevo material aquí. Así que entonces en el panel de Activos aquí mismo, vamos a crear un nuevo activo. Llamémoslo- Vamos a crear un nuevo material. Llamémoslo Material de Suelo. Y esto es, como mencioné antes, plane canvas soporta PBR completo. Así que materiales de renderizado basados en física. Así que tenemos cosas como ambiente, difuso, especular, incluso tenemos capa clara, que es útil para cosas como coches, bastante guay. Tenemos emisión, opacidad, blah, blah, blah. Este es bastante simple. Solo queremos un bonito- Volvamos a referirnos a nuestra imagen aquí. Podría ser útil. Así que solo queremos este bonito patrón de cuadrícula aquí. Así que solo como aplicar un difuso aquí. Así que si abres el cajón difuso aquí, podemos aplicar cualquier textura aquí. También podemos aplicar algún tinte, algún color. Así que entonces abramos el- Haz clic en la carpeta de texturas aquí y usemos el sector 8. Creo que es un bonito aquí. Porque lo hice antes, ¿verdad? Así que cuando lo aplicamos aquí- Oh bien, por supuesto que aplicamos al material pero el material aún no se está utilizando en la malla todavía.

Volvamos al plano y asegurémonos de usar el material del suelo en ese plano. Así que podemos arrastrar y soltar aquí en el mundo, así funciona o aquí en la ranura de material en el inspector. Así que dibujemos aquí, soltemos aquí porque esta es una característica bastante interesante. Correcto, pero esto se ve muy grande, ya sabes se está extendiendo por todo. 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 dividimos por dos. Así que si tomas 25 y luego divides por dos que funciona por cierto aquí, esto se acomodará perfectamente 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 de ancho, lo cual es bastante interesante. Así que ahora tenemos nuestro objeto aquí pero se ve muy blanco, ¿verdad? Esto se ve demasiado soso. Así que démosle algo de color. Así que de nuevo, si vuelves al material y luego a difuso, podemos hacer clic en tinte y luego podemos agregar cualquier color que quieras. Podremos cambiar a cualquier color que quieras. Simplemente multiplicaremos los colores juntos. Un buen número que tenemos allí es ese bonito tinte verdoso, que hace que parezca una especie de hierba. 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í. Así que de nuevo, si quieres usar el mismo número es 59D1DD, así que ese es el código hexadecimal code para este bonito tinte verde, pero puedes poner lo que quieras. También puedes usar otra textura si quieres. Ni siquiera usar una textura, pero genial. Tenemos nuestro plano aquí. Vamos a crear un jugador.

Entonces, para crear un jugador, vamos a crear una nueva entidad entonces. No en la arena, porque la arena estará poniendo cosas estáticas. Creemos una nueva entidad, hijo de la raíz. Llamémosla jugador. Así que la entidad del jugador actualmente no tiene nada. Pongamos esa malla que tenemos. Así que aquí de nuevo en foot run, character, medium FBX. Así es lo que pasa si tomas cualquier archivo FBX y simplemente lo arrastras a play canvas, no lo toqué para nada. Estos son los archivos brutos descargados del sitio web de Kenny. Esto es lo que creará para ti. Así que subirá el archivo FBX bruto y lo convertirá a todos los archivos que internamente necesita play canvas. Ahora hay dos más importantes aquí. Uno de ellos es como el material que utiliza. Así que esto es solo como un material bruto importante que no tiene esa textura en él. Pero bueno, es el material de los ajustes que tenía. Y este con el, este prisma diagonal. Olvidé ahora el nombre de este símbolo aquí. Pero está bien. Cuadrado. Cuadrado rotado. Y esto es importante porque esta es la plantilla. Ahora hablaremos un poco más de las plantillas en un segundo, pero este es el activo que contiene el modelo y el material. Todo tipo de paquete junto estará en este. Así que este es el que querremos usar siempre que estemos importando modelos. Usaremos este. Así que entonces lo que podemos usar es que puedes tomar este y simplemente arrastrarlo a la escena. Así que podemos arrastrarlo aquí, pero en realidad quiero que sea un hijo del jugador. Así que puedo simplemente arrastrarlo aquí. Así que estaré arrastrando a la entidad del jugador allí. Ahora tenemos el modelo allí. Ahora, por supuesto, todavía... Por cierto, si la cámara está un poco mal, puedes presionar F. Realmente no puedes ver eso, pero acabo de presionar F y te centras en lo que estás seleccionando. Así que si estás seleccionando la arena y presionas F, vas a todo el asunto. Si presionas el... Si usas otro personaje, acercas allí, característica muy útil. Así que ahora tenemos el R activo allí, pero por supuesto que no tiene el material todavía. Así que creemos un nuevo material también. De nuevo, hagamos una buena gestión de proyectos. Creemos una nueva carpeta, no para crearla en cualquier lugar. Llamémosla materiales. Creemos un nuevo material allí. Llamémoslo MaterialesDelJugador. Por supuesto, podríamos simplemente tomar el material que ya fue importado, este, y simplemente editar este. Pero creo que para nuestro caso de uso, estaremos creando el nuestro para que podamos ajustar algunas cosas más. Así que entonces asignemos este material a la malla allí así que simplemente arrastramos y soltamos. No parece muy diferente, pero está bien. Así que seleccionemos el material. Vamos a Fuse y luego seleccionemos una de las texturas. Así que en este particular paquete de activos de Kine allí, viene con cuatro texturas diferentes y todas ellas ya tienen el mapeo UV correcto para este modelo en particular. Así que podemos usar el que queramos. Así que estaré usando Zombie Sea pero creo que se ve bastante bien en realidad. Así que tengo este bonito zombie aquí ya aplicado. Y como dije, el material es un PBR, así que es renderizado basado físicamente, lo que significa que podemos cambiar un montón de ajustes diferentes para cualquier aspecto que queramos tener. Así que si abres el cajón Especular aquí, podemos hacer algunas cosas más también. Así que podemos tener diferentes tintes especulares si quieres eso da algunos efectos interesantes y bonitos. Pero lo que quiero tocar es en realidad la brillantez. Porque si vas a final, el último parámetro aquí, brillantez, y lo ponemos como todo el camino por allí, parece una cosa de plástico, como esto parece una muñeca de plástico, que podría ser algo que estás buscando, ya sabes, da un bonito resalte especular allí para la luz, ¿verdad? Así que esta es la luz siendo reflejada. Pero creo que para este, realmente no quiero ese efecto. Quiero algo más difuso como si, ya sabes, como si fuera una persona o como un personaje o como algún plástico que estás moviendo alrededor del tablero. Así que si bajo la brillantez todo el camino a cero, hace este efecto más difuso, que de nuevo, es algo que quieres. Adelante, haz lo que quieras. Si quieres ese aspecto de plástico, incluso podría verse bien, de todos modos. Así que bien, hemos terminado eso. Así que creemos una plantilla para esto. Es muy útil mientras estás desarrollando cosas. Si vas a colocarlas en múltiples lugares diferentes para crear plantillas para ello, que en otro game engine, también se llama prefab, que es algo que puedes simplemente arrastrar y soltar y ya contiene todos los mapeos de materiales 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 algunas cosas más tarde, ¿verdad? Así que en la carpeta de personajes, creemos una nueva carpeta aquí. Llamémosla plantillas. De nuevo, queremos tener una buena gestión de proyectos aquí. Y la forma en que creas plantillas en Play Canvas es la siguiente, seleccionas la entidad de la que quieres tener para crear una plantilla. Así que en este caso, jugador, así que la entidad del jugador, clic derecho, plantilla, nueva plantilla. Esto creará una nueva plantilla en cualquier carpeta que estés actualmente en el activo, en el panel de activos aquí en la parte inferior. Así que acaba de crear una nueva plantilla de jugador en mi carpeta de plantillas en la subcarpeta de personajes. Así que de nuevo, así que está en foot run, plantillas de personajes, tengo la plantilla de jugador allí. Así que si borramos esto, oh no, simplemente lo vuelves a soltar y tienes la cosa completa exactamente como la teníamos, había configurado esto antes. Genial. Ahora vamos, volvamos a, a lo que estamos construyendo, ¿verdad? Así que tenemos el, el, el, el jugador allí. Tenemos el suelo. Creemos algunos obstáculos. Ahora para crear un obstáculo. De nuevo, será similar a, a lo que acabamos de hacer porque también estaremos creando una plantilla de eso. Así que creemos una nueva entidad. Llamémosla obstáculo o como quieras llamarla. Y luego de eso, creemos, creemos una forma de caja. Ese es el obstáculo más simple que tenemos, ¿verdad? Así que aquí es solo como algunas formas de caja. Creemos una caja de eso. Así que en obstáculo, creemos una nueva caja primitiva.

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. Así que el valor que quieres es 0.5. Por defecto, las primitivas son de uno por uno por uno. Así que si es 0.5, llegamos a la mitad. Hagámosla un poco más grande. Aumentemos scale a dos en X y dos en Z. Solo es un poco más grande allí pero tampoco demasiado grande. No vamos por encima porque queremos ver lo que está detrás de los obstáculos. Es solo realmente algo que no podrán cruzar.

Ahora también creemos un nuevo material para esto porque ahora mismo, esto está usando el material por defecto, que es bastante soso. Vamos a Arena, Materiales. Así que en la misma foto que tenemos el material del suelo, creemos un nuevo material para eso. Así que llamémoslo Box Orange o algo así. Será naranja, alerta de spoiler. Arrastrémoslo. No cambia mucho porque es el mismo color. Pero ahora la caja está usando nuestro material personalizado. Sigamos adelante entonces y no usaremos una textura para ello pero podemos darle un color. Así que cualquier color que quieras. Así que aquí quería tener el bonito color naranja. Creo que funciona muy bien con este fondo verde azulado aquí. Así que el bonito color para eso es FBB057 para darle este bonito tono naranja. Pero de nuevo, puedes usar cualquier color que quieras. Este es solo el color que usé FBB057. Y lo tienes ahí. Creemos una plantilla de eso. Así que en Arena... Sí, porque esto será parte de la Arena, ¿verdad? Sí, tiene sentido que sea parte de la Arena. Colocamos el obstáculo como hijo de Arena también. Así que nuestra Arena ahora tiene como el plano del suelo y también tiene un obstáculo. Creemos una plantilla de eso. Así que creemos una nueva carpeta. Llamémosla Plantillas. Y un obstáculo, creemos nuestra plantilla de eso. Así que ahora ya sabes el procedimiento. Ya sois profesionales en esto. Así que solo haz clic derecho en la entidad, Plantilla, Nueva Plantilla, en la carpeta que quieras. Como si creas en la carpeta equivocada, solo como mover... como haremos el trabajo pesado. Me gusta, la referencia será correcta, entonces no necesitas preocuparte por eso. Pero sí, así que si lo creas en el lugar equivocado, solo muévelo a la carpeta correcta. Así que tenemos aquí en Arena, luego 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, como se aplicará. Así que no necesitamos preocuparnos por eso. Lo que haremos, aprovechemos esta oportunidad para poner algunos obstáculos alrededor. Así que por supuesto aquí, hice este patrón de... lo que sea. Es algo bonito, hay una simetría en ello. Pero puedes hacer lo que quieras. Así que en este caso, solo estaré colocando esos alrededor de manera relativamente aleatoria. Así que pondré esto aquí. Y luego. Así que puedes hacer clic derecho y decir duplicar, o puedes hacer Cmd D, o creo que en Windows es Ctrl D, para simplemente duplicar. Y luego puedes moverlo como quieras. Así que solo pongamos algunos alrededor. Y creo que este es un lugar donde puedes dejar brillar tu pasión por el diseño de juegos. Así que puedes construir algunos corredores si quieres. Sabes, puedes construir algunas estructuras bonitas de diferentes áreas que quieras. En mi caso, es bastante aburrido solo tener algunos alrededor. Pondré uno más allí. Sí, está bien. Genial, allá vamos. Así que solo algunos dispersos. Será interesante ver lo que se os ocurra. Así que de nuevo, como una vez que esto esté hecho asegúrate de tomar una captura de pantalla, publicar en Twitter, y echar un vistazo a lo que se os ocurra aquí. Genial, así que 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 es muy importante también. Así que creemos una de esas. Así que de nuevo, en la raíz, creemos una nueva entidad. Llamémosla Comida. Puedes llamarla Comida o Coleccionable o como quieras. Así que ahora mismo está colocada justo allí. Movamos al jugador un poco hacia atrás porque está en el centro. Lo movemos un poco hacia atrás allí. Eso está bien, solo lo que quieras. Solo para que no esté en el camino. Y luego pongamos un modelo. Así que en tu carpeta de activos de Food run aquí, tienes la carpeta de Coleccionables. Y dentro de aquí, tenemos los modelos. Y de nuevo, estas son las importaciones de FBX en bruto.

Si simplemente descargas Kenny, tomas el archivo FBX, lo arrastras. 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 necesitas también con toda la información teñida. De nuevo, no cambié nada de esto. Esta es una importación simple. Y tendrás el diamante. Creo que es un buen nombre. Tienes la forma de diamante aquí, que de nuevo es nuestra plantilla. Y esto es lo que queremos. Esto es lo que queremos usar aquí. Así que tomemos... ¿Tomamos manzana, plátano, o pastel? Tomemos manzana. Es una opción más saludable. Así que tomemos esta. Arrastrémosla como un hijo de comida. Y estará allí. Parece un poco pequeño. Y queremos poder verlo más tarde. Así que seleccionemos la entidad del modelo aquí. Aumentemos su scale. Así que en la barra de herramientas aquí a la izquierda, puedes seleccionar el scale. Y luego si haces clic en el... Si haces clic en cualquiera de estos, puedes scale en cualquiera de los ejes. Pero si haces clic en el medio allí, puedes scale todos ellos juntos de una manera diferente. Creo que esto es más o menos lo que queremos. Queremos hacerlo un poco 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 coleccionables. Creemos una nueva carpeta. De nuevo, ya sabes cómo funciona. Sois profesionales, gestión de proyectos, blah, blah, blah. Plantillas. Luego en comida. En la entidad de comida, creemos una nueva plantilla a partir de ella. Genial. De nuevo, en esta fase estamos haciendo la configuración del proyecto. Estamos creando todos los diferentes aspectos pequeños que necesitas para el juego. En un escenario del mundo real, tendrías algo como una imagen de un diseñador o algo que explique el juego. Sería como desglosar todo eso. Eso es más o menos lo que estamos haciendo. Estamos desglosando el juego principal, creando plantillas para ello. Luego iremos desde allí en la fase dos. Ahora tenemos nuestra comida. Ahora, de nuevo, añadí algunos otros modelos aquí. Así que puedes seguir adelante y crear algunas nuevas plantillas. No voy a pasar por todos esos, pero será un proceso bastante similar. Solo crea una nueva entidad, añade tu modelo. De nuevo, 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 simplemente colócala en la carpeta de plantillas aquí. De nuevo, solo usaré la manzana por ahora. Genial. Ahora, si comparamos esto con esto, se ve un poco diferente. Así que estas sombras aquí... Así que tenemos las sombras, pero no son realmente tan fuertes como las que tenemos aquí. Estas son sombras bastante fuertes, parecen grises. Además, nuestro fondo es monocolor. Sí, eso no es realmente algo que queramos. Queremos mejorar la apariencia de eso. Así que tienes este bonito tono verdoso, que parece agradable. Así que la forma en que podemos hacer eso en Play Canvas es... Así que soportamos dos tipos diferentes de luz ambiental. Esto es lo que nos falta, luces ambientales. Así que si abrimos aquí en la barra de herramientas, la última opción allí, configuraciones, el pequeño engranaje, puedes abrir... Así que tenemos muchas configuraciones interesantes aquí, como algunas configuraciones del editor, cosas como divisiones de cuadrícula, cámara, cerca y lejos para el editor, cosas de localización, puedes seleccionar el motor. Así que muchas cosas geniales que puedes hacer aquí. Pero lo que quiero tocar, es el cajón de renderizado. Así que en el renderizado, puedes seleccionar tu color ambiental, puedes seleccionar como el mapeo de tonos, puedes seleccionar gamma, también tenemos nieblas, así como lineal exponencial, puedes establecer como una resolución objetivo que como todas tus cosas estarán basadas alrededor. Así que muchas cosas interesantes aquí, muy técnicas. Pero lo que nos preocupa aquí es la luz ambiental, es la luz del entorno, esto es lo que queremos. Así que si solo, la más simple sería solo cambiar la luz ambiental, ¿verdad? Porque si solo la subes, ya está pareciendo un poco mejor, porque ahora las sombras no son tan fuertes. Ya sabes, si lo bajas todo, o tenemos la luz principal o no tenemos nada. Así que si subimos eso, tenemos como esto, ¿verdad? Pero creo que podemos hacerlo mejor. Así que soportamos cubemaps para el mapeo del entorno, así que esto es de lo que estamos hablando, mapeo del entorno. Y ya lo tienes aquí. Así que si abres en food run environment, tenemos... Este de seis caras... Podrías haber 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 para dar como un entorno a nuestra escena. Así que podemos hacerlo muy fácilmente de la siguiente manera. Así que en entorno, creemos un nuevo activo. Llamémoslo un cubemap, así que nuevo activo, cubemap. Llamémoslo entornos. Y luego aquí puedes ver que hay las ranuras para seis imágenes, que de nuevo definirán ese cubo.

¿Verdad? Así que si echas un vistazo a cada una de estas imágenes, sus nombres ya son bastante autoexplicativos sobre lo que quieren. Así que esto, por ejemplo, es el de atrás. Este es el de abajo. Este es el de adelante y etcétera, que son exactamente esos nombres aquí. Así que tenemos un fondo, tenemos un dorso tenemos un frente, blah, blah. Así que si tomamos cualquiera de estos, por ejemplo, el primero es el de atrás. Si tomamos este y simplemente lo arrastramos hacia atrás automáticamente verá, Oh, tienes más imágenes aquí. Todas ellas tienen los mismos nombres. Así que simplemente aplicaré todas esas aquí. Ahora tenemos como el, nuestro mapa cúbico ya configurado allí. Y una vez que hacemos eso, queremos hacer clic en este botón aquí. Este botón mágico. Es posible que necesites desplazarte un poco hacia abajo. Pre-filtrar mapa cúbico. Así que lo que esto hará es. Básicamente, crear diferentes mapas MIP para esas texturas para que podamos usar correctamente. Así que Play Canvas lo usa correctamente en el mapeo del entorno. Así que simplemente haz clic en el botón. Y luego si alguna de estas texturas cambia necesitará borrar. Y luego regenerar eso no cambiará. Así que esto está bien. Ahora, si vuelves a la configuración aquí en el pequeño engranaje a la izquierda podemos usar este mapa cúbico del entorno como el skybox. Así que simplemente seleccionamos eso, lo arrastramos al skybox. Y entonces, ooh, vale, aquí vamos. Así que ahora tenemos algo allí. Así que ahora tenemos ese bonito... Está utilizando el entorno para calcular la luz ambiental así que no es como un color fijo. Y ya tenemos este bonito fondo aquí. Además, aquí en la configuración puedes cambiar el nivel MIP. El nivel MIP es básicamente la cantidad de detalles que estarán allí. Así que si usas el nivel MIP 1, estarás usando la textura cruda. Que, si intentas estirarlo a través de todo, necesitarás una textura masiva. Y como puedes ver, esto no se ve tan bien si estás usando el nivel MIP 1. Solo necesitas texturas de 8K para que esto se vea genial, lo que podrías querer. Pero en nuestro caso, nuestras imágenes son bastante pequeñas. Así que vamos a hacer un poco de trampa y vamos a usar niveles MIP más pequeños o un nivel MIP más alto para un tamaño de textura más pequeño. Así que eso es tres. Así que entonces se difumina un poco y realmente no puedes ver los detalles. Y se ve bastante bien. Genial. Así que esto es el final de la fase uno, en realidad. Sí, así que con esto, ya tenemos nuestro proyecto más o menos configurado. Volvamos aquí a las diapositivas. ¿Qué hemos aprendido? 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. Así que mientras estás construyendo cosas, podrás ver, como, lo que estás construyendo en realidad. Así que si vas aquí en tu viewport, hay este pequeño botón de lanzamiento aquí. Y si haces clic en eso, se abrirá una nueva pestaña, cargará el juego. Y esto es exactamente lo que la cámara está viendo. Así que si vas aquí y luego seleccionamos la cámara... Así que esto es lo que la cámara está viendo. Justo allí. Así que esto es lo que llamamos la pestaña de lanzamiento. Y esto es como tu juego en ejecución, ¿verdad? Así que si tienes scripts, una vez que tienes scripts, este será el juego en ejecución. Mientras que esto es solo como el editor, ¿verdad? Ahora lo interesante 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 vas moviendo cosas, tu pestaña de lanzamiento también cambiará automáticamente. Bueno, realmente no pudimos ver eso. Movamos la manzana, la comida. Así que si la manzana estaba justo allí y saltas de nuevo, se mueve automáticamente. Así que esto se llama Editor Link. Así que cada pestaña que tiene esto abierto con el launch.playcanvas.com, estará conectada. Y como puedes ver, esta conexión es como en la propia internet, lo que significa que si estás construyendo un juego para móviles y abres exactamente este enlace en tu dispositivo móvil y te conectas con Play Canvas allí, es súper fácil. Puedes comprobar las diferencias en un dispositivo móvil mientras estás haciendo los cambios en el editor. Es en tiempo real. Y esto es, de nuevo, de lo que estaba hablando antes sobre la colaboración también. Así que si tienes a algunas personas probando, a algunas personas construyendo, como todas estas personas conectadas juntas en la misma escena y todos pueden probar juntos. Vale, ¿qué te parece esto? Vale, ¿qué tal esto? ¿Es este color mejor? Y entonces todo el mundo ve en tiempo real a medida que estás haciendo cambios. Así que esta es la pestaña de lanzamiento. Sí, lo siento, me olvidé de eso. Vale, ahora tenemos el resumen de la fase uno. Así que hablamos de la pestaña de lanzamiento y hablamos del enlace del editor, ¿verdad? Antes de seguir adelante, así que en realidad a medida que avanzamos, a la siguiente fase. Si hay alguna pregunta o algo así, por favor, déjala en el chat ya sea en zoom aquí o en Discord. De lo contrario, creo que estamos listos para seguir. Así que para la fase dos, de nuevo, como prometí antes, tenemos el proyecto solo para eso. Así que estaré dejando el enlace para ello en, en cosas aquí. Así que puedes usar este proyecto. Puedes hacer un fork de este proyecto si te perdiste en el camino y quieres empezar exactamente desde esta etapa, exactamente desde la etapa, adelante y haz un fork de este proyecto. Déjame colocarlo aquí. Déjame también pegarlo en este código. Así que ahora, así que eso es la fase dos, ¿verdad? Así que para mí, sí, simplemente continuaré desde esto y para ustedes también, como pueden continuar desde su proyecto actual o si creen que no se ve tan bien, pueden sentirse libres de hacer un fork también. Genial, vamos, ¿verdad? Ahora para la fase dos, presentaremos otras cosas geniales. Ahora estaremos haciendo física, estaremos haciendo scripting, estaremos haciendo animación. Oh, muchas cosas por hacer, el papel es grande. Genial, así que empecemos con la física. Lo primero que haremos sobre la física es empezar desde lo mismo que empezamos en la fase uno, que es el suelo.

Vamos a asegurarnos de que el plano tenga una colisión en él. Porque ahora mismo, sólo tiene un componente de renderizado en él, ¿verdad? Así que aquí, si seleccionamos la entidad del plano, sólo tiene la posición, rotación, scale información. Tiene un renderizado, tiene información de renderizado, pero no hay colisión en él. Así que vamos a añadir eso. Ahora, la forma de hacer eso es simplemente necesitamos añadir componentes, que añadirán comportamientos a esta entidad.

Lo que queremos es colisión. Así que si haces clic aquí en componente, puedes ver todos los componentes que soportamos. Así que tienes cosas como audio cosas, de las que hablaremos más tarde. Puedes tener cámaras, elementos. Así que esto es para cosas de UI. Tienes modelo para renderizar. Ya tenemos un componente de renderizado, así que no podemos añadir eso de nuevo. Tenemos scripts, de los que hablaremos más tarde. Lo que queremos es colisión.

La primera vez que añades una colisión, obtienes este botón rojo aterrador, que dice, ML módulo no encontrado. Ahora, lo que esto significa es que Play Canvas por sí solo, no tenemos un motor de física y no lo enviamos con uno porque la mayoría de la gente no usa un físico, el módulo de física. Si enviamos todos los juegos con física, haría que todas las construcciones fueran demasiado grandes, así que realmente no lo enviamos con eso. Entonces si quieres usar física, necesitas importar eso manualmente. Pero manualmente es sólo hacer clic en un botón. Sólo haz clic en Importar Ammo. Sólo dale un segundo. Verás aquí en tus activos que creó esta nueva carpeta llamada Ammo y algunos archivos allí. Ahora Ammo es el nombre de un muy conocido, respetable motor de física con JavaScript. Puedes buscarlo más tarde. También tienes alguna documentation explicando qué es, cómo usarlo, etc. Para nuestros propósitos, esto sólo significa que hemos importado el módulo de física y ahora somos capaces de 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 allí. Olvídate de eso ahora. Hemos terminado. Estamos configurados. Tenemos Ammo. Ahora vamos a asegurarnos de que la colisión física es del mismo tamaño que el modelo en sí porque cuando creamos, podemos ver aquí. Así que esta es la vista previa de la colisión. Pero necesitamos que vaya a través de todo el asunto. Hagámoslo grande también. Utiliza medios alcances. Así que los medios alcances son la mitad del alcance. Así que si nuestra scale es 25, sólo queremos que sea 25 dividido por 2. Así que sería 12.5. Y también lo mismo en z. Así que planifica el punto dividido por 5. Así que puedes hacerlo o dentro de este alcance, oh lo siento, 25. Vamos a bajar también el Y. Bájalo. Y puede ser como algo. Sí, esto debería estar bien. Así que es realmente 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 sólo añades una colisión, esto se tratará como un disparador, lo que significa que las cosas pasarán, como, a través de él. Pero sólo te dejará saber que pasó a través. Pero también queremos, realmente queremos hacerlo como, esto es una cosa rígida que realmente no puedes 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 vamos a mantenerlo estático. Así que no estaremos moviendo la arena. Pero vamos a aumentar la fricción a 0.5. Así que el jugador no se desliza, como, al caminar. Pongámoslo en 0.5. La restitución está bien en 0.5, porque las cosas no están realmente, como, rebotando. Pero vamos a aumentar la fricción. Si alguna de estas cosas es como, oh, ¿qué es esto? ¿Qué es estático en render? ¿Qué son las capas? Puedes simplemente pasar el ratón por encima, y entonces te dará una bonita herramienta explicando qué es, y un enlace a la referencia de la API con más información. Así que esto es, por ejemplo, la documentation de la capa para el componente Render. Muy fácil, sólo pasa el ratón por encima de cualquier cosa que no entiendas realmente. Oh, ¿qué es la fricción? Oh, esto es fricción. ¿Qué es la restitución? Pasa el ratón por encima, haz clic en la referencia de la API. Te dará un trabajo explicando mucho mejor de lo que yo podría. Así que vamos a seguir adelante.

Así que ahora tenemos la colisión para el plano. Vamos a añadir también colisión a los obstáculos entonces, porque realmente no puedes pasar a través de ellos, ¿verdad? Así que el obstáculo, cualquiera de los obstáculos que hayas creado, si hiciste una plantilla, esto funcionará perfectamente. Vamos a crear una colisión allí. Así que lo mismo, crea una colisión. Asegurémonos de que cubre 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í va. Así que ahora está cubriendo todo el tamaño del obstáculo allí, todo el modelo. Pero de nuevo, también queremos añadir la cosa del cuerpo rígido. ¿Verdad? Asegurémonos de que es realmente una cosa rígida. Vamos a añadir un cuerpo rígido. Mantengamos la fricción y la restitución en los valores por defecto. Y de nuevo, mantengámoslo estático porque realmente queremos mover eso. Crearemos nuevos tipos de cuerpos rígidos más tarde. Así que el jugador no será un cuerpo rígido estático. Sigamos adelante. Así que puedes ver cuando creaste cosas nuevas, ya que esto es una plantilla, se resalta con este tinte azul y te da aquí arriba esta información de sobrescritura de instancia de plantilla. Así que esto significa que esta instancia de la plantilla tiene algunas modificaciones que la plantilla cruda no tiene. Y entonces podemos mantenerlo así, sólo este tiene estos cambios, o podemos aplicarlo a todas las diferentes plantillas que duplicamos allí. Es muy, muy genial que también puedas presionar ver diff aquí para ver exactamente qué cambió.

Vamos a crear una nueva carpeta. Llamémosla player, y luego movamos nuestro script allí. Así que de nuevo, un controlador de player. Movámoslo a esa carpeta de player o podemos mantenerlo allí. Pero creo que esto es... creo que esto funciona mejor. Y luego vamos... si haces doble clic allí, se abrirá una nueva pestaña con el script. Ahora este es el editor en línea que, de nuevo, está alimentado por Visual Studio Code. Ahora el tema que estoy usando es en realidad el mismo que el de Visual Studio Code. Pero si ustedes quieren cambiarlo, no estoy seguro de cuál están usando. Pero si van aquí en editar preferencias, también pueden cambiar el tema del editor. Tenemos un montón de temas diferentes que pueden usar. Y diría que aumenten el tamaño de la fuente para que puedan... Aquí pueden verlo mejor. Déjenme aumentarlo aún más para que puedan verlo un poco mejor. 18. Pero de nuevo, pueden usar el tema que quieran.

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 se carga el juego. Lo que significa que la forma de crear funciones es definir cuáles son las funciones. En este caso, tenemos el controlador 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 viene cuando creas un nuevo script desde... Desde el principio, si simplemente creas un nuevo script, como este boilerplate código estará allí, que es una breve explicación. Esto significa que estás creando una nueva clase llamada playerController que es un PlayCanvas. Entonces, PC es PlayCanvas, un nuevo script de PlayCanvas. Esto es lo que está haciendo. No necesitas preocuparte demasiado por ello. Ahora, el primer método que tenemos aquí es el método initialize. Este se llama, antes del primer frame, que este script está habilitado. Entonces, si tienes una entidad que está habilitada por defecto en tu escena y empiezas el juego, esto se llamará justo antes de que empiece a renderizar. Así que puedes configurar el estado interno y demás. El segundo que tenemos aquí es el update, que se llama oncePerFrame. Ahora, lo importante es, esto es una vez por frame literalmente. Entonces, si tu juego está corriendo a 30 FPS o si el juego está un poco lento y durante unos cuantos frames corre a 10 frames por segundo, esto sólo se llamará 10 veces. Por eso tenemos DT. DT es un número que es el tiempo delta. Esto es cuánto tiempo en segundos tomó desde que se renderizó el último frame. Podemos usar este número para escalar el movimiento y asegurarnos de que no nos quedamos demasiado atrás. Entonces, tenemos el método initialize y update. Entonces, como puedes ver, nuestro boilerplate código aquí ya tiene algunas cosas. Pero le falta algunas cosas, ¿verdad? Entonces, lo primero que nos falta es el input. Entonces, estamos haciendo algunas, estamos inicializando algunos métodos, algunas variables. Tienes x y z para el movimiento x y z. Y luego ya estamos aplicando esa fuerza al cuerpo rígido si algo sucedió, ¿verdad? Si tienes algún movimiento. Pero no tenemos como los movimientos reales. Y también ya tenemos el cálculo para ver, bien, 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. Añadamos algo de input aquí. Ahora el método que queremos es lo que queremos hacer es comprobar si estoy presionando, usemos WASD. Entonces, W, S, D, estilo clásico de Doom. Entonces, veamos si w está presionado, avancemos. Si s está presionado, retrocedamos. Cosas simples como esa. La forma de hacer eso es simplemente, debemos comprobar si, Play Canvas notó que la tecla está presionada. Lo que debemos hacer es this.app. Ahora, this.app en JavaScript, en los scripts aquí, está haciendo referencia a la aplicación Play Canvas, entonces, las cosas crudas de Play Canvas que puedes consultar. Ahora, esto, si no estás muy familiarizado con JavaScript, esto es cualquier contexto que estés ejecutando actualmente. En este caso, esto será la instancia de este controlador de jugador. Entonces, tienes this.app. Luego, haremos teclado. Como puedes ver, tenemos un resaltado de sintaxis, y también tenemos un telesense pesado. Así que, muy útil para ver. Vale, entonces, this.keyboard.isPressed. Y luego, si haces comando shift espacio, también puedes ver, también, como el controlador, algo de autocompletado allí. Entonces, tienes el isPressed. Entonces, códigos de teclas, tecla para probar, entonces, la tecla subraya algo, ¿verdad? Entonces, lo que queremos es hacer referencia, como el PC, por ejemplo,.key. Subraya w. Entonces, esto está comprobando si la tecla w está presionada. Entonces, esto lo hará. Y como estamos ejecutando en cada frame. Cada frame que la tecla w está presionada, esto, lo que sea que esté aquí sucederá. Y lo que queremos hacer, es que queremos aumentar. Queremos decir que en x, nos moveremos uno. Entonces, usemos como, uno como una cosa uniforme. Entonces, si w es verdadero, aumentaremos x. Y ahora simplemente copiemos este código sobre, y hagamos el s, que es para detrás. Entonces, simplemente cambiamos la tecla w a la tecla s. Pero ahora necesitamos ir al revés. Entonces, hacemos x menos igual a uno. Esto también significa que si presionas w y s al mismo tiempo, se quedará quieto. Porque estás añadiendo uno y luego quitando uno. Creo que tiene sentido. Y luego, copiemos eso de nuevo, 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. Entonces, 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, simplemente confía en estos números por ahora. Genial, ¿verdad? Entonces, ahora, si guardas eso, entonces, comando s para guardar eso. Um, si volvemos ahora al editor, necesitamos, um, no, no, lo siento. Mientras todavía estamos aquí, una cosa que necesitaremos hacer es, um, estamos aplicando este movimiento a nuestro cuerpo rígido con el método apply force. Ahora, el apply force aplica, como, un método aplica una fuerza inmediata en ese frame, en el cuerpo rígido que podríamos necesitar escalar hacia arriba o hacia abajo. Um, porque, uh, sabes, como, tal vez se está moviendo demasiado lento o demasiado rápido. Estamos usando uno pero podrías necesitar, um, escalar eso.

Y para hacer eso necesitaremos agregar un parámetro para eso. Así que vamos a agregar un atributo al controlador del jugador ahora. Uh, lo que hará un atributo es lo siguiente. Ahora si vuelves al editor, seleccionamos nuestro jugador, vamos a adjuntar este script a la entidad. La forma en que hacemos eso es seleccionando la entidad del jugador, añadir componente, obtenemos un script. Con el script, um, está aquí en la parte inferior. Ahora puedes, um, puedes seleccionar cualquier script que quieras, que ya hayas creado, y, y añadir este comportamiento a él. Así que aquí simplemente haces clic y seleccionas el controlador del jugador. Una vez que hacemos eso, tenemos el controlador del jugador adjunto allí, lo que significa que, está bien, funcionará, hará cosas. Pero de nuevo, necesitaremos hacer eso que eso que scaling de la de la fuerza. Lo haremos de la siguiente manera. Por cierto, puedes hacer clic en crear y hacer clic aquí en editar para editar rápidamente ese script. Ya estaba abierto, así que es solo uno más. Pero aquí vamos. Um, lo que necesitaremos hacer es crear un nuevo atributo para él para que podamos, no necesitamos volver al code para cambiar ese número. Así que lo que haremos es que vamos a decir controlador del jugador, que de nuevo es el nombre de nuestra clase, ¿verdad? Pero atributos, así que los atributos de esta clase, voy a añadir uno nuevo. Lo vamos a llamar potencia. Si solo añades esto, necesitas darle un tipo. La forma en que hacemos el tipo es así. Así que ya da una buena documentation aquí. Así que puedes necesitas abrir y cerrar corchetes y dices tipo. Y luego como una secuencia, 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, es solo un número. Así que si haces flotante, esto no funcionará. Si haces int, tampoco funcionará. Así que necesitamos usar el número, que abarca tanto flotantes como enteros. Ahora, internamente no, como sabe qué tipo es, sabes, etc., puedes redondearlo, etc., obtener un entero redondeado agradable, pero el tipo es un número. Así que de nuevo, playerController.attributes.addPower. Y luego das un tipo y lo llamaremos número. Ahora si guardamos eso y luego volvemos al editor, no está ahí, ¿dónde está nuestra potencia? ¿Dónde está nuestra potencia? Necesitas hacer clic en este botón de análisis aquí mismo, que volverá a procesar ese archivo, bueno, volverá a analizar ese archivo y verificará cualquier atributo que hayas añadido. Así que ahora aquí está. Así que ahora tenemos el número de potencia allí. Así que 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 que son los atributos. Y el bonito número cuatro aquí es un número enorme, por eso era importante. Así que este es el 4,500,000. Así que cuatro cinco cero cero cero cero, así que cuatro ceros. Y esto es importante por las razones de, sabes, el, cuánto deslizamiento queremos y etc. Así que juega con estos números si quieres. Ahora, si presionas play de nuevo, 45, cuatro ceros si presionas play aquí, está bien, lo tenemos allí. Y luego si usas was, ¿verdad? No está corriendo, ¿verdad? Podríamos necesitar verificar qué está pasando, ¿verdad? Veamos. Veamos. Está bien. Si revisamos nuestro code, creamos el atributo de potencia, pero no lo estamos usando en ningún lugar, ¿verdad? No está en las notas que necesitaba añadirlo allí. Lo siento. Así que necesitamos usar, de hecho, el atributo de potencia que acabamos de crear en nuestro code. Así que aquí en la línea 37, si estás usando el mismo para estar en la línea 37, se llama movimiento aquí lo que estamos haciendo aquí es que estamos creando un Vec3, ¿verdad? Estamos definiendo nuestro vector de movimiento. Lo estamos normalizando y luego lo estamos scaling. Actualmente, solo lo estamos scaling a dt de nuevo. Así que es un performance frame. Tiene sentido. Pero lo que necesitamos hacer es que necesitaremos multiplicar eso con la potencia. Así que justo en dt aquí, solo di, veces this dot power. Ahora, de nuevo, esto será sobre la instancia del script y la potencia será exactamente este valor aquí, que en este caso será 4,500,000. Creo que eso es correcto. Ahora, si solo refrescamos esto, recogemos la nueva cosa. Ah, ahí vamos. Así que ahora nos estamos moviendo, ¿verdad? Como puedes ver, no está girando demasiado y no tiene animation. Así que lo arreglaremos en un segundo. Pero está bien. Nos estamos moviendo, ¿verdad? Interesante también como puedes– OK, este es este uno en realidad. Si haces como esto, es como si estuviera girando alrededor. OK, me gusta eso. De todos modos, OK. Tenemos algunas interacciones básicas allí. Sigamos adelante.

OK. Ahora, lo siguiente que quieres es establecer realmente la rotación del modelo, ¿verdad? Porque de lo contrario es solo como– simplemente como hacer esto, ¿verdad? Ahora, la forma en que queremos hacer eso es que no queremos– no queremos rotar el cuerpo rígido en sí. De lo contrario, se desordenarán las rotaciones de los– el cálculo de la física. Así que lo que queremos es mover realmente solo el modelo. Solo el modelo, no el cuerpo rígido. Así que para eso, necesitaremos en el script una referencia a la entidad del modelo, que es la hija del jugador. Es solo para esta. Y la forma en que hacemos eso es que simplemente añadiremos un nuevo– esta cosa de zoom está estorbando– simplemente necesitaremos crear un nuevo atributo para ello. Así que aquí, vamos a crear un nuevo atributo. PlayerController.attributes.add. Así que creamos un nuevo atributo. Llamémoslo modelo. Luego para el tipo, así que ahora esto no será un número. Esto será una entidad. Así que ahora, estamos referenciando a otra entidad. Y luego antes de volver al editor, agreguemos realmente el code para eso. Así que de nuevo, 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 hacer la rotación del modelo. Eliminemos eso porque ahora podemos hacerlo. Y luego hagamos this.model entity que es la entidad a la que nos referimos. Y haremos set Euler angles. Así es como se llama, creo que es. Ahora para las rotaciones, Play Canvas utiliza cuaterniones para la rotación, pero es muy complicado si quieres establecer los cuaterniones tú mismo. Así que utiliza rotaciones de cuatro dimensiones para prevenir el bloqueo de cardán. Mucha explicación para nada, pero necesitamos usar set Euler angles, no set rotation. Si haces set rotation, estarás usando los cuaterniones, que no queremos, así que usando set Euler angles y quieres rotar en y. Pero ya añadí aquí el cálculo para la profundidad. No necesitamos escribirlo a mano. Así que solo haz cero para x. Así que no queremos hacer nada en x. Queremos usar el nuevo ángulo para y y queremos usar cero para z también. Ahora, si guardamos eso, volvemos a nuestra pestaña de lanzamiento y luego refrescamos. Oh, okay. Así que puedes ver que muy útil. Ya nos está dando algunos errores, que es muy útil para nosotros para debug, pero dice aquí, no se pueden leer las propiedades de null leyendo set Euler angles. Interesante. Volvamos aquí al code así que está tratando de leer set Euler angles de null. ¿Qué significa esto? Así que las entidades del modelo son nulas. Por supuesto, porque olvidamos vincularlas. Si vuelvo a personaje, a jugador aquí, que tiene el script, necesitaré presionar el análisis de nuevo. Y ahora tenemos la entidad del modelo, en realidad aquí mismo, ¿verdad? Así que entonces lo que hacemos es hacemos clic en el personaje medio y simplemente lo arrastramos allí. Así que ahora tenemos una referencia aquí a la entidad del personaje medio desde nuestro script. Así que si hacemos clic allí, podemos ver fácilmente dónde está. También se resalta allí. Bueno, ahí vamos. Bien. OK. Ahora puedes refrescar aquí. Ahí vamos. Correcto. Así que ahora rota. Ahora la rotación es muy repentina, pero sabes, no tendremos tiempo para, para arreglar eso, para hacer una rotación agradable. Les dejaré a ustedes, como tarea para casa, para arreglar eso. O simplemente pueden ver cómo lo hicimos en el, en el proyecto completo más tarde. Pero, OK. Esto funciona por ahora. Sigamos adelante. Hagamos algo de animation tal vez ahora. Porque eso es divertido. Porque de nuevo como ahora solo estamos en errores de tipeo y no, no realmente pasa nada, pero añadamos algo de animation.

Genial. Ahora si vas aquí a comida, personaje de comida aleatoria en la carpeta de animation, ya tenemos inactividad y correr. Así que esos son dos, de nuevo, dos archivos FBX que, de nuevo, simplemente arrastré y solté de, de ¿puedes descargar? Eso es. Esto es lo que me proporcionó aquí. Como estaba listo para generar todos esos archivos para mí. Pero lo que necesitaré hacer primero es crear un gráfico de estado para ello, que define como, oh, estoy inactivo o estoy corriendo. Y luego cómo, ya sabes cómo hacer eso. Así que para hacer eso, seleccionemos la animation del personaje y creemos un nuevo, un gráfico instantáneo. Así que de nuevo, en los activos ahora, así que ahora estamos creando un nuevo activo, que será un gráfico de estado de animation. Así que nuevo activo y gráfico instantáneo. Llamémoslo gráfico de personaje. Ahora, si hacemos doble clic en él, cambiaremos de marcha en el editor al editor de gráficos de estado de animation. Ahora, si alguno de ustedes ha usado 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 animation. 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 más simple de los esquemas, que tiene un estado inicial, que actualmente no hace nada. Está en bucle. Es un estado sin animation adjunta. Lo que haremos es renombrar este a inactivo, así que la animation por defecto... Por defecto, estás inactivo, como respirando, algo así como esto. Y luego creemos un nuevo nodo. Lo siento, nuevo estado... Y llamémoslo correr. Así que podemos saltar entre los estados de inactividad o correr. El estado de correr también estará en bucle, porque estará haciendo algo así, ¿verdad? Asegurémonos de hacer clic en bucle allí. Y añadamos una transición de uno a otro. Hay una condición que hará que de inactivo, empecemos a correr... Y luego si dejamos de correr, la velocidad es cero, volveremos a inactivo. Así que haz clic derecho en inactivo, añade transición a correr. Lo mismo alrededor, añade transición a inactivo.

Ahora, si solo hacemos esto, simplemente irá y vendrá y no pasará nada. Así que necesitaremos añadir un parámetro para que podamos informar al gráfico qué estado, es decir, 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 puedes proporcionar el tipo que quieras también. Así que tienes entero, así que puedes forzarlo a entero, flotantes, booleano, es decir, 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 de cuál es 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, podemos seleccionar ahora nuestras condiciones y luego déjame expandir esto un poco. Y luego aquí, puedo añadir la condición. Así que en inactivo, solo quiero que vaya a correr si la condición de velocidad es más de 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 animation esté hecha, pero en realidad queremos que sea capaz de interrumpir la animation. Así que si estás en medio de tu inactividad y empiezas a correr, dejarás de estar inactivo y empezarás a correr inmediatamente. Así que asegúrate de borrar el tiempo de salida allí. Para la duración, puedes añadir lo que quieras. La duración simplemente se mezcla entre los dos estados a medida que la transición avanza en lugar de simplemente saltar de uno a otro. Este es el tiempo normalizado basado en la velocidad, basado en el tiempo de la animation. Así que 0.2 es un buen número, solo da una pequeña mezcla. Hagamos lo mismo en el otro entonces. De correr de vuelta a inactivo, añade una condición, pero solo haremos eso si la carrera es menos de 0.1. Así que si fue a cero, un número muy pequeño, probablemente no está corriendo así que volverá a inactivo. De nuevo asegúrate de borrar el tiempo de salida. El tiempo de salida no debería ser cero. El tiempo de salida debería estar en blanco, simplemente bórralo. Y luego la duración de nuevo, 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 la animation. Ahora cuando creas el gráfico de estado, no asignas animations todavía. Las asignaremos en un segundo. Esto solo está definiendo el comportamiento bruto, solo el cerebro de ello. Pero las acciones reales se definirán pronto. Así que si haces clic aquí, entonces 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 animation a nuestro modelo. Así que si vuelves aquí a jugador y luego seleccionas personaje medio aquí, necesitamos añadir ese componente para la animation. Así que añadamos un componente, anim. Así que debería ser el primero, no este, anim. Y luego simplemente arrastra el gráfico de estado que acabas de crear. Simplemente arrástralo. Y ahora aquí, como puedes ver, los estados de inactividad y correr que creamos. Ahora hay algunas ranuras para los clips de animation reales para que los enlacemos, para que los adjuntemos. Antes de hacer eso, sin embargo, asegúrate de que en la velocidad, la pones a 1.22, porque de la prueba que estaba corriendo, este es un buen número para... Parece que está corriendo a través de la tabla. Se ve bastante bien. Así que de nuevo, 1.22 debería estar bien. Y luego en el hueso raíz, selecciona la entidad raíz aquí. Así que si simplemente expandes personaje medio, asegúrate de usar el hueso raíz allí. Esto es solo para asegurarte de que la... Esto es un poco técnico sobre cómo funcionan las animations, pero esto es solo para asegurarte de que la animation y tus entidades en la escena están referenciando realmente las mismas transformaciones. Así es como te aseguras de que todo se alinea correctamente. Solo una cosa buena que hacer. Y luego aquí en inactivo y correr, asignemos los clips de animation. Ahora, si abres aquí inactivo... 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, para tener las ranuras aquí. Así que selecciona personaje medio en tu jerarquía y luego desde aquí, necesitaremos seleccionar esos clips. Así que ves, es como una cosa de cartel de las películas. ¿Cómo se llama esa placa? No lo sé. Así que necesitamos seleccionar en este caso, es rootidle.glb. Así que simplemente arrastra eso a la inactividad. Si no estás seguro de cuál usar, hay una forma muy agradable de previsualizar, que es simplemente haciendo clic en él. Si haces clic aquí, ves, bien, como que simplemente está quieto. Hay un personaje aquí. Pero en este, bien, hay una bonita animation aquí. Así que esto solo muestra la vista de marco de alambre, pero puedes comprobar qué pasa realmente así. Esto parece una animation inactiva. Así que esto es lo que queremos. Así que simplemente arrastré ese aquí y luego lo mismo para correr. Así que simplemente selecciono la carpeta de correr y quiero el root.run.glb. Simplemente arrástralo. De nuevo, es el archivo que tiene la cosa de la película. Y si no estás seguro, simplemente selecciona. Bien, esta es una bonita animation de correr. Bien, genial. Genial. Ahora hicimos 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 aplica a nuestra plantilla. Bien, simplemente haz clic dos veces allí. Ahora si simplemente presiono play aquí. Bien, ya no está en pose T. Eso es bueno. Así que está usando la animation inactiva pero no estamos cambiando el número de velocidad. Así que incluso si nos estamos moviendo, el gráfico de estado de la animation todavía piensa que estamos inactivos. Así que necesitamos asegurarnos de establecer el parámetro de velocidad de acuerdo a la velocidad real a la que va el jugador.

Y la forma en que hacemos eso es si abres el editor. Así que hay una agradable tarea pendiente animation aquí. Lo que necesitamos hacer es de alguna manera referenciar el componente animation 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 animation está en la misma entidad que el modelo. Así que podemos simplemente referenciar el personaje medio y obtener el componente animation de él, ¿verdad? El componente anim de él. Así que eso es muy útil. Así que de nuevo, entidad del modelo, ¿verdad? Así, o como quieras llamarlo aquí. Así que si vas a this.modelEntity, que de nuevo está referenciando la misma entidad que tiene la animation. Y dices .anim. Así que ahora estamos referenciando el componente anim de esa entidad. Y luego hacemos 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... Como 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. Así que con esto, obtenemos la referencia al Rigidbody. Y luego queremos la velocidad lineal, que de nuevo es... Así que esa es la velocidad en el eje X y Y y Z. No la rotación, así que cuánto se está moviendo realmente. Pero esto es un Vec3, así que esto es como una cosa tridimensional real. Pero queremos la longitud de ella, ¿verdad? Queremos la magnitud, cuánto se está moviendo realmente. Así que podemos decir, .length, que es un promedio. Y también puedes simplemente revisar la referencia de vista para eso. Así que con esto, estamos obteniendo la magnitud del vector de velocidad lineal y pasándolo a nuestra animation. Así que si guardamos eso, volvemos al juego. Tenemos que recargar los scripts, porque los scripts ya están cargados. Y luego nos movemos. ¡Bien! Ahora ¿qué pasa si sigo presionando D para moverme a la derecha y luego golpeo esa colisión allí? Veamos qué pasa. Oh, se detuvo porque está usando el rigidbody real. No parece la cosa clásica en los videojuegos donde el personaje está corriendo contra la pared así. Esto tiene un poco más de sentido, lo cual es bastante genial. Lo obtuvimos de la caja. Genial. Bien, así que ahora tenemos una integración muy agradable aquí ahora.

Ahora, si tomamos este jugador y vamos sobre la manzana aquí, no pasa nada, porque no añadimos nada para hacer eso. Así que añadamos eso. Añadamos un disparador para que cuando un jugador vaya sobre el coleccionable, haga algo. Volviendo al editor aquí, seleccionemos nuestra comida. Así que necesitaremos añadir un script para eso, ¿verdad? Añadámoslo aquí en coleccionables. Creemos una nueva carpeta. Llamémosla scripts. Luego dentro de la carpeta de scripts en los coleccionables, llamémosla controlador de coleccionables. Esto es lo que mencioné, que estaremos creando algunos nuevos scripts en lugar de simplemente usar las plantillas de scripts, ¿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 con lo que viene 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 inicializar y un método de actualización. Ahora este es un tema para otra masterclass sobre intercambio en caliente, recarga en caliente. Así que se lo dejo a ustedes para que lo miren más tarde. Solo lo eliminaré porque no lo necesitaremos. Y también estamos moviendo el método de actualización. No necesitamos el método de actualización. Lo que necesitamos es alguna forma de decir que cada vez que una entidad, cada vez que un colisionador pasa por esto, como si fuera recogido, ¿verdad?, y necesitamos hacer algo al respecto. Así que la forma en que haremos eso es ya que este script se añadirá 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 Play Canvas, que son los eventos. Los eventos en Play Canvas son disparados y activados 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 que el componente de colisión, por ejemplo, cada vez que otro colisionador entra a través de él o todavía está allí, dispara un evento. Y si alguien está escuchando ese evento, puedes hacer cosas basadas en eso. Así que no necesitas estar constantemente revisando 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 entró en este colisionador. La forma en que hacemos eso es en el método de inicialización. Así que nos adjuntaremos justo cuando el juego comienza. Diremos this.entity.collision. Así que con esto, estamos referenciando la colisión de la entidad porque esto es el... De nuevo, este es el controlador coleccionable, este es el script en sí. No estamos hablando del script, estamos hablando de la entidad en la que el script está adjunto. Así que this.entity.collision. Así que ahora estamos hablando de la colisión. Ahora nos adjuntaremos a ese evento. Y para adjuntar decimos."on". Así que eso en, literalmente significa como cada vez que esto sucede en este evento, hagamos algo. El nombre del evento es triggerEnter todo en minúsculas todo junto. Y de nuevo, todo esto está documentado en la referencia de play canvas sobre, cuáles son los eventos que dispara la colisión y cómo puedo usarlos, etc. Así que cada vez que hay una entrada de disparador en esta colisión particular, podemos proporcionar una devolución de llamada. Ahora las devoluciones de llamada en javascripts se pueden hacer simplemente referenciando 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 es abrir y cerrar corchetes, porque no hay, así que esto tendrá cualquier parámetro. Y haces igual más que, así que una flecha. Y puedes proporcionar cualquier code que quieras aquí. Así que este es el code, ¿verdad? Esta es la función que será llamada cada vez que el colisionador que está adjunto a esta entidad tiene un disparador, ¿verdad? Y lo que haremos aquí es, así que una cosa necesita desaparecer, ¿verdad? Así que hacemos this.entity.destroy. Así que desaparecerá.

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, así que 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. Digamos que const nuevaEntidad es igual a la instancia, y digamos nuevaEntidad dot setPosition y UX0 hagámoslo. 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 sea parte de la escena, de lo contrario estará oculta y se eliminará después. Así que necesitamos agregarla en algún lugar. Necesitamos agregarla a la jerarquía. Simplemente agreguémosla como hija de la entidad actual. Así que digamos this.entity.addChild, nuevaEntidad. Ahí lo tienes. Ahora, con esto, estamos creando una nueva entidad, que es la 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 juegos, necesitamos analizar el script y debes hacer referencia a nuestra plantilla aquí. Entonces, donde sea que hayas guardado la plantilla de comida, simplemente haz referencia 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 juegos. El gestor de juegos entonces lo destruirá y 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 desarrollador JavaScript consola, y 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 ejecución de comida. 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 tenemos un error allí. Bueno, quiero saber qué está sucediendo allí. Puedes inspeccionar el código, asegurarte de que el código sea correcto. Y simplemente puedes editar 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. 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 juegos piensa 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 la nada. 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 de 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, la fase tres también tiene 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 el 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, para la fase tres, la idea es hacer la interfaz de usuario, el audio y la publicación. Creo que solo haremos la interfaz de usuario y luego la publicación porque creo que la interfaz de usuario es bastante genial y realmente no podemos ver qué está sucediendo allí. No sabemos si estamos ganando, si estamos perdiendo, si el juego se está reproduciendo y no estamos seguros de cuánto tiempo nos queda. Así que comencemos con la interfaz de usuario. Si bifurcaste desde la fase tres o si 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.

Ahora lo que haremos es vamos a crear pantallas de UI reales primero. Entonces, si vuelves a, lo siento, esto es muy molesto. Si vuelves aquí al ejemplo, la UI es básicamente, así que tienes esto del tiempo aquí, un texto de puntuación. Y si recuerdas cuando perdemos, hay una gran pantalla que dice, oh, se acabó el tiempo, sabes, como ronda terminada y luego un botón para empezar de nuevo. Así que hagamos eso rápido. Veamos si podemos hacer eso a tiempo. Eso sería un desafío.

Entonces enRoot vamos a crear 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, necesita estar bajo una pantalla 2D. De lo contrario, estará en el mundo 3D. Así que vamos a crear una pantalla 2D. Como siempre es espacio de pantalla, puedes moverlo hacia arriba. Así que no está en medio de tu jerarquía allí. Así que puedes moverlo hacia arriba donde quieras. Siempre estará en el espacio de la pantalla. Y vamos a agregar, comencemos agregando un texto que será la puntuación. Así que aquí, vamos a crear una nueva interfaz de usuario. Elemento de texto. ¿Dónde está? Ahí. Asegúrate de estar, de enfrentar el lado correcto allí. Si no lo ves, probablemente esté en el otro lado. Espera un minuto. Entonces, cuando creas un nuevo elemento de texto, ya asigna una fuente aleatoria, no aleatoria, sino la primera fuente que tienes en tu proyecto. Así que en la carrera de comida, aquí tenemos muchas fuentes interesantes ya configuradas. Así que elegiste la primera, Kenny Blocks, pero podemos elegir cualquiera. Elijamos esta, lo que sea, Kenny Mini, Kenny Mini Squarer, sí. Así que elegí esta. De nuevo, solo arrastra y suelta. Y luego podemos moverlo donde quieras en la pantalla. Ahora, 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 están en el medio y giro así, si hago algo en la pantalla, juego en un dispositivo móvil, siempre estará allí en el centro de la pantalla, lo que podría tener sentido si eres nuevo en el caso de uso. Pero queremos uno que diga, como están en la parte superior izquierda, ¿verdad? Entonces, si está en la parte superior izquierda, si quieres que las cosas estén en la parte superior izquierda, lo que hacemos es en el texto, podemos establecer el anclaje allí. Así que ya tenemos algunos ajustes preestablecidos aquí. Entonces en ajuste preestablecido, si solo presionas el anclaje superior izquierdo y el pivote, automáticamente establecerá el pivote y el anclaje en la parte superior izquierda. Y luego podemos moverlo hacia abajo así o algo así. Llamémoslo texto de puntuación, ¿puntuación a la derecha? Genial. Así que ahora tenemos el texto listo para el script que realmente pondrá las puntuaciones a medida que avanzamos.

Ahora casi estamos a tiempo. Si están contentos de continuar, continuemos continuemos por ahora. Si necesitan abandonar, entonces está bien. Pero creo que podemos, sigamos adelante por ahora, veamos hasta dónde podemos llegar. Iré tan rápido como pueda. Pero de nuevo, creo que la grabación estará disponible más tarde también. Así que pueden echarle un vistazo a eso más tarde. Y también de nuevo, el proyecto completo estará disponible. Sí, empezamos unos minutos rápido. Veamos cinco minutos, ¿qué vas a hacer Jorn? Veamos. Y el proyecto completo de nuevo, estará disponible más tarde si quieren echar un vistazo a todo el asunto con un poco más de respiro. Así que tenemos el texto de puntuación. Ahora agreguemos este tiempo aquí, esta barra, eso es bastante ordenado. Así que la forma en que haremos eso es la siguiente. Crearemos una nueva entidad también, una nueva interfaz de usuario. Llamémosla un elemento de imagen. Así que este elemento de imagen. También pongamos el ajuste preestablecido en el anclaje superior izquierdo, y mantenlo para que esté allí. Por cierto, esto significa que a medida que movemos cosas alrededor, siempre estarán en la parte superior izquierda allí. Así que siempre están allí. Muy útil para crear interfaces de usuario responsivas para dispositivos móviles que puedes rotar o no. Entonces sí, esta es una característica bastante ordenada. Si seleccionas aquí en el componente de elemento de cambio de tamaño, puedes cambiar fácilmente el tamaño de la cosa. Así que vamos a crear ese fondo. Así que este es el fondo aquí, esa cosa blanca en el fondo, en el fondo. Y luego vamos a crear una nueva entidad para ser como la parte del medio, ¿verdad? Así que ahora vamos a colorear este el tinte verde que tenemos allí. Ahora queremos que sea como, para tomar el tamaño completo del tiempo, ¿verdad? Pero luego a medida que pasa el tiempo, debería ir así, ¿verdad? O así para ustedes. Así que la forma en que hacemos eso es muy fácil para configurar los anclajes para que sea exactamente, coincida con el tamaño del padre. Así que podemos hacer coincidir el tamaño del padre estableciendo los anclajes para ser todas las esquinas. Así que podemos seleccionar este gizmo aquí y luego ir aquí, así que este debería estar aquí. Este debería estar allí. Este debería estar allí. Y esto significa que el anclaje es 0, 0, 1, 1. Ahora tiene algún margen, que no queremos. Así que está ocupando más espacio. Así que restablezcamos el margen allí. Así que todo es cero. Ahora está tomando todo el espacio, pero si el margen entonces está disminuyendo así, puedes ver que este es el efecto que queremos. Como, a medida que pasa el tiempo, queremos que el margen aumente. Así que tenemos toda la configuración allí que necesitamos para hacer que eso suceda ahora. Tomemos la puntuación aquí. Pongámosla 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 hacer que todo esto ya esté configurado correctamente, exactamente como necesitamos. Pero solo necesitamos hacer las referencias a las entidades correctas. Así que la primera que necesitamos, necesitamos la entidad del administrador del juego. Así que esta es la entidad que contiene el script del administrador del juego, así que pongamos eso. Ahora necesitamos la entidad de la barra de tiempo. Así que esa es la verde.

Bien, genial. La entidad de texto de puntuación. Genial, pongámoslo allí. Ahora si recuerdas aquí en el ejemplo había un inicio, estaba ese Eat Me allí, la cadena que estaba allí. Omitámoslo por ahora. Eso no está creado. En la entidad de pantalla de fin de ronda y comienzo de ronda, así que estos son los del juego terminado, ¿verdad? Así que no hagamos nada en esos ahora mismo, de lo contrario, de lo contrario, tomará demasiado tiempo. Pero ahora si presionas play en esto y revisas lo que acabamos de hacer, hagamos otro. Oh no, ¿puedo establecer propiedades de null, habilitando? Probablemente porque no configuré una de las cosas. Arreglémoslo. Así que esto es muy útil por cierto, tener estas cosas aquí. Si haces clic en el botón, automáticamente abrirá el code editor para ti con resaltado de sintaxis y resaltando exactamente donde salió mal. Así que ahora está usando esto, ¿verdad? Veamos si esto no es null entonces haz la cosa. De lo contrario, solo revisémoslo. Guardémoslo. Refrescar. Bien, ahora solo comienza cuando recoges algo, ¿verdad? Así que recojamos algo, veamos qué pasa. Oh, allí vamos. Bien, así que ahora tenemos las puntuaciones. Ahora podemos ver que el tiempo está bajando. Y luego si lo recoges, va, oh sí, está bien. Así que ahora habríamos perdido. Pero de nuevo, no terminamos de configurar todas las cosas diferentes. Ahora si quieres ver la configuración completa, todo lo que necesitas hacer, hagámoslo ahora porque ya no tenemos tiempo. Revisemos ahora el proyecto completo. Así que de nuevo, lo enviaré pronto. Proyectos completos. Déjame enviarte en el chat. Este es el proyecto completo que puedes revisar y también puedes hacer fork si quieres. La configuración final es básicamente configurar todos los diferentes controladores de UI que hay y crear esta pantalla aquí, que tiene este botón en la parte inferior, que ya contiene algunos hints de presión al pasar el cursor. Entonces, a medida que presionas, a medida que pasas por encima, hace cosas diferentes. Y ya tiene también el oyente para cuando haces clic para reiniciar. Entonces, tienes todo lo que necesitamos. Y este es el proyecto completo. De nuevo, adelante chicos, vuelvan locos con él. Pueden echar un vistazo a todo lo que se ha hecho. Siéntanse libres de usar, quiero decir, todos los activos son CC0 de Kenny. Dale un grito si usas alguno de esos. Asegúrate de añadir 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. Entonces, sí. Entonces, no aprendimos cómo usar audio, pero creo que eso es para la próxima. Asegúrate de echar un vistazo al script del administrador de audio allí. Serás capaz de ver exactamente cómo se hace. Y esto se envuelve. Oh, oh, oh, una última cosa. 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. Publicar en Play Canvas. Dale un nombre. Dale una descripción. Eso es opcional. Solo se requiere el título. Presiona publicar ahora. Está construyendo. Ahí está. Está construyendo. Haz clic. Este es un enlace permanente a tu construcción particular. Esto es tuyo para siempre. Nunca te lo quitarán a menos que descargues, a menos que elimines el proyecto o 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 tuitear. Si lo haces, asegúrate de tuitear sobre ello. Lo retuitearé. Nos ayudaremos mutuamente, nos seguiremos mutuamente para ayudar a los desarrolladores de juegos. Porque de nuevo, esto es jugable para todos. Puedes jugarlo en móvil, puedes jugar en multiplataforma. Listo, ahí tienes. Así es como se hace la publicación en Play Canvas. Tomé 30 segundos o algo así para hacer eso. Ahí vamos. Y sí, eso es Play Canvas. Muchas gracias, lamento haberme pasado un poco de tiempo. Creo que fui un poco demasiado optimista cuando estaba preparando esto. Lo practiqué dos veces, logré hacerlo a tiempo. Pero creo que hablé demasiado hoy. Espero que haya sido genial.