Crear un juego con PlayCanvas en 2 horas

En cuanto al tamaño, tiene una huella de menos de 400k después de la compresión gzip y los desarrolladores están buscando admitir la eliminación de árboles desde el editor para hacerlo aún más pequeño, de modo que pueda eliminar el código del motor que no esté utilizando. Utiliza y el producto principal de PlayGamers es un editor en línea que puedes ver aquí y podemos construir experiencias visualmente, agregar modelos, cargar texturas, modificar materiales a través del navegador, que es lo que usaremos hoy. Y aquí hay una selección de las últimas características. No las mencionaré todas ahora, pero las que quiero destacar son el soporte GLTF con compresión de malla Draco, que permite a los desarrolladores tomar mallas de alta detalle y comprimirlas hasta una décima o vigésima parte de su tamaño. Es algo que han agregado recientemente y es muy impresionante.

Y muchos de los usuarios de PlayCanvas han creado algunos juegos multijugador realmente geniales, juegos para multijugador. Así que déjenme retroceder un poco. Básicamente, lo que tengo hoy, quién soy, características. Muchos de los usuarios han creado grandes juegos multijugador y juegos con plataformas en malla como WeChat, Snapchat, Facebook, Metaversos, Experiencias de Compras y Visualizaciones y Configuradores de Productos. Puedes encontrar avances de esto en MaplePlayCanvas y enlazado aquí. Y esto es lo que vamos a construir hoy. Vamos a construir un juego muy pequeño donde controlas a tu personaje y debes evitar que las bolas toquen el suelo. Básicamente, intenta alejarlas del suelo porque cuando tocan el suelo, tu salud disminuirá. Ok.

Entonces, nuestro plan es básicamente revisar tantas características como podamos, incluyendo las características fundamentales. Pero antes de eso, también quiero hablar sobre algunos problemas con JavaScript y Play Canvas. Todas las documentaciones para Play Canvas utilizan la versión ES5 de JavaScript, que, como todos saben, es una versión bastante antigua de JavaScript. Si eres nuevo en JavaScript y estás buscando tutoriales sobre JavaScript, encontrarás que están escritos utilizando ES6, que incluye clases y módulos. En general, esto no es un problema siempre y cuando estés consciente de las diferencias, pero tenlo en cuenta cuando mezcles tutoriales de fuera de Play Canvas con el contenido de Play Canvas en sí. Esto se debe a que Play Canvas no tiene realmente un paso de compilación aún, donde transpila JavaScript a ES5. Lo que hace es tomar el código que escribes y ejecutarlo directamente en el navegador. Técnicamente, siempre y cuando el navegador pueda ejecutar el código, puedes usarlo dentro del editor de Play Canvas. No sé si hay personas aquí que sean nuevas en JavaScript, pero si lo son, hay algunas personas que vienen de Unity y C Sharp. Hay algunos problemas con los que las personas se encuentran cuando usan Play Canvas por primera vez y no han utilizado JavaScript antes. Uno de ellos es que JavaScript no tiene concepto de tipos de valor, por lo que los objetos siempre se pasan por referencia. También es un lenguaje dinámico donde puedes agregar propiedades dinámicamente en tiempo de ejecución. Por lo tanto, no tienes la verificación de tipos estática que normalmente tienes en lenguajes como C Sharp y C++. Además, y lo más importante, las funciones son objetos. Puedes pasar funciones como objetos en todo el código, lo que las hace increíblemente poderosas, pero también es algo de lo que debes ser consciente al tratar con el ámbito. También quiero cubrir la arquitectura del motor Play Canvas, al menos de manera general. Volveremos a esto a lo largo del taller y también lo utilizaremos para mostrar cómo navegar por la documentación de la API.

Entonces, en su núcleo, cuando creas una aplicación Play Canvas, está compuesta por objetos de entidad en una escena, y estos objetos de entidad tienen componentes que impulsan el comportamiento de la entidad. Una entidad por sí misma es solo una transformación. Es solo una posición en el espacio con rotación y escala, y si quieres que reproduzca sonido, agregas un componente de sonido. Si quieres tener propiedades de física, agregas componentes de cuerpo rígido y colisión. Y si queremos que realice lógica personalizada, podemos darle un tipo de script, y ese tipo de script es efectivamente algún código personalizado que tenemos que está conectado a la vida útil del objeto. Entonces, hay una etapa de inicialización que actualiza una función que se llama en cada fotograma, y esto es lo que generalmente vamos a usar para impulsar la lógica de la aplicación. También hay una clase de aplicación PC que se crea automáticamente por ti, por el editor, y eso es prácticamente el corazón de Play Canvas. Contiene todos los sistemas, los gestores, para acceder a la entrada del teclado, poder acceder a los activos y también te brinda acceso directo al gráfico de escena. El objeto de la aplicación en sí también es prácticamente accesible globalmente, por lo que puedes acceder a él desde cualquier lugar, lo que facilita mucho obtener lo que necesitas del motor a través del objeto de la aplicación. Y los activos. Entonces, los activos de Play Canvas son envoltorios alrededor de datos. Y los datos son cosas como datos de modelos, animaciones, texturas, materiales, efectos de audio, etc. Y la razón por la que está envuelto es para que el código pueda tener un control sobre... ¿Cómo lo digo? Un control sobre lo que serían los datos. Entonces, por ejemplo, puedo hacer referencia a un activo de sonido, pero puedo cargar o descargar los datos dinámicamente en tiempo de ejecución. Y esto nos permite hacer cosas como precargar la página solo con los activos que necesitamos, y luego cargar solo lo que necesitamos para lo que el usuario atraviesa. Y finalmente, Play Canvas es completamente impulsado por eventos. Es principalmente impulsado por eventos, donde cualquier cosa que suceda dentro del motor, como colisiones de física, entrada, resultados de carga de activos, cualquier tipo de operación asíncrona, se disparará como un evento a través de los objetos de Play Canvas. Verás esto hacia el final del taller. Y también podemos usar el mismo sistema para enviar eventos en toda la aplicación dentro de nuestro propio código también.

Voy a abrir el chat. Disculpen, acabo de darme cuenta de que tengo el chat de Zoom. Muy bien, ahora que todos se han registrado en PlayCanvas, me gustaría que hagan un fork de este proyecto que usaremos como base. Voy a ponerlo en el chat ahora. Y lo voy a publicar. Ahí lo tienen. Este es... Vamos a hacer clic en esto. Este es el proyecto base. Esto es lo que vamos a usar para comenzar nuestro taller. Si hacemos clic en fork, esto tomará... Cuando haces un fork de un proyecto o un proyecto público, eso tomará una copia del proyecto que está en la rama principal y creará uno nuevo... y lo pondrá bajo tu propiedad. Lo llamaré, veamos, Taller de Jetsnation. No puedo escribir. Muy bien. Si hacemos clic en editor, esto nos llevará al editor del proyecto y nos dará una selección de escena. Así que hacemos clic en la escena sin título, y esto nos lleva a lo que normalmente comienzas cuando creas un proyecto en blanco en PlayCanvas. Tiene una vista principal, nuestra vista 3D principal, donde realmente puedes ver lo que hay en nuestra escena. Esto se llenará con entidades cuando avancemos en el taller. En el lado izquierdo, tenemos nuestra jerarquía de escena. Estas están formadas por entidades de PlayCanvas, y como puedes ver, si seleccionamos cada una, algunas de ellas ya tienen componentes o lógica, lo siento, componentes agregados a ellas. Así que la cámara tiene un componente de cámara, que obviamente se utiliza para determinar qué renderizar desde la posición y... lo siento, determinar qué renderizar... renderizar la escena. Así que podemos mover la cámara alrededor y renderizar diferentes aspectos de la escena, o podemos mover la cámara en tiempo de ejecución. Tenemos una luz, que tiene un componente de luz donde tenemos diferentes tipos de luz: directa, focal y omni. Desde aquí controlamos qué tan brillante es la luz, de qué color es y otras propiedades, que veremos más adelante. Y finalmente, tenemos el objeto plano, que es una entidad con un componente de renderizado. Los componentes de renderizado se utilizan para renderizar efectivamente mallas en la escena. En este caso, es un plano, que es un polígono plano. Y eso es, lo siento, diré que eso es todo. Y lo que podemos hacer aquí es modificar estos valores, moverlos, o agregar nuevas entidades a la escena. Haz clic derecho en esto y ve a la caja 3D. Vamos a crear una caja 3D en la escena. Y desde aquí, podemos usar las herramientas de transformación para mover y rotar el objeto. En el lado izquierdo, tenemos transformar, rotar, escalar, redimensionar el componente del elemento, que se trata de la interfaz de usuario, a la que iremos más adelante. Y tenemos el ajuste, que hemos habilitado para ajustar a una cuadrícula. Enfocar, así que si hacemos clic en eso, enfocaremos nuestra vista del editor en el objeto que seleccionamos. Tenemos deshacer, rehacer, luz mapeada, a lo que vamos a entrar hoy, la celda codificada, que tocaremos en el siguiente paso, y también los pasos de publicación y descarga que haremos al final. Para moverte por la vista 3D, puedes mantener presionado el botón izquierdo del mouse para rotar la cámara, la rueda de desplazamiento para acercar y alejar, el botón central del mouse para desplazarte y el botón derecho del mouse se utiliza para rotar la vista como una cámara deslizante en primera persona, y desde allí puedes usar las teclas WASD para moverte por la escena. Si estás en una computadora portátil y encuentras que acercar y alejar es un poco sensible, si vas a la configuración en la parte inferior izquierda, ve a editor, puedes cambiar la sensibilidad del zoom para que se adapte mejor a tu hardware. Normalmente lo configuro en dos, porque encuentro que el valor predeterminado es demasiado sensible para hacer zoom. Así que si hacemos clic izquierdo para seleccionar un objeto en la vista 3D, podemos usar la transformación de traslación para moverlo por la escena. Así que si paso el cursor sobre estas flechas, puedo moverlo a lo largo de cualquier eje, hacia adentro y hacia afuera. O podemos pasar el cursor sobre los cuadrados para moverlo en ese plano plano en particular. Así que por ejemplo, si paso el cursor sobre esto, me moveré sobre el plano verde y azul. Así que nunca se moverá hacia adentro y hacia afuera. Y las direcciones que representan son el mundo X, Y, hacia arriba, y Z hacia adelante. Y la mejor manera fácil de recordar es RGB X, Y, Z efectivamente. Muy bien. Veamos. Y también aquí abajo, así que he hablado del panel de activos. El panel de activos es donde se encuentran todos los datos que hemos subido. Esto representará nuestra textura. Así que aquí es donde subimos nuestras texturas, modelos, nuestros GLB, FBX, PNG, activos de audio, etc. Vamos a omitir el paso de importancia. Es como el paso de carga porque pensé que eso llevaría demasiado tiempo en el taller. Así que todos estos activos ya están configurados para el taller. Lo que vamos a hacer aquí es configurar la escena, configurar el proyecto para que sea un poco más interesante porque ahora mismo es un poco aburrido. Es una escena negra y básicamente tenemos una sola línea. Lo que suelo hacer con cualquier proyecto nuevo es poner un skybox y lo que permite hacer es que nos dará luces ambientales del color del skybox. Esto se conoce como, ¿cómo lo llamamos? Iluminación basada en imágenes, oh, iluminación basada en imágenes, donde efectivamente los colores del skybox emitirán luz ambiental en toda la escena, lo que básicamente hace que se vea mucho mejor que tener una única luz direccional dura en la escena misma. Así que si vamos a configuración a la izquierda y vamos a renderizado, lo que tenemos aquí es la opción de Skybox. Así que podemos seleccionar, si hacemos clic en el botón de lápiz, podemos buscar nuestro activo de skybox, que estará en los activos raíz, Belfast Sunset HDR. Y tenemos un tipo de cubemap. Si lo seleccionamos, ahora puedes ver que generalmente se ve mucho más brillante. Se ve mucho más natural que tener un solo color en el fondo. Y lo que suelo hacer también es en lugar de tener BRSC, la nube y demás, suelo cambiar un poco a dos, lo que básicamente difumina el skybox. Muy bien, genial. Y finalmente, también tenemos el botón de lanzamiento.

