Crea un Juego Con PlayCanvas en 2 Horas

Bueno, entonces Backplane Canvas es un motor web-first, lo que significa que están muy enfocados en utilizar la web al máximo. Esto incluye adoptar estándares abiertos como WebXR para experiencias de AR y VR, lo cual estoy muy contento de que el Apple Vision Pro esté habilitando en algún momento, y soportando los estándares gLTF para modelos y materiales. El tiempo de ejecución del motor, el código que ha publicado experiencias se ejecuta es totalmente de código abierto bajo la licencia MIT, y han tenido muchos desarrolladores que contribuyen con características y soluciones a lo largo de los años, así como el equipo central.

En términos de tamaño, tiene una huella de menos de 400k después de gzip y los desarrolladores están buscando soportar la toma de árboles desde el editor para hacerlo aún más pequeño, por lo que podría eliminar el código del motor que no estás utilizando. Utiliza un producto central de PlayGamers que es un editor en línea que puedes ver aquí y podemos construir experiencias visualmente, añadir modelos, subir texturas, modificar materiales a través del navegador, que es lo que estaremos utilizando hoy. Y aquí hay una selección de las últimas características. No voy a entrar en todas ellas ahora, pero las que sí quiero destacar es el soporte GLTF con Draco Mesh Compression que permite a los desarrolladores tomar mallas de muy alto detalle y comprimir hasta una décima o vigésima parte de su tamaño. Así que casi como una quinta parte del tamaño. Es algo que han añadido recientemente y es super impresionante.

Y muchos de los usuarios de PlayCanvas han hecho algunos juegos multijugador realmente geniales, juegos para multijugador. Así que déjame retroceder un poco. Así que básicamente lo que tengo hoy, quién soy, características. Muchos de los usuarios han hecho grandes juegos multijugador y juegos con plataformas de malla como WeChat, Snapchat, Facebook, Metaversos, Experiencias de Compra y Visualizaciones de Productos y Configuradores. Puedes encontrar trailers de esto bajo MaplePlayCanvas y enlazado aquí. Y esto es lo que estamos buscando construir hoy. Estamos buscando construir un juego muy pequeño donde controlas a tu personaje jugador y para evitar que las bolas golpeen el suelo. Así que básicamente intenta alejarlas del suelo porque cuando golpean el suelo, tu salud caerá. Vale.

Entonces, nuestro plan es básicamente repasar tantas características como podamos. las características fundamentales. Pero antes de eso, también quiero hablar sobre cómo hablar un poco sobre algunas trampas con JavaScript y Play Canvas. Así que toda la documentation para Play Canvas usa EDSA, utiliza jest ES5 que como todos saben es una versión bastante antigua de JavaScript. Si estás buscando como si eres nuevo en JavaScript especialmente y estás buscando tutoriales sobre JavaScript, encontrarás que van a estar escritos usando ES6, que son clases y modules. Generalmente 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 y el material de Play Canvas en sí. Y esto es porque como Play Canvas realmente no tiene un paso de construcción aún, donde transpila JavaScript a ES5. Lo que hace, toma el code que escribes, y lo ejecuta directamente en el navegador. Así que, técnicamente siempre y cuando el navegador pueda ejecutar el code, puedes usarlo dentro del editor de Play Canvas. Y no sé si hay alguna persona que sea nueva en JavaScript aquí, pero si lo eres, hay algunas personas que vienen de Unity y C Sharp. Hay algunas trampas en las que la gente cae cuando usan Play Canvas por primera vez y no han usado JavaScript antes. Lo cual es, JavaScript no tiene concepto de tipos de valor, por lo que los objetos siempre se pasan por referencia. Y es un lenguaje dinámico donde puedes añadir propiedades dinámicamente en tiempo de ejecución. Así que no tienes la comprobación de tipos estáticos que normalmente tienes con lenguajes como C Sharp y C++. Y también, más importante, las funciones son objetos. Así que puedes pasar funciones como objetos a través del code, lo que lo hace increíblemente poderoso, pero también es algo de lo que hay que estar consciente cuando estás lidiando con el alcance. Y también quiero cubrir la arquitectura del motor de Play Canvas architecture, al menos muy ampliamente. Esto es algo a lo que vamos a volver a lo largo de la masterclass, y también usar esto para ayudar a mostrar cómo navegar por la API documentation especialmente.

Así que, en su núcleo, cuando haces una aplicación de 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 scale, y si quieres que tenga la capacidad de reproducir sonido, añades un componente de sonido. Si quieres que tenga propiedades físicas, añades componentes de cuerpo rígido y colisión. Y si queremos que tenga una lógica personalizada, podemos darle un tipo de script, y ese script ese tipo de script es efectivamente algún code personalizado que tenemos que está conectado a la vida del objeto. Así que 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 PlayCanvas. Contiene todos los sistemas, los gestores, para llegar a esa entrada de teclado, ser capaz de acceder a los activos, y también te da acceso directo al gráfico de escena. El objeto de aplicación en sí también es prácticamente accesible globalmente, por lo que puedes acceder a él desde cualquier lugar, lo que facilita efectivamente obtener lo que necesitas del motor a través del objeto de aplicación. Y los activos. Así que los activos de PlayCanvas son envoltorios alrededor de data. Y los data son cosas como data de modelo, animation, texturas, materiales, efectos de audio, etc. Y la razón por la que está envuelto es para que Code pueda tener un control sobre... ¿Cómo lo digo? Un control de lo que serían los data. Así que, por ejemplo, puedo hacer referencia a un activo de sonido, pero... Pero puedo cargar los data o descargar los data 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, PlayCanvas es totalmente impulsado por eventos. Es mayormente impulsado por eventos, donde cualquier cosa que suceda dentro del motor, como colisiones físicas, entrada, resultados de carga de activos, cualquier tipo de operación asíncrona será disparada como un evento a través de los objetos de PlayCanvas. Verás esto hacia el final de la masterclass. Y también podemos usar el mismo sistema para enviar eventos a través de la aplicación dentro de nuestro propio code también.

Voy a abrir el chat. Lo siento, acabo de darme cuenta de que tengo el chat de zoom. Bueno, entonces, ahora que todos ustedes se han registrado en PlayCanvas, me gustaría que hicieran una bifurcación de este proyecto que podemos usar como base. Así que voy a poner eso en el chat ahora. Y voy a publicar. Ahí va. Así que esto es... Así que vamos a hacer clic en esto. Este es el proyecto base. Así que esto es lo que vamos a usar para comenzar nuestra masterclass. Si hacemos clic en bifurcar, esto tomará... Cuando haces una bifurcación de un proyecto o 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. Así que lo llamaré, veamos, Jetsnation Masterclass. No puedo deletrear. Bueno. Si hacemos clic en editor, esto nos llevará al editor del proyecto y nos dará una selección de escenas. Así que hacemos clic en la escena sin título, y esto nos pone en lo que normalmente empezamos cuando creamos un proyecto en blanco en PlayCanvas. Así que te guiará a través del editor.

Aquí, esta es nuestra vista principal, nuestra principal vista 3D, donde realmente ves lo que está en nuestra escena. Esto estará poblado con entidades cuando avancemos en la masterclass. En el lado izquierdo, tenemos nuestra jerarquía de escenas. Así que estas están compuestas por entidades de PlayCanvas, y como puedes ver, si seleccionamos cada una, algunas de estas ya tienen componentes o lógica — lo siento, componentes añadidos a ellas. Así que la cámara tiene un componente de cámara, que obviamente se usa para calcular qué renderizar desde la posición y a — lo siento, calcular qué renderizar — para 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 que tiene — donde tenemos diferentes tipos de luz — directa, spot y omi. Y desde aquí controlamos cuán brillante es la luz, de qué color es, y otras propiedades, que revisaremos más tarde. Y finalmente, tenemos el objeto plano, que es una entidad con un componente de renderizado. Así que los componentes de renderizado se utilizan para renderizar efectivamente mallas en la escena. Así que en este caso es un plano, que es un polígono plano — es efectivamente un polígono plano. Y eso es — lo siento, diré que eso es todo. Y lo que podemos hacer aquí, podemos modificar estos valores, moverlos alrededor, o añadir nuevas entidades a la escena. Así que hacemos clic derecho en esto y vamos a 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. Así que en el lado izquierdo, tenemos transformación, rotación, escala, componente de elemento de redimensionamiento, que es acerca de la UI, a la que iremos más tarde. Y tenemos snap, que hemos habilitado para ajustar a una cuadrícula. Enfoque, así que si hacemos clic en eso, enfocaremos nuestra vista del editor en el objeto que hemos seleccionado. Tenemos deshacer, rehacer, mapa de luz, en el que vamos a entrar hoy, la celda codificada, que estaremos tocando en el próximo paso, y también la publicación y las etapas de descarga que revisaremos al final. Para moverse alrededor de la vista 3D, puedes mantener presionado el botón izquierdo del ratón para rotar la cámara, la rueda de desplazamiento para acercar y alejar, el botón central del ratón para desplazar, y el botón derecho del ratón se usa para rotar la vista como una cámara deslizante en primera persona, y desde allí puedes usar WASD para moverte por la escena. Si estás en un portátil y encuentras que el zoom 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 pongo en dos, porque encuentro que encuentro el valor predeterminado un poco demasiado sensible para el zoom. Así que si hacemos clic izquierdo para seleccionar un objeto en una vista 3D, podemos usar la transformación de traslación para moverlo por la escena. Así que si paso el ratón por estas flechas, puedo moverlo a lo largo de cualquier eje, hacia adentro y hacia afuera. O podemos pasar el ratón por los cuadrados para moverlo a través de ese plano plano particular. Así que, por ejemplo, si paso el ratón por esto, me moveré por el plano verde y azul. Así que nunca va a moverse hacia adentro y hacia afuera. Y las direcciones que representan son el mundo X, Y, arriba, y Z para adelante. Y la mejor manera fácil de recordar es RGB X, Y, Z efectivamente. Vale. Veamos. Y también aquí abajo, así que he hablado del panel de activos. El panel de activos es lo que es todos los datos que hemos subido. Así que esto será, representa nuestra textura. Así que aquí es donde subimos nuestras texturas, modelos, nuestros GLB, FBXs, PNGs, activos de audio y demás. Vamos a saltarnos el paso de importancia. Es como el paso de subida porque pensé que eso llevaría demasiado tiempo en la masterclass. Así que, todos estos activos ya están configurados para la masterclass. Lo que vamos a hacer aquí es configurar la escena, configurar el proyecto para que sea un poco más porque ahora es un poco aburrido. Es una escena negra y básicamente tenemos una línea. Lo que comúnmente hago con cualquier nuevo proyecto es poner un skybox y lo que se les permite hacer es nos dará luces ambientales del color del skybox. Esto se conoce como, ¿cómo lo llamamos? Imagen, 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 más bonito que tener una luz direccional dura en la escena misma. Así que si vamos a la configuración en la izquierda y vamos a renderizado, lo que tenemos aquí es la opción Skybox. Así que podemos seleccionar, si hacemos clic en el botón de lápiz, podemos ir a buscar nuestro activo de skybox, que será desde los activos raíz, Belfast Sunset HDR. Y tenemos un tipo cubemap. Si seleccionamos eso, puedes ver ahora, generalmente se ve mucho más brillante. Se ve mucho más natural que tener un solo color en el fondo. Y lo que tiendo a hacer también es en lugar de tener BRSC's, la nube y demás, tiendo a cambiar un poco a dos, que básicamente difumina el skybox. Vale, genial. Y finalmente, también tenemos el botón de lanzamiento.

