¡Potenciadores de Pixi!

Rate this content
Bookmark

Un vistazo a las características más geniales y menos conocidas de Pixi.js.

Incluyendo tratamientos como:

- Mallas

- Animación Spine

- Filtros personalizados

- Texturas de renderizado y exportación de imágenes


Mostrando ejemplos de cómo puede hacer que trabajar con WebGL sea súper fácil y darle a tu contenido esa ventaja que necesita para destacar.

Mat Groves
Mat Groves
30 min
09 Jun, 2021

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Pixie es una poderosa herramienta para crear escenas y efectos en el desarrollo de software. Admite características como mapeo de texturas, animación Spine y filtros para crear efectos geniales. La charla también cubre el uso de texturas de renderizado para capturar y descargar imágenes, así como la importancia de la comunicación y una actitud positiva en el desarrollo de software. El orador comparte su viaje hacia la programación y discute el potencial de portar juegos de Unity a JavaScript utilizando tecnologías como web GL y web GPU.

Available in English

1. Introducción a Pixie y Creación de Escenas

Short description:

Potenciadores de Pixie. Usa Pixie para crear efectos agradables y mejorar tu contenido. Crearemos una escena usando Pixie y explicaremos el código y los efectos. Es como un Pokémon Snap económico. Haz clic en los peces para generar una Polaroid. Comienza creando un nuevo renderizador de Pixie. Establece el ancho, alto y agrega CSS para alineación. Crea un escenario, una escena y añádelos al renderizador. Usa el ticker de Pixie para los fotogramas de animación. Construye la escena y explica las características. Crea un fondo usando un objeto sprite y una textura.

Potenciadores de Pixie. Estas son características geniales que puedes usar en Pixie para crear efectos agradables y mejorar tu contenido. Vamos a hacer esto hoy a través de un ejemplo. Vamos a crear esta escena usando Pixie. Voy a repasar el código y explicar qué estamos usando y por qué para crear los diferentes efectos.

Básicamente, esto es como un Pokémon Snap económico. Puedes hacer clic en los pececitos y generará una pequeña Polaroid para ti. Hagámoslo.

Para empezar, vamos a ver nuestro código. Vamos a ordenarlo. Vamos a index.ts. Aquí vamos. Para empezar, vamos a crear un nuevo renderizador de Pixie. Es tan sencillo como importar un renderizador de Pixie. Obtenemos un nuevo renderizador, establecemos nuestro ancho y alto. Solo está codificado para facilitar hoy, así que no tenemos que preocuparnos por cambiar el tamaño. Entonces, creamos un renderizador, luego añado un poco de CSS que simplemente hace que esté centrado y se ajuste bien. Luego tomamos la vista del renderizador que es básicamente el elemento del lienzo en el que Pixie va a renderizar y lo añadimos al DOM.

Luego creamos un escenario y una escena y añadimos la escena al escenario y su contenedor que es como un elemento div o un nodo en su árbol DOM. Luego usamos el objeto ticker de Pixie que es básicamente una forma fácil de usar los fotogramas de animación solicitados. Así que solo añadimos una función a este ticker y significa que se llamará a 60 fps. Y luego lo que hacemos en cada fotograma es simplemente ir al renderizador, renderizar mi escenario y terminamos con esto. Bueno, no exactamente esto. Terminamos con esto, una hermosa pantalla negra. Así que vamos a construir esta escena y a medida que hablemos un poco sobre, a medida que toquemos características daré una pequeña explicación de cómo funcionan.

Lo primero que queremos hacer es crear un fondo. Así que si simplemente entro aquí, es muy sencillo. Solo creamos un objeto sprite que es lo más básico de Pixie. Aquí hay una textura y luego simplemente puedes poner esa textura en tu escena y moverla y alinearla, y cosas así.

2. Añadiendo Fondo, Peces y Primer Plano

Short description:

Agrega un fondo a la escena y crea un fondo básico encantador. Luego, crea un arreglo de peces y recórrelos para crear sprites de peces. Establece la posición, velocidad y voltea el pez según su velocidad. Agrega el pez a la escena y añádelo al arreglo de peces. Usa el ticker para mover el pez y envolverlo cuando llegue al borde. Agrega un primer plano a la escena. Ahora tenemos una escena con fondo, peces y primer plano.

Entonces no vamos a hacer nada. Simplemente vamos a crear uno usando este fondo PNG y luego vamos a tomar nuestra escena y vamos a agregar el fondo a la escena. Y veamos cómo se ve. Ahí vamos. Un fondo básico encantador.

A continuación, vamos a agregar algunos peces. Aquí está nuestra función para crear peces. Lo primero que hacemos es crear un arreglo vacío de peces. Aquí es donde vamos a almacenar una referencia a todos nuestros pequeños peces. Luego vamos a recorrer 20 veces y crear un sprite de pez usando un recurso de pez. Básicamente, el diseñador me dio siete recursos de pez, por lo que esto simplemente usará un sprite diferente hasta siete. Así que va pez 1, 2, 3, 4, 5, 6, 7 y luego vuelve a empezar. Una vez que tenemos un sprite de pez, simplemente establecemos el ancla en 0.5, 0.5, lo que significa que el centro de este objeto sprite estará en el punto cero en lugar de la esquina superior izquierda, que es el valor predeterminado. A continuación, establecemos la posición de nuestros peces, así que vamos a tener una coordenada x aleatoria en algún lugar de forma aleatoria en el ancho y luego una altura aleatoria menos 300 para que no terminemos, él no termine yendo, los peces no terminen bajo tierra. Luego asignamos una velocidad aleatoria, más o menos la velocidad, y luego volteamos el pez dependiendo de su velocidad. Así que si va en esa dirección, lo escalamos en menos 1 y si va en esa dirección, simplemente mantenemos la escala como 1. Luego tomamos nuestro pez, lo agregamos a la escena y añadimos nuestro pez al arreglo de peces. Ahora veamos qué obtenemos. Deberíamos obtener esto. Así que cada vez que actualizo obtengo algunos peces pequeños encantadores, simplemente moviéndose alrededor.