Entonces, el botón de lanzamiento abrirá la escena como lo haría un usuario final al ejecutar el juego. Así que vamos a hacer clic en lanzar, y podemos ver aquí desde dónde está nuestra cámara, actualmente, en qué dirección está mirando, y el skybox, puedes ver cómo se ve. Pero lo que vamos a hacer a continuación es lo que, lo siento, el siguiente paso que vamos a hacer es configurar el suelo para que podamos verlo mejor desde el fondo, y también configurar la cámara lista para el juego. Teniéndola configurada en el ángulo correcto donde podemos colocar nuestro personaje del jugador y enmarcar eficazmente la escena.

Entonces, primero, vamos a enmarcar la escena con la cámara, y lo que podemos hacer si vamos a, dónde está, enfoque, enfoque, enfoque, enfoque, podemos ver nuestra cámara. Oh, lo siento. Acabo de ver el mensaje de Alex sobre, ¿está congelado para todos? ¿Alguien más tiene el mismo problema con el 4v4? Louis dice que está bien. Karen, lo siento Karen, dice que está bien. De acuerdo. Alex, ¿quieres intentar volver a unirte a la llamada de Zoom y ver si eso ayuda? De acuerdo. Les daré unos minutos para intentarlo. De acuerdo. Por supuesto, de acuerdo. Lo otro es, si te quedas atascado con los pasos a seguir, por favor avísame y podemos ver el problema en la transmisión. O lo que puedes hacer es, puedes hacer un fork del proyecto que hice fork. Así puedes reiniciar desde donde estoy actualmente en el taller. Este es mi fork. Lo voy a colocar tanto en el chat de Zoom como en Discord.

De acuerdo, lo que vamos a hacer es enmarcar la cámara. Así que lo que podemos ver aquí arriba es una vista previa de lo que la cámara está mirando. Lo que vamos a hacer es cambiarlo directamente para que esté mirando prácticamente la plataforma de frente. Así que establecemos la posición X en cero, establecemos esto en 2.65, que es la posición Y, y lo establecemos en, creo, ocho y establecemos la rotación en cero, cero. Y podemos ver aquí, así es como quiero enmarcar el juego, donde estás mirando directamente, por el camino con un ligero ángulo hacia abajo, y eso nos da suficiente espacio para ver el suelo por el que el jugador puede caminar y también nos da suficiente espacio para ver las tablas en la parte superior. Ahora que está hecho, vamos a lanzarlo y ver cómo se ve eso, y esta es como la expectativa. Genial. Lo que quiero hacer ahora es cambiar el color del suelo a verde, nuevamente para que resalte y se destaque. Así que lo que voy a hacer aquí en el, volver al panel de activos. Voy a establecer un material para aplicar a la malla, y lo que hacen los materiales es controlar cómo se renderiza la malla, en términos de qué color tiene, si se renderizará correctamente o no, y podemos controlarlo aquí. En cuanto a qué color tiene, si tendrá una imagen como textura encima, si la luz la afecta y demás. En este caso, vamos a hacerlo verde, que es agradable y fácil de ver. Así que vamos a activos, vamos a modelos, suelo, y vamos a hacer clic derecho, ir a nuevo activo, seleccionar material, y esto creará un nuevo activo de tipo material. Renombrarlo a suelo. Ir a la difusa. Entonces, la difusa es el canal del material que va a controlar cómo se ve la malla cuando también se ve afectada por la luz. Así que en este caso, lo vamos a cambiar a verde. Y lo que suelo hacer es usar un sitio llamado colores de interfaz de usuario planos y simplemente tomar uno de estos colores porque generalmente se ven bien. Copiar eso. Lo voy a pegar en el suelo. Pegarlo ahí. Quitar el numeral. Y ahora tenemos un suelo verde. Y lo que vamos a hacer ahora es cuando seleccionamos el suelo, que debería verse plano y hacemos clic en el botón de lápiz para seleccionar la malla, lo siento, para seleccionar el material. Y ahora tenemos un bonito suelo verde. Y debido a que la pestaña de Lanzamiento y el editor están conectados entre sí a través del servidor, cualquier actualización que hagamos, se reflejará en la pestaña de Lanzamiento casi de inmediato. Una última cosa que quiero hacer es cambiar el ángulo de la luz. Así que está fijo hacia abajo. Y de esa manera, cuando las bolas aparezcan en la parte superior, podemos ver de dónde vienen, desde una perspectiva de juego, si la sombra está directamente debajo de la bola. Así que lo que quiero hacer es ir a la luz y cambiar el ángulo para que sea 0, 0, 0. Y ahora podemos ver, ahí vamos. Ahora podemos ver el ángulo de la luz, apuntando directamente hacia abajo. Y así es como se ve. Lo otro que quiero hacer es también hacer esas sombras mucho más bonitas. Porque en este momento, se ven un poco de baja resolución. Así que podemos ir aquí, volver a la luz, y cambiar la resolución del mapa de sombras. El mapa de sombras es, efectivamente, una textura de las sombras que está proyectando la luz. Cuanto mayor sea el área del mapa de sombras, menos, lo siento. Idealmente, quieres tener la resolución de sombras lo más alta posible que puedas admitir en tu dispositivo, que generalmente es de alrededor de 4K para la mayoría de los dispositivos móviles. Y también, hacer que la luz solo afecte a la menor área posible del mundo. Y mantenerla de alta resolución, por lo que cuanto más grande sea el mundo, más grande será el área que afecta la luz, menor será la resolución de la sombra en el mapa de sombras, así que eso es 4K. Y ahora puedes ver que son mucho más nítidas. De acuerdo, eso configura el paso uno en términos de configurar la escena y la introducción de edición. Volver aquí. Oh, lo siento, por cierto, si quieres, después de la masterclass, puedes volver a conectarte en línea y ver más detalles sobre cualquier cosa de lo que hablé hoy, he dejado enlaces en la parte inferior de cada diapositiva de los otros tutoriales o documentation que son relevantes para esta área de la que estoy hablando.

De acuerdo, lo que vamos a hacer ahora es agregar un personaje del jugador, ese personaje amarillo que vimos antes, a la escena y también escribir un script para controlar su movimiento para que pueda ir a la izquierda y a la derecha. Y normalmente lo que hacemos es importar un FBX o GLB en los activos, pero ya lo he hecho para ahorrar tiempo. Así que vamos a modelos y miramos el personaje animador Kkit. Este es un activo CC0. Así que podemos usarlo libremente. Y lo que normalmente sucede es que cuando importas tu FBX o GLB, se crea como una fuente de modelo, y eso luego creará otros activos incluyendo la malla data, que es el contenedor, los materiales del FBX, cualquier animations que formaba parte del FBX, y también, lo más importante, una plantilla. Hablaré más detalladamente sobre la plantilla un poco más adelante en el taller, pero por ahora la plantilla es un conjunto de datos que representa la jerarquía de nodos en el modelo.

Entonces, si estamos hablando de un personaje, por ejemplo, habrá nodos para la cabeza, las articulaciones de los hombros, los brazos y las rodillas. Y esto está preconfigurado en la plantilla cuando importamos el GLB y FBX, al importar un modelo. La forma de agregarlo a la escena es hacer clic derecho en la entidad en la que queremos crearlo, por ejemplo, en la raíz, hacer clic derecho, ir a plantilla, agregar instancia. Luego seleccionamos el activo de la plantilla. Y podemos ver aquí que si nos enfocamos en él, importará la plantilla con toda su jerarquía. Así que tenemos el cuerpo, la cabeza, el brazo, etc. Y también una malla de renderizado, que se utiliza para renderizar eficazmente en la escena. Vamos a eliminar esa caja mientras estamos en ello, eliminar la caja, hacer clic derecho, eliminar. Ahora, si hacemos zoom hacia atrás un poco, y nuevamente, volvamos al laboratorio de lanzamiento. Así es como se ve. ¿Cuál era la siguiente parte? Agregar un script para moverlo hacia la izquierda y hacia la derecha.

Lo que vamos a hacer aquí es escribir nuestro propio tipo de script para tener lógica personalizada donde podemos detectar la entrada del teclado y luego mover el NC alrededor de la escena. Entonces, lo que vamos a hacer aquí es ir a activos, perdón, ir al panel de activos, scripts, hacer clic derecho, ir a nuevo script, y lo llamamos jugador. Y esto creará un nuevo archivo JS para que lo editemos. Así que hacemos doble clic en eso. Y se abre un código, está arriba. El editor de código es Monaco, está basado en Monaco. Así que tengo todos los atajos de Visual Studio que solía, perdón, Visual Studio Code que solía funcionar aquí también, incluyendo command shift P o control shift P, y eso te dará todas las operaciones que puedes hacer dentro del editor. Y también todos los atajos que vienen con él. También, si quieres ir a editar preferencias, puedes cambiar el tamaño de fuente, puedes cambiar, déjame ampliar esto un poco, puedes cambiar el tema. Así que si quieres, vamos a, sí, predeterminado, por ejemplo, que es un trabajo en luz del día. Perdón, estoy escuchando pitidos. Sí, puedes personalizar esto como quieras y uno de los temas comunes que tenemos. Y si lo revisas, es como lo que es el script. Esta es como la plantilla predeterminada que se crea cada vez que creas un activo de script. Y lo que hace es crear un tipo de script, así que cuando se ejecuta este código, creará un tipo de script dentro del motor llamado jugador. Entonces, la cadena que se pasa aquí es el nombre del tipo de script dentro del registro de scripts en el motor. Y lo que devuelve es un objeto que se instancia en cada entidad que tiene este tipo de script adjunto. Así que si lo adjuntamos, lo explicaré un poco más tarde, pero cuando adjuntemos este tipo de script a una de las entidades, buscará en el motor el nombre del script, que es jugador, y creará una instancia de este, de este objeto en esa entidad, lo que significa que podemos controlar esa lógica, lo que nos permitirá controlar, perdón, controlar, escribir lógica personalizada para esa entidad en todo su entorno. Bueno, voy a hacerlo.