Entonces, el botón de lanzamiento abrirá la escena como un usuario final ejecutaría el juego. Así que vamos a pulsar lanzar, y podemos ver aquí desde donde 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. Así que tenerla en el ángulo correcto donde podemos poner a nuestro personaje jugador y efectivamente enmarcar la escena.

Así que 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. Vale. Alex, ¿quieres intentar volver a unirte a la llamada de Zoom y ver si eso ayuda? Vale. Voy a darles unos minutos para intentarlo. Vale. Por supuesto, vale. Lo otro es, si te quedas atascado con los pasos a seguir, por favor, avísame y podemos mirar el problema en la transmisión. O lo que puedes hacer es, puedes bifurcar el proyecto que yo bifurqué. Así que puedes reiniciar desde donde estoy actualmente en la masterclass. Así que esta es mi bifurcación. Voy a poner eso en el chat de Zoom y Discord.

Vale, así que 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 ponemos la posición X a cero, ponemos esto a 2.65, que es la posición Y, y ponemos eso a, creo, ocho y ponemos la rotación a cero, cero. Y podemos ver aquí, así es como querría 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 da suficiente espacio para ver las tablas en la parte superior. Ahora que eso está hecho, vamos a lanzar eso y echar un vistazo a cómo se ve, y esta es la expectativa. Genial. Lo que quiero hacer ahora es, cambiar el color del suelo a verde, de nuevo para ayudarlo a destacar y resaltar. 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 es, si se renderizará correctamente o no, y podemos controlar eso aquí. Así que en términos de qué color es, si tendrá una imagen como textura encima de ella, si la luz la afecta y qué no. En este caso, sólo vamos a hacerla verde, que es agradable y fácil de ver. Así que va a activos, va a modelos, suelo, y vamos a hacer clic derecho, ir a nuevo activo, seleccionar material, y esto creará un nuevo activo de tipo material. Renombrar esto a suelo. Ir al difuso. Así que el difuso es el canal del material que va a controlar cómo se ve la malla cuando también es afectada por la luz. Así que en este caso, vamos a cambiar al verde. Y lo que tiendo a hacer es usar un sitio llamado flat UI colors y simplemente agarrar uno de estos colores porque generalmente se ven bien. Así que copia eso. Voy a poner eso en el suelo. Pégalo ahí. Quita el hash. Y ahora tenemos un suelo verde. Y lo que vamos a hacer ahora es cuando seleccionamos el suelo, que debería parecer 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 como 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á de nuevo en la pestaña de Lanzamiento casi inmediatamente. Lo último que quiero hacer es cambiar el ángulo de la luz. Así que está arreglando directamente hacia abajo. Y de esa manera, cuando las bolas aparecen 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 a ser 0, 0, 0. Y ahora podemos ver, ahí vamos. Ahora podemos ver el ángulo de la luz, así que apuntando directamente hacia abajo. Y esto es lo que parece. Lo otro que quiero hacer es también hacer esas sombras mucho más bonitas. Porque en este momento, parecen un poco de baja resolución. Así que podemos ir aquí, de vuelta a la luz, y cambiar la resolución del mapa de sombras. El mapa de sombras es, efectivamente, una textura de qué sombras están siendo proyectadas por la luz. Cuanto mayor sea el área del mapa de sombras, menos, lo siento. Idealmente, quieres tener la resolución de la sombra tan alta como sea posible que puedas soportar en tu dispositivo, que generalmente es de unos 4K para la mayoría de los dispositivos móviles. Y también, que la luz sólo afecte una pequeña área del mundo como sea posible. Y para mantenerlo de alta resolución, así que cuanto más grande sea el mundo, cuanto mayor sea el área que la luz afecta, la resolución de la sombra será más baja en el mapa de sombras, así que eso es 4K. Y puedes ver allí ahora, son mucho más nítidas. Vale, así que eso configura el paso uno en términos de configurar la escena y la introducción del editor. Volver aquí. Oh, lo siento, por cierto, si quieres, al igual que más tarde en línea de nuevo después de la masterclass y mirar en más detalles sobre cualquier cosa de la que he hablado hoy, he dejado enlaces en la parte inferior de cada diapositiva de los otros tutoriales o documentation que es relevante para esta área de la que estoy hablando.

Vale, así que lo que vamos a hacer ahora es añadir un personaje jugador, ese personaje amarillo que vimos antes, en la escena y también escribir un script para controlar el movimiento de él 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 de Kkit. Así que este es un activo CC0. Así que podemos usarlo libremente. Y lo que normalmente sucede es cuando importas tu FBX o GLB, se crea como una fuente de modelo, y eso crearía otros activos incluyendo la data de malla, que es contenedor, los materiales del FBX, cualquier animation que formaba parte del FBX, y también más importante, una plantilla. Así que hablaré de la plantilla en un poco más de detalle un poco más tarde en la masterclass, pero por ahora la plantilla es un conjunto de data 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, cuando importas un modelo. Y la forma de agregarlo a la escena es si hacemos clic derecho en la entidad bajo la cual queremos crearlo, así que bajo la raíz, hacemos clic derecho, vamos a plantilla, agregamos instancia. Y luego seleccionamos el activo de la plantilla. Y podemos ver aquí si me enfoco en ello, 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 efectivamente en la escena. Eliminemos esa caja mientras estamos en ello, eliminamos la caja, hacemos clic derecho, eliminamos. Ahora si alejamos un poco la imagen, y de nuevo, volveremos al laboratorio de lanzamiento. Así es como se ve. ¿Cuál era la siguiente parte? Agregar una escena, vale, agregar un script para moverlo hacia la izquierda y hacia la derecha.

Entonces, lo que vamos a hacer aquí es escribir nuestro propio tipo de script para tener una lógica personalizada donde podamos detectar la entrada del teclado y luego mover el NC alrededor de la escena. Entonces, lo que vamos a hacer aquí es ir a los activos, lo siento, ir al panel de activos, scripts, hacer clic derecho, ir a nuevo script, y lo llamamos player. Y esto creará un nuevo archivo JS para que lo editemos. Entonces hacemos doble clic en eso. Y abrimos un code, está arriba. Entonces, el co-editor de PlayCanvas es Monaco, está basado en Monaco. Así que tengo todos los atajos de Visual Studio que solía usar, lo siento, Visual Studio code que también solía funcionar aquí, incluyendo comando shift P o control shift P, y eso te dará todas las operaciones que podrías hacer dentro del editor. Y también todos los atajos vienen con él. También, si quieres ir a editar preferencias, puedes cambiar el tamaño de la fuente, puedes cambiar, déjame enviar esto un poco, puedes cambiar el tema. Entonces, si quieres, iremos a, sí, por defecto, por ejemplo, eso es un trabajo a la luz del día. Lo siento, estoy escuchando pitidos. Entonces sí, podrías personalizar esto a cómo quieras y uno de los temas comunes que tenemos. Y si pasas por, es como qué es el script. Este es como el código de inicio predeterminado que se crea cada vez que creas un activo de script. Y lo que hace es que creará un script, así que cuando este code se ejecuta, creará un tipo de script dentro del motor llamado player. Así que la cadena que se pasa aquí es el nombre del tipo de script dentro del registro de script en el motor. Y lo que devuelve es un objeto que se instancia en cada entidad que tiene este tipo de script adjunto a ella. Entonces, si adjuntamos esto a, pasaré por esto un poco más tarde, pero cuando adjuntamos este tipo de script a una de las entidades, buscará en el motor el nombre del script, que es player y creará una instancia de esto, de este objeto en esa entidad, lo que significa que podemos controlar esa lógica, que durará el control, lo siento, control, escribir lógica personalizada para esa entidad a su alrededor. Bueno, voy a.