Lo siguiente que voy a hacer es usar el ticker nuevamente como lo hicimos antes para renderizar, pero lo vamos a usar para mover nuestros peces. Todo lo que hacemos es recorrer todos nuestros peces, aquí hay un pez, y vamos, bien, pez, añade su velocidad. Así que simplemente se moverá en la dirección que se le asignó aquí. Cuando llegamos al borde, simplemente usamos un módulo, lo que significa que se envolverá, así que cuando llegue a un lado se envolverá al otro y viceversa. Y ejecutémoslo ahora, ahí vamos, tenemos algunos peces nadando. Obviamente, lo genial de Pixie es que es bastante eficiente, por lo que realmente puedes tener muchos peces y siempre se mantendrá suave. Eso es un poco demasiado para nosotros, volvamos a 20, creo.

Bien, lo siguiente que queremos hacer es agregar un primer plano. Nuevamente, al igual que el fondo, muy sencillo, agrégalo a la escena. Ahí vamos, ahora tenemos fondo, peces y primer plano.

3. Pixi Rope Power-Up y Mapeo de Texturas

Short description:

Pixi Rope power-up. Distorsiona una imagen basada en una matriz de puntos. Crea y anima puntos usando matemáticas seno y coseno. Usa el power-up de cuerda simple para crear una textura basada en los puntos. Agrega la cuerda a la escena y posicionala.

Empezando a avanzar ahora. Bien, el primer power-up real de Pixi que quiero mostrarles es la Cuerda de Pixi. La forma en que funciona es que distorsiona una imagen basada en una matriz de puntos. Les mostraré lo que haremos con los puntos y luego les mostraré cómo se mapea eso a una textura.

Lo que estoy haciendo aquí es ir hacia la derecha... Esta es la longitud del segmento de mi... El espacio entre cada punto que quiero y estoy creando una matriz de puntos, y estoy recorriendo y simplemente agregando puntos. Ahora tengo esta vista de puntos de depuración, en la que no entraré en detalles, pero lo que hace es devolver una pequeña visualización de los puntos que acabo de crear y luego podemos ver cómo se representan en cada fotograma. Y luego simplemente lo centro donde queremos que esté nuestra cuerda y luego simplemente voy a agregar esta vista de puntos que he creado para que podamos ver esencialmente los puntos en la escena. Así que si actualizo esto ahora, ahí lo tienen. Estos son nuestros puntos. Aún no son muy interesantes.

Lo siguiente que queremos hacer es animar nuestros puntos. Así que si solo les muestro esto, lo que hacemos en el cable. Agregamos un ticker. Así que en cada fotograma, incrementamos un contador, un poco en una pequeña cantidad y luego recorremos nuestros puntos y básicamente, en función de esa posición del índice, y aplicamos matemáticas seno a ella. Así que lo que obtenemos es que los puntos se mueven hacia arriba y hacia abajo. Ahora, para hacerlo aún más genial, también aplicamos lo mismo a la coordenada X. Aplicamos un coseno que hace que se ondule un poco. Si les muestro cómo funciona, ahí lo tienen. Ahora pueden ver que hay un movimiento ligeramente más interesante. Obviamente, mover puntos está bien. Entonces, ¿cómo nos es útil esto? Bueno, la magia llega ahora. Deshagámonos de ese árbol de puntos. Realmente no lo necesitamos. Lo que realmente queremos es uno de los power-ups de Pixie, la cuerda simple. Así que creamos una nueva cuerda simple y pasamos una textura, y vamos a usar nuestra textura `ill`, que es simplemente una línea recta. Luego pasamos los puntos que creamos aquí arriba, y luego obtenemos un objeto `ill`, y simplemente lo agregamos a la escena y lo posicionamos como hicimos con los puntos antes. Y ahora verán qué sucede. Ahí lo tienen.

4. Pixie Distorsión de Textura y Soporte Spine

Short description:

Los puntos distorsionan la textura y se mapean a sí mismos en los puntos. Pixie calcula la masa del triángulo por ti, lo que te permite crear efectos geniales. Pixie también admite Spine, una herramienta de animación que registra todas las posiciones y animaciones realizadas por un diseñador. Solo necesitas cargarlo y agregarlo a la escena. Es una excelente manera de trabajar, ya que los diseñadores hacen todo el trabajo y tienen todo el control.

Los puntos básicamente distorsionan la textura, y la textura básicamente se mapea a sí misma en los puntos. Tengo una pequeña captura de pantalla aquí, básicamente. Así es como sucede. Toda esta masa del triángulo se calcula por ti en Pixie. Solo dices, aquí están mis puntos, y luego te permite hacer estos efectos geniales. Y puedes hacer un montón de cosas realmente geniales con cuerdas, especialmente si introduces física real.