De forma predeterminada, se creará, el esqueleto también crea una función de inicialización y una función de actualización. Por lo tanto, la opción de inicialización, la función de inicialización se llamará una vez que el tipo de script se habilite por primera vez en la escena. Por ejemplo, si la entidad está desactivada al inicio, la función de inicialización no se llamará hasta que la entidad se habilite por primera vez y se pueda poner código web aquí y la actualización se llamará una vez por cada cuadro. Entonces, en PlayCanvas, eso sería una vez cada solicitud de cuadro de animación en el navegador y se pasará DT, que es el tiempo desde el último cuadro. Digamos. Y lo que vamos a hacer aquí es acceder al administrador de teclado desde el objeto de la aplicación. Entonces, si volvemos aquí, volvemos a la documentation y la clase de aplicación, tenemos un dispositivo de teclado al que podemos acceder y debajo de eso, podemos usarlo para detectar si se presionó un botón, si se está presionando actualmente y otras piezas obvias. ¿Comentas el último cuadro... Así que pregunta en Discord. El tiempo desde el último cuadro no está en minutos segundos, está en segundos. Así que en una pantalla de 60 Hz, sería uno entre 60 efectivamente. Bien, ¿a dónde iba? Sí, y lo que puedes hacer desde cada tipo de script es acceder al NT al que está adjunto. Así que veamos, déjame escribir. This dot NT, vamos a moverlo hacia arriba. Eso nos permite acceder al NT al que está adjunto este tipo de script, pero también podemos acceder al objeto de la aplicación, lo que básicamente significa que desde cualquier script, básicamente puedes acceder a cualquier otra cosa dentro de la aplicación o el motor. Entonces, para esto, lo que vamos a hacer es si this dot app dot keyboard y está presionado, y luego necesitamos pasar un código de tecla, que tenemos constantes en PlayCanvas para PC dot key. Vamos a usar las teclas de flecha izquierda. Luego haremos lo mismo para el botón derecho del ratón, pero mis pensamientos son correctos, el botón derecho está más cerca. Mantenlo correcto. Así que cada vez que presionemos esto, sí, cada vez que presionemos esto, en cada cuadro que mantengamos presionado el botón izquierdo del ratón, se llamará todo lo que esté dentro de esta declaración, todo lo que hagamos a la derecha. Cubiertos, así que pensé en el botón izquierdo del ratón izquierdo del ratón izquierdo puisque y cortesía derecha. Solo se llamará bien y desde aquí lo que queremos hacer es mover el NC a la izquierda y a la derecha, así que debajo del. NCA Pie. Um, hay funciones para hacer muchas cosas, así que puedes acceder a cualquiera de los componentes bajo el NT como puedes ver aquí. Pero lo que queremos es el. Queremos usar cualquier cosa que mueva la posición, así que vamos a traducir para ir a la función de traducción. Siempre querremos traducir el nodo gráfico o la entidad en el espacio mundial a través de un vector para que puedas. Podemos decir que en cada cuadro o cada vez que se llame, mueva. A lo largo de los valores que le pasemos. Así que por ejemplo, en este caso particular, el ejemplo dice que cuando esta función se llame, traduzca mueva este NC 10 unidades hacia la derecha a lo largo del eje X. Así que eso es, eso es potencialmente de uso, así que this dot entity dot translate. Y este chico a la izquierda, así que menos X, hagamos lo mismo para el botón derecho. Quiero multiplicar Delta time para que sin importar lo que hagan en términos de cuadros por segundo. En tiempo real. Se moverá a una velocidad constante. Y queremos hacer lo contrario para. Derecha derecha cookie. OK. Voy a dejarlo en pantalla un poco más. Pero lo que quiero mostrar ahora es lo que tengo. Mis pensamientos son que volvamos al personaje del jugador. Voy a ir a la raíz de él, que es esto. Entonces, el objeto raíz de toda la jerarquía, vamos a componente. Script y luego debajo del script. Adjuntamos el jugador. El tipo de script del jugador y esto significa que. El tiempo de vida del alcance del script es ahora dentro de esta entidad. Así que conceptualmente tenemos el NT, el NT que ahora tiene un componente de script y debajo del componente de script tiene todos estos tipos de script que le adjuntamos. Eso significa que el componente de script es responsable de actualizar e inicializar todos los tipos de script adjuntos a él. Entonces, si el componente de script está desactivado, entonces todos los tipos de script también están desactivados. Así que vamos a ejecutar eso. Vamos a la pestaña de rubor, vamos a actualizar eso. Y si. Usamos cortesía izquierda y derecha, ahora podemos ver que nos estamos moviendo. Um, en la pantalla real que queríamos, que es como la pantalla frontal. OK, una de las cosas que queremos hacer es que probablemente sea demasiado rápido. Así que queremos intentar ajustar la velocidad. Para que sea una velocidad agradable, que no sea demasiado fácil cruzar la pantalla. Tampoco demasiado difícil y a veces es bastante difícil ajustarlo. Así que lo que vamos a hacer es cómo habilitar el teclado de nuevo, así que volvamos al código. Uhm? Y déjame copiar eso en el chat, probablemente sea más fácil. Estaba a punto de decir que vamos a aquí. Así que lo que podemos hacer es ajustar manualmente esto a cualquier número que tengamos y luego seguir lanzando la pestaña tratando de escribir o vamos a hacer es exponer este valor como un atributo en el editor. Así que simplemente podemos pegarlo aquí y de esa manera no tenemos que básicamente refrescar la escena cada vez. Para hacer eso, podemos agregar un atributo al script y exponerlo en el editor. Oh sí, lo siento, sí, no se guarda el script así que a medida que ingresamos al script. Esto se pondrá amarillo y si haces un archivo guardar o comando S o control S. Debería ponerse en blanco y eso significa que se guardó y puedes ejecutarlo con el lanzamiento de la pestaña.

Estaba mirándolo. Ve a jugador. Punto atributos. Pero agrega. Un nombre positivo para el atributo. Entonces, cuando este nombre también será. El nombre de la propiedad bajo el objeto de disco también. Uh, así que hacemos velocidad. Y luego hacemos llave K para pasar el objeto que es básicamente una configuración. Decimos que esto es de tipo número. Entonces, ¿qué hay aquí? Exponemos una propiedad llamada velocidad, no es un para que de esa manera podamos poner números en él y luego podemos usar. Obtener podemos acceder a él mediante este objeto. También tenemos un menos. ¿Cuál es la velocidad? OK, eso está guardado y volvemos al editor. Hay un botón de pausa en el tipo de script y lo que hace es pasar el código. Buscar cualquier atributo. Buscar cualquier atributo. Pero has agregado un supongamos que en el otro, así que por seguro. Y luego tenemos el atributo de velocidad aquí, así que lo establecemos de nuevo en diez. Refrescamos esto de nuevo. Y. Nos movemos y lo que podemos hacer ahora es ajustar esto. En vivo en el ETSA. Y obtengo directo y vemos la actualización directamente aquí en la pestaña de lanzamiento. Así que lo divido en 5 en algún lugar entre 2. Y esta es una buena velocidad, efectivamente. Esta es una buena velocidad, no demasiado fácil llegar al otro lado, así que nos da un poco de desafío, pero tampoco demasiado lento que sea una tarea. OK. Y ahora que he hecho esto. Dos cosas que haré ahora es que sería genial si el personaje estuviera mirando en la dirección en la que se mueve. Y también, no queremos que se aleje del suelo. Efectivamente, básicamente queremos detener al jugador allí. Y allí. Así que vamos a hacer eso. Hagamos eso primero. Volvemos al código. Lo que vamos a hacer es después de mover al jugador podemos obtener su posición y luego verificar los límites de su posición dentro del mundo. Y si se ha ido demasiado lejos, entonces volvemos, lo devolvemos, decimos que hasta aquí puedes ir. Um? Y con eso, si volvemos a la API de NT. ¿Qué hacemos con la parte superior? ¿Tenemos obtener obtener obtener obtener? También tenemos un obtener posición, así que esto obtendrá la posición de la NT y luego a partir de eso podemos seleccionar comparar. Podemos compararlo con los límites que podemos establecer. Y luego estableces la posición, se establece la posición. Los productos en la vista local establecen la posición para ponerlo de nuevo en el lugar correcto. Si se ha ido demasiado lejos. Hagamos eso ahora, si obtengo la posición, así que hacemos un. Const posición igual a esto no ver. Bot obtener posición. También voy a hacer aquí es volver a lo que dije antes, donde JavaScript es copia. Cada objeto es una copia de referencia como una convergencia, en lugar de modificar el objeto que se nos pasa desde obtener posición. Podemos clonarlo para obtener una copia de los datos de posición que nos permite modificar. La variable de posición aquí sin afectar al resto del sistema. Muy bien. Y luego, si la posición x es menor que qué tan grande es el plano. ¿Qué tal esto para escala 8, así que unas 4 unidades en esta dirección? Mi completo. Y luego, si la posición. Pero X es más de 4. Una vez en el banco, así que la posición punto X es igual a hermanas. Escuela pertenece y luego lo que vamos a hacer es establecer la posición de nuevo, así que esto. Y ver. Así que la posición. OK, eso está guardado. Así que solo para recapitular. Obtenemos la posición o podemos copiar la posición de la entidad. Uh. Menos si se ha ido demasiado lejos a la izquierda, y si se ha ido demasiado lejos a la derecha, entonces lo establecemos en cuatro y luego. Establecemos la posición de nuevo en el NCS para asegurarnos de que la posición de las entidades esté dentro de los límites. Así que ejecutemos eso ahora.

Xena y mejores dragones izquierdos? No puedo ir más allá de los bordes. Bien, el siguiente paso es hacer que rote en diferentes direcciones en las que se está moviendo para que se vea un poco mejor. Voy a hacer algo similar con volver a API separación de tamaño separación, establecer ángulos de usuario, ángulos de aceite, siempre queremos establecer ángulos de aceite y también obtener ángulos de aceite. Así que podría hacer prácticamente lo mismo. Y la forma en que voy a hacer esto aquí es. Um? Crear una variable para verificar si me estoy moviendo. Entonces, si no me estoy moviendo, me enfrento a la cámara o me enfrento a la cámara o hacia la pantalla, y si me muevo, entonces quiero rotar en una dirección u otra. Así que lo que voy a hacer aquí es. Uh, restablecer el ángulo de. Eso es todo. Uh, establecer con ángulos que serían ángulos. Así que lo establezco en 40 de vuelta a 000. Entonces, si no hacemos ninguna entrada, siempre estará mirando hacia la cámara. Y luego. Si nos movemos hacia la izquierda, queremos que mire. No, no en esa dirección, así que queremos que mire 90 grados a la izquierda. Queremos rotarlo alrededor del eje Y, que es hacia arriba 90 grados. Y luego del otro lado para la derecha. Uh, así que puedo salir de esto en segundos. Quiero copiar esto. Puedes obtenerlo directamente de. Sí, lo quería mensaje. Voy a pegar el. Pegar enlaces al código directamente en el chat para que puedas copiar y pegar si es necesario, o copiar directamente desde él se mostrará para mostrar esto. Así que ahora, si nos movemos hacia la derecha. Dejé de mover al jugador ahora así que puedo copiar y pegar en documentation. OK, um, ¿eso es? Hay un tema por hacer. Lo hice allí. Y lo pongo, sí, OK genial. Así se cubre esta diapositiva agregaremos el jugador. Hemos hecho la entrada. Y nuevamente, hay enlaces a otras partes de la documentation si quieres profundizar en esto un poco más tarde.

OK, el siguiente paso es animar al jugador en este momento. Literalmente no está. No está animado, así que está quieto. Moviendo por la escena. Lo que podemos hacer es agregar alguna animación cuando está inactivo. Um, y cuando se está moviendo también, así que si lo estaba, solo voy a hacer como un pequeño, como. Rebote cuando está corriendo o caminando, va a haber un poco más de movimiento de brazo. Voy a hacer esto en el archivo. El gráfico de estado de animación. Entonces. El gráfico de estado de animación es. El TRD está bien describiéndolo. El gráfico de estado de animación es una. Um? Es efectivamente una máquina de estado finito que tiene múltiples estados que representan diferentes estados de animación y luego transiciones entre ellos que tienen condiciones para moverse entre ellos y esto permite a los usuarios crear animaciones que se impulsan puramente a través de data. Entonces, lo que vamos a hacer aquí. Y si volvemos a abrir si vamos al panel de data activos modelos. Personaje normal. Si lo abrimos, hacemos clic derecho en nuevo activo y queremos el. Y un gráfico de estado que está en la parte inferior por alguna razón. Y esto creará un nuevo activo para el gráfico de estado y lo llamaremos. Animación del plano. Mi gráfico de animación. Y vamos a abrirlo haciendo doble clic en él. OK, esto es lo que trata el gráfico. Está aquí, por lo que te dará un estado inicial para comenzar con un estado predeterminado. Así que desde el inicio de la animación irá directamente a este estado que hemos establecido. Y puedes ver qué parte tienes el nombre del estado, la velocidad de la animación y si la animación se repite. Así que primero te mostraré cómo se pone todo junto. Así que antes de agregar las diferentes animations, si vuelvo al editor, tengo que hacer clic en la X aquí arriba. Salir de aquí. Y vamos a agregar porque queremos agregar una animación. Vamos a agregar un componente de animación para obtener una animación e ir a anim. No animación heredada. Esa es la versión antigua del sistema de animación que ya no se admite, pero aún funciona si quieres usarlo. Pero para esto podemos usar el componente anim, componente de animación. Y nos pide un activo de gráfico de estado. Así que haz clic en el icono de lápiz.

