Name: Masterclass de Codificación en Vivo de Juegos Pequeños
Uploaded: 2023-10-03T14:00:00.000Z
Duration: 1 h 55 min 5 s
Description: Sumérgete en el cautivador mundo del desarrollo de microjuegos con Frank Force en este interactivo masterclass de codificación en vivo. Diseñado tanto para desarrolladores experimentados como para curiosos principiantes, esta sesión explora los desafíos únicos y las alegrías de crear juegos y demos con restricciones extremas de tamaño.

Eso es un poco extraño. El 3 se supone que es la mitad de lo que realmente es. ¿verdad? No sé, se siente como estos valores parecen no estar muy bien distribuidos si eso tiene sentido es igual a 100. ¿Qué pasa si supongo que eso es correcto? Simplemente sucede que están escalonados, supongo. ¿Realmente necesita ser dos pi? No creo. Creo que puedo poner lo que quiera ahí. Creo que puedo, ¿necesitamos C? No creo que necesitemos el C tampoco. No necesitamos nada de eso. Oh, por eso estaba escalonado, ¿verdad? Porque no puse A aquí en lugar de poner, así que ahora es por eso estaba así. Eso tiene sentido. Pero eso es 100. envolviéndose que es 200 300 También puedo dividir a la mitad mi altura y luego simplemente simplemente duplicaremos eso y haremos que estos sean un poco más altos Haré esto un poco más ancho para cubrir la brecha ahí vamos el mismo truco para hacer la parte superior más oscura no funciona aquí porque eso era solo lo antiguo aquí, pero el interior más oscuro lo estaba haciendo alrededor del anillo de la parte superior no en el verdadero de eso el trato completo um, okay, tenemos dibujando un pequeño Rex pequeño Rex en lugar de un conjunto de elipses, lo que significa que podría hacer algo como Esto es un Y, el coseno. A podría afectar al cerebro, creo, no veo qué sucede. Una de las cosas que me encanta de este tipo de programa es que puedes probar cosas y ver qué sucede. No es algo tan importante. Creo que funcionó, solo necesito normalizar esto un poco. Y combinaremos esto. Esto es un poco lento en este momento, en realidad, porque la combinación de estos dos bucles es bastante. Entonces, la razón por la que quería hacer esto, dividir esos bucles en primer lugar, es para poder hacer algo como esto. Entonces podría, qué puedo hacer, mostrar algún tipo de tener algún tipo de valor interesante aquí como eso. No sé si esto será suficiente para ver algo. Tendremos que hacer que estos valores sean un poco más grandes. Si podemos ver un patrón simple aquí. No sé cuánto me gusta eso, pero es algo. sí, sí. Tomemos esa parte de luminosidad. Pongámosla en la parte de hacer y veamos si tal vez haya. Algo más interesante, eso está un poco mejor. OK. Va avanzando, va avanzando. No está mal del todo. Es algo que acabamos de armar y. En unos 20 minutos. No está mal del todo. Volvamos a esto. Se está ejecutando muy lento, sin embargo. OK, bueno, ese es un buen comienzo para nuestra charla. ¿Qué más podemos hacer? Echemos un vistazo a lo que hay en Twitter. Ahora mismo, tal vez nos inspiremos con una idea, algo para hacer. Tenemos algunas cosas fractales. Algunos árboles, puedo mostrarte cómo hacer un árbol. He visto muchas de estas remezclas del mismo fractal. Podemos jugar con eso por un minuto. Entonces, alguien hizo una pequeña herramienta de dibujo que es bastante genial. Vamos a tomar este fractal. Eso es genial. Esto parece interesante. Lo que generalmente haremos es abrirlo aquí. OK, así que lo guardamos ahí.

Tiene muchos detalles. ¡Tiene muchos detalles! Es muy genial. Entonces, este color... esta combinación de negro y azul proviene de ahí. También podría acelerar un poco la velocidad de renderizado... ¿Qué está pasando aquí? Cosas extrañas... Vamos a probar algunos valores y ver qué sucede. Muy bien. Parece responder bien, okay. Ahí. Debería estar creciendo y cambiando. Oh, eso fue bastante genial. este. Algunos de estos cambios parecen hacer que desaparezca por completo. Me pregunto por qué. ¿se sale de la pantalla? Además, quiero decir, es solo un coseno. Se está saliendo de la pantalla. Podría ser esto porque este número se vuelve más grande. Oh, también está un poco más tenue. eso es bastante genial lo simple que es. Luego tienes el relleno directo ahí. Así que tiene un A más B y un B. Asigno un coseno. Cosas interesantes. Y un A y un B y un B de vuelta en él. De acuerdo. Se fue. De acuerdo. Entonces, queso, Estoy pensando No sé. No sé. ¿Hay alguna pregunta o algo en el chat? No veo nada en el chat, así que no tengo idea de lo que a la gente le gustaría ver. Tal vez hagamos un pequeño juego, algo interactivo. ¿Interactivo? Sí. Oh, gracias. Alguien sugirió un juego interactivo. Creo que tenía algo en lo que estaba trabajando. Este aún no lo he publicado. Pero es lo suficientemente pequeño para encajar. Un juego de Space Invaders. ¿Qué otro juego sería bueno hacer desde cero? ¿Qué juego sería bueno hacer? Oh, sí, estaba pensando en hacer un juego de tiro con arco recientemente que quería hacer, como, ya sabes, el objetivo, como, así que imagina, como, un lado es, como, la flecha y el objetivo se mueve hacia abajo y tratas de disparar al objetivo, y cae en el objetivo, y luego el objetivo... Si golpea el objetivo en el centro, entonces está bien. Si no, entonces has fallado el centro. Así que... De acuerdo, un juego de tiro con arco. Vamos a ver si podemos hacer que dispare flechas y cosas así. De acuerdo. Entonces, ¿cómo vamos a hacer esto? Bueno, usualmente tienes... Algo como esto para inicializar tus variables. Tengo la posición x de mi flecha. La posición y de mi flecha. Y algo así.