Bien, sigamos adelante. Lo siguiente que quiero mostrarles es el soporte Spine. Así que Pixie tiene soporte para algo llamado Spine, que es una herramienta de animación realmente increíble que, en lugar de basarse en fotogramas clave, básicamente registra todas las posiciones y animaciones en medio de una animación realizada por un diseñador. Y luego, puedes ejecutar eso en tiempo de ejecución en Pixie. Aquí tienes un ejemplo. Y puedes ver que hay algunas animaciones realmente geniales. Lo mejor de todo es que los diseñadores hacen todo este trabajo, nosotros solo lo cargamos. Les mostraré cómo hacerlo hoy.

Lo primero que debes hacer es asegurarte de instalar el complemento Pixie Spine, que es el runtime. No está incluido en el Pixie principal. Luego lo importamos aquí. Y luego esta es nuestra función de creación de Spine. Creamos un Cargador de Pixie, que es la forma en que puedes cargar cualquier cosa en Pixie, realmente. Luego vamos a Cargador, Agregar, Cangrejo. Y luego pasamos el JSON, que es el formato de la animación de Spine. Luego llamamos a la función Cargar, y cuando se completa, nos da un callback con el objeto de recurso. Ahora, ese objeto de recurso tiene el cangrejo, que hemos definido aquí, y luego pasamos los datos de Spine data para configurar la animación. Y este es nuestro cangrejo. Y es como cualquier otro objeto de Pixie, simplemente puedes agregarlo directamente a la escena. Entonces obtenemos nuestro cangrejo, establecemos su posición, y luego simplemente establecemos la animación como animación, que es el nombre de la animación en la animación, lo cual es genial. Luego lo agregamos a la escena. Y deberíamos tener un pequeño cangrejo. Ahora, esto es realmente genial, porque todo lo que hice fue cargarlo y agregarlo y los diseñadores hicieron todo el trabajo y tuvieron todo el control. Y es una excelente manera de trabajar, porque significa que todos pueden dar lo mejor de sí mismos.

5. Pixi Efecto de Brillo y Filtros

Short description:

Agrega un efecto de brillo con rayos de Dios. Utiliza los modos de mezcla de Pixi para diferentes estilos de renderizado. Explora los filtros de Pixi, comenzando con un filtro de desenfoque. Aplica filtros a objetos utilizando el objeto de filtros. Crea un efecto de ondulación de agua utilizando un filtro de desplazamiento y un sprite de desplazamiento de agua.

Muy bien, a continuación, quiero mostrarles rápidamente el efecto de brillo. Nuevamente, muy básico, solo estamos agregando un par de rayos de Dios. Así que nuevo sprite, agregar a la escena, nuevo sprite agregar a la escena. Y luego en cada fotograma, simplemente vamos a usar un coseno y un seno nuevamente en un tick para básicamente deslizarlos entre sí un poco para dar un poco de movimiento interesante. Esto nos da, apenas se pueden ver, están un poco polvorientos, pero están justo allí en la animación.

Lo que podemos hacer es usar uno de los modos de mezcla de Pixi en lugar de un estilo de renderizado normal. Podemos usar un modo de mezcla de suma, que básicamente es aditivo. Agrega píxeles a medida que dibuja en lugar de realizar la mezcla alfa normal. Hay varios modos de mezcla disponibles en Pixi. Muchos de ellos solo funcionan en canvas, pero algunos de ellos, como superposición y multiplicación, también funcionan en WebGL. Así que vamos a usar la suma y te mostraré la diferencia que puede hacer. Ahí lo tienes. Se ve mucho más como luz y la suma siempre es genial si quieres iluminar una escena.

Bien, sigamos adelante, lo siguiente que quiero mostrarles es cómo usar los filtros de Pixi. OK, entremos y veamos los filtros. Muy bien. Estamos pasando nuestra escena nuevamente, como antes, y esta vez vamos a crear un nuevo, vamos a importar el objeto de filtros de Pixi, y vamos a crear un nuevo filtro de desenfoque. Luego, para nuestra escena, simplemente, cada objeto en Pixi tiene un objeto de filtros al que puedes asignar filtros. Así que aquí simplemente escribimos filters es igual a este desenfoque y eso es básicamente todo lo que se necesita para crear un filtro y aplicarlo a cualquier cosa que desees en Pixi. Así que si actualizo esto ahora. Ahí lo tienes. Tenemos una versión que hace que sea muy difícil ver qué está sucediendo, pero demuestra el punto. Um, ese es un filtro útil, pero aquí quiero mostrarles un filtro un poco más advanced. Así que lo que vamos a hacer aquí es crear el efecto de ondulación del agua utilizando lo que se llama un filtro de desplazamiento, que es otro filtro estándar que definitivamente es uno de mis favoritos. Lo usamos siempre que podemos, pero el agua básicamente muestra lo mejor. Entonces lo que hacemos es crear un desplazamiento de agua. Cargamos un sprite desde nuestro archivo de desplazamiento de agua, JPG. Y luego, um, establecemos el punto de partida en repetir, y luego establecemos la escala en seis. Así que es bastante grande y ocupa toda la pantalla, y luego agregamos ese sprite de desplazamiento a la escena.

6. Pixi Filtro de Desplazamiento y Múltiples Filtros

Short description:

Crea un filtro de desplazamiento para desplazar píxeles según los canales de color. Aplica el filtro para crear un efecto ondulado. Ajusta la intensidad y posición del sprite para controlar el efecto. Explora el poder del filtro de desplazamiento cambiando texturas y agregando múltiples filtros.

Así que les mostraré cómo se ve eso. Ahí vamos. Estos son los desplazamientos, ¿verdad? Y la idea es que cualquier cosa en el canal rojo desplace todos los píxeles en el eje X y cualquier cosa en el canal verde desplace los píxeles en el eje Y. Así que sí, no es tan interesante por ahora. Pero si creamos un nuevo filtro de desplazamiento y pasamos ese sprite, y luego establecemos una intensidad de cien, podemos aplicar ese filtro tal como lo hicimos con el desenfoque. Ahí vamos. Así, exactamente así. Ahora, si lo actualizo, verán que ya no lo estamos representando, sino que lo estamos utilizando como entrada del filtro, por lo que todo se ve un poco más ondulado. Um, ahora, para mostrarles realmente hasta dónde puede llegar, ahí vamos, eso es lo que puede parecer si lo volvemos un poco loco, pero tal vez no se vea tan bien ahora. Así que volvámoslo a mil. Y luego, lo otro genial que puedes hacer es ahora que tenemos este sprite en nuestra escena, puedo moverlo y a medida que se mueve, desplazará los píxeles de una manera diferente. Así que aquí vamos a básicamente ir, aquí estamos, aquí está nuestro sprite de desplazamiento y luego en cada fotograma, simplemente lo movemos dos píxeles hacia arriba. Y esto es lo que sucede cuando lo hacemos. Ahora pueden ver que parece que tenemos este efecto de agua ondulante realmente hermoso. Ahora puedes hacer mucho más con el filtro de desplazamiento, puedes, quiero decir, simplemente cambiar esa textura por otra y se verá completamente diferente. Puedes cambiar la intensidad, puedes cambiar la intensidad en X, la intensidad en Y. Es un filtro realmente poderoso. Lo otro que les mostraré rápidamente es que es muy fácil agregar múltiples filtros. Así que si quisieras un filtro de desenfoque y un filtro de desplazamiento, simplemente haces esto y pasas un array de varios filtros. Incluso podrías aplicar el desenfoque dos veces. Así que si te lo muestro ahora, ahí lo tienes. Eso es como un doble desenfoque y con un filtro de desplazamiento, incluso podemos desplazarlo nuevamente al final. Y así, sí, puedes apilar tantos filtros como quieras. Ahora, obviamente, cuanto más agregues, puede tener implicaciones deperformance e implementación performance, pero en general, debería estar bien. Muy bien, sigamos adelante.

7. Agregando Vignette y Captura de Imagen

Short description:

Agregando un vignette para enmarcar el contenido. Función de captura de imagen para tomar una instantánea de la escena. Crear una textura de renderizado y una matriz para renderizar la escena. Establecer la traducción de la matriz basada en las coordenadas del mouse. Utilizar la función de renderizado para capturar la escena.

Así que esto es algo muy simple. Esto es agregar un vignette. Un gráfico de vignette que enmarca el contenido. Así que si les muestro esto ahora, ese borde negro hace que se vea un poco más bonito. A nuestros diseñadores les encanta darme un vignette. Bien. Lo siguiente que quiero mostrarles es la función de captura de imagen. Básicamente, convertir esto en el presupuesto de Pokémon Go, como Pokémon Snap del que hablamos. Así que vamos aquí y echemos un vistazo, echemos un vistazo y veamos qué está pasando.

Entonces, para hacer la función de la cámara, básicamente tomamos nuestra escena y luego la imagen containers. Así que una vez que hacemos una pequeña parte de palabras, ese es el contenedor en el que lo vamos a agregar. Pero esta es la escena de la que vamos a tomar una instantánea. Así que lo que hacemos es crear eso para hacer nuestra escena interactiva. Una vez que hayas hecho eso, básicamente obtienes los mismos eventos que podrías obtener en el DOM. Así que cuando señalas con el dedo, eventos táctiles, eventos de mouse, todo eso. Así que decimos que la escena, queremos que sea interactiva y luego decimos, bien, escucha cuando se señala hacia abajo y cada vez que hagamos esto, se llamará a esta función, bien. Así que aquí está nuestra, aquí está nuestra magia. Básicamente creamos algo llamado una textura de renderizado. Así que simplemente hacemos render texture dot create y le damos un ancho y un alto. Así que eso nos da una textura vacía de 512 por 512, con la capacidad de agregar píxeles y hacer lo que queramos y dibujar lo que queramos en ella. Pero sí, comienza en blanco. Y luego lo otro que hacemos es crear una matriz que se utilizará para cuando digamos, Oh, queremos renderizar la escena en esta textura de renderizado. Queremos decir dónde, y eso se puede representar como una matriz. Así que no tienes que entender completamente todas estas cosas, pero puedes hacer cosas increíbles. Lo primero que hacemos es establecer el TX y TY, que es como la traducción de la matriz. Así que obtenemos, cuando renderizamos la escena quiero traducirla por, esto es en realidad las coordenadas globales del mouse X y del mouse Y. Así que significa que quiero que esto sea, este mouse aquí básicamente dice, donde sea que el usuario haga clic, quiero renderizar la escena con ese punto siendo el centro de la escena. Esto simplemente limita ese valor. Así que significa que si, si estamos demasiado lejos y parte de esto está fuera de pantalla, y nos aseguramos de que no se pase de eso. Luego hemos creado esto, esta es la línea mágica aquí, ¿verdad? Así que vamos a renderer, .render, que estábamos haciendo antes, lo estábamos haciendo aquí, ya sabes, renderer, .render stage, lo hacemos en cada fotograma, y hacemos la cámara, cuando haces clic vamos a renderer, .render, y luego pasamos la escena.