Activo. Y aquí puedes verlo. Se rellena automáticamente el inspector con el estado inicial en el gráfico de estados. Así que aquí puedes ver el estado inicial. Si vuelvo al gráfico de estados de nuevo. Lo llamo inactivo. Vuelves al componente de animación. Ahora ves que ha sido renombrado a Inactivo. Así que esta lista refleja el estado inicial en el gráfico de estados. Y he preparado algunas animaciones para el personaje aquí, que forman parte del paquete FBX que importé antes del taller. Y si hacemos clic en el lápiz, hacemos clic en inactivo y actualizamos la pestaña de lanzamiento, puedes ver aquí, o digo, puedes ver aquí, no sé si puedes ver esto a través de la grabación en video, pero hay una pequeña animación inactiva donde los brazos solo suben y bajan. Exactamente. Y básicamente eso es lo que estamos haciendo, agregando una animación predeterminada al personaje, que funciona bien. Pero lo que queremos hacer es solo estar inactivos si no nos estamos moviendo. Y queremos usar quizás una de las otras animaciones como correr o caminar cuando nos movemos a la izquierda y a la derecha. Y para hacer eso, volvemos al gráfico de estados. Hacemos clic derecho, agregamos un nuevo estado, y lo llamamos movimiento. Con este estado, y también queremos que se repita. Así que para esto, queremos poder tener el estado inactivo. Así que tenemos el gráfico de estados, podemos ir desde el estado inactivo hasta el estado de movimiento y luego del estado de movimiento de vuelta a inactivo porque es el tipo de transiciones que queremos en la animación del jugador. Así que hacemos clic derecho, vamos a agregar una transición, y luego hacemos clic en eso. Así que ahora tenemos un camino aquí, y queremos hacer lo mismo de vuelta. Así que agregamos una transición, volvemos. Ahora mismo, si hacemos clic en una de las transiciones, podemos ver una advertencia, que dice que no se ha establecido tiempo de salida ni condición. Esta transición se activará instantáneamente, lo que significa que lo que va a suceder si configuramos esto con el personaje del jugador es que va a rebotar entre estados porque no hay nada que lo detenga. No hay condiciones que limiten si esas transiciones se activan o no. Así que irá al estado inactivo, irá a la derecha, hay una transición que existe y vamos a ir a eso, y luego de vuelta. Entonces una de las formas en que podemos hacerlo, bueno, lo siento, una de las formas, la principal forma de limitar esto es a través de parámetros. Los parámetros son valores que podemos establecer dinámicamente a través de código, para controlar efectivamente los parámetros que establecemos reflejan el comportamiento del objeto en el código, y de esa manera el gráfico de estados finitos puede hacer transiciones a través de los diferentes estados en función de la información basada en los valores de los parámetros que se establecen desde el código. Sé que suena complicado porque realmente no lo he explicado lo suficientemente bien, pero mostrar es mejor que explicar en algunos casos. Lo que vamos a hacer aquí es, establecer un nuevo parámetro para el movimiento, hacerlo de tipo booleano, para que esté encendido o apagado, y lo que vamos a hacer aquí es, limitar esta transición en función de si ese parámetro de movimiento es verdadero o no. Así que selecciona la transición que va de inactivo a movimiento, establece movimiento, y luego queremos que se establezca en verdadero, así que si el movimiento es verdadero, hará la transición de inactivo a movimiento, y configuramos la otra transición, nueva condición, hacemos lo mismo de nuevo, pero desmarcamos esto, para que esto solo vuelva a inactivo si el movimiento es falso. Así que la idea es que desde el código, podemos decirle al gráfico de estados que podemos establecer este parámetro en función de si los personajes se están moviendo o no, y esta es la lógica en la máquina de estados finitos para que el gráfico de estados se mueva automáticamente de un estado a otro. Así que cerremos eso, volvamos al personaje del jugador, configuremos una animación para el estado de movimiento, usemos correr. Y luego dentro del código del jugador nuevamente, lo que vamos a hacer aquí es crear una variable para saber si almacenamos si agregamos una entrada o no, si nos estamos moviendo o no, así que movimiento, igual a falso. Y luego dentro de nuestros controles de entrada, necesitamos comenzar a movernos a verdadero. Así que entrada verdadera. Y luego lo que vamos a hacer es acceder al, ¿qué es eso? Vamos a acceder al componente de animación a través de la entidad, así que eso es entidad.anim. Y luego desde aquí, creo que tenemos una función de configuración booleana, le damos el nombre o el parámetro, movimiento. y lo establecemos en nuestra variable que configuramos, que almacenamos el booleano. Así que ahora ese parámetro, o movimiento dentro del gráfico, va a reflejar directamente qué lógica está pasando, qué lógica hemos establecido para el jugador, que básicamente es, si estamos sosteniendo una tecla, se está moviendo. Si no estamos sosteniendo ninguna tecla, no se está moviendo. Volvamos aquí, actualicemos. Y ahora puedes ver que va desde el estado inactivo, ahora nos estamos moviendo al estado de movimiento y viceversa. Y si quieres ver esto, déjame compartir rápidamente. Así que quieres ver la configuración. He enviado el enlace nuevamente a ambos chats, del proyecto en el que estoy trabajando actualmente. Así que puedes bifurcarlo, o mirarlo más de cerca mientras hablo.

Bien, probablemente también hayas notado esto, cambia rápidamente entre las animaciones al pasar instantáneamente de inactivo a correr, y de correr a inactivo nuevamente. Y eso se debe a que en nuestro gráfico de estados de imagen, tenemos en las transiciones un valor de duración que está básicamente vacío o no tiene nada en este caso. Y ese parámetro de duración, que indica cuánto dura la transición al pasar de un estado a otro. Y cuando está en ese período de transición, mezcla las dos animaciones para crear, por lo que tiene un peso medio entre las dos. Y si le asignamos un valor, digamos que establecemos una duración de, digamos que no llega a dos segundos, significa, pero no llega a dos segundos, por lo que mezclará la animación de inactivo con la animación de movimiento, y eso crea menos cambio brusco. Así que hacemos eso para ambas transiciones. Y volvemos a la pestaña de lanzamiento, actualizamos, y nos movemos. Puedes ver que ya no cambia bruscamente. Básicamente interpola la posición en la que estaba antes a la posición en la que debe estar para el siguiente estado y mezcla entre ellas durante la duración de esa transición. Esto crea un cambio menos notable y es mucho más agradable de ver.

Bien. Genial. ¿Alguna pregunta hasta ahora antes de continuar? Mientras esperamos preguntas, vale la pena señalar que el gráfico de estados de animación es en realidad una característica importante de PlayCanvas y probablemente podría hacer otro taller solo sobre eso. Así que hay algunos tutoriales y documentación que probablemente valga la pena leer si te adentras mucho en el tema de la animación. Continuemos. Y lo que vamos a hacer ahora es, perdón, disculpen, agregar la bola que cae con física. Esta es la bola que cae desde arriba y la idea es que rebote en ella. Aquí vamos a usar el motor de física integrado con PlayCanvas llamado Ammo. Y Ammo es una versión compilada de JavaScript o un motor de física de código abierto llamado Bullet. Así que es bastante maduro, un poco antiguo ahora, pero es increíblemente maduro y se destaca por su estabilidad. Creo que Unity también lo usó en algún momento. Así que vamos a hacer eso. Vamos a agregar el modelo de la bola a la escena, darle un cuerpo rígido y propiedades físicas para que caiga y luego agregar colisión al resto de la escena para que pueda chocar tanto con el jugador como con el suelo. Voy a hablar un poco sobre los diferentes tipos de objetos físicos que existen.

Bien, vamos. Estoy de vuelta aquí, salgo del gráfico de animación. Así que si vuelvo a nuestro panel de activos, bajo modelos, tengo una bola azul. Ese no es el mejor material. Tengo una bola azul aquí. Y lo que podemos hacer es lo mismo que con el jugador. Vamos a agregarlo a la escena. Así que clic derecho, plantilla, agregar instancia, seleccionar la plantilla roja número 14. Y tengo una bola. Solo la muevo un poco por encima del jugador por el momento. Y lo que vamos a hacer aquí es darle la propiedad física para que pueda caer y chocar con todo. Y como mencioné antes, esto para lo que hice cualquier decir nuevo comportamiento a vacío se hará para tus componentes. Así que agregamos el componente, física, le vamos a dar un cuerpo rígido. El cuerpo rígido representa la física de los objetos, cuán pesados son, cuánto rebote tienen, cuánta fricción aplican. Y cuán pesado es, cuánta fricción tiene al moverse sobre otros objetos y la restitución es básicamente cuánto rebota. Así que cuanto mayor sea la restitución, más rebota. Lo otro que queremos hacer es importar el módulo Ammo. El módulo Ammo es un código estándar que ejecuta y gestiona la simulación física en sí. Así que hacemos clic en eso, y puedes ver que hay una nueva carpeta en ese panel llamada ammo.js. Y eso debería desaparecer, es un error. Lo que también queremos hacer es agregar un componente de colisión. El componente de colisión representa la forma del objeto físico. Y desde aquí tenemos todas estas formas primitivas, cajas, esferas, cápsulas, cilindros y conos. Y hay una malla, si quieres usar un modelo como malla de colisión, así que básicamente, tal vez tienes un entorno que quieres configurar, generalmente evito eso cuando es posible porque hace que la simulación sea bastante lenta. Y compuesto es cuando juntas múltiples formas primitivas como un solo cuerpo rígido. Nuevamente, vamos a cubrir eso hoy, pero solo vamos a usar primitivas normales. Así que para la bola, queremos la esfera. Puedo ver aquí, es como el tamaño efectivo de la forma. Espacio en el radio aquí. Así que lo que podemos hacer es editar el radio de la bola cambiando directamente el número. Pero lo que prefiero hacer es, si es un campo de número en el editor, tendremos un control deslizante de valor. Así que puedes ver a la derecha. Y si haces clic izquierdo y mantienes presionado, puedes mover el mouse hacia la izquierda y hacia la derecha para cambiar el tamaño del radio o cambiar el valor en el campo. Así que quiero hacer esto aproximadamente uno, creo. Ahí lo tienes. Ahora prácticamente abarca el tamaño de la bola. Y queremos cambiar el tipo. En este momento es estático, lo que básicamente significa que, una vez creado en el mundo, nunca puede moverse. Y harás eso para cosas como paisajes, entornos, cualquier cosa que nunca se mueva durante la vida útil de la entidad. Tenemos dinámico, que es, será bastante similar al mundo físico, lo que significa que la gravedad se aplicará. La única forma de moverlo es a través de fuerzas e impulsos. Y tenemos cinemático, creo que así se pronuncia. Y eso es cuando puedes colocar el objeto físico donde quieras en el mundo, ya que puedes moverlo y reaccionará a otros objetos dinámicos. Entonces, si mueves un objeto cinemático a un objeto dinámico, el objeto dinámico se moverá, pero el cinemático no se ve afectado por colisiones, fuerzas, impulsos, etc. Siempre se coloca donde colocas la posición de la entidad. Para la bola, vamos a usar dinámico para que simplemente caiga naturalmente.