Ahí vamos. Tenemos tu hogar aquí, más grande. Y queremos disparar la flecha. Entonces tienes una velocidad, ¿verdad? Y eso se va a sumar a tu velocidad en x. Y luego puedo hacer clic en el evento. ¿Correcto? Y cuando haces clic, te da un poco de velocidad. ¿Correcto? Así que ahora tenemos el disparo de flechas. Vamos a hacer que nuestro objetivo funcione aquí. Opa. Ese es nuestro objetivo, tal vez tenga un... en realidad no necesitamos una variable para la posición de nuestro objetivo porque podemos seguir haciéndolo. parte de mi aspecto algo así y es como uh y uh se mueve con se mueve con el tiempo allí y luego lo mantenemos dentro de algún tipo de rango. De acuerdo. De acuerdo. ¿Podemos golpear ese objetivo? Eso es lo que estoy tratando de hacer. Es un poco difícil de hacer. Entonces lo que vamos a necesitar es que se adhiera al objetivo si realmente lo golpeamos. Pero es un poco difícil de golpear. Veamos si podemos hacerlo un poco más grande, adelantarlo tal vez. De acuerdo, así será algo así. Pero necesitamos que realmente se adhiera al objetivo. Eso es bastante importante. Entonces, hay un par de posibilidades diferentes que podrían suceder, estoy pensando. Entonces, una es que tienes el objetivo y la flecha simplemente entra directamente en él. Esa es tu mejor posibilidad, pero también podría ser que el objetivo se esté moviendo hacia abajo y, como, se mueve hacia la flecha, lo cual no sería bueno. No queremos que registre un golpe. Estos son todos nuestros enteros aquí. Digamos, si X es igual a, supongo que es algo así. No me preocuparé por el golpe real por ahora. Si X es igual a un golpe, entonces vamos a poner tu velocidad en cero. × . Creo que es eso. De acuerdo. Porque V es 52. Eso podría ser complicado. Está deseando adherirse a la pared. Entonces. Tenemos un reinicio también, para que no siga intentando hundirse más en la Pared. Entonces lo tenemos pegado. Y ahora también necesitamos verificar si el Y es, este es otro Y. Lo llamaré T para objetivo. Solo voy a probar eso para ver si realmente funcionó. Oh, funcionó. De acuerdo, reinicio. Si la flecha lo golpea, entonces se reinicia. No queremos que se reinicie. Queremos que se mueva... Con el, vamos a hacer lo que funcione. 8 veces 6, que es 1.

Cada cuadro. Solo piensa cómo se verá esto. ¿Realmente funciona eso? Oh, no queremos que digas que sí. Entonces se mueve hacia abajo en T veces 60, que es 1, que es 10, que debería ser 10. Ok, esa parte está bien. Así que arreglemos estos últimos errores aquí. Así que poder atravesarlo, Creo que solo haremos v. Así que necesitas velocidad para avanzar. Eso es mayor que. Oh espera, iba a hacer... Veamos qué pasa si... No queremos eso. No creo, ¿verdad? Supongo que realmente no importa. Tal vez eso está bien, en realidad, tal vez eso está bien. Quiero que pase. Así que ahora debería poder atravesarlo directamente. Ok. Creo que casi lo tenemos hecho. que necesitamos reiniciar cuando... No creo que haya arreglado ese caso especial de que golpee, como, el objetivo golpeando la flecha. Pero, ok, ¿cómo podemos reiniciarlo mejor? um la flecha eventualmente se sale de la pantalla y podría hacer eso para reiniciar eso de ti maravilloso pero dale un poco de gravedad, eso sería genial Oh sí, tendría que hacer un seguimiento del disparo. Secuelas, realmente no creo que eso agregue mucho, de todos modos. Supongo que podría verificar si el X y el Y están fuera de la pantalla, no sé cómo más verificar si estás... WB Hey Y tenemos el ejemplo de tiempo. Eso funciona. Ahora vamos a reiniciarlo. Sí, eso es bastante genial. Oh espera, todavía está atravesando. Espera, ¿por qué atravesó? Realmente solo debería funcionar si no tienes una velocidad w. Ok, ahora no podemos atravesarlo. Pero si logramos eso, también podemos hacer un seguimiento de nuestra puntuación. ¿Qué es eso, un seguimiento de puntuación? Sabes qué también podría ser divertido, si hacemos que este objetivo se vea un poco más impresionante. Voy a... Y luego... Y, lo haré así. Es algo así como un. Mira, es algo así como un pequeño efecto <a href="/tags/3d">3D</a>. Voy a hacer una comprobación clave de tu puntuación. Oh, diana. Jonathan en el chat dice que algo que podría hacerlo más satisfactorio es hacer algo cuando se golpea el objetivo, como cambiar el color, partículas, etc. Sí, absolutamente correcto. Absolutamente correcto. Sí, podríamos agregar algunas partículas o algo así. Hagámoslo. Ok, ahora tenemos objetivos rojos. bien. Ahora tenemos objetivos rojos. Objetivos. ¿Cómo lanzo partículas? Buena pregunta. Oh eso no está bien.

Por eso, porque él está... Eso es lo que está haciendo. Así que en realidad lo está dibujando, supongo, en la parte inferior de la pantalla. y luego obteniendo la imagen <a href="/tags/data">data</a> de eso tiene sentido. Vale, me preguntaba dónde lo estaba dibujando o algo así. Así que eso tiene total sentido. Es bastante genial. Oh, no es interactivo, pero es como un pequeño juego. Hmm, hmm, hmm. ¿Qué hacer? Tal vez podamos combinar, um, la cosa del jarrón y la cosa de la flecha. Así que flechas, para que puedas disparar flechas a los jarrones. pero el jarrón podría ser demasiado pequeño y lento para dibujar en tiempo real, al menos con el método actual que estoy usando. oh, se siente bastante satisfactorio a veces lo hice A veces... todavía está ahí arriba. Oh, okay. Espera, creo que sé por qué. Probablemente el valor no sea lo suficientemente alto. X es menor que y y es menor que. Y por qué es el Oh. Porque de este tipo. Necesitas que tu bucle se repita demasiado rápido. Creo. Muchas veces recientemente, simplemente he seguido mi instinto y no he usado la parte de mi cerebro para pensar exactamente cómo funciona la matemática para algunas cosas y simplemente lo he dejado fluir. Y descubrí que es una forma divertida de trabajar. ¿Ves eso? Está todo arreglado. Está arreglado. Solo me quedan unos 10 minutos aquí. Así que estoy tratando de, trabajando para terminar. No quiero empezar con algo demasiado grande en este momento. Pero definitivamente podría desglosar. Eso es lo que haremos. Echemos un vistazo, ya que esto vuelve a los juegos y cosas más interactivas, desglosemos uno de los otros juegos que he hecho y algunas de las cosas que podemos, eso sería bueno. Echemos un vistazo a Wolfenstein. Seguro, ¿por qué no? Entonces esto es un motor de ray casting, como un Wolfenstein de los viejos tiempos, tiene control con el mouse aquí, por lo que esto solo obtiene la posición del mouse, no lo bloquea ni nada, por lo que puede ser un poco difícil de controlar, pero esa es la demostración. Y entonces, ¿cómo funciona, cómo funciona aquí? Bueno, la única parte de entrada es esta parte aquí donde solo estás registrando cuánto se ha movido el mouse desde el fotograma anterior por lo que es como lanzarlo aquí, por lo que es M y este es el M anterior restándolo y luego sumándolo a la rotación de la cámara. Entonces, ¿cómo funciona todo esto aquí? Esa es una buena pregunta. Tienes tu dirección, estás mirando, eso es bastante simple. Eso es solo el seno y el coseno de tu ángulo, ¿verdad? Sabes cómo obtener eso. Y aquí hay un bucle for. Voy a dividir esto un poco aquí. ¿Tenemos comas aquí? Tenemos... Uh-oh. Por ejemplo, todo eso está en el fill rect. Vale. Todo eso está en el fill rect. Así que vamos a iterar nuestra distancia. Solo hay un bucle for aquí, lo cual es interesante. Tenemos nuestro X, nuestro Z. Y, por supuesto, no hay Y. Porque todo es en 2D aquí. D. Y eso es D, cuánto nos hemos movido, ¿verdad? ¿Y qué es J? Vale.