Por defecto, creará, el código de inicio también crea una función de inicialización y una función de actualización. Así que 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á deshabilitada al inicio, la función de inicialización no se llamará hasta que la entidad se habilite por primera vez y un web code se coloque aquí y la actualización se llamará una vez en cada fotograma. Así que en PlayCanvas, eso sería una vez cada solicitud de animation fotograma en el navegador y se pasará DT, que es el tiempo desde el último fotograma. Digamos. Y lo que vamos a hacer aquí es que vamos a acceder al administrador de teclado desde el objeto de la aplicación. Así que si volvemos aquí, volvemos a documentation y a la clase de la aplicación, tenemos un dispositivo de teclado al que podemos acceder y con eso, podemos usarlo para detectar si se presionó un botón, si se está presionando actualmente y piezas obvias. ¿Comentas el último fotograma... Así que ve a la pregunta en Discord. El tiempo desde el último fotograma no está en minutos segundos, está en segundos. Así que en una pantalla de 60 hercios, sería efectivamente uno sobre 60. Bueno, ¿dónde iba? Así que sí, y lo que puedes hacer desde cada tipo de script es acceder a la NT que está adjunta. Así que veamos, déjame escribir. Este punto NT, vamos a moverlo hacia arriba. Eso nos permite acceder a la NT a la que está adjunto el tipo de script, pero también podríamos acceder al objeto de la aplicación, lo que básicamente significa que desde cualquier script, podrías acceder básicamente a cualquier otra cosa dentro de la aplicación o motor. Así que para esto, lo que vamos a hacer es si este punto de aplicación de teclado y está presionado, y luego necesitamos pasar una tecla code, para la cual tenemos cuentas que cuentan como constantes para PC dot key. Vamos a usar las teclas de maldición con la izquierda. Luego vamos a hacer lo mismo de nuevo para el botón derecho del ratón, pero mis pensamientos son correctos más cerca. Manténlo a la derecha. Así que cada vez que presionamos este botón sí, es hora de que cada fotograma estemos manteniendo presionado el botón izquierdo del ratón es cualquier cosa dentro de esta declaración se llamará, todo lo que haremos a la derecha. Cubertería así que pensé en el botón izquierdo del ratón botón izquierdo del ratón izquierdo puisque y cortesía derecha. Sólo se llama bien y desde aquí queremos mover la Nc a la izquierda y a la derecha así que bajo el. NCA Pie. Um, hay funciones para hacer muchas cosas así que puedes acceder a cualquiera de los componentes bajo la NT como puedes ver aquí. Pero lo que queremos es el. Queremos usar. Cualquier cosa que mueva la posición así que tenemos que traducir para ir a la función de traducción. Siempre queremos traducir el nodo gráfico o la entidad en el espacio mundial a través de un vector así que puedes. Podemos decir que cada fotograma o cada vez que se llama a mover. A lo largo de los valores que pasamos. Así que por ejemplo, en este caso particular el ejemplo está diciendo cuando esta función de traducción de la escuela mueve esta NC 10 unidades a la derecha a lo largo del eje X. Así que eso es potencialmente de uso, así que este punto de entidad punto de traducción. Y este chico se fue así que menos X vamos a hacer el más final. Quiero multiplicar el tiempo Delta para que no importa lo que hagan en la vida real. Va a moverse a una velocidad constante Y queremos hacer lo contrario de eso para. Escribe la galleta correcta. OK. Voy a estar en pantalla un poco más de tiempo. Pero lo que quiero mostrar ahora es lo que tengo. Mis faltas es que vuelvas al personaje del jugador. Voy a la raíz de él, que es esto. La así que el objeto raíz de todo el jerarquía vamos en el componente. Script y luego bajo el script. Adjuntamos el jugador. El tipo de script del jugador y esto significa que. Esta la vida útil del alcance del script es ahora dentro de esta entidad. Así que conceptualmente tenemos la NT, la NT que ahora tiene un componente de script y bajo componente de script tiene todos estos tipos de script que hemos adjunto a él. Eso significa que el contenido del script es responsable de actualizar la inicialización viejos tipos de script están adjuntos a él. Así que si el componente de script está deshabilitado entonces todos los tipos de script también están deshabilitados. Así que vamos a ejecutar eso. Ve a la pestaña de rubor, ve a refrescar eso. Y si yo. Uso de cortesía izquierda y derecha ahora podemos ver que estamos moviendo. Um, en el actual que queríamos, que es como la pantalla frontal. OK, una de las cosas que queremos hacer es que probablemente sea un poco demasiado rápido. Así que queremos intentar y ajustar la velocidad. Así que es como una velocidad agradable para que no sea demasiado fácil cruzar la pantalla. También no demasiado difícil tampoco, y a veces es bastante difícil de marcar. Así que lo que vamos a hacer es cómo habilitar el teclado de nuevo, así que volvemos a code. Uhm? Y déjame copiar eso en el chat, probablemente más fácil. Estoy. Iba a decir que vamos a ir aquí. Así que lo que podemos hacer es que podemos ajustar manualmente esto a cualquier número que tengamos y luego seguir relanzando la pestaña está tratando de escribir o vamos a hacer es exponer este valor como un atributo en el editor. Así que puede simplemente pegar aquí y de esa manera no tenemos que seguir refrescando la escena cada vez. Así que para hacer eso podemos añadir un atributo al script y exponerlo al editor. Oh sí, lo siento, sí, no guardé el script así que a medida que entramos en el script. Esto se pondrá amarillo y si haces un archivo guardar o comando S o control S. Debería ir a blanco y eso significa que se guarda y puedes ejecutarlo por la pestaña de lanzamiento.

Estaba mirándolo. Ve jugador. Punto atributos. Pero añade. Soy positivo nombre para el atributo. Así que 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 K brace así que pasamos en el objeto que es básicamente una configuración. Decir que esto es de tipo número. Así que lo que está aquí es? Exponer una propiedad llamada velocidad es que no es un de esa manera vamos a poner números en él y luego podemos usar. Obtener podemos acceder a él por este objeto. También tengo un menos. ¿Qué es velocidad? OK, eso ahora se guarda y volvemos al editor. Hay un botón de pausa en el tipo de script y lo que hace es que pasará el code. Buscar cualquier atributo. Buscar cualquier atributo. Pero has añadido un supongo que en el otro así por seguro. Y luego tenemos aquí el atributo de velocidad así que lo establecemos de nuevo a diez. Refresca esto de nuevo. Y. Moverse y lo que podemos hacer ahora es que podemos ajustar esto. En vivo en la ETSA. Y consigo directo y vemos la actualización directamente aquí en la pestaña de lanzamiento. Así que lo divido a 5 en algún lugar entre 2. Y esta es una velocidad agradable, efectivamente. Esta es una velocidad agradable, no demasiado fácil llegar al otro lado, así que nos da un poco de desafío, pero tampoco demasiado lento que es una tarea. OK. Y ahora he hecho esto. Dos cosas que haré ahora es que sería genial si el personaje estuviera mirando en las direcciones en las que se mueve. Y también, no queremos que se vaya lejos del suelo. Efectivamente, básicamente queremos detener al jugador allí. Y allí. Así que vamos a hacer. Hagamos eso primero. Volvemos al code. Lo que vamos a hacer es después de mover al jugador podemos obtener su posición y luego comprobar los límites de ella dentro del mundo. Y si se ha ido demasiado lejos, entonces volvemos, lo retrocedemos, decimos hasta aquí puedes llegar. Um? Y con eso, si volvemos a la API de NT. ¿Quién hace con la parte superior tenemos obtener obtener obtener obtener? También tenemos una posición de obtención así que esto obtendrá la decisión del espacio de trabajo. 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 ha ido 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 ve. Bot obtener posición. También voy a hacer aquí es volver a lo que dije antes, donde JavaScript es copia. Cada objeto es copia de referencia como una convertencia, en lugar de modificar el objeto que nos pasan de obtener posición. Podemos clonarlo para obtener una copia de los datos de posición que nos da lo que nos permite modificar. La variable de posición aquí sin afectar al resto del sistema. Así que bien. Y luego si la posición x es menor que ¿qué tan grande es el avión? ¿Qué tal esto para escala 8 así que alrededor de 4 unidades de esta manera? 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 iguala hermanas. Escuela pertenecen y luego vamos a hacer es establecer la posición de vuelta así que esto. Y ve. Así que posición. OK, eso se guarda. Así que solo para recapitular. Estamos obteniendo 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 lo ha hecho lo fija en siguiendo el mundo, si se ha ido demasiado a la derecha. Separa los espejos en la cámara demasiado lejos a la derecha entonces establecer la posición a cuatro y luego. Establecer la visión de vuelta a las NCS para asegurarse de que la posición de las entidades dentro de los límites. Así que corramos eso ahora.