8. Usando Texturas de Renderizado

Short description:

Pasar la textura de renderizado para renderizar la escena. La propiedad Clear determina si debe borrarse. Usar la matriz para definir qué partes dibujar y cómo transformarlas. Obtener una textura interna para adjuntar a los sprites.

Luego pasamos la textura de renderizado, que básicamente es esto, esto es a lo que quiero renderizar. Así que voy a renderizar esta escena en esto, en esta textura. Si está vacío, entonces se renderiza en la pantalla. De lo contrario, se renderiza en esta textura de renderizado. Esta es la propiedad Clear. ¿Queremos borrarla, verdadero o falso? No es realmente importante aquí. Y luego la matriz. Entonces, ¿qué partes debo dibujar y cómo debo transformarlas? Una vez que llegamos aquí con eso, ahora tenemos una textura interna que podemos usar y adjuntar a los sprites y cosas, y luego simplemente usarla como si fuera otra textura que acabamos de cargar.

9. Creando una Polaroid y Descargando Imágenes

Short description:

Crea un contenedor de imagen para representar la imagen como una Polaroid. Usa un objeto de gráficos de Pixie para dibujar un rectángulo blanco con un rectángulo negro como sombra. Agrega un Sprite con la textura de renderizado como textura principal y establece la posición. Captura imágenes al estilo de Pokemon Snap usando texturas de renderizado. Extrae el lienzo de la textura de renderizado para descargar la imagen como un lienzo regular.

Muy bien, genial. Entonces, avanzando, esto es solo un contenedor de imagen. Así es como podemos representar esta imagen y hacer que parezca una pequeña Polaroid. Creamos un contenedor y luego creamos el fondo, que es como el marco de la Polaroid. Así que es solo un rectángulo blanco con un poco de negro, un rectángulo blanco con un rectángulo negro detrás como sombra. Esto se hace usando un objeto de gráficos de Pixie, que es como una API de dibujo muy simple.

Así que voy a explicar rápidamente lo que estamos haciendo aquí. Nuevamente, comenzamos a rellenar con negro con una opacidad de 0.3, luego dibujamos este rectángulo. Luego, simplemente especificamos una posición X, Y, ancho y alto. Luego, comenzamos otro relleno con blanco y dibujamos el mismo rectángulo nuevamente, pero ligeramente desplazado. Así es como vamos a hacer, ese es nuestro dibujo de Polaroid. Luego creamos un nuevo Sprite y pasamos nuestra textura de renderizado como la textura principal del Sprite y establecemos la posición, luego agregamos el fondo y agregamos el Sprite a la imagen. Así es nuestra Polaroid. Luego agregamos la imagen al contenedor de imagen. Y luego hacemos un poco de alineación, que no es tan importante aquí.

Ahora, si les muestro esto ahora, cada vez que hago clic, pueden ver que puedo capturar una hermosa imagen al estilo de Pokemon Go, perdón, al estilo de Pokemon Snap. Y veamos si puedo capturar a este cangrejo cuando salta. Vamos cangrejo, salta. Ahí vamos, perfecto. Así que ahí lo tienen. Así es como pueden usar texturas de renderizado para, ya saben, hacer cosas geniales como tomar fotos de cosas. Entonces, lo último que quiero mostrarles es, ¿verdad? Está bien tener otra imagen dentro de tu escena, pero ¿qué pasa si quieres descargar esa imagen y guardarla como una imagen legítima y real? Para hacer eso, este es el código que necesitas. Y voy a explicártelo rápidamente. Básicamente, tenemos nuestro renderizador y tiene un módulo llamado extract. Entonces simplemente hacemos renderer.extract, y hay varias formas diferentes en las que puedes extraer información. Puedes extraerla como un lienzo, como una cadena codificada en base 64, o incluso como una imagen HTML regular. Pero para poder descargarla, lo mejor es extraerla como un lienzo. Así que le decimos, renderizador, extrae el lienzo de esta textura de renderizado. Y eso me devuelve un lienzo regular lleno de los píxeles de este renderizado.

10. Descargando Imágenes y Conclusión

Short description:

Llama a la función de dos blobs para convertir la imagen en un blob JPEG. Usa la función URL create object URL para obtener una URL descargable. Crea un elemento de enlace con la URL de la imagen como href. Muestra las imágenes descargadas. Fin de la charla. Juega con la escena, toma fotos y descarga el código. Todo es de código abierto.

textura. Ahora que tengo esto, puedo llamar a la función de dos blobs, que básicamente lo convierte en un blob base, un blob JPEG. Y esta es la calidad del JPEG. Y tiene un callback. Y una vez que se completa, se me devuelve el blob. Luego uso una URL, create object URL, que me proporciona una URL que básicamente se puede descargar.

Creo un elemento de enlace. Establezco el href como esta URL de imagen. Solo establezco el nombre de descarga. Y luego agrego el enlace a un clic falso. Y luego elimino el enlace. Y eso es todo, eso descargará una imagen.