Aquí está el segundo bucle for, es muy astuto aquí. Básicamente, lo que va a suceder es que vas a agregar la distancia. Sigue agregando 0.1. Sigue agregando 0.1 a la distancia hasta que golpees una pared. Esta es la comprobación para ver si tu posición golpea una pared. Podemos ver eso en un segundo. y si golpeas una pared, entonces se mueve a la siguiente línea de exploración vertical, eso es lo que significa este j menos menos, y luego dibuja la pared según qué tan lejos esté, así que este es el centro de la pantalla y luego, dependiendo de qué tan lejos esté, será qué tan grande será la línea a dibujar eso es todo, um, y esta parte también controla el o esta parte, controla el brillo. Entonces, eso simplemente dice que cuanto más lejos estés, resta un poco para que no sea ligeramente menos que el ancho de una línea, lo que hará que sea gris. Y luego esta parte controla la altura de la bola. Y luego Es x, y ahora estas cosas no se usan en el fill rect, pero se guardan en el fill rect para ahorrar espacio. Veo que si hiciera, después del fill-req funcionaría perfectamente bien. Puedes usar esos extras, simplemente ponlos, no se usan como parámetros, no se usan para nada. Así que no hace daño ponerlos allí. Me ahorra espacio ponerlos allí. Por eso está ahí. Básicamente tienes tu fill-req, luego D es igual a uno menos, Eso es interesante. Pensaría que establecería t de nuevo en cero, pero por alguna razón no lo hace. Oh, no se están moviendo. D es igual a, ¿qué está pasando aquí? D es igual a la distancia. ¿Por qué no puedo moverme? Y esto es X y Z. Ahí está, ¿dónde está la posición del jugador? Eso es lo que me pregunto. Sí, no tengo idea. Oye. Es igual a la distancia. Entonces esto. Veo una A. Voy a empezar a probar cosas aquí. Tengo una cosa llamada A. Bueno, A es, creo, normalizar el... ángulo para mirar hacia afuera. Esto es extraño, hombre. ¿Por qué incluso esto? Creo que tendré que dejar este ejercicio al espectador. Oh, hay algo que te empuja cuando estás cerca de una pared. Eso es una de las cosas que recuerdo. y eso podría ser lo que causa la extrañeza. Porque no es como que te empuja en una dirección. Es como empujarte dependiendo de cada línea individual y dónde están las paredes. Aquí lo tienes. Esa es la rotación. Ahora puedo rotar. por eso es así, es decir, qué tan lejos está una pared y dependiendo de qué tan lejos esté esa pared eso determina qué tan rápido puedes moverte básicamente, y si la pared está justo frente a ti entonces no puedes moverte, no es la forma en que lo harías en realidad, probablemente quieras que la colisión compruebe si chocas con la pared de una manera más correcta porque con esta forma probablemente sería posible incluso atravesar una esquina o algo así si pudieras y esta es una forma barata de hacer el ray casting, como puedes ver, puedo asomarme a través de las esquinas y cosas así, eso es porque no estamos usando una prueba de línea correcta como un algoritmo de tipo prims para una prueba de línea, en cambio, solo estamos haciendo esto agregar 0.1 cada vez y puedes imaginar que podrías pasar directamente por una esquina o saltar algo así porque 0.1 estos bloques tienen un tamaño de uno, por lo que 0.1 es algo grande, ahora puedo hacer que este tipo sea más pequeño pero eso hará que sea más preciso pero eso hará que sea mucho más lento para renderizar. Así que encontré que 0.1 es una buena aproximación. Entonces, si tomaras este motor aquí, algunas de las siguientes cosas que harías serían mover los controles, separar esta posición del mouse para que use un bloqueo de cursor y pueda controlarlo un poco mejor. Siempre se está moviendo hacia adelante, por lo que probablemente quieras hacer que solo se mueva hacia adelante cuando estés, cuando estés digamos, um así que estoy haciendo todo el tiempo de tecla presionada TO1 por TO2 yhong de alguna manera Moyn. Tenemos una V, pero no tenemos un V. Sí. Tecla igual. Sí. Iba a hacerlo muy rápido. No sé si esto va a funcionar.

Me gusta poder probar rápidamente las cosas, um, sí, ahí vamos. Ahí vamos, bien, ahora puedo, puedo controlarlo con, uh, presionando w. Puedo moverme hacia adelante en lugar de que se mueva hacia adelante todo el tiempo. Así tengo un poco más de control, y es muy fácil hacer esto, ya sabes, puedes imaginar desarrollarlo más, tal vez haya un objetivo en el laberinto, el laberinto en sí también es solo una cosa generada al azar o no, ni siquiera generada al azar, como una cosa fija usando el operador de cuatro es prácticamente cómo funciona toda la magia allí como si cambiara esto, afectará cómo se ve el um oh tu ultimate ultimate, ok chicos, han pasado dos horas, creo que cubrimos mucho hemos hecho, hablamos de este lobo y veremos qué tenemos allí, hicimos una demostración de tiro con arco. Un pequeño juego de tiro con arco bastante genial. Hicimos una pequeña cosa de jarrón. ¿Dónde estás? Hicimos algunos jarrones. Esa es una de las versiones de ellos. Hablamos de cómo funciona este sistema. Espero que todos ahora tengan una buena idea de cómo funciona este tipo de iteración, escribir cosas aquí usando throw para ver cosas y mostrar cosas en el lienzo y todo eso es una excelente manera de trabajar, puedes usar este programa de captura, es algo que desarrollé, está un poco frágil honestamente, comencé a hacerlo como hace unos cuatro años, así que creo que podría comenzar a trabajar en una nueva versión pronto, pero aún es bastante genial, todavía lo uso todo el tiempo incluso cuando estoy trabajando en un proyecto más grande, muchas veces lo tengo abierto en el costado y solo juego con pequeñas ideas de fragmentos de código o esto y aquello así que quiero agradecer a todos por venir a ver mi masterclass y ha sido muy bueno aquí, si no has visto mi charla asegúrate de verla porque trata sobre el mismo tipo de cosas. Hago todo tipo de cosas. Otro gran lugar para revisar, no mencioné en mi charla, pero olvidé mencionarlo, pero tengo un repositorio en GitHub llamado TinyCode que es solo para estos programas realmente pequeños. No realmente los tweets, sino más bien programas independientes. Y quiero agradecer a todos los que organizaron la masterclass. Alex y los demás todos los demás. No sé quién más honestamente. Cuántas personas estuvieron involucradas, pero parecía que salió muy bien. Y espero hacer más de este tipo de cosas. Así que si te gusta este tipo de cosas, sígueme en Twitter. Y la próxima vez tal vez lo haga todas las semanas o algo así. No sé. Me gustaría hacerlo más a menudo. Siento que es una forma divertida de conectarse con la <a href="/tags/community">community</a>. Así que... voy a dar por terminado el día. Sígueme en Twitter y si lo haces... si haces algo usando estas ideas que mostré, por favor compártelo conmigo. Me encantaría ver lo que haces. Eso es todo lo que tengo para ti. Muchas gracias por ver y que tengas un buen día y nos vemos la próxima vez. Sigue programando en pequeño.