Xena y ¿mejores dragones a la izquierda? No puedo ir más allá de los bordes. OK, el siguiente paso es hacer que gire en las direcciones en las que se está moviendo para que se vea un poco mejor. Voy a hacer algo similar con volver a la API separar el tamaño de la separación, establecer los ángulos del usuario, los ángulos del aceite, siempre quiero establecer los ángulos del aceite y obtener el aceite ángulos también. 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. Así que si no me estoy moviendo quiero enfrentarme a la cámara o enfrentarme a la cámara o hacia la pantalla, y si me estoy moviendo, entonces quiero girar en cualquier dirección. Así que lo que voy a hacer aquí es. Uh, restablecer el ángulo de. Eso es. Uh, establecer con ángulos que los ángulos serían. Así que lo establezco a 40 de vuelta a 000. Así que si no hacemos no sabemos la entrada es siempre va a estar mirando a la cámara. Y entonces. Si nos estamos moviendo a la izquierda, queremos enfrentar. No, no de esa manera, así que queremos enfrentar 90 grados. Queremos girarlo alrededor del eje Y, que está arriba 90 grados. Y luego el otro lado para la derecha. Uh, así que puedo salir de esto en segundos. Quieren copiar esto. Puedes conseguirlo directamente de. Sí, quería un mensaje. Pegaré el. Enlaces pegajosos al code letter directamente en el chat para que podamos copiar y pegar si necesitas, o copiar directamente de él irá a través de la presentación de esto. Así que ahora si nos movemos a la derecha. Dejé de mover al jugador ahora así que puedo copiar y pegar en documentation. OK, um, ¿es eso? Hay un tema que hacer. Lo hice allí. Y pongo, sí, OK genial. Así que eso cubre esta diapositiva añadiremos al jugador. Hemos hecho la entrada. Y de nuevo, hay enlaces a otras partes de documentation si quieres profundizar más en esto un poco más tarde.

OK, el siguiente paso que queremos animar al jugador en este momento. Literalmente no es. No está animado, así que está quieto. Moviendo alrededor de la escena. Lo que podemos hacer es añadir algo animation para cuando está inactivo. Um, y cuando se está moviendo también, así que si lo fuera, sólo voy a hacer como un pequeño, como. Rebote cuando está corriendo o caminando, va a haber un poco más de movimiento de brazos. Voy a hacer esto por. El gráfico de estado anim. Así. Soy el gráfico de estado anim es. El TRD está bien describiéndolo. El gráfico de estado anim es un. Um? Es efectivamente una máquina de estado finito que tiene múltiples estados que representan diferentes estados de animation y luego transiciones entre dos que tienen condiciones para moverse entre ellos y esto permite a los usuarios crear animations laterales que son impulsadas puramente a través de data. Así que vamos a hacer aquí. Y si vuelves a abrir si vas al panel de data activos modelos. Personaje normal. Si abrimos con el botón derecho del ratón 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 llamará plan. Animation. Mi gráfico de animation. Y vamos a abrir eso por hacer doble clic en él. OK, así que este gráfico es todo acerca de. Está aquí, así que te dará un estado inicial para empezar con allí un estado por defecto. Así que desde el inicio de la animation irá directamente a este estado que decimos. Y podrías ver qué parte tienes el nombre del estado, la velocidad de él, y si el animation hace bucle. Así que sólo te mostraré cómo está montado primero. Así que antes de entrar en añadir las diferentes animations, si vuelvo al editor, he golpeado la X aquí arriba. Sal de aquí. Y vamos a añadir porque queremos añadir una animation. Vamos a añadir un componente anim para conseguir una animation y vamos a anim. No animation legacy. Eso es la antigua versión de el sistema de animation que ya no es compatible, pero ya no es compatible. Pero todavía funciona si quieres usar eso. Pero para esto podemos usar el anim, componente anim. Y nos está pidiendo un activo de gráfico de estado. Así que haz clic en el icono del lápiz.

Activo. Y ves aquí. Se llena automáticamente el inspector con el estado inicial en el gráfico de estado. Así que ves el estado inicial aquí. Si vuelvo al gráfico de estado de nuevo. Lo llamo reposo. Vuelves al componente an. Ves ahora que ha sido renombrado a Reposo. Así que la lista aquí refleja el estado inicial en el gráfico de estado. Y he preparado algunas animations para el personaje aquí, que vienen como parte del paquete FBX que importé antes de la masterclass. Y si hacemos clic en el lápiz, hacemos clic en reposo 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 de video, pero hay una pequeña animation de reposo donde los brazos simplemente suben y bajan. Exactamente. Y eso es básicamente añadir una animation predeterminada al personaje, que funciona bien. Pero lo que queremos hacer es sólo estar en reposo si no nos estamos moviendo. Y queremos usar quizás una de las otras animations como correr o caminar cuando nos movemos a la izquierda y a la derecha. Y para hacer eso, volvemos al gráfico de estado. Hacemos clic derecho, añadimos nuevo estado, y lo llamamos movimiento. Con este estado, y queremos que esto también se repita. Así que para esto, queremos poder tener el estado de reposo. Así que tenemos el gráfico de estado, capaz de ir del estado de reposo al estado de movimiento y luego del estado de movimiento de vuelta a reposo porque esas son las transiciones que queremos en la animation de Player4. Así que hacemos clic derecho, vamos a añadir transición, y luego hacemos clic en eso. Así que ahora tenemos un camino aquí, y queremos hacer lo mismo de nuevo. Así que añadir transición, volver. Así que ahora, si hacemos clic en una de las transiciones, podemos ver una advertencia, y esto dice que no se ha establecido el tiempo de salida o la condición. Esta transición se activará instantáneamente, lo que significa que lo que va a pasar 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 controlen si esas transiciones se activan o no. Así que va a ir al estado de reposo, va a la derecha, hay una transición que existe y vamos a ir a eso, y luego de vuelta. Así que una de las formas que podemos hacer, bueno, lo siento, una de las formas, la principal forma de controlar esto es a través de parámetros. Los parámetros son valores que podemos establecer dinámicamente a través del code, para controlar efectivamente los parámetros que establecemos reflejan el comportamiento del objeto en code, y de esa manera el gráfico de estado final puede transitar a través de los diferentes estados basado en la información basado en los valores de los parámetros que se establecen desde code. Sé que suena complicado porque realmente no lo he explicado bien, pero mostrar es mejor que explicar en algunos casos. Lo que vamos a hacer aquí es, establecer un nuevo parámetro para mover, hacerlo de tipo Booleano, por lo que fue o encendido o apagado, y lo que vamos a hacer aquí es, controlar 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 reposo a movimiento, pulsa movimiento, y luego queremos que se establezca en verdadero, así que si el movimiento es verdadero, pasará de reposo a movimiento, y establecemos la otra transición, nueva condición, hacemos lo mismo de nuevo, pero desmarcamos esto, así que sólo vuelve a reposo si un movimiento es falso. Así que la idea es que desde code, podemos decirle al gráfico de estado que podemos establecer este parámetro basado en si los personajes se están moviendo o no, y esta es la lógica en la máquina de estado finito para que el gráfico de estado se mueva automáticamente de un estado a otro. Así que cerramos eso, volvemos al personaje del jugador, configuramos una animation para el estado de movimiento, usemos correr. Y luego dentro del code del jugador de nuevo, lo que vamos a hacer aquí es crear una variable para saber si almacenamos si añadimos una entrada o no, nos estamos moviendo o no, así que moverse, es igual a falso. Y luego dentro de nuestros controles de entrada, necesitamos empezar a mover a verdadero. Así que verdadera entrada. Y luego lo que vamos a hacer es acceder al, ¿qué es eso? Vamos a acceder al componente anim a través de la entidad, así que eso es entidad.anim. Y luego desde aquí, creo que tenemos una función set boolean, le damos el nombre o el parámetro, moverse. y establecer eso en nuestra variable que configuramos, que almacenamos el bool. Así que ahora ese parámetro, o moverse dentro del gráfico, va a reflejar directamente la lógica que está pasando, la lógica que 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í, refresquemos. Y puedes ver ahora que está pasando del estado de reposo, nos estamos moviendo ahora yendo al estado de movimiento, y de vuelta. Y si quieres darle esto, déjame compartir rápidamente. Así que quieres ver la configuración. He enviado el enlace a ambos chats de nuevo, del proyecto en el que estoy trabajando actualmente. Así que puedes hacer una bifurcación de él, o mirarlo más de cerca mientras estoy hablando.

Bueno, probablemente también te hayas dado cuenta de esto, cambia bastante rápido entre las animations ya que pasa instantáneamente de inactivo a correr, y de correr de nuevo a inactivo. Y eso es porque en nuestro gráfico de estado de la imagen, tenemos en las transiciones un valor de duración que está configurado básicamente en vacío o nada en este caso. Y ese parámetro de duración, eso está diciendo cuánto dura la transición cuando se pasa de un estado a otro. Y cuando está en ese período de transición, mezcla las dos animations juntas para crear, por lo que tiene un peso medio entre las dos. Y si le ponemos un valor, digamos que le ponemos una duración de, digamos que no son dos segundos, significa, pero no son dos segundos, por lo que va a mezclar la animation de inactivo con la animation de moverse, y eso crea menos un chasquido brusco. Así que hacemos eso para ambas transiciones. Y volvemos a la pestaña de lanzamiento, refrescamos, y nos movemos. Puedes ver que ya no chasquea. Básicamente interpola la posición en la que estaba antes a la posición en la que necesita estar para el siguiente estado y se mezcla entre ellas durante la duración de esa transición. Así que eso crea un chasquido ligeramente menos notable y es mucho más agradable de ver.