Así que ahora voy a mostrarte eso. Así que aquí estoy creando mis imágenes. Y puedes ver que mi Chrome está empezando a volverse loco descargando todas estas imágenes para mí. Y solo te mostraré esas en movimiento. Así que aquí vamos. Puedes verlo. Ahí lo tienes. Aquí están todas mis capturas de pantalla que ahora puedo compartir con todos mis amigos y, ya sabes, como fondo de escritorio de los usuarios o cualquier cosa loca que quieras hacer. Muy bien, genial. Así que esto nos lleva al final de la charla. Si quieres jugar con esto, con la escena, puedes ir aquí y simplemente darle un vistazo, tomar algunas fotos del cangrejo y la anguila. Pero aún mejor, puedes obtener este código. Todo es de código abierto. Todos los recursos son de código abierto. Entonces puedes obtener este código, descargarlo, jugar con él, y así comprenderlo un poco mejor. Sé que en 20 minutos es un poco breve para tal vez abarcar todas esas cosas. Así que aquí puedes echar un vistazo adecuado y tomarte tu tiempo.

11. Importancia de la Comunicación y Actitud Positiva

Short description:

La característica más importante de un desarrollador fuera de la codificación es la comunicación, seguida de una actitud positiva. La inteligencia es menos importante, mientras que la determinación es valiosa. Ser amable y positivo en un equipo es crucial, incluso más que las habilidades de codificación. El viaje y el trabajo en equipo son importantes para proyectos exitosos.

Genial. Bueno, eso es todo. Sí. Sígueme en Twitter en Dormat23. Si quieres ser amigos, pero sí, muchas gracias por tomarte el tiempo de escucharme. Saludos. Gracias por unirte. La pregunta fue, ¿cuál de estas características consideras la más importante para un desarrollador fuera de la codificación? Y el ganador, ¡wow, por mucho, es la comunicación con un 49%, seguida de un 39% para una actitud positiva. Matt, ¿qué opinas de esto? ¿Estás de acuerdo?

Sí, creo que eso suena correcto. Creo que, um, estoy de acuerdo. La inteligencia definitivamente está en el último lugar porque puedes hacer todas estas cosas sin ser naturalmente inteligente. Creo que la determinación está un poco subrepresentada porque creo que la determinación es como el sustituto de la inteligencia. Como yo no me considero particularmente inteligente, pero sí me considero, uh, si tengo un problema, seguiré trabajando en ello. Y sé que eventualmente puedo resolverlo. Lo cual significa que no tengo que hacer mi cerebro más grande, lo cual es bastante difícil de hacer. Um, así que creo que sí, la determinación, la determinación es definitivamente importante. Pero sí, la comunicación está por encima de todo porque escribimos código para humanos. Hablamos con humanos, creamos cosas para humanos. Así que todo debe ser para otras personas primero y realmente para, la computadora en último lugar. Sí. Sí. De hecho, no me sorprendería si la actitud positiva estuviera por encima. Porque, bueno, si tienes que estar en un equipo, a menos que estés trabajando solo, por supuesto, pero si vas a trabajar en un equipo, ser positivo y agradable para trabajar es, bueno, incluso más importante que tus habilidades de codificación, creo. Puedes ser el mejor programador, el más rápido, el más seguro, la persona que escribe código más accesible. Pero si no eres agradable para trabajar, entonces nadie te quiere en el equipo, ¿verdad?

Totalmente cierto, hombre. Incluso se aplica a proyectos y equipos en general, ¿verdad? Es como, puedes obtener el mismo resultado final, pero el viaje puede ser horrible y doloroso o encantador y, ya sabes, respetuoso. Y es lo mismo, puedes obtener el mismo resultado, pero el equipo no volverá a trabajar contigo, no querrán, ya sabes, así que sí, definitivamente. Sí, supongo que todos son importantes, excepto la inteligencia, todos son importantes. Sí. Pero tu pregunta fue, ¿cuál es lo más importante? Pero tu pregunta fue, ¿cuál es lo más importante? Y llegamos a eso. Sí. Así que todos los que están viendo, quiero recordarles que Matt está abierto a preguntas.

12. El Viaje de Matt en la Codificación

Short description:

Comenzó a programar a una edad temprana. Construyó un juego básico. Exploró la codificación creativa con Flash. Pasó a los juegos móviles y luego volvió a JavaScript. JavaScript es el lenguaje más accesible para llegar a más personas.

Así que ve al canal de Discord community para hacer preguntas a Matt sobre su charla. Mientras la gente escribe, también me preguntaba sobre tu viaje para convertirte en desarrollador. ¿Puedes contarnos un poco sobre eso?

Sí, definitivamente. Así que, empecé a aprender a programar cuando era bastante joven. Mi papá es programador. Y teníamos un Atari ST. Así que él me enseñó cómo hacer cosas muy básicas, ya sabes, como bucles infinitos y esas cosas. Y terminé escribiendo un pequeño juego básico donde un píxel se movía por la pantalla y presionabas el botón para disparar. Esa fue mi primera incursión en la programación. Luego dejé eso de lado durante años. Decidí que quería dedicarme al arte y al dibujo y esas cosas.