¿Cómo puedes ayudar? Echa un vistazo a la siguiente diapositiva. Sé que ya estás mirando la diapositiva. Estoy lejos de ser un profesional. Creo que aún te preguntas si puedo usar el término Traductor como un término de comunicación. Y aquí tienes algunas de las más recientes que publiqué en Twitter. Experimentando con diferentes ideas. Efectos cuánticos y Starfield. Pequeña creación de jarrones. Hice muchos paisajes recientemente. Eso fue algo con lo que estuve experimentando. Como escenas de paisajes estilizados. y simplemente, tengo muchas ideas aleatorias. Hice mucho ray marching en <a href="/tags/3d">3D</a> recientemente también, como estos. Este también es muy bonito porque tiene un efecto estático bastante alucinante, efecto de falla. Así que En cualquier momento, si alguien tiene alguna pregunta o lo que sea, esa es la razón principal de este masterclass, ayudar a las personas, responder preguntas y cosas así. Así que por favor siéntete libre de escribir en el chat, probablemente sea la mejor manera y simplemente en el chat de Zoom. Así que no estoy seguro. Todavía estamos esperando a que la gente se una antes de que

 Empecemos aquí. Así que esto fue un masterclass de juegos que hice en Twitter. Me gusta este juego de béisbol, es bastante genial. Es uno de los más recientes. Básicamente, tienes una variedad de lanzamientos con velocidades ligeramente diferentes. Creo que la pelota también puede curvarse un poco, y luego detecta un golpe con el bate y, dependiendo del ángulo del bate, determina hacia dónde va la pelota cuando se golpea. Siempre es un juego divertido de hacer. Me inspiro en los mini juegos que veo, este está inspirado en un mini juego de WarioWare. Este juego de saltar la cuerda con una tortuga que hice. Tengo otro inspirado en WarioWare que estaba jugando recientemente. Recientemente hicimos otro juego. Este es bastante genial, porque es un Frogger y hay varios niveles y los niveles aumentan en dificultad. Así que podemos pasar el primer nivel aquí. Oh, mierda. La página se está moviendo sola. Bueno, podemos ponerlo en pantalla completa. Eso lo arreglaría. El. Nivel progresivo uno completo. Mover. Se vuelve un poco más difícil con cada nivel. Pero creo que es bastante sorprendente.

Interesante. Así que este código ahora está comprimido, hablé de esto en mi charla. Este es código <a href="/tags/javascript">JavaScript</a>, pero lo que estás viendo aquí es el texto del código, el código real se comprime en estos caracteres aquí, y la forma en que funciona es que se empaca en caracteres Unicode y utiliza escape y unescape para eliminar la parte no deseada.Entonces, en realidad podemos ver el código si cambiamos este 'eval' por 'throw'. Y eso mostrará el código aquí mismo. Simplemente puedes copiar y pegar ese código de vuelta. Mira cómo se ve. Sin embargo, por lo general, no uso esta interfaz para editar tweets, porque es un poco incómoda. Tenemos una nueva versión de CapJS a la que puedes acceder yendo a beta.twitter.net, que además tiene otras características. Tiene resaltado de sintaxis. También puedes comprimir y descomprimir con solo este botón aquí. Por lo tanto, la compresión es algo extraño, pero es parte de Twitter, ya que no solo puedes comprimir código, sino que también puedes almacenar diferentes tipos de datos como arte de píxeles utilizando un tipo similar de técnica. Sin embargo, lo que suelo hacer es usar este editor llamado CapJS, que es un poco mejor que Twitter para editar, en mi opinión. Tiene algunas características agradables para controlar la línea de tiempo y capturar GIF, entre otras cosas. Y esto es un poco más fácil de trabajar, creo.Entonces, si no hay preguntas, siéntete libre de interrumpir o simplemente decir lo que sea, porque estoy atento al chat, si tienes alguna pregunta sobre lo que te gustaría ver o lo que estoy haciendo, solo escríbelo en el chat. Una de las ideas que estoy considerando es crear algo llamado 'Creador de Jarrones'. He experimentado un poco con eso. He hecho algunos tipos diferentes de jarrones. Jarrones de arcilla. Jarrones en <a href="/tags/3d">3D</a>. Este fue quizás el mejor. También podría acelerar la renderización aquí. Como estoy trabajando en otro proyecto, pensé en jugar un poco con algo simple, como un jarrón básico desde cero, y ver cómo va y experimentar con eso. Entonces, ¿cómo lo haríamos? ¿Cómo hacemos un jarrón? Esto es solo la configuración predeterminada aquí, estamos utilizando la API de lienzo y... ¿Qué es un jarrón? Comencemos con un rectángulo, supongo, y a partir de ahí veremos. Un jarrón tiene una altura. Veamos aquí, la altura es de 60. Esa será tu altura. Haremos algo así. Este es el centro de la pantalla. Dibujando una pequeña altura. También obtengamos un ancho, así que tu ancho es de 30. Y luego simplemente lo dibujaremos. Básicamente, estamos dibujando un píxel a la vez. Obtengamos una altura más grande. Obtengamos un ancho más grande. Ahora tenemos algo parecido a un bloque. Bloqueemos esto aquí. Entonces, ¿cómo convertimos este bloque en un jarrón? Bueno, en realidad, es esto, este 'with' con el que vamos a estar jugando con algunos corchetes aquí abajo. Este 'with' variará utilizando la función seno. Esto es lo mismo que llamar a 'Math.sin'. Está definido para 's', 'c' y 't', que son seno, coseno y tangente. Y utilizaremos la variable de bucle. Esa será nuestra iteración. Hagamos que sea un poco más fácil de ver, agrandémoslo un poco. Ahora tenemos algo parecido a un jarrón, pero solo en un lado. Necesitamos restar dos aquí. Ahora tenemos nuestra forma simétrica allí. Eso es uno de ellos. Hagamos que sea un poco más... debería ser un poco más así. Ajustar cosas puede ser una parte importante de este tipo de programación. Bien, ahora tienes una parte de tu jarrón y tal vez tengas otra parte más ondulada. No sé si eso es realmente necesario. Espera. Entonces, tienes, tal vez tengamos dos ondas diferentes y luego usar eso para hacer el... Hagamos una pequeña función de número aleatorio.