Vale. Genial. ¿Alguna pregunta hasta ahora antes de que siga? Mientras esperamos las preguntas, vale la pena mencionar que el gráfico de estado de la animation es en realidad una gran característica de PlayGammas y probablemente podría hacer otra masterclass solo sobre él. Así que hay algunos tutoriales y algo de documentation que probablemente vale la pena leer si te metes mucho en las cosas de animation. Seguimos. Y lo que vamos a hacer ahora es, lo siento, discúlpame, añadir la bola que cae con física. Así que esta es la bola que cae desde arriba y la idea es que rebotes en ella. Así que aquí vamos a usar el motor de física que está integrado con PlayGammas 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 viejo ahora, pero es increíblemente maduro y se enfrenta a un estándar bastante introducido. Creo que Unity lo usó en un momento también. Así que vamos a hacer eso. Vamos a añadir el modelo de la bola a la escena, le daremos un cuerpo rígido y una inclusión y le daremos propiedades físicas para que caiga y luego añada una colisión al resto de la escena para que pueda colisionar tanto con el jugador como con el suelo. Voy a hablar un poco sobre los diferentes tipos de objetos físicos que tienes.

Vale, vamos. Así que 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 un jugador. Vamos a añadirla a la escena. Así que hago clic derecho, plantilla, añadir instancia, selecciono la plantilla roja 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 colisionar con todas las cosas. Y como mencioné antes, esto para que no diga ningún comportamiento nuevo a vacío se va a hacer a través de tus componentes. Así que añadir componente, física, le vamos a dar un cuerpo rígido. Así que el cuerpo rígido representa la física de las teas, de cuánto pesa, cuánto rebota sobre cuánta fricción aplica. Y así cuánto pesa, así cuánta fricción tiene al ser movido a través de otros objetos y la restitución es básicamente cuánto rebota. Así que cuanto mayor sea la restitución, más rebote tendrá. Lo otro que queremos hacer es también importar el módulo de ammo. Así que el módulo de ammo es un poco estándar de code que efectivamente ejecuta y gestiona la simulación física en sí misma. Así que haces clic en eso, y puedes ver que como una nueva carpeta a ese panel llamado ammo.js. Y eso debería desaparecer, eso es un bug. Lo que también queremos hacer es añadir un componente de colisión. Así que el componente de colisión representa la forma del objeto físico. Y desde aquí tenemos todas estas formas primitivas, caja, esferas, cápsulas, cilindros y conos. Y hay una malla es, si quieres usar un modelo como la malla de colisión, así que básicamente, tal vez tienes un ambiente que quieres establecer, generalmente evito esos cuando es posible porque hace que la simulación sea bastante lenta. Y el compuesto es cuando juntas varias formas primitivas juntas como un cuerpo rígido. De nuevo, no vamos a cubrir eso hoy, pero solo cubriremos el uso de primitivas normales. Así que para la bola, queremos la esfera. Podría ver aquí, es como cuán grande es la forma efectivamente. Nos basamos 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 cualquier campo de número en el editor, tendrá un arrastrador de valor. Así que puedes ver en el extremo derecho. Y si haces clic izquierdo y mantienes, puedes mover tu ratón a la izquierda y a la derecha para cambiar el tamaño del radio o cambiar el valor en el campo. Así que quiero hacer esto alrededor de uno, creo. Ahí tienes. Así que ahora prácticamente abarca el tamaño de la bola. Y queremos cambiar el tipo. Así que por el momento es estático, lo que básicamente significa que, una vez creado en el mundo, nunca puede moverse. Y harías eso para cosas como escenarios, entornos, cualquier cosa que nunca se moverá durante la vida útil de la entidad. Tenemos dinámico, que es, va a ser bastante similar por el mundo físico, lo que significa que se aplicará la gravedad. La única forma de moverlo es a través de fuerzas e impulsos. Y tenemos cinemático, creo que así es como se pronuncia. Y eso es donde puedes posicionar el objeto físico no importa donde quieras en el mundo, ya que puede moverlo y react a otros objetos dinámicos. Así que si mueves un objeto cinemático a un objeto dinámico, el objeto dinámico se movería, pero el cinemático no se ve afectado por colisiones, fuerzas, impulsos y demás. Siempre se coloca donde pones la posición de la entidad. Para la bola, vamos a poner usar dinámico para que simplemente caiga de forma natural.

Entonces ahora vamos, si lanzamos esto de nuevo, puedes ver que cae y atraviesa todo porque nada más en el mundo actualmente tiene, ¿cómo lo llamas? Actualmente tiene propiedades físicas. Lo siento, solo estoy viendo 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. Entonces seleccionamos el suelo, como hicimos aquí, vamos a física, cuerpo rígido, colisión, línea estática, eso está bien, y por el momento es solo standards como una caja de uno por uno. Entonces vamos a cambiar esto a la mitad de un conjunto, así que cambiamos 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 el desplazamiento de posición. Entonces, de nuevo, si pasamos por la Y, esto nos permitirá mover la forma como un desplazamiento a donde está posicionada la entidad, lo cual es bastante útil para momentos como este. Entonces puedes ver si arrastro esto hacia arriba y hacia abajo, estoy moviendo la forma en función del valor de desplazamiento. Entonces lo que haremos es simplemente ponerlo allí, 0.5, refrescar esto, puedo ver ahora que rebota y colisiona con el suelo. Y ahora vamos a hacer lo mismo con el personaje. Entonces el personaje, porque lo estamos moviendo directamente para la entidad, está bien tenerlo como cinemático. Entonces 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 que hemos hecho a través del script del jugador. Entonces, de nuevo, vamos a hacer lo mismo. Física, cuerpo rígido. Colisión de física. Ve a la cápsula. Y allí. Cambia a cinemático, y, de nuevo, 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. Entonces ahora si lanzamos, ahí vamos. Bueno, no sé qué pasó allí. Podemos ver ahora. Podemos mover la bola moviendo el planeta hacia ella, mover a la izquierda, a la derecha, etc. Entonces eso es una especie de TLDR básico sobre física, efectivamente. Entonces vamos a reiniciar de nuevo, alejarse del camino, rebotarlo. También quiero que la bola rebote un poco más también, 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, cambiar la restitución al máximo, y eso debería darle un poco más de rebote. Ahí vamos. Entonces ahora se siente un poco más como una pelota de playa, donde está rebotando. Se siente un poco más flotante, se siente menos como una bola de cañón pesada y densa que simplemente cae al suelo. Bueno. Buh buh. Eso cubrirá todo aquí. Sí. ¿Alguna pregunta hasta ahora?

Bueno, ahora que tenemos una bola antes del suelo, queremos generar continuamente bolas con el tiempo. Entonces, de nuevo, conviértelo en una especie de 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, lo siento. ¿Ahora está bien la cámara? Crear un script de juego que creará clones o instancias de esa plantilla con el tiempo en el mundo y básicamente convertirlo en un poco más de un juego. Entonces asumiendo que las cosas se convierten en esta plantilla, crear un script de juego y crear bolas de clon o crear instancias de bolas con el tiempo. Entonces volvemos a Yedza. Lo que voy a hacer. Lo que 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 por si acaso la usamos más tarde en la aplicación. Entonces volvemos, seleccionamos 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 a, llamémoslo una 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 llamada administrador de juego. Bueno. Y por adelantado lo que vamos a hacer es agregar el administrador de juego al objeto raíz para que pueda ejecutar code y hacer clic en el botón de lápiz para editar el script. Bueno. 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í, tirar de 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 rápida verificación 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 para hacer referencia al activo al script. Agregaremos y lo llamaremos un 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 en realidad opcional. La segunda parte es en realidad opcional, pero esto nos permite asegurarnos de que en el Editor, no puedes asignar ningún activo al script, solo puedes asignar el activo de este tipo. Y eso suele ser útil si estás trabajando con equipos y quieres asegurarte de que es más difícil hacer algo mal o hacer algo por accidente. Guarda eso, vuelve al editor, pestaña pasa y luego de nuevo podemos usar el icono de lápiz.

Encuentra la plantilla, la ves, y ahora podemos hacer referencia a este activo directamente en code. No puedo recordar cómo escribí esto, cómo lo escribí, oh, hombre. Bueno, 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 documentation para esto. Aquí está el objeto activo y lo que tenemos que hacer es ir a la documentation. 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 code. Entonces vamos a hacer eso, resource. y no puedo escribir instantiate, nunca puedo escribir instantiate, así que simplemente voy a copiar y pegar eso. Entonces al llamar a eso, he, ups, tengo un const y una C. Entonces 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 la 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 del 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 físico 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 la NT en ese punto de la aplicación. Entonces lo que vamos a hacer aquí es si this.timeToDex spawn es menor que cero, está bien, 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 restar 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. Entonces vamos a cerrar eso, volver a code. 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ámica, la posición de NC está determinada por dónde está la posición del cuerpo rígido en el mundo de la Física. Entonces 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 de cuerpo rígido para mover el objeto. Así que volvamos a la documentation nuevamente, donde dicen Componente de Cuerpo. Hay una función llamada Teleport, ahí tienes. Entonces, bajo el componente de cuerpo rígido, hay una función llamada Teleport, en la que podemos 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, rigidBody.teleport. ¿Y dónde queremos establecerlo? Por el momento, solo lo vamos a poner 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. Entonces vamos a pc.math.random y menos tres a tres estará bien. Entonces cada vez que se llame, será un número aleatorio entre menos tres y tres. Refrescar eso. Y ahora tenemos el comienzo de nuestro juego. Bien, estoy siendo consciente del tiempo. He hecho bastante. Bien, genial. 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. Lanzar 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. Vamos a cerrar eso y seguir adelante. Es posible que necesite speed up un poco porque tengo 45 minutos y me quedan algunas cosas más por hacer. Ah, UI. Ah, okay. Entonces, la siguiente etapa aquí es que vamos a comenzar a agregar la UI al juego. Así que retrocedamos un poco.