Bueno, ahora vamos, si lanzamos esto nuevamente, puedes ver que cae y atraviesa todo porque nada más en el mundo actualmente tiene, ¿cómo se llama eso? Actualmente no tiene propiedades físicas. Perdón, solo mirando el tiempo. Entonces lo que vamos a hacer ahora es para el suelo, podemos agregar un cuerpo rígido estático porque el suelo nunca se va a mover y usar una caja para definir la forma. Así que seleccionamos el suelo, como hicimos aquí, vamos a física, cuerpo rígido, colisión, estático spline, eso está bien, y en este momento es solo standards como una caja de uno por uno. Así que vamos a cambiar esto para que sea la mitad de un conjunto, así que cambia eso a cuatro, y eso es cuatro de nuevo. Y podemos ver que está abarcando el suelo pero la parte superior de la caja es más alta que la parte superior del suelo contra el que queremos rebotar. Para esto podemos usar un desplazamiento de posición. Entonces, nuevamente, si vamos sobre el eje Y, lo que esto nos permitirá hacer es mover la forma como un desplazamiento de donde se posiciona la entidad, lo cual es bastante útil para momentos como este. Así que puedes ver que si arrastro esto hacia arriba y hacia abajo, estoy moviendo la forma en función del valor de desplazamiento. Así que lo que haremos es simplemente ponerlo en 0.5, refrescar esto, puedo ver ahora rebota y choca con el suelo. Y ahora vamos a hacer lo mismo para el personaje. Entonces el personaje, porque lo estamos moviendo directamente para la entidad, está bien tenerlo como cinemático. Así que vamos a tener esto como un tipo cinemático porque de esa manera se moverá donde sea que establezcamos la posición de la entidad, lo cual hemos hecho a través del script del jugador. Entonces, nuevamente, vamos a hacer lo mismo. Física, cuerpo rígido. Colisión física. Vamos a cápsula. Y ahí está. Cambiamos a cinemático, y nuevamente, puedes ver aquí que la posición predeterminada de la forma es donde está el suelo, como donde está la posición del personaje, que está en la parte inferior, podemos hacer lo mismo que con el suelo, que es cambiar el desplazamiento. Así que ahora si lanzamos, ahí vamos. Bien, no sé qué pasó ahí. Ahora podemos ver. Podemos mover la bola moviendo el planeta hacia ella, mover a la izquierda, derecha, etc. Así que eso es más o menos un resumen básico de la física. Entonces vamos a restablecer nuevamente, alejarnos, rebotar. También quiero que la bola rebote un poco más, porque ahora cuando golpeo el suelo, es como si casi lo golpeara muerto, y eso es un poco aburrido. ¿Puedo saltar un poco? Eso es un poco aburrido. Entonces lo que vamos a hacer es en la bola, vamos a cambiar la restitución al máximo, y eso debería darle un poco más de rebote. Ahí vamos. Ahora se siente un poco más como una pelota de playa, donde rebota. Se siente un poco más flotante, se siente menos como una bola de cañón pesada y densa que simplemente cae al suelo. Bien. Buh buh. Eso cubrirá todo aquí. Sí. ¿Alguna pregunta hasta ahora todavía?

Bien, ahora que tenemos una bola antes del suelo, queremos generar continuamente bolas con el tiempo. Entonces nuevamente, conviértelo en un juego infinito donde quieres mantener las bolas alejadas del suelo durante el mayor tiempo posible. Y podemos hacer eso a través de una plantilla. Entonces lo que vamos a hacer aquí es, convertir la bola en una plantilla, convertir la bola en su propia plantilla. Y luego, oh, disculpen. Ahora está bien la cámara, ¿verdad? Crear un script de juego que creará clones o instancias de esa plantilla con el tiempo dentro del mundo y básicamente convertirlo en un poco más de un juego. Suponiendo que las cosas se conviertan en esta plantilla, crear un script de juego y crear bolas clonadas o crear instancias de bolas con el tiempo. Entonces volvemos a Yedza. Lo que voy a hacer. Vamos a hacer aquí es, aunque ya es una plantilla, vamos a crear una nueva plantilla para el juego. No queremos jugar con la plantilla del modelo solo por si la usamos más adelante en la aplicación. Así que volvemos a seleccionar activos, vamos a plantillas. Hacemos clic derecho en esto. Podemos crear una plantilla y agregarla al registro de activos yendo a nueva plantilla. Y podríamos cambiar el nombre de eso a, llamémoslo bola de juego. También cambié el nombre de eso, no esto. Pero déjame cambiar el activo y luego cambiar el nombre del activo. Ahí tienes, plantilla de bola de juego. Y vamos a agregar un nuevo script en la carpeta de scripts llamado administrador de juego. Bien. Y de antemano lo que vamos a hacer es agregar el administrador de juego al objeto raíz para que pueda ejecutar código y hacer clic en el botón de lápiz para editar el script. Bien. No recuerdo lo que escribí aquí. Lo que vamos a hacer aquí es hacer referencia al activo de la plantilla desde el script y luego desde allí, extraer las funciones para instanciar la plantilla. Entonces para crear la instancia de la plantilla en tiempo de ejecución dentro del mundo. Y también, para tener una verificación rápida de cómo hacer esto. Entonces para hacer esto, vamos a exponer un atributo a data. Para que podamos asignar el activo al script o hacer referencia al activo desde el script. Agregaremos y lo llamaremos activo de plantilla de bola. Y luego el tipo es activo. Y luego el tipo de activo va a ser plantilla. La segunda parte es opcional en realidad. La segunda parte es opcional en realidad, pero esto nos permite asegurarnos de que en el Editor, no puedas asignar ningún activo al script, solo puedes asignar el activo de este tipo. Y eso generalmente es útil si estás trabajando con equipos y quieres asegurarte de que sea más difícil hacer algo mal o hacer algo por accidente. Guarda eso, vuelve al editor, pasa el cursor sobre él y nuevamente podemos usar el ícono de lápiz.

Encuentra la plantilla, la ves, y ahora podemos hacer referencia a este activo directamente en el código. No puedo recordar cómo escribí esto, ¿cómo lo escribí, oh, hombre? De acuerdo, para instanciar la plantilla en la escena, lo que tenemos, oh, lo que tenemos que hacer es acceder a los data en el activo, porque como dije antes, un activo es un contenedor alrededor de los datos reales, y podemos hacer esto a través de this.asset. Entonces esto representa el objeto activo y dentro de él, en realidad, sí, probablemente sea mejor si voy a la documentación para esto. Así que aquí está el objeto activo y lo que tenemos que hacer es ir a la documentación. Así que aquí está el objeto activo, y dentro de él, hay una propiedad llamada resource, y esto es una referencia a los data en sí, así que en este caso, es una referencia a los datos de la plantilla, y los datos de la plantilla tienen una función llamada instantiate, que creará, o creará una nueva instancia de esta plantilla como una entidad, y devuelve esa entidad, así que de vuelta a ti en el código. Así que vamos a hacer eso, resource.instantiate, y no puedo escribir instantiate, nunca puedo escribir instantiate, así que voy a copiar y pegar eso. Entonces, al llamar a eso, he, ups, tengo un const y una C. Así que al llamar a eso, ahora he creado una instancia de esta plantilla y la tengo como una variable aquí, y lo que también necesito hacer es agregar esa plantilla a la escena porque en este momento es solo una entidad. No está adjunta al gráfico de escena en absoluto, y vamos a hacer esto mediante entity.reparent y decir haz que esta entidad sea el padre. Entonces lo que esta línea está haciendo es tomar nuestro clon o instancia que acabamos de crear y hacerlo hijo de la entidad que se pasa a la función de reparent que es ella misma. Entonces cualquier nueva bola que creemos en tiempo de ejecución estará bajo esta entidad a la que he adjuntado el script GameManager, y si guardo esto y lo ejecuto, podemos ver que hay un montón de bolas efectivamente. Comenzaremos, esa es la pestaña equivocada. Si ejecutamos esto, verás muchas bolas porque estamos creando efectivamente un nuevo objeto de física en cada fotograma, lo cual no es lo que queremos. Lo que voy a hacer es crear esto con el tiempo. Queremos que esto sea genial, tal vez uno nuevo cada X segundos. Y podemos hacer esto llevando un registro del tiempo que ha pasado, y luego un temporizador, y luego una vez que llegue a cero luego crear el NT en ese punto de la aplicación. Entonces lo que vamos a hacer aquí es si this.timeToDex spawn es menor que cero, de acuerdo, entonces haz esto. Y lo que vamos a hacer también es establecer el valor para ser, ¿cuántos segundos? Mm, digamos cada dos segundos. Y luego también en cada fotograma, vamos a eliminar el tiempo desde el último fotograma que ha pasado. Entonces básicamente, este temporizador se decrementa en cada fotograma por el tiempo que ha pasado desde el último fotograma. Y luego cuando llega a cero, va a crear una nueva bola y luego comenzar de nuevo efectivamente. Si quisieras, técnicamente podrías usar setInterval o setTimeout, pero la razón por la que prefiero usar DT especialmente es porque en PlayCanvas, hay una propiedad bajo la aplicación que te permite escalar el tiempo. Y esto significa que puedes ejecutarlo a doble velocidad, velocidad única o pausarlo, uso la pausa muy libremente aquí, pausarlo estableciendo la escala de tiempo en cero, lo que significa que cada vez, cada fotograma DT es efectivamente cero. Y esto nos permite hacer, nuevamente, cosas como pausar, que setInterval o setTimeout no nos permitirían hacer efectivamente. Así que vamos a ejecutar esto ahora. Entonces tenemos la bola que ya estaba allí y luego cada dos segundos, ahora tenemos una nueva bola que aparece. Entonces, ves aquí que siempre aparece en el mismo lugar, así que lo siguiente que queremos hacer es moverlo a una posición aleatoria y también moverlo por encima, moverlo por encima de la pantalla porque aparecer en medio de la nada allá arriba no es genial. Así que vamos a cerrar eso, volver al código. Lo que vamos a hacer es, porque es un objeto de Física y es dinámico, no podemos hacer lo que hacemos con el objeto de juego, que es NC dot set position y poner una posición allí. Eso no funcionará, desafortunadamente, porque como es un objeto de Física dinámico, la posición de NC está determinada por donde está la posición del cuerpo rígido en el mundo de la Física. Así que eso significa que aunque establezcamos la posición aquí, porque en el mundo de la Física se ha colocado en una posición particular, eso se anulará prácticamente en el siguiente fotograma. Lo que queremos hacer es usar las funciones de Física bajo el componente cuerpo rígido para mover el objeto. Así que volvamos a la documentación de nuevo, donde dicen componente Body. Hay una función llamada Teleport, ahí está. Así que bajo el componente cuerpo rígido, hay una función llamada Teleport, que nos permite establecer la posición X, Y, Z o la rotación y estos ángulos de Euler para ello, y es lo que vamos a usar. Entonces queremos ir desde la entidad que clonamos, obtener el cuerpo rígido, cuerpoRigido.teleport. ¿Y dónde queremos establecerlo? Por el momento, solo vamos a ponerlo en el cielo. ¿Ocho tal vez? Entonces esto lo establecerá en 080. ¿Cómo se ve eso? Sí, eso lo coloca fuera de cuadro, lo cual es bueno. Ahora queremos aleatorizarlo en la posición X. Y podemos hacer esto a través de una función aleatoria que proporciona PlayCanvas. Así que vamos a pc.math.random y menos tres a tres estará bien. Así que cada vez que se llame, será un número aleatorio entre menos tres y tres. Actualiza eso. Y ahora tenemos el comienzo de nuestro juego. De acuerdo, estoy siendo consciente del tiempo. He hecho bastante. De acuerdo, genial. Así que ese es nuestro paso. Oh sí, y finalmente, también queremos eliminar la que ya existe en el mundo. Así que la eliminamos, clic derecho eliminar. Lanzamos eso. Así que tenemos una que está allá afuera y porque ahora tenemos la sombra, brillarán directamente hacia abajo. Puedes ver dónde aparecen antes de aparecer en la pantalla. Así que sabes dónde mover al personaje. Genial. Cerrémoslo y sigamos adelante. Es posible que deba acelerar un poco porque tengo 45 minutos y tengo algunas cosas más por hacer. Ah, la interfaz de usuario. Ah, de acuerdo. Entonces, la siguiente etapa aquí es que vamos a comenzar a agregar la interfaz de usuario al juego. Así que retrocedamos un poco.