Y puedes hacer algo como, hacer un número aleatorio. Sería bueno aquí. Entonces, en el extremo inferior, estamos hablando de algo como 20, 30, 30, tal vez 30, 100, ese tipo de cosas. Así que puedo obtener, ya sabes, un valor así. Como, aleatoriedad aquí. Y también podemos hacer amplitudes, hacer amplitud para eso. Entonces digamos que hacemos como, Entonces tienes el diente ahora, 90. Ok, ahora tienes tu... Tu pequeña cosa de jarrón. Siento que el ancho también debería ser aleatorio. Entonces, con el desplazamiento, también, ¿ves cómo siempre comienza en el mismo punto? Entonces, queremos hacer, como, 01 igual a un número grande. Mira nuestro desplazamiento aquí. Y el ancho, podemos, ya sabes, agregar algo de aleatoriedad a eso también. Eso no fue bueno. Oh, no, no lo tienes activado todavía. En lugar de hacer esa limpieza en cada fotograma, comenzaremos así y usaremos la clave para mover estos alrededor. Entonces podríamos ver varios. Whoa. Yo haciendo. Ok. 34, 34. Ok, tal vez ahora podemos ver. múltiples fases, um... Sí, eso es un buen comienzo. ¿Qué pasa si queremos hacerlos un poco más realistas? Podría hacer un begin path... ¡Heh! Así es como los egipcios hacían sus fases. lo siento, no sé cómo pronunciar su nombre. Sí, tienes razón. Y los egipcios, ellos también usaban <a href="/tags/javascript">JavaScript</a>. Bastante seguro. Entonces podrías hacer un begin path, fill, y en lugar de un fill rect. Vamos a hacer un arco. ¿Qué quiero hacer? Ahora tenemos X. No un arco. Una elipse. Se requieren siete argumentos. Siempre me confundo con estos chicos, ahí vamos, ¿es eso correcto? en esto, volvamos a la fuente, ¿qué estoy tratando de hacer, elipse, y luego, Eso debería ser X y ... r. Ahora me estoy confundiendo. Me confundo mucho. Sí, me confundo mucho. Eso es 20, eso no, lo tenía, lo tenía bien, está bien. Oh sí, eso es correcto. Porque esto, en primer lugar, no necesita estar centrado aquí, por eso la alineación está desactivada. Y el radio, eso debería ser la mitad de lo que es. Luego esto podría ser, quiero decir, podríamos hacer un trazo tal vez. Obtener un poco más, no sé si me gusta eso. Una especie de patrón mori ahí. No sé, algo así.

Podemos controlar el color, no estaba pensando en hacer eso, pero tal vez sea bueno hacerlo también mientras estamos aquí. Quiero centrar esto un poco mejor. Oh, aquí vamos. Eso está bien. Entonces podemos, sí, supongo que te mostraré cómo hacer algo de color en eso. Básicamente vamos a establecer el estilo de relleno. Voy a usar mi HSL para esto. Así es como generalmente lo escribo. Asegurémonos de tener algo de color aquí. Sí, está funcionando. Así que estaba pensando en el propósito Tengo un Zoe. Es o r. R es r es como W más cosas de 100. Eso definitivamente va a ser más pequeño. Parece que lo saben. Aún peor, algo así. Solo ajustando valores aquí y jugando con cosas Solo para darle un poco de variedad. Oh, eso fue malo. Un poco de variedad de tonos allí. la abertura superior del jarrón se vería mucho mejor si fuera de un color diferente, un color más oscuro entonces, ¿cómo podemos hacer eso? Voy a hacer una comprobación especial para eso ahí tienes, mira cuánto añade eso ahora parece que realmente se está abriendo en la parte superior Y qué más podemos hacer, sé que eso fue genial, tengo una buena variedad de Intentando invasivas. Sí, no estoy seguro. ¿Alguien tiene algo que le gustaría ver u otras ideas para el prototipo? Lo que suelo hacer es guardar en lo que estoy trabajando, así que guardaré esto aquí. Guardar. Bueno, eso está bien. Y supongo que podría seguir jugando con esto si es necesario. Agregar un poco más de... Un poco de patrón al color, así que de alguna manera- cómo obtener un- esto es una elipse, así que eso lo hace. Siempre va a agregar como un patrón alrededor del exterior, pero es una elipse. No puedo hacer eso. Tendría que hacer otro bucle for y luego una elipse personalizada. Lo cual puedo hacer si es necesario. Y tal vez eso sea bueno hacerlo como próximo paso. Así que en lugar de esto, probablemente vería menos código, honestamente. Así que mantendremos tu relleno aquí. Acabamos de guardarlo. Entonces supongo que en lugar de la elipse, lo que haríamos. Esto es un poco complicado. ¿Podemos deshacernos de eso? Deshacernos de eso. Cuando otro bucle for o una variable, haremos algo como H. H es 10. Sería 6,000. Eso no es suficiente. Tal vez tenga que hacer 100. Ok, esto es como el ángulo alrededor del exterior. Entonces será j dividido por 100 veces dos veces pi. Luego haremos algo como un vamos a sacar esto a x igual a y igual a y ese fill rect. Y eso es como el centro de la cosa, ¿verdad? y luego es tu impar va a ser puntos y luego a la x sería algo como seno j veces el el radio y luego haremos coseno para ese. Y luego solo lo escalamos un poco. Oh, eso se ve un poco raro.