La interfaz de usuario de la que estoy hablando, oops, demasiado lejos. La interfaz de usuario de la que estoy hablando aquí es el icono de corazón y efectivamente el contador de salud que he colocado en la parte superior izquierda. Oops, no quiero. La interfaz de usuario es... El sistema de interfaz de usuario es una característica bastante grande, nuevamente, otra característica importante de PlayCanvas y podría dedicarle una masterclass completa a esto. Así que voy a repasar los conceptos básicos, 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 documentación en la que profundizaremos más en eso. Pero solo quiero cubrir la posición, cómo posicionarlo, cómo las diferentes propiedades controlan dónde se renderiza el elemento. Porque eso tiende a confundir a las personas bastante.

Entonces, pasemos a la siguiente diapositiva. 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, mientras que la pantalla representa el lienzo en el que estás renderizando PlayCanvas. Los elementos se posicionan en función de tres partes. La posición del ancla, que es la posición del ancla en relación con el elemento o pantalla padre. El desplazamiento de posición local desde el ancla hasta el pivote y la posición del pivote en relación a sí mismo. Y eso probablemente no tiene ningún sentido porque es muy difícil hacer esto solo con texto. Así que voy a abrir una escena de ejemplo para mostrarte mejor esto. Ok, esta es una de las escenas de ejemplo que está en la documentación de PlayCanvas. 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 la frontal. Y luego, si me alejo, eso facilita la visualización y el movimiento de los elementos.

Ok, lo que tenemos aquí es una EDZ con una pantalla apuntando a ella. Y eso está en el espacio de pantalla, lo que significa que siempre cubrirá, siempre cubrirá la pantalla. Si desactivas eso, entonces es una pantalla en el espacio 3D, en el espacio mundial efectivamente, lo que significa que no puedes moverte 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, digamos las unidades que representa la pantalla. Por lo general, no juego con nada más que 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 la posición del ancla, la posición del pivote, el ancho, el alto, el color, el margen, etc. Y voy a repasar esto tanto como pueda en esta masterclass. 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. Clon de la interfaz de usuario. No puedo caer más rápido, ahí vamos. Aquí vamos. Fuente. Ahí vamos, genial. Ok. He establecido la imagen del logotipo. Puedes ver que está posicionada en la parte superior de la pantalla pero.

Ok, estoy tratando de averiguar cómo continuar. Ok, he leído eso. Puedes ver por la imagen del logotipo que tenemos el ancla configurada en... Tenemos un ancla preestablecida en la parte superior y el pivote. Esto significa que el ancla está configurada 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 ancla está representada por 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 como el ancla está configurada para estar en la parte superior, así que uno y uno, significa que siempre estará anclado al borde superior de tu 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 hacia la parte inferior de la pantalla. Entonces, si deshago esto y lo ejecuto y cambio el tamaño de mi ventana. Echa un vistazo a la distancia entre la parte superior de la pantalla y la imagen, eso nunca cambia. No importa qué tamaño le dé a 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 especie de interfaz de usuario receptiva. Utilizo el término receptiva en términos de ser receptiva al cambio del tamaño de la pantalla, no tanto en términos de CSS. Y esto nos permite hacer cosas como anclar elementos en esquinas específicas, así que en nuestro caso, tenemos la barra de salud en la parte superior izquierda, así que no importa a 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 hará referencia a la esquina superior de la pantalla, y podemos configurarlo para que esté alineado con cualquier otra cosa que le indiquemos, 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. Cambia eso a azul para que podamos verlo. Acércate 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. Así que no importa cuán grande o pequeña hagamos esta imagen, este elemento de imagen, siempre va a estar fijado a esta esquina. Así que si cambio el preajuste a la parte superior derecha, ancla y pivote, puedes ver que está fijado a la esquina superior del padre. Y ahora si cambio el tamaño de esto, en realidad el tamaño de esto a digamos 300, siempre va a estar fijado a esa cosa, no importa lo que haga con ella. Así que 600 y esto hace que sea muy fácil simplemente juntar rápidamente una especie de UI que siempre se ajusta a una forma particular o siempre se mantiene regular no importa cuán 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. Así que si volvemos a este tutorial, por ejemplo, oh, no, sigue. Tienes clon, lo mismo. Siempre uso el modo de mezcla, nunca uso el no siempre uso el modo de mezcla. No funciona necesariamente porque de nuevo me gusta lo más 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 el modo de mezcla. Y hay un valor entre cero y uno que se utiliza y esto controla cómo, cómo los elementos de la pantalla o la pantalla se escalan basado en 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í escalan hacia arriba y hacia abajo basándose en el ancho y que el modo de mezcla uno es lo contrario. Cambian de tamaño basándose en la altura, pero no en el ancho. Y esto es útil si quieres hacer interfaces de usuario basadas en retrato o juegos de estilo paisaje. El ejemplo, si estás haciendo un juego para móviles, que siempre es tu retrato en una aplicación de mensajería, generalmente uso el modo de mezcla cero porque los teléfonos molestan con rangos de diferentes alturas en modo retrato que siempre uso el modo de mezcla cero para que los elementos no cambien de tamaño no importa cuán alta sea la pantalla. Especialmente si tienes un hueso realmente alto que tengo aquí. Te permite crear una UI que está anclada y no escala basada en retratos. Así que puedes asegurarte de que la UI funciona para 16 por nueve, 31 por nueve y todo lo que está entre medio. Y déjame hacer eso. Y el modo de mezcla uno es lo contrario. Hago esto para juegos de estilo paisaje, especialmente para juegos de escritorio y de navegador. Y luego el valor en medio toma diferentes ponderaciones basadas en él. Así que 0.5 es una combinación de ambos donde los elementos de la UI se escalan sin importar, se basan en la escala si cambias la altura o el ancho, pero están equilibrados entre los dos. Y la otra cosa es si necesitas una pantalla de UI o un diseño de UI que funcione tanto para retrato como para paisaje, la práctica recomendada que tengo es que hagas dos diseños separados. Así que cambias entre ellos. Así que en este ejemplo aquí, tengo un diseño de paisaje, donde puedes ver el logo 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 logo y el nombre se ponen en la parte superior. Así que sí, voy a repasar esto, repasar la masterclass, de nuevo, me estoy quedando corto de tiempo. Necesitaré hacer esto sobre la marcha. Así que hablé de esto antes, donde puedes, los elementos pueden ser anclados al padre, ya sea que los padres sean un elemento o una pantalla. Así que es útil para diálogos, si quieres anclar una cierta UI a diferentes esquinas. Volvamos a esto. Lo siento. Uy. Lo siento, ten paciencia conmigo. Bueno, lo que vamos a hacer aquí en nuestro proyecto, así que volveré al proyecto de nuevo. Voy a añadir un icono de corazón en la parte superior izquierda y algo de texto a la izquierda de eso también. Así que en la jerarquía, haz clic con el botón derecho, interfaz de usuario, y queremos una pantalla. Y podemos mover esa pantalla fuera del camino para que no esté encima de nuestra área de juego para facilitar su edición. Cambia al frente, y queremos hacer clic con el botón derecho y añadir un nuevo elemento de UI a él. Elemento de imagen. Y desde aquí, podemos añadir textura o sprite. Así que vamos a cubrir el texto hoy, lo que básicamente significa que cualquier imagen que subamos puede ser utilizada aquí. Ve a UI, y voy a arrastrar y soltar un icono de corazón encima. Así que, y desde este punto, ahora Element renderizará nuestro PNG que subimos antes. Cambiaremos eso a un icono. Y cambiaremos el preajuste de, cambiaremos el preajuste de ancla de centro pivote a... Oh, se me olvidó. Ancla de pivote superior izquierda. Así que ahora, está anclado a la esquina superior izquierda, así que no importa cómo redimensionemos la pantalla, siempre va a estar fijado a la esquina superior izquierda. También queremos cambiar el color. También queremos teñirlo. Así que voy a agarrar ese color gris. ¿Dónde he ido? Estoy perdido en mis propias pestañas. Haz eso N. Así que un bonito color gris, y lanzamos esto de nuevo. Apareció en la parte superior izquierda, que es lo que queremos. Y voy a hacer lo mismo de nuevo, donde vamos a añadir el texto. Así que haz clic derecho de nuevo en la pantalla, ve a la Interfaz de Usuario, Elemento de Texto, y por defecto, ya he subido una fuente a nuestro Árbitro de Activos. Así que por defecto, selecciona el primero que puede encontrar. 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 se 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... Así que por defecto, nos da el estándar, ¿cómo se llama? El estándares rango ASCII, que es de la A a la Z, todos los números, etc.

Pero si quieres soportar otros idiomas, necesitas añadir los glifos para esos idiomas aquí también. Así que por ejemplo, si quieres añadir japonés, tienes que añadir el kanji. Ruso, añades acrílico. Y chino, tienes que añadir, de nuevo, todos los ciclos que necesitas para renderizar en la pantalla. Pero ahora los ajustes predeterminados están bien porque vamos a usar números.

Así que hacemos lo mismo de nuevo, donde cambiamos el preajuste para usar ancla y pivote superior izquierdo. 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 de nuevo, cambia el color a ese color gris. Y por defecto, pongamos 100 ahí. Bueno, volvamos a esto. Lo que hemos hecho, para recapitular, es que hemos añadido dos elementos de PlayCanvas UI a una pantalla de PlayCanvas y los hemos anclado a la parte superior izquierda de manera que no importa el tamaño de nuestra ventana, ya sea que vayamos a retrato o paisaje, siempre va a estar fijo en la esquina superior izquierda no importa qué. ¿Qué más es eso? Sí. De nuevo, hay más documentación sobre cómo funcionan los anclajes y pivotes en más detalle en el manual del usuario, y profundizamos más sobre cómo el pivote está relacionado con la posición del bit de renderizado real, que es como el texto o el icono que no tengo mucho tiempo para pasar aquí.