La interfaz de usuario de la que estoy hablando, ups, demasiado lejos. La interfaz de usuario de la que estoy hablando aquí es el icono del corazón y efectivamente el contador de salud que he colocado en la parte superior izquierda. Ups, no quiero. La interfaz de usuario es... El sistema de interfaz de usuario es bastante grande, nuevamente, otra característica importante de PlayCanvas y podría dedicarle un taller completo a esto. Entonces, voy a repasar efectivamente lo más básico, que es cómo posicionar elementos de la interfaz de usuario en la pantalla. Cuando digo elementos de la interfaz de usuario, me refiero a cosas como imágenes y texto, ¿cómo puedes posicionarlos en una pantalla 2D? Pero, nuevamente, tenemos documentation en la que profundizaremos más. Pero solo quiero cubrir la posición, cómo posicionarla, cómo las diferentes propiedades que controlan dónde se renderiza el elemento. Porque eso tiende a confundir a la gente bastante.` + `

Entonces, pasemos a la siguiente diapositiva. Entonces, las interfaces de usuario en PlayCanvas están compuestas por dos objetos, pantallas de PlayCanvas y elementos de PlayCanvas. Los elementos de PlayCanvas son entidades en la escena que representan imágenes y texto de manera efectiva y la pantalla representa el lienzo en el que estás renderizando PlayCanvas. Y los elementos se posicionan en función de como tres partes. La posición del anclaje, la posición del anclaje en relación al elemento o pantalla padre. El desplazamiento de posición local desde el anclaje hasta el pivote y la posición del pivote en relación a sí mismo. Y eso probablemente no tiene sentido en absoluto porque es muy difícil hacer esto solo con texto. Así que voy a abrir una escena de ejemplo para mostrarte esto mejor. Muy bien, esta es una de las escenas de ejemplo que está en la documentación de Play Games. Y si nos alejamos, puedes ver aquí, aquí está la representación de la interfaz de usuario. Entonces, si vamos, otra cosa, en el editor que tengo para mostrarte si vas a la esquina superior derecha, tenemos diferentes cámaras para seleccionar, la normal, la predeterminada es la perspectiva, que es la que estamos usando aquí. Pero para la interfaz de usuario, tiendo a usar frontal. Y luego, si me alejo, eso facilita la visualización y el movimiento de los elementos.` + `

Muy bien, lo que tenemos aquí es un EDZ con una pantalla apuntando a él. Y eso está en espacio de pantalla, lo que significa que siempre va a cubrir, siempre va a cubrir la pantalla. Si desactivas eso, entonces es una pantalla en espacio 3D, en espacio mundial efectivamente, lo que significa que no puedes caminar alrededor de ella, está afectada por la perspectiva de la cámara, etc. Pero el espacio de pantalla siempre se renderizará directamente en la pantalla. Y luego tiene una mezcla de escala, de la que hablaremos más adelante, y una resolución de referencia de, digamos las unidades que representa la pantalla. Por lo general, no juego con nada excepto el modo de mezcla y la prioridad para esto. ¿Qué puedo decir? Y como hijos, cada una de estas entidades que he seleccionado aquí son entidades con componentes de elemento. Y como dije antes, representan imágenes. Entonces, esta en particular es un tipo de imagen, que puedes ver ahí. Y tiene propiedades, como anclaje, posición del pivote, ancho, alto, color, margen, etc. Y voy a repasar esto tanto como pueda en este taller. Y el texto es más o menos lo mismo, las mismas propiedades, pero con elementos adicionales, que es lo que usan las fuentes y el texto que se va a renderizar. Entonces, si selecciono, en realidad, déjame hacer un clon de esto para poder editarlo realmente. Clon de la interfaz de usuario. No puedo caer más rápido, ahí vamos. Aquí vamos. Fuente. Ahí vamos, genial. Muy bien. He establecido la imagen del logotipo. Puedes ver que está posicionada en la parte superior de la pantalla pero.

Muy bien, estoy tratando de averiguar cómo continuar. Muy bien, he leído eso. Observa por la imagen del logotipo que tenemos el anclaje establecido en... Tenemos un ajuste preestablecido de anclaje superior y pivote. Esto significa que el anclaje está configurado para estar en la parte superior de este elemento padre. Entonces, el elemento padre es la pantalla. Si muevo esto hacia abajo, puedes ver que el anclaje se representa mediante estos cuatro triángulos. Eso se debe a que está posicionado directamente en relación a su elemento padre. Entonces, el elemento padre es la pantalla, que es este gran rectángulo aquí. Y porque el anclaje está configurado para estar en la parte superior, así que uno y uno, eso significa que siempre estará anclado al borde superior de la pantalla, sin importar qué. Entonces, si cambio el tamaño de la ventana, el elemento siempre estará posicionado en relación al borde superior de la pantalla. Y si vuelvo a la parte inferior aquí, estos están anclados en la parte inferior. Entonces, sin importar qué, estos son desplazamientos de referencia a la parte inferior de la pantalla. Entonces, si deshago esto y lo ejecuto y cambio el tamaño de mi ventana. Así que observa la distancia entre la parte superior de la pantalla y la imagen, eso nunca cambia. No importa qué tan grande sea la ventana, eso nunca cambia. Y lo mismo ocurre con estos elementos en la parte inferior, están anclados en la parte inferior. Entonces, incluso si hago esto más pequeño, el espacio entre el borde inferior y la posición de esto, nunca cambia. Oh, eso es todo. Y esto lo hace muy útil para hacer una interfaz de usuario receptiva. Uso el término receptiva en términos de, receptiva al cambio del tamaño de la pantalla, no tanto en términos de CSS. Y esto nos permite hacer cosas como anclar cosas en esquinas particulares, así que en nuestro caso, tenemos la barra de salud en la parte superior izquierda, así que no importa dónde vayamos, cómo redimensionemos la pantalla o qué tan grande sea la pantalla, siempre estará desplazada desde la esquina superior izquierda de la pantalla. Lo siento, perdí el hilo de mis pensamientos. Siempre estará en referencia a la esquina superior de la pantalla, y podemos configurarlo para que esté alineado con cualquier otra cosa que lo configuremos, y esto también lo hace útil para hacer cosas como diálogos. Entonces, si queremos hacer un diálogo con un botón de cierre en la esquina, haremos un ejemplo rápido aquí. Establecer el ancho en 500. Sí, ahí vamos.

Y establece un hijo de eso, otro estilo, y ve al elemento. Cámbialo a azul para que podamos verlo. Acerca un poco. Lo que puedo hacer aquí es anclar este botón, este cuadrado azul, para que siempre esté en la esquina superior de este elemento. Entonces, no importa qué tan grande o pequeño hagamos esta imagen, este elemento de imagen, siempre estará fijo en esta esquina. Entonces, si cambio el ajuste preestablecido a la esquina superior derecha, anclaje y pivote, puedes ver que está fijo en la esquina superior del padre. Y ahora, si cambio el tamaño de esto, en realidad el tamaño de esto, digamos a 300, siempre estará fijo en eso, no importa lo que haga con él. Así que 600 y esto hace que sea muy fácil armar rápidamente una especie de UI que siempre se ajusta a una forma particular o siempre se mantiene regular sin importar qué tan grande sea el elemento. Y no, no lo he hecho muy bien pero probablemente sería más fácil si hago un ejemplo adecuado en los proyectos de la masterclass. Oh, la otra cosa de la que quiero hablar es el modo de mezcla. Entonces, si volvemos a este tutorial, por ejemplo, oh, no, sigue adelante. Tienes clon, lo mismo. Modo de mezcla siempre nunca uso no siempre uso modo de mezcla. No necesariamente funciona porque nuevamente me gusta lo más importante es que funcione. Y luego, si me gusta esto, así que en el modo de mezcla obviamente siempre nunca uso no siempre uso modo de mezcla. Y hay un valor entre cero y uno que se utiliza y esto controla cómo, cómo se escalan los elementos de la pantalla o cómo se escala la pantalla en función de la relación de aspecto de la pantalla. Así que volveré a las diapositivas aquí, en el modo de mezcla cero. Puedes ver que los elementos no cambian de tamaño cuando cambia la altura, pero sí se escalan hacia arriba y hacia abajo en función del ancho y el mezcla uno es lo opuesto. Cambian de tamaño en función de la altura, pero no del ancho. Y esto es útil si quieres hacer UI basadas en retrato o juegos de estilo paisaje. El ejemplo, si estás haciendo un juego móvil, que siempre está en modo retrato en una aplicación de mensajería, generalmente uso el modo de mezcla cero porque los teléfonos varían molestando rangos de diferentes alturas en modo retrato siempre uso el modo de mezcla cero para que los elementos no cambien de tamaño sin importar qué tan alta sea la pantalla. Especialmente si tienes un teléfono muy alto como el que tengo aquí. Te permite crear una UI que está anclada y no se escala en función de retratos. Así puedes asegurarte de que la UI funcione para 16 por 9, 31 por 9 y todo lo que haya en medio. Y déjame hacer eso. Y el modo de mezcla uno es lo opuesto. Hago esto para juegos de estilo paisaje, especialmente para juegos de escritorio y de navegador. Y luego el valor intermedio toma diferentes ponderaciones en función de ello. Entonces, 0.5 es una combinación de ambos donde los elementos de la UI se escalan sin importar, se basan en escalar si cambias la altura o el ancho, pero están equilibrados entre los dos. Y la otra cosa es que si necesitas una pantalla de UI o un diseño de UI que funcione tanto en retrato como en paisaje, la práctica recomendada que tengo es que hagas dos diseños separados. Así que cambias entre ellos. Entonces, en este ejemplo aquí, tengo un diseño de paisaje, donde puedes ver el logotipo y el nombre en la parte inferior aquí. Y luego, cuando llega a un cierto tamaño para retrato, cambio a un diseño de estilo retrato donde el logotipo y el nombre se colocan en la parte superior. Entonces sí, repasaré esto, repasaré la masterclass, nuevamente me estoy quedando sin tiempo. Tendré que hacer esto sobre la marcha. Así que hablé de esto antes, donde los elementos pueden anclarse al padre, ya sea que los padres sean elementos o una pantalla. Entonces es útil para diálogos, si quieres anclar una determinada UI a diferentes esquinas. Volvamos a esto. Lo siento. Ups. Lo siento, ten paciencia conmigo. De acuerdo, entonces lo que vamos a hacer aquí en nuestro proyecto, así que volveré al proyecto nuevamente. Voy a agregar un ícono de corazón en la esquina superior izquierda y un texto a la izquierda de eso también. Entonces, en la jerarquía, haz clic derecho, interfaz de usuario, y vamos a agregar una pantalla. Y podemos mover esa pantalla fuera del camino para que no esté encima de nuestra área de juego para facilitar la edición. Cambia a frontal, y queremos hacer clic derecho y agregar un nuevo elemento de UI a eso. Elemento de imagen. Y desde aquí, podemos agregar una textura o un sprite. Así que vamos a cubrir texto hoy, lo que básicamente significa que cualquier imagen que subamos se puede usar aquí. Ve a UI, y voy a arrastrar y soltar un ícono de corazón sobre eso. Entonces, y a partir de este punto, ahora Elemento renderizará nuestro PNG que subimos antes. Cambiaremos eso a un ícono. Y cambiaremos el ajuste preestablecido de, cambiaremos el ajuste preestablecido de anclaje y pivote del centro a... Oh, lo olvidé. Anclaje y pivote de la esquina superior izquierda. Entonces ahora, está anclado a la esquina superior izquierda, por lo que no importa cómo redimensionemos la pantalla, siempre estará fijo en la esquina superior izquierda. También queremos cambiar el color. También queremos tintarlo. Así que voy a tomar ese color gris. ¿Dónde he ido? Estoy perdido en mis propias pestañas. Hazlo N. Así que un bonito color gris, y lo lanzamos de nuevo. Apareció en la esquina superior izquierda, que es lo que queremos. Y voy a hacer lo mismo de nuevo, donde vamos a agregar el texto. Entonces haz clic derecho nuevamente en la pantalla, ve a la Interfaz de Usuario, Elemento de Texto, y por defecto, ya he subido una fuente a nuestro Recurso de Fuente. Entonces, por defecto, selecciona la primera que encuentre. Y lo que he... Y así es como funcionan las fuentes en PlayCanvas es que cuando subes un recurso de fuente, como un TTF o creo que también admite OTF, crea un recurso de fuente separado, que es efectivamente un atlas de texturas de todos los caracteres. Y lo que puedes hacer es... Por defecto, nos da el estándar, ¿cómo se llama? El rango ASCII standards, que es de la A a la Z, todos los números, etc.