Hay un caso especial del que estamos hablando. Entonces una de las cosas que podría hacer es hacer clic. Luego, en lugar de mayor que, haremos igual a X que comienza en 20. Eso debería solucionar ese pequeño error, porque X tiene que estar tratando de verificar eso en un solo fotograma si golpeó o no. Así que hicimos el cambio de color. Podríamos hacer algunas partículas. ¿Cómo haría eso? Normalmente, la forma en que se haría es como una lista. Y luego se agrega a la lista. Y todas las partículas tienen su propia posición, física, y cosas así. Pero aquí no tenemos física. nada de eso. No creo que podamos hacer así. Pero tal vez pueda fingirlo. Piensa en lo que haría. Básicamente, es un efecto que ocurre cuando la flecha golpea algo. Vamos a lanzar algunas pequeñas cosas que salen, como una pequeña explosión, ¿verdad? Así que eso es todo lo que queremos, um. Por ahora, simplemente lo pondré en la pantalla. Así que queremos hacer, ¿cómo estás? De acuerdo, ahí estamos. Y este efecto de explosión, tiene como un tiempo. Correcto. Y ese tiempo comienza en cero. Y eso se llamará como E, que estará vinculado a T por ahora. Sí, necesitamos... Agregar Algo así. Jeje Sería algo como Y él veces Necesitamos variación en la variación en la velocidad de las partículas para Mezclarlo. Sé que estoy haciendo cosas extrañas aquí. Parece que estoy haciendo cosas extrañas. Pero en realidad no lo estoy. Te prometo que no lo estoy. ¿Es eso una explosión? No sé si eso es realmente lo que estaba pensando. Estaba pensando en algo más dirigido. Debe ser como un cono, ¿verdad? O no es realmente. Oh, era Ivor. Estaba pensando en algo así, casi, um, sabes, como ese tipo de cosa. Y, uh, Y el esto será como un efecto que va y hay un porcentaje de completitud del efecto. Tal vez eso sería como el tamaño de las partículas. Oh no. Oh. Entonces eso sería 1 menos... Y luego eso sería como... De acuerdo, eso es... Algo así podría funcionar, aunque realmente no tiene... No sé si eso es realmente lo que estoy buscando... Sabes, un poco. Sí. Sí. Segundo. Eso. Gracias. Esto es honestamente.

diciendo algo como. Creo que lo haré un poco más rápido, tal vez. Sé que suena un poco cursi. Sí, estoy tratando de pensar en qué está mal con eso. Simplemente no se ve del todo bien. Creo que el radio debería ser como como redondo Podría hacer dos conjuntos de partículas, uno que salga en un ángulo en la parte superior y otro en la parte inferior y hacerlos más delgados. Sí, podría hacerlos más delgados También necesito agregar una rotación para hacerlos más delgados o algo así Tal vez las líneas se verían mejor que los puntos aquí de qué tipo de ángulo en la parte superior estás hablando de la flecha y hay partículas en la parte superior de la flecha y en la parte inferior de la flecha tal vez um mmhmm mmhmm Me pregunto si podría hacer esto de una mejor manera más realista como solo con como una lista de partículas y simplemente cuando cuando la flecha golpea crear un montón de partículas y ir a la lista ya sabes qué creo que voy a tomar un descanso rápido y tomar un poco de té muy rápido um y vuelvo enseguida y seguiremos trabajando en esto y probablemente siga durante otros 30 minutos tal vez una hora no sé veremos cómo va pero voy a seguir un poco más pero por ahora solo necesito ir a buscar té vuelvo enseguida Estoy infusionando mi té así que voy a poner un temporizador aquí y uh ir a buscarlo en unos tres minutos De acuerdo, volvamos a nuestro pequeño experimento aquí.

En realidad, estaba pensando que tal vez este, tal vez este efecto podría funcionar. Quiero decir, si es rápido y está sincronizado con la E. No creo que esto haga algo por mí. ¿Lo hace? Quiero decir, es como... ¿De verdad? No sé el número de partículas. Sí, podría... No lo sé. Vamos a sincronizar este efecto con el impacto y ver qué sucede. Entonces, ¿cómo lo haríamos incluso? Así que esto se ha sincronizado con T en este momento. Entonces, en primer lugar, esto debería estar en la posición del... Sí, estará justo ahí. Y estará donde está el objetivo. Siempre te gusta eso. Y luego los efectos. Es el... Sé que mi código está muy desordenado en este momento. Oh, espera. Salgamos de aquí. Sácame de ahí. A veces me gusta el código desordenado porque puedo revisarlo y... Es porque sé que en su esencia, realmente es muy simple. Puedo revisarlo y limpiarlo más tarde. Bueno, en realidad no va a ser T. En realidad va a ser Y. Y va a ser la posición del... Siempre la... Sí, eso ya ha sido efectivo. Sí, y una cosa más. Entonces, es posible que tengas tu... Entonces, lo siguiente que el efecto debe comenzar. Cuando... E será el tiempo del efecto. y será p será p ¿verdad? así que será p p p p oh ob e y en lugar de p vamos a hacer e para el esto tiene que ser parte del peor estilo de codificación. ¿Dónde está el estilo de codificación? ¿Cómo? ¿Qué es w igual a 10, ¿verdad? Entonces, si w es igual a ¿Es E... ¿Es E... Reset o algo así? Es igual a cero. Y... Oh, Dios. ¿Eso... Eso va a reiniciar. Entonces veo lo que está sucediendo, esto sigue siendo llamado porque porque todavía va a ser válido porque la x es eso, eso es eso, ¿verdad? así que podemos hacer v boom ¡Wow! Oh, ¿sabes qué? Apuesto a que eso hace que no se vea bien es que las partículas todas tienen la misma duración, y eso es algo que hará que se vea mal. Se está volviendo rojo demasiado pronto. No quiero que te vuelvas, quiero que te vuelvas rojo de inmediato. ¿Dónde puse esa condición? si x si y es menor que veamos ¿es eso 1500 ahí vamos ahora tenemos un completo déjalo salir de la pantalla así como el tamaño de la partícula y como la velocidad de desvanecimiento de la partícula es la misma para todas ellas. Y eso puede decirse. Digamos que el radio de la partícula es 22 en este momento. Pero podríamos hacerlo Sé que el sí como Me gustaría que fuera un poco mejor. Iba a decir este es tu tamaño ese es tu esto E veces sabes algo que sea un poco poco muy. ¿Funciona eso? No. ¿Así que nos volvemos locos aquí? Sí. ¿Lo giraste en la parte superior? ¿Cómo lo giraste en la parte superior? Me estoy volviendo loco aquí.