¿Así que construiste Space Invaders? Era como Space Invaders malo. Bueno, bastante genial. Era un niño, ¿verdad? Sí, sí. Estaba muy contento con eso. Así que, sí. Y luego seguí un camino de diseñador, estudié, siempre estudié computadoras y design al mismo tiempo. Y cuando entré en la industria, comencé como diseñador junior porque pensé que eso era lo que se me daba mejor. Pero resultó que había un punto intermedio que era como la codificación creativa, donde puedes hacer cosas visuales, pero lo haces todo a través del código. Así que empecé a interesarme por ese aspecto y fue cuando estaba Flash y Flash era algo realmente grande.

Así que durante todo ese tiempo, ya sabes, cuando la gente estaba haciendo cosas divertidas y locas. Yo solo quería ser parte de eso. Y luego, sí, trabajé en Flash hasta que desapareció y luego cambié a los juegos móviles, fui desarrollador de iOS por un tiempo. Y luego Javascript se volvió realmente bueno de repente con WebGL y todo eso y volví a cambiar. Y no he mirado atrás desde entonces. Parece ser la mejor plataforma para llegar a más personas. Sí. Sí. La web es el lugar más accesible y Javascript es el lenguaje más accesible, supongo en la mayoría de los dispositivos, así que es cierto. Es gracioso.

13. Herramientas Creativas, Flash y Motores de Juego

Short description:

Quería ser animador y comencé a animar en Flash. A medida que hacía más, quería automatizar y escribir código. Me adentré en el desarrollo y descubrí la capacidad de hacer juegos y cosas locas. Necesitamos una herramienta creativa que cubra eso, no Flash. Existen editores de JavaScript WYSIWYG como Dreamweaver y motores de juego como Unity y PlayCanvas, pero Unity para la web aún no está maduro. En un año, todo eso va a cambiar.

Suena muy similar porque también, de hecho, quería ser animador, así que animaba en Flash. Y en cierto punto había algunas cosas que quería hacer que eran repetitivas. Así que pensé que podía hacer esto con código. Hay esta cosa llamada ActionScript. Así que ve a y reproduce, enmarca esto y aquello. Sí. Y en cierto punto están las animations. Oh, cuanto más lo hacía, más quería automatizar y escribir código para ello. Y así es como me adentré en el desarrollo. Sí. Realmente sabía que quería hacer esto. Sí. Sí.

No soy muy diferente. Definitivamente comenzó como Flash. Todo se trataba de animar en la línea de tiempo. Ve a y detente. Ve a y reproduce. Y luego, sí, te das cuenta de que puedes programar cosas y, de repente, haces esto y antes de que te des cuenta, estás escribiendo más código que animando. Y luego, desbloqueas la capacidad de hacer juegos y cosas realmente locas. Entonces, sí, necesitamos eso de vuelta en el mundo, no Flash, sino alguna herramienta creativa que cubra eso. Sí.

Editor JavaScript WYSIWYG. Bueno, tenemos Dreamweaver. No sé si eso todavía existe, pero. Sí, creo que lo más cercano al mundo de los juegos es probablemente cosas como Unity. Sé que también hay algunos motores geniales, pero algo como PlayCanvas, que es como la versión amigable para la web de, uh, lo que Unity está tratando de hacer. Así que creo que hay un espacio para los creadores de juegos como ese, pero sí, Unity para la web aún no está maduro. Esto significa que si quieres hacer juegos web, esa probablemente no es la opción más viable porque, ya sabes, la web se trata de ser pequeño, muy pequeño y atraer usuarios lo más rápido posible. Y creo que este tipo de cosas transpiladas ahora mismo son un poco engorrosas para la web, pero eso cambiará en un año. Todo eso va a cambiar.

14. Portar Juegos de Unity a JavaScript y Web GPU

Short description:

Mañana, es posible portar un juego de Unity a JavaScript. Exportar a web GL es exigente pero ofrece resultados fenomenales. Los emocionantes avances como web GPU proporcionarán un rendimiento más rápido, hasta dos a ocho veces más rápido que web GL. Esto beneficiará a frameworks como Pixie, permitiendo un renderizado aún más rápido.

Sí. Quiero decir, mañana podría salir algo que haga posible portar un juego de Unity a JavaScript. Así que, sí, quiero decir, puedes hacerlo como una, hay, hay, hay una exportación, como ellos, ellos lo publican en web GL y es bastante fenomenal. Lo que obtienes es simplemente, sí, es muy bueno. Es bastante exigente. Así que, ya sabes, la computadora que necesitarías es más exigente que la computadora que necesitarías para ejecutar el nativo, pero hay muchas cosas geniales en la web que están surgiendo, ¿verdad? Como el web GPU que se avecina, que será una forma completamente nueva de comunicarse con la GPU, lo cual va a, ya sabes, lo último que leí, iba a ser hasta dos a ocho veces más rápido que web GL una vez que esté, ya sabes, si vuelves a hacer lo mismo, incluso cosas como Pixie podrán volver a hacerlo y tener un proveedor de web GPU, lo que significa que podremos obtener todo funcionando aún más rápido. Um, API freelance de frutas. Así que estoy muy emocionado por ese. Eso suena bastante bien. Um, Matt, quiero agradecerte por unirte a nosotros aquí hoy. Um, y, uh, sí, si alguien quiere hacer alguna pregunta, creo que tienes una sala de oradores en spatial chat a la que vas a ir ahora, ¿verdad? Genial. Sí, estaré allí. Sí. Muy bien. Uh, con eso Matt, uh, una vez más, gracias por unirte a nosotros y espero verte de nuevo pronto. Solo chicos.