Pero si quieres admitir otros idiomas, también debes agregar los glifos para esos idiomas aquí. Por ejemplo, si quieres agregar japonés, debes agregar los kanji. Para ruso, agrega acrílico. Y para chino, debes agregar, nuevamente, todos los ciclos que necesitas renderizar en la pantalla. Pero ahora los ajustes predeterminados están bien porque vamos a usar números.

Hacemos lo mismo nuevamente, donde cambiamos el ajuste preestablecido para usar anclaje y pivote en la esquina superior izquierda. Y lo vamos a mover justo a la derecha de eso y cambiar el tamaño de la fuente a 72. Ahí lo tienes. Muévelo un poco hacia arriba. Y nuevamente, cambia el color para que sea ese color gris. Y por defecto, pongamos 100 allí. De acuerdo, volvamos a esto. Lo que hemos hecho, para recapitular, es que hemos agregado dos elementos de interfaz de usuario de PlayCanvas a una pantalla de PlayCanvas y los hemos anclado en la esquina superior izquierda para que, sin importar el tamaño de nuestra ventana, ya sea que vayamos a retrato o paisaje, siempre esté fijo en la esquina superior izquierda sin importar qué. ¿Qué más hay? Sí. Nuevamente, hay más documentación sobre cómo funcionan los anclajes y pivotes con más detalle en el manual del usuario, y profundizamos más en cómo el pivote está relacionado con la posición del elemento de renderizado, que es como el texto o el icono que no tengo mucho tiempo para explicar aquí.

De acuerdo. Vamos a actualizar el texto más adelante en el camino cuando ... Vamos a actualizar el texto cuando la pelota golpee el suelo un poco más adelante en la masterclass, pero primero quiero agregar los efectos de sonido, tal vez porque se relaciona con algunas de las características del motor. De acuerdo. ¿A dónde voy? Por ahora vamos a agregar efectos de sonido. Cuando la pelota colisiona tanto con el jugador como con el suelo, va a producir un sonido, efectivamente. Y desde aquí puedes usar cualquier archivo de audio compatible con el navegador. Pero la parte frustrante es que no todos los navegadores admiten todos los archivos de audio. Por ejemplo, creo que OGG solo es compatible con, creo, IOS Safari, lo cual es un poco frustrante porque IOS Safari, lo cual es un poco frustrante. Entonces, en general, la gente usa WAV, que es bastante grande en tamaño, o mp3. Aquí en Activos, ya he subido algunos efectos de sonido. Tengo Impact Plate e Impact Wood. Y podemos reproducirlos en el Panel de Activos. Por el momento, vamos a tener los mismos efectos de sonido para cada colisión que la pelota golpee. Y para hacer eso, vamos a necesitar agregar un script de pelota a la plantilla de la pelota, así que eso es, lo siento, vamos a necesitar modificar la plantilla de la pelota para tener una funcionalidad para saber cuándo detectar cuando ha golpeado algo. Y dos, necesitamos agregar un componente de sonido a la pelota. Entonces, lo que voy a hacer aquí es volver a las plantillas, agregar eso de nuevo a la jerarquía. Puedes hacer eso arrastrándolo de nuevo. Podrías arrastrar el activo de la plantilla a la jerarquía o usar lo que he estado usando antes, que es hacer clic derecho en la plantilla y seleccionar `instancia`. Y luego aquí vamos a agregar un componente de sonido. ¿Qué es ese componente de sonido uno, audio y sonido? Y ¿qué tiene este lado de características que no usaremos hoy? Entonces podemos hacer la posición del sonido donde reproducirá el sonido en función de la posición desde donde se emite el sonido, haré que sea donde NTS hasta donde está la cámara. Pero en este caso, estamos bien con solo un espacio de pantalla. Entonces vamos a desactivar eso. Y tenemos diferentes ranuras. Entonces, un componente de sonido puede tener múltiples ranuras, cada ranura representa un sonido diferente. Entonces hacemos eso. Por el momento queremos una ranura. Lo cambiamos a colisión. Y vamos a buscar el activo de audio. Y podemos usar plates, creo. Para esto. Y tenemos otras opciones aquí. Tenemos reproducción automática, lo que significa que tan pronto como se habilite el componente de sonido o su primera instancia en la escena, se reproducirá. No queremos eso. Lo que queremos es superposición y superposición significa que puedes reproducir el mismo sonido varias veces sin detener la reproducción de la instancia anterior. Porque si está marcado y se ha reproducido y reproduces un sonido en medio de esa reproducción de sonido, ¿qué sucederá? Ya tenemos el sonido anterior y se reproduce el nuevo. Pero en nuestro caso, no queremos que se superpongan porque podemos tener múltiples rebotes en un caso. Entonces vamos a marcar eso. Y ahora queremos agregar un script a la pelota que nos permita reproducir los efectos de sonido. Entonces, si vamos a scripts y nuevo activo, vamos a ball.js y en el NC, agregar componente, script, agregar pelota, y hacer clic en editar. De acuerdo, lo que queremos hacer aquí es escuchar los eventos que el cuerpo rígido nos dará para la colisión. Entonces volvemos a la API nuevamente, el cuerpo rígido, bajamos un poco hasta los eventos. Puedes ver el nombre de los eventos que emite el cuerpo rígido a los que podemos escuchar para las colisiones. Cuando comienza la colisión, cuando ocurre el primer impacto. Fin de la colisión cuando se van por primera vez y contacto y activador. Entonces, los activadores no los estamos cubriendo hoy. Solo podemos usar el inicio de la colisión. Y hacemos esto creando primero una función para la devolución de llamada. Entonces, en colisión. Y nos dará datos. Y luego, en la función de inicialización, vamos a decir, escucha este evento en el componente rígido de la entidad y llama a esta devolución de llamada. Entonces, si this.entity.rigidbody.on. Y luego el nombre del evento, que es inicio de colisión. Vamos a llamar a esta función en colisión. Y estaremos llamando a una devolución de llamada de este evento.

También necesitamos pasar el ámbito de los objetos llamados de devolución de llamada, nuevamente, porque estamos usando ES5. No... La API... Entonces, debido a que la API fue escrita durante el período de ES5, no admite naturalmente funciones nominales o sintaxis de flecha. Por lo tanto, es mejor pasar el objeto en el que quieres que se llame la función, que será el objeto 'this'. Eso significa que llamará a esta función en el ámbito de este objeto. Voy a reproducir el sonido. Entonces, si recuerdo correctamente, es Play, ¿creo? Componente de sonido... Reproducir. Entonces, tiene una función Reproducir, pasamos el nombre de la ranura y eso es todo. Fácil y sencillo. this.nc.sound... Eso es bueno para el sonido. Reproducir. ¿Y cómo se llamaba de nuevo? Creo que lo llamamos colisión... Solo estoy verificando el nombre. Sí, lo llamamos ranura colisión.

De acuerdo, ahora... Ahora hago todo esto como una plantilla, lo que necesitamos hacer es, ahora que hemos agregado estos cambios a la instancia de la plantilla, lo importante es que solo hemos hecho estos cambios en la instancia, no hemos hecho los cambios en el activo de la plantilla que creamos anteriormente. Y puedes ver estos cambios resaltados en azul. Entonces, cualquier cosa que esté en azul significa que has hecho un cambio, este cambio solo se aplica a esta instancia, no a la plantilla que creamos anteriormente. Pero como estamos creando instancias de forma dinámica en tiempo de ejecución, queremos que los cambios se reflejen en la plantilla. Entonces, lo que vamos a hacer es en la parte superior aquí, tenemos algunas opciones para la plantilla donde podemos ver los cambios y luego también podemos aplicar los cambios de nuevo al activo de la plantilla. Entonces, si hacemos clic en ver diferencias, vemos que hemos agregado un nuevo componente de script, un nuevo componente de sonido, y si hacemos clic en el punto azul, vamos a Aplicar a Gameboard. Significa que vamos a aplicar el cambio de nuevo a la plantilla. Así que cierra esto ahora, podemos ver en el script que ya no está en azul, lo que significa que esta es una propiedad del activo de la plantilla. Y podemos hacer lo mismo para el sonido. Ahora los cambios se aplican de nuevo a la plantilla. Entonces, ahora cuando vayamos a tiempo de ejecución y a Instancias de plantillas, tendrá los cambios que acabamos de crear. Así que borremos este objeto y ejecutemos esto de nuevo. Y lo que deberías escuchar, no sé si puedes escuchar esto a través de la grabación, es el efecto de sonido cada vez que colisionamos con algo. Genial. De acuerdo, voy a acelerar un poco aquí, porque solo nos quedan 20 minutos y quiero dejar espacio para preguntas al final.

Ahora lo que queremos hacer es tener un efecto de sonido diferente para el jugador, para poder diferenciar entre, oh, hemos golpeado el suelo, versus hemos golpeado al jugador. Y podemos hacer esto a través del sistema de etiquetas. Entonces, cada entidad, cada activo, tiene una propiedad de etiqueta, y esta etiqueta es efectivamente una matriz o un conjunto de cadenas a las que puedes agregar a la entidad. Y el sistema de etiquetas es bastante poderoso porque, vayamos a etiquetas. Lo que puedes hacer es consultar si una entidad tiene una etiqueta en particular o una combinación de etiquetas o una operación exclusiva de etiquetas también, por lo que funciona como un conjunto y puedes realizar todas las operaciones estándar de conjunto con él. La más común es, así que vamos a Has, puedes establecer una consulta que diga, okay, puedes decir, oh, ¿tiene este conjunto de etiquetas la cadena jugador o tiene la cadena jugador o una cadena mob o tiene el mob y un nivel? Entonces puedes hacer todas estas operaciones de conjunto para obtener más información sobre un conjunto de entidades que deseas conocer. Y ahora vamos a categorizar las entidades en la escena de manera más fácil y consultarlas en un momento posterior. Así que volvamos a los objetos del jugador. Quiero agregar la etiqueta jugador. Vamos al suelo y agregamos la etiqueta suelo. No, puedes dejar de reproducir sonidos. Lo que vamos a hacer aquí en la colisión es tomar los datos del evento. Entonces, el evento de inicio de colisión, la devolución de llamada de colisión y los datos del evento de con qué ha colisionado, la posición de la colisión, etc. Así que volvamos a rigid body nuevamente y vayamos a esa devolución de llamada. Así que es inicio de colisión. Los parámetros que se pasan son un resultado de contacto. Y en un resultado de contacto, tenemos contactos. Así que es una matriz de puntos de contacto con la otra entidad. Eso es todos los puntos con los que ha colisionado y también otros, que es la otra entidad con la que ha colisionado. Y eso es lo que vamos a usar. Si es otro, entonces vamos a ir a etiquetas como capa, si no, reproducir el predeterminado. De acuerdo. Lo que vamos a hacer ahora es agregar otra ranura de sonido solo para el jugador en la pelota. Así que volvamos a traer esa plantilla de la pelota de nuevo. Agregamos una nueva ranura para el jugador y adjuntamos el sonido a eso. Madera ordenada y superposición. Así que prácticamente lo mismo que la ranura anterior pero con un nombre diferente. Desde aquí, voy a decir reproducir sonido de la ranura jugador. Guardado, vamos a lanzarlo. Así que ahora puedes escuchar cuando la pelota colisiona con el jugador. Genial. Oh, ¿dónde se ha ido mi sonido de jugador? Déjame refrescar eso de nuevo. Eso es extraño. De acuerdo, voy a tener que mirar eso más tarde. ¡Oh, ya sé por qué! Lo siento, ya sé por qué. Es porque tengo que aplicar los cambios de nuevo al activo de la plantilla.