¿Cómo lo giraste en la parte superior? Me estoy volviendo loco aquí. Siento que no se está desvaneciendo completamente. Porque cosas malas debido a Eso se desvanecería más rápido pero no más lento, supongo. En realidad, no se ve tan mal. De acuerdo, creo que tenemos el primero que se ve bien. Mira eso. No está mal. No está mal en absoluto. ¡Boom! ¡Boom! Oh, se giró fuerte en la parte superior. Eso es extraño. ¿Qué está pasando allí? T y X es menor que... No sé. Extraño, extraño. Tenemos un mini juego de tiro con arco aquí. En realidad, le das algunos puntos. Como una puntuación o algo así. para que la flecha se parezca más a una flecha. No se ve mucho en este momento. Eso podría ayudar un poco. Sí, a la porra. Voy a hacer, voy a hacerlo muy rápido. Y luego vas a obtener, voy a obtener menos en X y uno está arriba y uno está abajo, pero vamos a necesitar más que eso. Probablemente. ¿Dónde estamos? X más 99, luego menos algo así, y luego Sin embargo, así y luego Y es qué, digamos que es, es 30. Alto. Entonces hay 15 y luego, uh, uh, es un desastre, pero lo logramos, tenemos como 152 aquí tenemos 215 algo así menos 15 más 15 más 15 menos 31 oh luego menos 15 más 30 creo y menos 30 ¿es eso correcto? De acuerdo. Para ser y más 15 menos 30 y por qué? 15 De acuerdo, creo que esto es lo suficientemente cercano. Estoy contento con eso. Para obtener un poco de flecha. Acción. Creo que eso es una demostración bastante buena para solo. ¿Cuánto tiempo has estado trabajando en esto? 30 minutos. Mira eso. Eso es bastante genial. La punta de flecha está un poco. ahí vamos, tal vez no más así uh hagamos una puntuación, así que digamos que estás, estamos como um veo que no puedo usar s porque s es seno, miro s, claro, ¿por qué no? ¿por qué no? de tu puntuación pon una fuente aquí Jonathan dice que la flecha suena bien, creo que también es sorprendente cómo solo con estas pequeñas cosas como agregar un punto a la flecha de repente puede hacer que todo cobre vida y tienes tu puntuación aquí vamos a darte un par de puntos si aciertas Solo vamos a darte algo para golpear. Asegurémonos de que funcione. De acuerdo, así que dependiendo de dónde golpees... Graven T... Entonces, este Y en realidad está desplazado en 15. Y eso simplificaría nuestros cálculos. Si pudiera deshacerme de toda esta basura aquí, tal vez así. Y será mucho más preciso. Luego puedo hacer algo así, entonces tienes t más h sobre dos, eso sería el centro de nuestro nuestro objetivo y luego menos y es como qué tan lejos estás del centro, y cero b centro. Entonces, en realidad, quieres, como, uno sobre eso para algo. ¿O podrías, como... Creo que el máximo sería h sobre 2. Que es... ¿Dónde estás? Que es... Estaba pensando en hacer como el seno de 0, y luego eso, no, quiero que sea coseno. El coseno de cero es como un pico, ¿verdad? Entonces um... Entonces Jonathan en el chat sugiere hacer una distribución lineal del radio del objetivo menos la distancia desde el centro. Oh, sí, ¿qué estoy haciendo, eso no tiene sentido. El radio del objetivo, que es h menos 2 menos y es la distancia, supongo que eso lo normalizaría aquí también. Veamos qué sucede. ¡Whoa!

Oh, puedes reiniciar allí. No quería que reiniciaras. Necesito elevar eso al cuadrado. Entonces, Por ejemplo, obtienes Sí, veo que esto está todo desordenado. Entonces, tomas tu t más h sobre 2 con la posición del centro de... Sí, y luego menos y me daría qué tan lejos estás del centro. Correcto. Y si es así, si y fuera así, eso significa que estás en el centro. Lo que significa que sería cero. lo cual significa ¿Por qué estoy haciendo esto al revés esa es tu distancia desde el centro correcto y el radio del objetivo menos eso sería 10 así que tu máximo podría ser eso no está correcto tampoco oh eso es porque esto es un ahí vamos porque eso podría ser negativo así que si eres H si eres negativo obtienes 0 si estás en el centro obtienes 10 Y elegimos un número entero de eso. Bueno, no queremos que obtengas cero. Te daremos un punto si lo estuvieras. bordes. Entonces, si OK, eso estuvo cerca del centro. Eso fue nueve, eso fue uno, haber fallado el centro en realidad es 11, creo, porque obtuvimos. Obtuvimos eso allí, así que puedo hacer nueve sobre. eso. Ahora eso no debería ser 11, eso no debería ser 11. O espera, ¿lo hice? De acuerdo, eso está bien. Eso está bien, porque lo agregué en 211. Sí. Eso está bien. Eso está bien. Sí, buena sugerencia, Jonathan. Creo que esto es... Se siente bien. Se siente bien. Solo una pequeña demostración simple de tiro con arco. Pero, Espero que la gente esté obteniendo algo de esto, como esta es una excelente manera de prototipar ideas, jugar con ellas a como este código, quiero decir, es desechable, sí pero las cosas, las técnicas, las cosas que he hecho, como viste cómo pude enfocarme en diferentes ideas y simplemente como sé cómo hacer que estas cosas sucedan porque lo he hecho tantas veces. ¿Qué más podemos hacer? ¿Qué podemos hacer para mejorar esto? Deberíamos pasar a una demostración diferente. Ahora llevamos aproximadamente una hora y media. Así que no sé cuánto más voy a continuar. Tal vez intente llegar a las dos horas. Mientras haya personas aquí interesadas en ver. Y es bastante divertido. Jonathan en el chat dice que hay muchos pequeños fragmentos de animación, interacciones, que tienden a ser muy matemáticos. Y ahora veo cómo simplificar a este nivel puede ayudar a resolver esos problemas y cómo puede ser una buena práctica simplemente jugar con ello. Sí, estoy totalmente de acuerdo contigo, Jonathan. Volviendo a cuando solía trabajar en la industria de los juegos, incluso cuando no conocía <a href="/tags/javascript">JavaScript</a>. Solo usaba C++ y pensando en cómo haría, o digamos Unreal Engine. Así que pensando en cómo haría que esto sucediera en Unreal Engine, supongo, bueno, quiero decir, no es necesariamente difícil. Quiero decir, es algo completamente diferente. Es solo que todo está resuelto para ti en Unreal Engine. ¿Sabes? Y tiene, tiene física incorporada. Tiene todas esas cosas incorporadas. Entonces probablemente aprovecharíamos, digamos, los efectos de partículas en Unreal en lugar de escribir los efectos de partículas desde cero como esto. Pero creo que hay algo que decir sobre tener un control total. Como, no hay un motor aquí. No hay, como, un sistema de física. Realmente no hay nada.