Vale. Vamos a actualizar el texto más adelante en la línea cuando... Vamos a actualizar el texto cuando la pelota golpee el suelo un poco más tarde en la masterclass, pero primero quiero añadir los efectos de sonido, tal vez porque se alimenta de algunas de nuestras características del motor. Vale. ¿Dónde voy? Por ahora vamos a añadir efectos de sonido. Cuando la pelota colisione con el jugador y el suelo, va a producir un sonido, efectivamente. Y desde aquí puedes usar cualquier archivo de audio que sea soportado por el navegador. Pero la parte frustrante es que no todos los navegadores soportan todos los archivos de audio. Así que por ejemplo, creo que OGG sólo es soportado por, creo, IOS Safari, lo cual es un poco frustrante porque IOS Safari, lo cual es un poco frustrante. Así que generalmente la gente usa WAV, que es bastante grande en tamaño, o mp3. Así que 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, sólo vamos a tener los mismos efectos de sonido para cada colisión que golpee la pelota. Y para hacer eso, vamos a necesitar añadir 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 alguna funcionalidad para saber cuándo detectar cuándo ha golpeado algo. Y dos, necesitamos añadir un componente de sonido a la pelota. Así que lo que voy a hacer aquí es volver a las plantillas, añadir eso de nuevo a la jerarquía. Así que puedes hacer eso arrastrando de vuelta. Podrías arrastrar el activo de la plantilla a la jerarquía o puedes usar lo que he estado usando antes, que es hacer clic derecho en la plantilla una instancia. Y luego aquí vamos a añadir un componente de sonido. ¿Qué es ese componente de sonido uno, audio y sonido. Y ¿qué hace este lado características que no vamos a usar hoy? Así que podemos hacer sonido de posición donde reproducirá el sonido basado en la posición de donde se emite el sonido, haré donde NTS a donde está la cámara. Pero en este caso, estamos bien para sólo un espacio de pantalla. Así que vamos a desactivar eso. Y tenemos diferentes ranuras. Así que un componente de sonido puede tener múltiples ranuras con cada ranura representando un sonido diferente. Así que hacemos. Así que por el momento queremos una ranura. Lo cambiamos a colisión. Y vamos a encontrar el activo de audio. Y podemos usar platos creo. Para esto. Y tenemos otras opciones aquí. Tenemos autoplay, que significa que tan pronto como el componente de sonido esté habilitado o su primera instancia en la escena, se reproducirá. No queremos eso. Lo que sí queremos es superposición y la superposición significará que podrías reproducir el mismo sonido muchas veces sin detener la instancia anterior de que se esté reproduciendo. Porque si está en tic y se está reproduciendo y reproduces el sonido en medio de ese sonido que se está reproduciendo ¿qué pasará? Ya tenemos el sonido anterior y reproducimos el nuevo. Pero en nuestro caso, no podemos querer que se superpongan porque podemos tener múltiples rebotes en un caso. Así que vamos a marcar eso. Y ahora queremos añadir un script a la pelota que nos permita reproducir los efectos de sonido. Así que si vamos a scripts y nuevo activo, vamos a ball.js y en el NC, añadir componente, script, añadir pelota, y hacer clic en editar. Vale, así que lo que queremos hacer aquí es escuchar los eventos que el cuerpo rígido nos dará para la colisión. Así que volvemos a la API de nuevo, el cuerpo rígido, bajamos un poco a los eventos. Puedes ver el nombre de los eventos que emite el cuerpo rígido que podemos escuchar para las colisiones. Cuando la colisión comienza, así que cuando el primer golpe. Fin de la colisión cuando primero se van y contacto y disparador. Así que los disparadores no los cubrimos hoy. Sólo podemos usar el inicio de la colisión. Y hacemos esto por, primero creamos una función para el callback. Así que en colisión. Y nos dará data. Y luego, en la función de inicialización, vamos a decir, escucha este evento en el componente rígido y llama a este callback. Así que si this.entity.rigidbody.on. Y luego el nombre del evento, que es el inicio de la colisión. Vamos a llamar a esta función en colisión. Y estaremos llamando a un callback de este evento.

También necesitamos pasar en el alcance de los objetos llamados de callback, de nuevo, porque estamos usando ES5. No... La API... Entonces, porque la API fue escrita durante el período de ES5, no soporta naturalmente las funciones nominales o la sintaxis de D-crypt Arrow. Entonces, es mejor pasar el objeto que quieres que se llame a la función, que va a ser el objeto this. Eso significa que va a llamar a esta función en el alcance de este objeto. Voy a reproducir el sonido. Entonces, si recuerdo correctamente es Play creo? Componente de sonido... Play. Entonces, tiene una función Play, pasamos el nombre de la ranura, y eso es prácticamente todo. Fácil y sencillo. this.nc.sound.... Eso es agradable para el sonido. Play. ¿Y cómo se llamaba de nuevo? Creo que lo llamamos colisión... Sólo estoy comprobando doblemente el nombre. Sí, lo llamamos a la ranura colisión.

Bien, entonces ahora... Ahora hago todo esto como una plantilla, lo que necesitamos hacer es, ahora hemos añadido estos cambios a la instancia de la plantilla, la parte a tener en cuenta es que sólo hemos hecho estos cambios a la instancia, en realidad no hemos hecho los cambios al activo de la plantilla. Y puedes ver estos resaltados en azul. Así que cualquier cosa que sea azul está diciendo que has hecho un cambio, este cambio sólo se está aplicando a esta instancia, no a la plantilla que creamos anteriormente. Pero como estamos creando Bools dinámicamente en tiempo de ejecución, sí queremos los cambios de vuelta en la plantilla. Así que lo que vamos a hacer es en la parte superior de aquí, tenemos algunas opciones para la plantilla donde podemos ver primero cuáles son los cambios, y luego también podemos aplicar los cambios de vuelta al activo de la plantilla. Así que si hacemos clic en ver diff, vemos que hemos añadido un nuevo componente de script, un nuevo componente de sonido, y si hacemos clic en el punto azul, vamos a aplicar a Gameboard. Así que significa como, okay, aplicaremos el cambio de vuelta a la plantilla. Así que cierra esto ahora, podemos ver en el script, esto 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. Así que ahora los cambios se aplican de vuelta a la plantilla. Así que ahora cuando vayamos a tiempo de ejecución, e Instance Templates, tendrá los cambios que acabamos de crear. Así que vamos a eliminar este objeto, y ejecutar esto de nuevo. Y lo que deberías oír, no sé si puedes oír esto a través de la grabación, deberías oír el efecto de sonido cada vez que colisionamos con algo. Genial. Bueno, voy a acelerar un poco aquí, porque sólo nos quedan 20 minutos y quiero dejar un poco de espacio para preguntas al final.

Lo que queremos hacer ahora es, queremos tener un efecto de sonido diferente para el jugador, así que podemos diferenciar entre, oh, hemos golpeado el suelo, versus hemos golpeado al jugador. Y podemos hacer esto a través del sistema de etiquetas. Así que cada entidad, cada activo, así que veamos ahora, tiene una propiedad de etiqueta, y esta etiqueta es efectivamente una matriz o un conjunto de cadenas que puedes añadir a la entidad. Y el sistema de etiquetas es en realidad bastante poderoso porque, vamos a, etiquetas. Lo que puedes hacer es consultar si una entidad tiene una etiqueta particular o una combinación de etiquetas o una operación exclusiva de etiquetas también, así que funciona como un conjunto y puedes hacer todas las operaciones de conjunto estándar con él. La común es, así que vamos a Has, puedes establecer una consulta que dice, okay, puedes decir, oh, ¿tiene este tiene este conjunto de etiquetas la cadena de jugador o tiene una cadena de jugador o una de mob o tiene la de mob y una de nivel? Así que puedes hacer todas estas operaciones de conjunto para hacer, para usar este sistema de etiquetas como un poderoso sistema de consulta cuando tienes un montón de entidades de las que quieres saber más. Y ahora vamos a categorizar las entidades en la escena más fácilmente y consultarlas en un momento posterior. Así que vamos a ¿dónde voy, volver a los objetos del jugador. Quiero añadir la etiqueta de jugador. Ve al suelo y añade la etiqueta de suelo. No, puedes dejar de reproducir sonidos. Lo que vamos a hacer aquí en la colisión es tomar los datos del evento. Así que el evento de inicio de colisión, así que el callback de colisión y el evento datos de lo que ha colisionado con la posición de la colisión, etc. Así que volvamos a el cuerpo rígido de nuevo y vayamos a ese callback. Así que es el inicio de la colisión. Los parámetros que se pasan son un resultado de contacto. Y en un resultado de contacto, tenemos contactos. Así que una matriz de puntos de contacto con la otra entidad. Así que todos los puntos con los que ha colisionado y también otro, que es la otra entidad con la que ha colisionado. Y eso es lo que vamos a usar. eso no es uno, dos. O bien otro y luego ve etiquetas como capa de lo contrario reproduce el predeterminado. Okay. Lo que vamos a hacer ahora es añadir otra ranura de sonido sólo para el jugador en la pelota. Así que vamos a traer esa plantilla de pelota de nuevo. Añade una nueva ranura para el jugador y adjunta el sonido a ella. Ordinate wood 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 del jugador. Guardado, vamos a lanzarlo. Así que ahora puedes oír cuando la pelota choca con el jugador. Genial. Oh, ¿dónde se ha ido mi sonido de jugador? Déjame refrescar eso de nuevo. Eso es extraño. Bueno, voy a tener que mirar eso más tarde. ¡Oh, sé por qué! Lo siento, sé por qué. Es porque tengo que aplicar los cambios de vuelta al activo de la plantilla.