Entonces, eso es lo que necesitamos hacer. Bluedeath. Esa es una pelota de juego. Así que actualicemos esto... Ahí vamos. Eso es mejor. Entonces, ahora cada nueva pelota que se crea... Wow, eso es... Bueno, eso cambió y ahora puedes ver que antes el jugador es como un golpe y luego cuando es el suelo es un sonido sordo. De acuerdo, así que eliminemos la pelota con la que hemos estado jugando para editar, así que ya no está en la escena. Entonces, si vamos, si... De acuerdo, Alexey ha preguntado cómo agregar otro sonido de nuevo. Si vas a la plantilla de la pelota de juego y la arrastras a la escena y vas al componente de sonido, puedes... Hay un botón en la parte inferior que dice agregar ranura, así que agregas una ranura, pones el nombre del jugador, pones el sonido, pones el recurso de sonido, haces clic en eso y luego aplicas el cambio de nuevo a la plantilla y eso debería ser todo. Avísame si tienes problemas, si los tienes, estoy encantado de abrir tu proyecto y guiarte. Así que espera en el chat. Y... ¿Estás bien, Alexei? Genial, está bien, genial. Permíteme eliminar mi pelota de nuevo antes de olvidarlo. De acuerdo, genial. Sí, de acuerdo, eso está hecho. También hablamos sobre las etiquetas de entidad. Lo que queremos hacer con las etiquetas de entidad es usarlas para actualizar la interfaz de usuario de los eventos de jugabilidad. Nuevamente, esta es la parte donde vamos a actualizar la interfaz de usuario en la parte superior izquierda, por lo que cada vez que golpee el suelo, esto se decrementará. Así que hagámoslo ahora. La forma en que vamos a hacerlo es a través del sistema de eventos de PlayGround. Así que lo que voy a hacer aquí es, en la función de colisión aquí, si golpea el suelo, entonces voy a enviar un evento que el administrador del juego va a escuchar para cambiar la interfaz de usuario. Así que vayamos primero al administrador del juego y configuremos la devolución de llamada para cambiar el texto de la interfaz de usuario cada vez que recibamos un evento de colisión de la pelota. Entonces, lo que vamos a hacer aquí en los atributos es agregar un atributo que hará referencia a la entidad del texto de la interfaz de usuario y luego modificarlo directamente en la devolución de llamada del evento al que estamos escuchando. gameManager.attributes.add UIText.Entity. Guardar eso. Y vamos al administrador del juego y lo volvemos a analizar, ahora tenemos un atributo en el editor donde podemos arrastrar o seleccionar una entidad para esa propiedad, por lo que ahora podemos acceder a la entidad de texto en el script a través de esta propiedad UIText.Entity. Así que agreguemos una devolución de llamada para la colisión, lo siento, para el daño, llamémoslo onDamage. Entonces, función, y lo que vamos a hacer es hacer un seguimiento de la salud del jugador. Luego, en onDamage, vamos a decrementar eso en cinco, y lo que vamos a hacer es para la entidad de texto UI textency, vamos a hacer referencia al componente de elemento y en el componente de elemento hay una API para cambiar el texto llamada .text que solo está disponible si tienes una imagen de tipo texto y los cambios serán this.playerhealth a cadena. Cadena a cadena, y ahora queremos escuchar el evento, ahora queremos escuchar el evento que se disparará desde la pelota. Vamos a llamarlo daño. Entonces, un patrón común que los desarrolladores usan es enviar el evento a través del objeto de aplicación porque el objeto de aplicación es accesible desde cualquier script de juego, desde cualquier tipo de script, lo siento. Entonces eso significa que podríamos hacer dot app dot on, nombrar un evento, la devolución de llamada que es onDamage, y el ámbito que le pasamos. Pero lo que hay que recordar aquí es que no se ejecutará en esta demostración en particular, pero si tienes múltiples escenas o estás destruyendo entidades en la escena es que esto no se limpia, esto no se limpia automáticamente cuando el script o la entidad se destruyen. Lo que sucederá es, lo que sucederá es, cuando registramos esta devolución de llamada, también debes recordar anular el registro cuando la entidad se destruya, de lo contrario, tendrás este efecto de devolución de llamada colgante. Porque la función todavía existe, pero el ámbito data no, y generalmente te encuentras con errores, donde escuchas este evento global, este evento en un objeto que tiene una vida útil más larga, que es el objeto de la aplicación, cambias la escena, lo que destruye todas las entidades, cargas una nueva escena y si el evento se llama nuevamente, esta devolución de llamada seguirá disparándose con este código, pero las cosas a las que hace referencia ya no existirán y simplemente obtendremos un error de incepción. Entonces, en resumen, tenemos que recordar escuchar la función de destrucción en el tipo de script, por lo que dis en destrucción, voy a llamar a una función no, que escribí mal la función, con salto de línea de this, y luego lo apago, por lo que dejo de escuchar el evento de daño. Y este es el respaldo con el que queremos dejar de escuchar. Entonces eso significa que cuando el script se destruye o cuando la entidad se destruye, dejará de escuchar el evento y todo se limpiará correctamente. De acuerdo, y ahora lo que queda por hacer es omitir este evento. Así que volvamos a la pelota y lo que haremos es verificar si es el suelo. Si esta.entidad, eso no es tu entidad. Entonces, si la otra entidad con la que colisionamos tiene un suelo, entonces this.app, dispara el evento en este objeto, lo que significa que el administrador del juego lo escuchará, llegará a esto, esta devolución de llamada se disparará inmediatamente y vamos a actualizar nuestra salud. Ejecutemos esto de nuevo. Y... no está funcionando. ¿Por qué no estás funcionando? ¿He escrito mal fluorol? ¿He escrito mal fluoro? Ah, distingue entre mayúsculas y minúsculas. Ups. Ahí vamos. Minúsculas. Sí, de acuerdo. Ejecútalo de nuevo. Ahí vamos. Puedes ver en la parte superior izquierda que cada vez que golpeamos el suelo, la salud disminuye. Y eso es nuestra lógica de juego. Una cosa que olvidé hacer es que olvidé destruir las pelotas cuando caen del borde. Ahora mismo vamos a... ¿Cómo conectas la interfaz de usuario con la puntuación? Alexi acaba de mencionar cómo conectas la interfaz de usuario con la puntuación. Así que volviendo a eso. Ve al administrador del juego. Alexi, ¿puedes enviarme un enlace a tu proyecto, por favor? Probablemente sea más fácil si lo hago desde allí para saber hasta dónde has llegado. Uh, el elemento. Gracias. Copiar enlace.

De acuerdo. Una gran ventaja de Play Canvas es que si estás conectado a un equipo, o si eres parte del equipo, o si es público, puedes acceder a él de inmediato, puedes acceder a él bastante fácilmente. Bueno, entonces, lo que ha hecho Alexi es... veamos hasta dónde hemos llegado. Publicar Crear. Así que tenemos el Elemento de Texto aquí. Tipo Texto. Así que este tipo debería ser Entidad, no Texto. Desafortunadamente, no puedes... solo hay ciertos tipos con los que funciona para los Atributos, y en este caso es Entidad. No puedes hacer referencia directamente al componente de Texto o al componente de Elemento. Así que hemos cambiado eso para que sea Entidad. Genial. Guárdalo. Vuelve a tu escena, ve a tu Ruta y vuelve a analizarla aquí arriba. Si haces clic en Seleccionar Entidad y luego seleccionas Puntuación... Perfecto. Volvamos al código. Generar, mostrar salud. Sí, eso debería funcionar. Descubrámoslo. De acuerdo. Descubrámoslo. Lo haré a mí mismo. Perfecto. Genial. Sí, una cosa que olvidé hacer es si quito mi cámara y hago zoom, puedes ver que olvidé destruir los objetos cuando caen del borde. Esto se convierte en un problema cuando tienes como 200 objetos cayendo de las bolas. Así que lo que queremos hacer es destruir las bolas si caen por debajo de un cierto valor Y en el mundo. Volvamos a las bolas, y básicamente obtenemos la posición de la NC. Estoy apurado ahora, me quedan 3 minutos. Tengo que obtener la posición y si pos.y es menor que menos 2, entonces this.nc.destroy. Ahora, déjame hacer más zoom, ejecutemos esto, cuando esté por debajo de menos 2, puedes ver que la bola ha sido destruida. Y esto asegura que no tengamos demasiadas NC en la escena siendo simuladas o demasiados objetos físicos. Ahora, restablezcamos la posición de la cámara. Genial. Ah sí, publicar. Lo que podemos hacer ahora es publicar directamente desde Play Canvas y alojar la aplicación publicada para que sea accesible desde cualquier lugar. Hay un enlace público, así que se va a construir, publicar, publicar desde Play Canvas, y eso está bien, publicar, y lo que hará es tomar una compilación de tu aplicación, publicarla en los servidores de Playground y darte un enlace permanente. Eso siempre enlazará directamente a tu compilación principal que se hace con esta etiqueta en una cosa. Así que ahora puedes enviar esto a cualquier persona que desees. Puedes alojarlo en tu sitio web, incrustarlo en un iframe o enviarlo a un cliente para obtener una vista previa, etc. Y aquí llegamos al final de la masterclass, que es justo a tiempo, literalmente. Si quieres mejorar el juego o trabajar más con nosotros, lo que puedes hacer es mirar, como en la pantalla de Game Over, cuando tu nivel de salud esté por debajo de cero, puedes reiniciar, hacer clic en Paths para la Colisión, para que puedas hacer pequeñas partículas de polvo, trabajar con scripts de diferentes tamaños, agregar sacudidas de pantalla cuando hagas clic en la puntuación y hacer que el juego sea progresivamente más difícil con el tiempo. Para obtener más enlaces útiles, si te gusta Play Canvas y quieres hacer más con él, recomiendo un curso que se hizo el año pasado por Joao, que cubre partes más profundas sobre motores de física, cómo usar disparadores, cómo usar fuerzas para mover jugadores. Aquí vamos. Usando fuerzas, mueve al jugador, hacer más animación y también el estado del juego. Esto es un buen paso adelante en comparación con las presentaciones que he hecho. También tienes los foros y Discord si necesitas ayuda, tutoriales y también hay una buena selección de tutoriales y ejemplos de productos en el sitio principal. ¿Alguna pregunta para los cero minutos que nos quedan? Genial, en ese caso, muchas gracias por venir a la masterclass. Espero que lo hayas disfrutado y hagas más cosas con Play Canvas en el futuro. Avísame qué construyes a través de Twitter si haces algo más con tu juego básico. Además, si tienes alguna pregunta más adelante, utiliza Discord donde estoy con bastante frecuencia. Ve al Discord de Play Canvas. Puedes unirte allí, hacer preguntas a nuestra comunidad, tenemos una buena moderación, tenemos una comunidad saludable y servicial, especialmente en Discord con varios moderadores también. Así que sí, avísame. Sí, esa es mi última diapositiva. Genial. Muchas gracias a todos. Espero que disfruten el resto del día. Vayan a cualquier masterclass, diviértanse. Nos vemos luego. Que tengan un buen fin de semana. ¡Adiós!