¡Potenciadores de Pixi!

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í.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.