Y poder prototipar una idea, como si estuviera usando Unreal para esto, habría llevado todo el día. Habría lucido mejor. Sería en <a href="/tags/3d">3D</a> y cosas así. Pero en última instancia, creo que prefiero esta forma de hacer las cosas. Así que puedes empezar a añadir diferentes conceptos y el límite es el cielo. Cuando limpias el código, ves lo simple que es todo. Dar mejores nombres a las variables. Eso probablemente sería lo siguiente que haría. Si fuera a seguir trabajando en esto, definitivamente intervendría aquí, limpiaría un poco las cosas. Hacerlo más fácil de leer. Incluso podría intentar hacer que esto quepa en un dueto. Creo que podría ser posible, especialmente si elimino el efecto. Ocupa mucho espacio. Creo que realmente ayuda a entender cómo funciona esto. Por ejemplo, crear un pequeño sistema de partículas así. Es posible que no hagas un sistema de partículas así en un juego real, pero podrías hacer algo similar, si tiene sentido. Definitivamente estarás utilizando el seno y el coseno y conceptos similares. Así que poder imaginar cómo funciona en tu cabeza es bueno. Eso es bueno. Ahora me pregunto si yo fuera a, um, veamos tener una idea de qué tan grande es realmente esta cosa. Entonces, si fuera a intentar terminar esto, esperaría eliminar eso. Me desharía de eso. Me desharía de todo esto. Ups. Eso se va. Creo que, um Solo muestra tu puntaje. Tal vez lo muestre aquí abajo. Todavía estamos, puedes ver que todavía estamos muy por encima del límite de caracteres que sería potencialmente posible en Twitter. Creo que tal vez creo que podría caber con mucho trabajo eso se va. Es realmente difícil hacer que las cosas encajen. Es sorprendente lo que hemos logrado hacer allí. Cuando empiezas a mirar las cosas y dices, oh, wow, necesito recortar como 100 caracteres, ¿cómo podría hacer eso? No puedo deshacerme del puntaje. Esto es solo un experimento para ver cuánto tendría que recortar para hacer que encaje en Twitter. Recortar, recortar, recortar. Eso no funcionó. A veces puedes usar uno a nivel de bits, pero necesitas un booleano para trabajar con eso, así que no funcionará siempre. Todavía tendríamos que deshacernos de otros 30 bytes más o menos. Como b igual a Q. Supongo que es bastante difícil de hacer. Puedes poner eso ahí. Esos paréntesis pueden desaparecer. Sí. Esto también puede desaparecer. Probablemente puedas ajustar eso. Este bucle aquí, probablemente vaya a tener que deshacerme de eso también. Vaya. Vale, ahora estamos dentro del espacio. Hemos cumplido y encajado. Entonces algo así podría ser posible poner el puntaje de nuevo cuando lo publique, porque tenemos 9 bytes de espacio, y estoy bastante seguro de que hay otras cosas que puedo hacer. El ejemplo que puedo hacer Juntarlos.

La página puede ir allí. Número 180 algo. Sí, definitivamente es posible. Simplemente puede ser muy limitante. Para lo que puedes hacer. Veamos, um. Guardaremos eso. Siempre recuerda guardar lo que estás haciendo. Estos archivos son muy pequeños, por lo que no ocupan mucho espacio. Un par de cosas que aún vamos a publicar, este es como un atardecer, solo un degradado. Me gusta porque es tan simple. Sabes, he estado tratando de pensar en qué puedo hacer con esto porque esto solo tiene 99 caracteres, así que tengo mucho espacio si quisiera hacer algo más con él, tal vez convertirlo en un paisaje o algo así. Solo he decidido pero realmente me gusta usar los canales rojo, verde y azul para crear esto y tengo este efecto de laberinto extraño que se acumula en el centro Me pareció muy interesante todavía está un poco por encima pero estoy bastante seguro de que puedo hacerlo lo suficientemente pequeño como para que quepa simplemente no estoy seguro de qué hacer con eso se ve genial al principio pero luego se vuelve un poco demasiado loco y luego no sé qué hacer luego tengo este tiene como estos pequeños dibujos de arte en miniatura con los que estoy jugando Un par de cosas que he estado haciendo. Echemos un vistazo atrás. Eso podría tuitear. Sí, veamos qué más tenemos. Tal vez obtener un poco más deinspiration aquí. Cosas bastante geniales. Recientemente nuestros fractales. Este chico no ha aparecido mucho. No lo he visto. Rodrigo lo ha estado usando a menudo. Y echemos un vistazo a esto. Es algo antiguo. Fractal perdido. La gente está poniendo ojos en todo. Oh, aquí hay uno que se ve bien. ¿Qué eres? Me pregunto si esto se basa en un... Algún tipo de fractal gnomo. No sé si me gusta tanto ese. ¿Qué es eso? Un micro defecto, okay. Muchos ojos. No me inspira mucho, sinceramente. Hay cosas geniales. Ese es genial. Me preguntaba cómo lo hizo, en realidad. ¿Cómo logró eso? Veamos. Esta pieza está bien. Oh, ¿qué está pasando aquí? Sea lo que sea, no se parece a esto. Oh, está usando datos de imagen. Pasemos por este invertir aquí. ¿Qué está pasando aquí? Oh, Sea lo que sea... no funciona muy bien. Está llenando.... Aquí. ¿Dibujó algo en la pantalla? Oh. Oh, porque... Ws480. ¿Qué está pasando aquí? Okay, porque está fuera de la pantalla. Está fuera de la pantalla.

JS GameDev Summit

JS GameDev Summit 2023

Tiny Game Live Coding Workshop

Masterclass de Codificación en Vivo de Juegos Pequeños

El masterclass abarcó una variedad de temas, incluyendo el desarrollo de juegos, la optimización de código y el arte fractal. El presentador demostró varios mini juegos creados en Twitter, así como un creador de jarrones y un juego de tiro con arco. También se exploraron el uso de efectos de partículas y técnicas de lanzamiento de rayos. En general, el masterclass enfatizó la importancia de la prototipación, la limpieza del código y la experimentación en el desarrollo de software.

Sumérgete en el cautivador mundo del desarrollo de microjuegos con Frank Force en este interactivo masterclass de codificación en vivo. Diseñado tanto para desarrolladores experimentados como para curiosos principiantes, esta sesión explora los desafíos únicos y las alegrías de crear juegos y demos con restricciones extremas de tamaño.

Frank Force

JS Nation

I’m attending JSNation – the main JavaScript conference of the year. You may join me there for free with 10k other JS engineers and 40+ great speakers. Just follow this badge. 

#javascript

JSNation 2024

C3 Dev Festival

Join me at C3 Dev Fest, a contemporary software engineering festival!

Register to win an all-paid trip to Amsterdam. Elevate your career with industry experts and workshops & rock 3 dance stages at the after-party!

C3 Dev Festival 2024

React Summit

I am attending the biggest #Reactjs conference remotely. You may get a limited free ticket (50% of talks, no workshops) and join me by clicking this badge.

#react #reactjs

React Summit 2024

TechLead Conference

I'm attending TechLead Conference 2024 – get your free remote ticket and join me there

TechLead Conference 2024

React Advanced

React Advanced Conference 2024

Productivity Conference

Productivity Conference 2024

JSNation US

I’m attending JSNation US. Join me there for free with 10k other JS engineers and 50+ great speakers. Just follow this badge.