Check out more articles and videos

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

Optimizing HTML5 Games: 10 Years of Learnings
JS GameDev Summit 2022JS GameDev Summit 2022
33 min
Optimizing HTML5 Games: 10 Years of Learnings
Top Content
The open source PlayCanvas game engine is built specifically for the browser, incorporating 10 years of learnings about optimization. In this talk, you will discover the secret sauce that enables PlayCanvas to generate games with lightning fast load times and rock solid frame rates.
Building Fun Experiments with WebXR & Babylon.js
JS GameDev Summit 2022JS GameDev Summit 2022
33 min
Building Fun Experiments with WebXR & Babylon.js
Top Content
During this session, we’ll see a couple of demos of what you can do using WebXR, with Babylon.js. From VR audio experiments, to casual gaming in VR on an arcade machine up to more serious usage to create new ways of collaboration using either AR or VR, you should have a pretty good understanding of what you can do today.
Check the article as well to see the full content including code samples: article. 
Making Awesome Games with LittleJS
JS GameDev Summit 2022JS GameDev Summit 2022
34 min
Making Awesome Games with LittleJS
LittleJS is a super lightweight game engine that is easy to use and powerfully fast. The developer will talk about why he made it, what it does, and how you can use it to create your own games. The talk will include a demonstration of how to build a small game from scratch with LittleJS.
How Not to Build a Video Game
React Summit 2023React Summit 2023
32 min
How Not to Build a Video Game
In this talk we'll delve into the art of creating something meaningful and fulfilling. Through the lens of my own journey of rediscovering my passion for coding and building a video game from the ground up with JavaScript and React, we will explore the trade-offs between easy solutions and fast performance. You will gain valuable insights into rapid prototyping, test infrastructure, and a range of CSS tricks that can be applied to both game development and your day-to-day work.
Boost the Performance of Your WebGL Unity Games!
JS GameDev Summit 2023JS GameDev Summit 2023
7 min
Boost the Performance of Your WebGL Unity Games!
Unity, when deployed on the web, faces three critical challenges: build size, memory usage, and overall performance. This lecture delves deep into advanced optimization techniques to help you address each of these issues. Attendees will gain insights into:
- Effective strategies for optimizing textures, audio, and models.- A detailed analysis of our ASTC experimentation with Unity, shedding light on the unexpected results despite Unity's claims.- A comprehensive guide to Unity's memory profiling tool and its implications.- An exploration of lesser-known Unity settings that remain underutilized by many developers.
Additionally, we'll introduce our proprietary tool designed specifically for Unity optimization. We will also showcase CrazyGames' developer dashboard, our platform that enables developers to monitor and enhance the performance of their web-based games seamlessly. 
Join us to equip yourself with the latest strategies and tools to elevate your Unity web gaming projects.

Workshops on related topic

Make a Game With PlayCanvas in 2 Hours
JSNation 2023JSNation 2023
116 min
Make a Game With PlayCanvas in 2 Hours
Featured WorkshopFree
Steven Yau
Steven Yau
In this workshop, we’ll build a game using the PlayCanvas WebGL engine from start to finish. From development to publishing, we’ll cover the most crucial features such as scripting, UI creation and much more.
Table of the content:- Introduction- Intro to PlayCanvas- What we will be building- Adding a character model and animation- Making the character move with scripts- 'Fake' running- Adding obstacles- Detecting collisions- Adding a score counter- Game over and restarting- Wrap up!- Questions
Workshop levelFamiliarity with game engines and game development aspects is recommended, but not required.
How to make amazing generative art with simple JavaScript code
JS GameDev Summit 2022JS GameDev Summit 2022
165 min
How to make amazing generative art with simple JavaScript code
Top Content
WorkshopFree
Frank Force
Frank Force
Instead of manually drawing each image like traditional art, generative artists write programs that are capable of producing a variety of results. In this workshop you will learn how to create incredible generative art using only a web browser and text editor. Starting with basic concepts and building towards advanced theory, we will cover everything you need to know.
PlayCanvas End-to-End : the quick version
JS GameDev Summit 2022JS GameDev Summit 2022
121 min
PlayCanvas End-to-End : the quick version
Top Content
WorkshopFree
João Ruschel
João Ruschel
In this workshop, we’ll build a complete game using the PlayCanvas engine while learning the best practices for project management. From development to publishing, we’ll cover the most crucial features such as asset management, scripting, audio, debugging, and much more.
Introduction to WebXR with Babylon.js
JS GameDev Summit 2022JS GameDev Summit 2022
86 min
Introduction to WebXR with Babylon.js
Workshop
Gustavo Cordido
Gustavo Cordido
In this workshop, we'll introduce you to the core concepts of building Mixed Reality experiences with WebXR and Balon.js.
You'll learn the following:- How to add 3D mesh objects and buttons to a scene- How to use procedural textures- How to add actions to objects- How to take advantage of the default Cross Reality (XR) experience- How to add physics to a scene
For the first project in this workshop, you'll create an interactive Mixed Reality experience that'll display basketball player stats to fans and coaches. For the second project in this workshop, you'll create a voice activated WebXR app using Balon.js and Azure Speech-to-Text. You'll then deploy the web app using Static Website Hosting provided Azure Blob Storage.