Así que eso es lo que necesitamos hacer. Bluedeath. Esa es una pelota de juego. Así que refresca esto... Ahí vamos. Eso es mejor. Así que ahora cada nueva pelota que se crea... Vaya, eso ha... Bueno, eso cambió y ahora puedes ver que antes el jugador es como un bonk, y luego cuando es el suelo es un plonk. Vale, vamos a eliminar la pelota con la que hemos estado jugando para editar, así que ya no está en la escena. Así que si vas, si nosotros... Vale, Alexey ha preguntado ¿cómo se añade otro sonido de nuevo? Si vas a la plantilla de la pelota de juego y la arrastras a la escena y bajas al componente de sonido, puedes... Hay un botón en la parte inferior que dice añadir ranura, así que añades una ranura pones el nombre de jugador, pones el sonido, pones el activo 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, estaré encantado de abrir tu proyecto y guiarte a través de él. Así que simplemente cuelga en el chat. Y... ¿Estás bien Alexei? Genial, está bien, impresionante. Déjame eliminar mi pelota de nuevo antes de que me olvide. Vale, genial. Sí, vale, eso está hecho. Hablamos también de las etiquetas de entidad. Lo que queremos hacer con las etiquetas de entidad es usarlas para actualizar los eventos de la UI para el juego. De nuevo, esta es la parte en la que vamos a actualizar la UI en la parte superior izquierda, así que cada vez que golpea el suelo, esto disminuirá. Se pondrá más y más bajo. Así que hagamos eso ahora. La forma en que vamos a hacer eso 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 gestor de juego va a escuchar para cambiar la UI. Así que vamos al gestor de juego primero y configuramos el callback para cambiar el texto de la UI cada vez que recibimos un evento de la colisión de la pelota. Así que lo que vamos a hacer aquí en los atributos, vamos a añadir un atributo que hará referencia a la entidad para el texto de la UI, y luego modificar eso directamente en el callback para el evento al que estamos escuchando. El gameManager.attributes.add UIText.Entity. Guarda eso. Y vamos al gameManager y lo reanalizamos, ahora tenemos un atributo en el editor donde podemos arrastrar o seleccionar una entidad para esa propiedad, así que ahora podemos acceder a la entidad de texto en el script de nuestra propiedad this UIText.Entity. Así que vamos a añadir un callback para el daño, vamos a llamarlo onDamage. Así que función, y lo que vamos a hacer es mantener un registro de la ayuda del jugador. Luego en onDamage, vamos a disminuir eso en cinco, y lo que vamos a hacer es para el texto de la UI textency, es hacer referencia al componente del elemento, y en el componente del elemento hay una API para cambiar el texto llamado.text que sólo está disponible si tienes una imagen que es de tipo texto y cambia a ser this.playerhealth a string. String a string, y ahora queremos escuchar el evento, ahora queremos escuchar el evento que se va a disparar desde la pelota. Vamos a llamar a esto daño. Así que 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. Así que eso significa que podríamos hacer dot app dot on, nombrar un evento, el callback que es on damage, y el ámbito al que lo pasamos. Pero lo que hay que recordar aquí es, no lo vamos a correr en para esta demo en particular, pero si tienes varias 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 pasará es, lo que pasará es, cuando registramos este callback, también tienes que recordar desregistrarlo cuando la entidad es destruida, de lo contrario vas a tener este efecto de callback colgante. Así que, 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, que destruye todas las entidades, cargas una nueva escena, y si el evento se llama de nuevo, este callback todavía se disparará con este code, pero las cosas que están referenciando ya no existirán y simplemente obtendrás un error de inicio. En resumen, tenemos que recordar escuchar la función destruir en el tipo de script, así que dis on destroy, voy a llamar a una función no, que he escrito mal la función, con el salto de esto, y luego lo apago, así que dejan de escuchar el daño evento. Y este es el fallback que queremos deslistar con. Así que eso significa que cuando el script se destruye o cuando la entidad se destruye, dejará de escuchar el evento y todo se limpia bien. Vale, y ahora lo que queda por hacer es ahora omitir este evento. Así que volvemos a la pelota y lo que vamos a hacer es comprobar si es el suelo. Si this.entity, eso no es tu entidad. Así que si la otra entidad con la que hemos colisionado tiene un defecto, entonces this.app, dispara el evento en este objeto, lo que significa que el gestor de juego lo escuchará, llegará a él, este callback se disparará inmediatamente y vamos a actualizar nuestra health. Vuelve a ejecutar esto. Y... no está funcionando. ¿Por qué no estás funcionando?? ¿He deletreado fluorol? ¿He deletreado fluoro? Ah, distingue entre mayúsculas y minúsculas. Oops. Ahí vamos. En minúsculas. Sí, vale. Vuelve a ejecutar eso. Ahí vamos. Puedes ver en la parte superior izquierda, cada vez que golpeamos el suelo, la health baja. Y esa es nuestra lógica de juego. Una cosa que olvidé hacer es que me olvidé de destruir las pelotas cuando caen del borde. Así que ahora vamos a...... ¿Cómo conectas la UI a la puntuación? Así que Alexi acaba de mencionar cómo conectas la UI a la puntuación. Así que, volviendo a eso. Ve al gestor de juego. Alexi, ¿puedes enviarme un enlace a tu proyecto, por favor? Probablemente será más fácil si lo hago desde allí para que sepa hasta dónde has llegado. Uh, el elemento. Gracias. Copiar enlace.

Vale. Una gran ventaja de Play Canvas es que si estás vinculado a un equipo, o si formas parte del equipo, o si es público, puedes acceder a él inmediatamente, puedes acceder a él bastante fácilmente. Vale, entonces, lo que Alexi ha hecho es... veamos hasta dónde hemos llegado. Post Creates. Entonces, tenemos el Elemento de Texto aquí. Tipo Texto. Entonces, 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 a ser Entidad. Genial. Guárdalo. Vuelve a tu escena, ve a tu Ruta, y Repársala aquí arriba. Si haces clic en Seleccionar Entidad, y luego seleccionas Puntuación... Perfecto. Volvamos al code. Spawn, muestra health. Sí, eso debería funcionar. Averigüémoslo. Vale. Averigüémoslo. Haré esto para mí. Perfecto. Genial. Sí, una cosa que olvidé hacer, es que si saco mi cámara, y hago un gran zoom, puedes ver que he olvidado destruir objetos cuando caen fuera del borde. Esto se convierte en un problema cuando tienes como 200 objetos extraños todavía 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. Vuelve a los ballstrips, y básicamente obtenemos la posición del NC. Me estoy apresurando ahora, me quedan 3 minutos. Tengo que obtener la posición y si pos.y es menor que menos 2, entonces this.nc.destroy. Así que ahora, déjame hacer un poco más de zoom, ejecutamos esto, cuando está por debajo de menos 2 puedes ver que la bola ha sido destruida. Y esto asegura que no tengamos demasiados NCs en la escena siendo simulados o demasiados objetos físicos. Ahora, déjame restablecer esa posición de la cámara. Genial. Ah sí, publicando. Lo que podemos hacer ahora es publicar directamente desde play canvas y alojar la aplicación publicada para que sea accesible directamente desde cualquier lugar. Así que hay un enlace público, así que va a construir, publicar, publicar desde play canvases, y eso está bien, publicando, y lo que harán, tomará una construcción de tu aplicación, la publicará en los servidores de playground, y te dará un enlace permanente. Eso siempre enlazará directamente a tu construcción principal que se hace por esta etiqueta en una cosa. Así que ahora puedes enviar esto a cualquier persona que te guste. Puedes alojar eso en tu sitio web, enmarcarlo, o extenderlo a un cliente para su vista previa, etc. Y aquí es donde llegamos al final de la masterclass, que es justo a tiempo, literalmente. Si quieres mejorar el juego, o quieres trabajar con nosotros más, lo que puedes hacer es mirar, como en la pantalla de Game Over, así que cuando tu health está por debajo de cero, puedes hacer un reinicio, hacer Paths Clicks para Collision, así que puedes hacer pequeñas partículas de polvo, trabajar con diferentes tamaños de scripts, añadir pantallas de sacudidas cuando haces clic en la puntuación, y hacer que el juego sea progresivamente más difícil con el tiempo. Para enlaces más útiles, si te gusta PlaneCanvas y quieres hacer más con él, un curso que recomiendo es uno hecho por Joao del año pasado, que cubre partes más in-depth sobre motores de física, así que usando triggers, usando fuerzas para mover jugadores. Aquí vamos. Usando fuerzas, mueve al jugador, hace más animation, y también Game State. Este es un buen paso adelante de las presentaciones que he hecho. Además, 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 con Play Canvas en el futuro. Avísame lo que construyas 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 el Discord donde estoy bastante frecuentemente. Ve al Discord de Play Canvas. Puedes entrar allí, hacer preguntas a nuestra community, tenemos una moderación bastante buena. Tenemos una buena, saludable, que fue una community útil, especialmente en Discord con un montón de moderadores también. Así que, sí, dame un grito. Sí, esa es mi última diapositiva. Genial. Muchas gracias a todos. Espero que disfruten el resto del día. Ve a cualquier masterclass, diviértete. Nos vemos luego. Que tengas un buen fin de semana. ¡Adiós!