Creando juegos increíbles con LittleJS

Rate this content
Bookmark

LittleJS es un motor de juegos súper ligero que es fácil de usar y extremadamente rápido. El desarrollador hablará sobre por qué lo creó, qué hace y cómo puedes usarlo para crear tus propios juegos. La charla incluirá una demostración de cómo construir un pequeño juego desde cero con LittleJS.

Frank Force
Frank Force
34 min
07 Apr, 2022

Video Summary and Transcription

Little.js es un motor de juegos JavaScript súper ligero y rápido que incluye todo lo necesario para comenzar a hacer juegos de inmediato. Tiene un tamaño mínimo y no tiene dependencias, lo que lo hace perfecto para competiciones de codificación de tamaño como JS13K. Little.js está construido con una estructura orientada a objetos y viene con varias clases. Proporciona un sistema de renderizado rápido, un sistema de audio completo y varios proyectos de inicio para diferentes tipos de juegos. Little.js está diseñado para ser simple y fácil de entender, lo que te permite ver y modificar el código.

Available in English

1. Introducción

Short description:

Bienvenidos a mi charla sobre el motor LittleJS y cómo puedes crear juegos increíbles con él. Soy Frank Forse, el creador de LittleJS. He trabajado en el desarrollo de juegos durante más de 20 años en algunos juegos que probablemente hayas jugado, como DOOM, PsyOps y Starhawk. También he participado en muchas competencias de desarrollo de juegos de 48 horas y he obtenido el segundo lugar. He publicado más de mil programas JS pequeños en Twitter, creando una amplia variedad de resultados visuales. Recientemente, me he interesado en el arte generativo de formato largo.

¡Hola a todos! Bienvenidos a mi charla sobre el motor LittleJS y cómo puedes crear juegos increíbles con él. ¿Quién soy yo? Bueno, soy Frank Forse, el creador de LittleJS. He trabajado en el desarrollo de juegos durante más de 20 años en algunos juegos que probablemente hayas jugado, como DOOM, PsyOps y Starhawk. También he completado muchas competencias de desarrollo de juegos de 48 horas y he hecho muchas otras cosas como desarrollador independiente. He participado en varios JS 13k y he obtenido el segundo lugar. También he ganado el premio a la Ilusión Óptica del Año con un programa JS, y he publicado más de mil programas JS pequeños en un sitio web llamado Twitter, donde creamos programas JS de 140 caracteres. Son muy pequeños, pero he logrado crear una amplia variedad de resultados visuales. Más recientemente, me he interesado en el arte generativo de formato largo, como los que ven aquí, que todos están creados con JavaScript.

2. Motor de Juegos Little.js

Short description:

Little.js es un motor de juegos JavaScript súper liviano y rápido que incluye todo lo necesario para comenzar a crear juegos de inmediato. Tiene un tamaño diminuto y no tiene dependencias, lo que lo hace perfecto para competencias de codificación de tamaño como JS13K. Little.js está repleto de funciones, incluyendo un sistema de renderizado de sprites rápido, un sistema de renderizado de datos de nivel, soporte para dispositivos móviles y táctiles, física y manejo de colisiones, y un sistema de audio único. También proporciona una solución completa para el manejo de entradas y tiene una documentación exhaustiva. Únete a nuestra comunidad de Discord para compartir tu trabajo y hacer preguntas.

Entonces, ¿qué es Little.js y por qué debería importarte? Bueno, Little.js es un motor de juegos JavaScript súper liviano y rápido. Incluye todo lo necesario para comenzar a crear juegos de inmediato, y varios proyectos de ejemplo para que puedas comenzar. También es muy importante asegurarse de que se publique con una licencia MIT de código abierto, para que cualquiera pueda usarlo sin preocuparse por complicados acuerdos de licencia.

Little.js se demuestra mejor con mi juego Space Huggers, que originalmente publiqué para JS13K, pero luego lo actualicé en nuevos terrenos. Así que por favor, échale un vistazo para ver una gran demostración de todo lo que Little.js puede hacer. Little.js está repleto de funciones, con todo incluido para comenzar a crear juegos. Para muchos motores de juegos, el tamaño del motor no es una característica, pero para Little.js, es una de las principales características porque el tamaño es extremadamente diminuto. No tiene dependencias y me aseguré de que la interfaz también sea muy simplificada. Esto permite que se ajuste en un archivo zip muy pequeño para competencias de codificación de tamaño como JS13K, pero también hace que el código sea muy fácil de usar y trabajar. Es una excelente manera de comenzar a aprender cómo funcionan los motores de juegos. También puede crear juegos grandes. Hablaremos de eso pronto.

Debido a que tiene un renderizado de sprites muy, muy rápido, del orden de 100,000 sprites. También tiene un sistema de renderizado de datos de nivel súper rápido. Combinando estas dos cosas, puedes tener un juego completamente funcional con soporte para WebGL y canvas, obteniendo lo mejor de ambos mundos. También tiene soporte para dispositivos móviles y táctiles, porque eso es muy importante en estos días. Little.js es un motor de juegos orientado a objetos que utiliza EngineObject como clase base. Puedes extender esto para usarlo en tu propio juego. Cada EngineObject se actualizará y dibujará automáticamente en cada fotograma. También tiene física y manejo de colisiones incorporados, y otras características que necesitarás, como un sistema padre-hijo y clasificación para el renderizado y características de depuración. Little.js tiene un sistema de audio muy único con audio generativo posicional. Puedes crear efectos de sonido sin necesidad de ningún tipo de archivo de activo, por lo que es muy rápido de iterar. Y estos efectos de sonido son posicionales, por lo que el paneo estéreo y el volumen se atenúan automáticamente para que parezca que provienen de una ubicación en el mundo. Little.js también proporciona un sistema de música diminuto, que es realmente útil para competencias de codificación de tamaño. Y, por supuesto, también puedes usar archivos WAV, MP3 o ODD. Little.js tiene una solución completa para el manejo de entradas de teclado y mouse, así como hasta cuatro gamepads, e incluso tiene un gamepad en pantalla para dispositivos táctiles. El código está completamente documentado. Hay un sitio web donde puedes explorar toda la documentación, que se genera automáticamente a partir del código en los comentarios utilizando js-doc. El código en sí también es muy simple y fácil de leer, y está repleto de comentarios para que todos puedan entender cómo funciona todo. Se incluye un sistema de compilación con varios proyectos de inicio, y recientemente creamos un Discord para que las personas compartan su trabajo y hagan preguntas.

3. Clases y características de Little.js

Short description:

Little.js está construido con una estructura orientada a objetos y viene con varias clases. Vector2 es la clase matemática de bajo nivel utilizada por Little.js, mientras que la clase Color maneja los cálculos matemáticos de color. La clase Timer te permite rastrear el tiempo fácilmente. El objeto Engine es la clase base para Little.js, y la clase ParticleSystem agrega funcionalidad de emisión de partículas. Little.js también tiene un sistema de logros incorporado para rastrear logros y un sistema de física simple para colisiones de cajas delimitadoras alineadas en el eje.

Little.js está construido con una estructura orientada a objetos. Viene con varias clases. Prácticamente todos los componentes se crean con una clase. Así que hablemos de cómo funcionan algunas de ellas.

Vector2 es la clase matemática de bajo nivel utilizada por Little.js, que contiene una coordenada X e Y, y tiene todas las funciones matemáticas estándar que esperarías. Descubrí que es mejor no modificar, sino simplemente devolver una copia de estas funciones matemáticas para que puedas crear una cadena de matemáticas vectoriales más complejas. También tengo aserciones dispersas por todo el código para asegurarme de que todo se use correctamente. Y estas aserciones se eliminarán automáticamente de las compilaciones finales para obtener un pequeño impulso de velocidad.

La clase Color maneja todos los cálculos matemáticos de color. Contiene un color RGBA y tiene funciones matemáticas similares a Vector2, como sumar, restar y multiplicar. Hay conversiones hacia y desde HSL y Hex, así como otras funciones útiles como lerp y mutate.

Otra característica genial y útil es la clase Timer, que es un objeto simple que te permite rastrear cuánto tiempo ha pasado desde que se estableció sin necesidad de ninguna actualización. En otras palabras, llamarás a set, pasarás los segundos, lo iniciarás. Luego llamarás a get para ver cuánto tiempo ha pasado. Y cuando estés listo, puedes llamar a onset para restablecerlo al modo onset. Uso esto todo el tiempo en mi código de juego. Así que espero que lo pruebes.

El objeto Engine es la clase base para Little.js, que contiene la mayor parte de la funcionalidad para colisiones y renderizado. Y todos estos objetos Engine se almacenan en una lista donde se actualizarán y renderizarán automáticamente en cada fotograma. Y tienen los atributos estándar que esperarías para un objeto de bajo nivel como ese con una posición, tamaño, cómo se dibuja.

La clase ParticleSystem proporcionada por Little.js extiende los objetos Engine para agregar la capacidad de emitir partículas. Y estas partículas también extienden el objeto Engine para que puedan tener física y colisiones. Tienen una variedad de parámetros para ajustar y crear diferentes tipos de efectos de partículas como fuego, humo o lo que necesites para ese tipo de juego.

Little.js tiene su propio sistema de logros incorporado para rastrear los logros del jugador. Se guarda automáticamente en el almacenamiento local. Y hay una ventana emergente que aparece cuando se desbloquea un logro por primera vez. Y este sistema de logros tiene un nuevo soporte de terreno incorporado automáticamente para que puedas poner tu juego en nuevos terrenos muy fácilmente.

Little.js tiene su propio sistema de física simple y rápido incorporado. Ahora, esto es solo para colisiones de cajas delimitadoras alineadas en el eje. Por lo tanto, no hay capacidad para rotar estos objetos con física, pero puedes rotarlos en cómo se representan.

4. Física y Renderizado

Short description:

Existen dos tipos de física, física de objeto versus nivel y física de objeto versus objeto. La física de objeto versus nivel permite una colisión súper rápida entre un objeto en movimiento rápido y datos de nivel de baldosas estacionarias. La física de objeto versus objeto proporciona un solucionador de física 2D para colisiones entre objetos. El sistema de renderizado combina WebGL y Canvas 2D, donde WebGL ofrece un renderizado de sprites increíblemente rápido y Canvas 2D proporciona versatilidad para fondos, texto y depuración. El sistema de capas de baldosas permite un renderizado rápido de niveles con múltiples capas y la capacidad de dibujar directamente para efectos persistentes.

Existen dos tipos de física, una física de objeto versus nivel y una física de objeto versus objeto. Y ambos tipos de física se combinan para brindarte una solución física completa.

La física de objeto versus nivel es donde obtienes la colisión súper rápida entre un objeto en movimiento rápido y un nivel de baldosas estacionariasdata. Se proporcionan varias funciones para probar dónde se produce la colisión. Y descubrí que es posible tener niveles muy grandes y es una forma muy eficiente de hacer física.

También hay un solucionador de física 2D completo para colisiones de objeto versus objeto. Y puedes tener unos cientos de objetos interactuando de esa manera. No es un sistema de física perfectamente realista, pero hay varios parámetros que puedes ajustar para controlar cómo se comportan estos objetos, como la masa, amortiguamiento, elasticidad y fricción. Y un sistema de renderizado de Little.js combina lo mejor de WebGL y Canvas 2D. Puedes pensar en ello como un sándwich de WebGL, donde hay una capa inferior de Canvas 2D para el fondo y los datos del nivel, y otros efectos donde necesites un renderizado de Canvas 2D. Luego tienes una capa intermedia de renderizado de sprites súper rápido y efectos de partículas realizados con WebGL. Y tu capa superior es otra capa de Canvas 2D para el texto y efectos superpuestos, la interfaz de usuario, cualquier tipo de información de depuración.

Ahora, el renderizado de WebGL es increíble porque es increíblemente rápido. Puedes renderizar miles y miles de sprites a 60 fotogramas por segundo. Esto se logra agrupando todas estas llamadas de dibujo. Y puede hacer esto porque todos esos sprites están en la misma hoja de baldosas. Por lo tanto, solo se necesita una textura. Incluso creo que para juegos mucho más grandes, puedes ajustar fácilmente la mayor parte del arte en una sola hoja de baldosas. Aunque, por supuesto, es posible usar múltiples texturas si es necesario.

Y hay algunas características realmente agradables de renderizado de sprites disponibles, como poder cambiar el color de los sprites, aplicar adición de color, rotar y reflejar sprites. El renderizado de Canvas 2D es para las capas trasera y frontal. Es un poco más lento que el renderizado de WebGL, pero mucho más versátil porque tienes todas las funciones estándar de Canvas 2D como renderizado de texto, dibujo de formas y líneas, cosas así. Los datos del nivel también utilizan Canvas 2D para el renderizado. Y si lo prefieres, incluso puedes desactivar WebGL y todo se renderizará en Canvas 2D.

El sistema de capas de baldosas es el renderizado rápido de niveles. Aquí tienes una cuadrícula de baldosas que se almacenan en un lienzo externo para un renderizado súper rápido. Está diseñado para combinarse con los datos de colisióndata para tener una colisión y renderizado de nivel. Y puedes usar múltiples capas de baldosas si necesitas tener una capa trasera y frontal o capas una al lado de la otra. Otra gran ventaja de este sistema es que estas capas son, ya que se almacenan en otro lienzo, puedes dibujar directamente en ese lienzo para efectos persistentes como la destrucción. Todo esto funciona mediante el uso de una matriz de estos objetos de datos de capa de baldosas que es cómo se dibuja cada baldosa.

5. Renderizado, Audio y Proyectos de Inicio

Short description:

Little.js proporciona un sistema de renderizado rápido para baldosas, un sistema de superposición de depuración y un sistema de audio completo con generación de efectos de sonido y reproducción de música. También incluye varios proyectos de inicio para diferentes tipos de juegos, como Helloworld, Prueba de estrés, juego de rompecabezas, Breakout y Plataformas. Además, hay un Editor de Partículas para crear sistemas de partículas.

Y son solo un pequeño objeto que contiene la rotación, espejo, color e índice de baldosa para cada baldosa. Y recorrerá todo ese array y representará todas esas baldosas en el lienzo fuera de pantalla, y luego en cada fotograma, no necesita hacer eso. Así que es mucho, mucho más rápido.

También hay un sistema de superposición de debug que se puede acceder presionando el botón de tilde. Tiene un inspector de objetos y algunos otros modos realmente útiles para partículas de física y cosas así.

El sistema de audio de Little.js proporciona sonido y música generativos. ZZFX es el generador de efectos de sonido diminuto. Tiene su propio editor de efectos de sonido, que es otro sitio web que he lanzado por separado de Little.js. Puedes usarlo para cualquier juego que desees. El diseñador de efectos de sonido es realmente agradable porque hay un montón de preajustes en los que puedes hacer clic, pero también puedes ajustar individualmente todos los parámetros. También puedes guardar sonidos y exportar, importar, e incluso guardar como archivo WAV si lo deseas.

ZZFXM es el reproductor de música diminuto que se incluye con Little.js, y esto es algo que realmente necesitas si estás participando en una competencia de codificación de tamaño. Puede reproducir música usando ZZFX para generar los efectos de sonido con un formato de música súper pequeño que es legible por humanos y un reproductor súper pequeño. La salida también es en estéreo, y hay un montón de herramientas disponibles para crear esta música, como un secuenciador y un convertidor de Protracker. Y, por supuesto, si tienes más espacio, es posible que desees usar un archivo mp3 o AUG para tu música, o incluso WAV.

Hay varias funciones más para el audio que se proporcionan, como la síntesis de voz y la capacidad de reproducir muestras directamente.

Little.js viene con una variedad de proyectos de inicio en los que puedes basarte, para prácticamente cualquier tipo de juego que te gustaría hacer. Helloworld es solo un ejemplo simple de proyecto de inicio que muestra las diversas funcionalidades básicas de Little.js, como un sistema de partículas, datos de nivel y objetos de juego, ese tipo de cosas. La Prueba de estrés es lo que puedes usar para probar cuántos sprites puede representar a 60 FPS en diferentes dispositivos. Hemos descubierto que funciona muy bien en dispositivos móviles, a veces incluso mejor que en computadoras de escritorio. Hay un juego de rompecabezas proporcionado, que es un juego de combinación de tres básico. Y puedes usar un panel táctil o un mouse para controlarlo. Y siéntete libre de basarte en estos proyectos de inicio para tu propio juego si lo deseas, por eso están ahí. Para un juego de estilo arcade, tenemos Breakout. Muestra una colisión y física. También puedes controlarlo con un panel táctil o un gamepad de mouse. El ejemplo más complicado es el de Plataformas, que tiene una física más advanced para plataformas, saltar escaleras, cajas y enemigos disparando, ese tipo de cosas. También he lanzado el Editor de Partículas, para que puedas usarlo para crear sistemas de partículas para tu juego. Aún está en proceso de desarrollo. Hay muchas más cosas que quiero agregarle, pero definitivamente es una buena prueba de concepto.

6. El Futuro de Little.js

Short description:

Hablemos sobre el futuro de Little.js y cómo puedes formar parte de él. Han pasado menos de un año desde su lanzamiento y ya tiene más de 2000 likes en GitHub. He mejorado mi juego Spacehuggers y lo he lanzado en Newgrounds con el Sistema de Logros. Isletopia se está desarrollando utilizando Little.js y estará disponible próximamente en Steam. El editor de partículas y otras herramientas aún están en desarrollo. Little.js es perfecto para JS13K y puede expandirse a juegos más grandes. Estoy abierto a sugerencias y me encantaría saber qué tipo de juegos quieres hacer con Little.js. Gracias por ver y por favor, revisa Little.js en GitHub y sígueme en Twitter para recibir actualizaciones.

Entonces hablemos sobre cuál es el futuro de Little.js y cómo podrías formar parte de él. Han pasado menos de un año desde que lancé Little.js y ya tiene más de 2000 likes en GitHub. Tomé mi juego JS13K, Spacehuggers, y lo mejoré un poco y lo lancé en Newgrounds con el Sistema de Logros. Así que por favor, échale un vistazo. Muchas personas lo jugaron, y creo que definitivamente es uno de los mejores juegos que he hecho. Es completamente jugable en escritorio o móvil. Incluso puedes jugar en cooperativo con hasta cuatro jugadores.

Isletopia se está desarrollando utilizando Little.js, y puedes añadirlo a tu lista de deseos. Estará disponible próximamente en Steam. El editor de partículas aún está en desarrollo, al igual que algunas otras herramientas en las que estamos trabajando. Realmente quiero hacer un generador de música CZ Effects, así que veremos si llego a eso. Y realmente depende de lo que otras personas estén interesadas en y lo que quieran ver. Creo que el próximo JS13K va a ser enorme para Little.js, porque este game engine realmente destaca en esas competencias de codificación de juegos de tamaño reducido. Aunque, como dije, definitivamente puede expandir un juego en un juego más grande. Me gustaría hacer más cosas de Space Hugger en algún momento. Tengo tantas ideas de cómo desarrollarlo, aunque eso no es realmente mi enfoque en este momento. Así que, ¿por qué no me dices qué te gustaría ver, y qué tipo de juegos quieres hacer con Little.js?

Eso es todo lo que tengo por hoy. Gracias por ver. Realmente siento que Little.js es una de las mejores cosas que he creado, y estoy muy feliz de tener esta oportunidad de compartirla con todos. Es completamente de código abierto para que todos lo usen para lo que quieran. Así que, por favor, dale like en GitHub, descárgalo, y prueba los juegos de ejemplo. Puedes seguirme en Twitter en Killed By A Pixel. Publico todo el tiempo sobre todo en lo que estoy trabajando, ya sea arte generativo o juegos. Y el próximo año, o este año que viene, definitivamente haré otro juego con Little.js para JS 13K. Asegúrate de revisar mi GitHub porque tengo muchas otras cosas geniales en las que he estado trabajando, como ZZFX, y muchas otras herramientas pequeñas. Otro game development stuff, revisa mi Twitter. Ahí es donde publico todos esos miles de programas pequeños de JavaScript que son divertidos de jugar. Y si estás interesado en el arte generativo, definitivamente revisa mi FX hash, donde he estado lanzando estos programas de arte generativo de larga duración. Así que voy a terminar y agradecer a todos por ver.

QnA

Construyendo un Motor de Juego y Little.js

Short description:

Cree en ti mismo y prueba a hacer juegos con Little.js. Comparte tus juegos con nosotros y mejora con cada juego. Estamos emocionados por ver lo que creas. La encuesta muestra una división del 50-50 entre aprender sobre el motor de juego y hacer juegos pequeños. Little.js está diseñado para ser simple y fácil de entender, lo que te permite ver y modificar el código. Es diferente a la mayoría de los motores de juego que te sobrecargan y te confunden. ¡Hora de preguntas y respuestas! ¿Por qué construir un motor de juego? ¿Qué te motivó a desarrollar tu propio motor? JS13K y otras competencias de codificación de tamaño requieren motores de juego pequeños. Little.js es un motor de juego completo, ligero y fácil de usar. También hay otros micro frameworks disponibles.

Y diré, cree en ti mismo, intenta hacer juegos con Little.js, comparte los juegos que hagas con nosotros. Y simplemente seguirás haciendo juegos cada vez mejores cada vez que hagas un juego. Y no puedo esperar para ver lo que todos hacen con él. Así que gracias por ver. Cuídense y tengan un buen día.

Antes de entrar en algunas de las preguntas y estábamos teniendo una conversación muy buena entre bastidores, así que vamos a llevar eso al escenario principal. Pero echemos un vistazo a estas preguntas de la encuesta. Así que si miramos la pantalla, podemos ver que es casi una división del 50-50 en este momento. Las personas quieren aprender sobre el motor de juego. Así que aprender sobre Little.js y también sobre hacer juegos pequeños. Nadie está muy interesado en hacer juegos grandes como Little.js u otras cosas. Pero sí, parece que estas son las dos áreas principales de enfoque en este momento.

Así que sé que tu charla no profundizó mucho en cómo funciona el motor de juego en sí. Pero parece que mucha gente quiere saber. Entonces, ¿dónde pueden encontrar esa información? ¿Hay tutoriales o videos disponibles? Sí, mi enfoque con Little.js es hacer que el propio motor de juego sea tan simple y fácil de entender y bien comentado y cosas así, que, para entender cómo funciona el motor de juego, se supone que debes mirar el código en sí. Así que si tomas la mayoría de los motores de juego, el código del motor de juego nunca se supone que lo mires. De hecho, probablemente sea una sobrecarga enorme y confuso para ti, y definitivamente no quieres cambiarlo. Pero Little.js es un paradigma totalmente diferente donde puedes usarlo directamente y hay versiones minificadas disponibles o para hacer juegos pequeños, en lo que mucha gente está interesada. Incluso puedes querer hacer algunos cambios en el propio motor principal. Y puedes hacerlo porque es tan simple y fácil de entender.

Fantástico. Muy bien, pasemos a algunas de las preguntas y respuestas. Una de mis primeras grandes preguntas es, sí, ¿por qué construir un motor de juego? ¿Por qué empezaste? Cuéntanos sobre tu viaje. Y Melanie, o Melody en el chat, también tiene una pregunta relacionada, que es, ¿cuál es tu motivación para desarrollar tu propio motor específicamente? Absolutamente, esas son grandes preguntas. Bueno, si sabes, espero que algunas personas estén un poco familiarizadas con JS13K y otras competencias de codificación de tamaño. Bueno, en la pregunta de la encuesta, parece que aproximadamente la mitad de las personas están interesadas en juegos pequeños y cosas así. Entonces, si sabes un poco sobre eso, probablemente sepas que no puedes usar la mayoría de los motores de juego para JS13K, porque serán demasiado grandes. Entonces hay un conjunto muy pequeño de lo que podrías llamar micro frameworks. La mayoría de ellos no son realmente motores de juego completos, como se pretende que Little JS sea un motor de juego completo que puedes usar directamente sin mucho código adicional. Pero hay otros frameworks que puedes usar y cosas así.

Motivación y consejos para los juegos JS13K

Short description:

Hice mi propio motor de juego para JS13K y aprendí mucho de ello. Tener un motor de juego que hayas creado tú mismo ahorra mucho tiempo. Quería llenar nichos que actualmente no están cubiertos y crear un tipo de motor de juego didáctico. Little JS es el único motor utilizado en JS13K hasta ahora. Consejos para JS13K: Utiliza el constructor incorporado para crear un archivo zip súper pequeño. El arte ocupa más espacio que el código.

Para mí, había estado participando en JS13K durante, este es el tercer año que lo hago, cuando hice Little JS. Y el primer año que lo hice, también hice mi propio motor de juego desde cero. Porque, como dije, más o menos tienes que o usar un pequeño framework o algo así. No puedes usar, definitivamente no puedo usar Unreal, en lo que soy muy bueno, pero ese es un motor de juego en C++. No está diseñado para hacer un juego web pequeño. Así que tuve que hacer mi propio motor de juego.

Hice un juego llamado bounce back, que era como un juego estilo Zelda rogue-lite. Y de ese motor aprendí mucho y evolucioné hacia este. Y estos no son los únicos dos motores de juego que he hecho, por cierto. He hecho muchos motores de juego. También lancé uno, un motor de juego en C++, hace unos 10 años, que he utilizado para muchas cosas diferentes. Y otra cosa sobre hacer tu propio motor de juego o este tipo de hacer tu propia biblioteca y framework es que me gusta hacer muchos proyectos pequeños, diría yo. Pero encontré que uno de los problemas con eso es que tienes mucho código de plantilla que sigues pegando y cambiando y demás. Y eso puede hacerlo realmente engorroso cuando tienes, digamos, 10 proyectos diferentes que tienen 10 copias diferentes, ligeramente diferentes, de este motor de juego que pueden tener cualquier cantidad de correcciones de errores o cualquier cosa que hayas hecho. Así que tener un motor de juego que hayas creado tú mismo y que puedas ir evolucionando lentamente y usar para todos tus proyectos diferentes realmente ahorra mucho tiempo. Y eso fue otra gran parte de mi motivación, ¿sabes? También intentar hacer cosas que, como intentar llenar estos nichos que actualmente no están cubiertos. Como ser increíblemente rápido y simplemente muy simple. Como este tipo de motor de juego casi didáctico donde puedes aprender un poco sobre cómo funcionan los motores de juego solo con mirar el código y demás.

Ahora, estoy muy familiarizado con los juegos JS13K. He sido juez durante los últimos dos o tres años. Así que hablando de los juegos JS13K, ¿cuál es uno de tus principales consejos para alguien que quiera participar en los juegos JS13K utilizando Little JS como el motor de juego? Sí, absolutamente. Hasta ahora, soy el único que ha utilizado Little JS en JS13K porque lo lancé el año pasado. Ahora espero que este año más personas lo utilicen. Y cuando lo hagan, sí, ¿cuáles son mis consejos? Bueno, Little JS tiene, puedes utilizar el constructor incorporado, el constructor de paquetes, como quieras llamarlo, para construir todo en un archivo zip súper pequeño. Básicamente hace exactamente lo que necesitas para JS13K. Así que la forma en que lo tengo configurado es que el programa de hola mundo es el predeterminado y haces clic en tu construcción, es el archivo bat, por lo que es muy fácil ver cómo funciona. Y eso podría ser algo en lo que realmente me gustaría ayuda si alguien más quiere rehacer el sistema de herramientas de construcción. Ahora mismo es un archivo bat simple, haces clic en eso, construye todo en un archivo zip. Para JS13K, recuerda qué es lo que ocupa espacio. Principalmente no es el código, sino el arte.

Sprite Color Tinting and CZ Effects

Short description:

LittleJS puede agregar tinte de color a los sprites, lo que permite una variedad de colores de enemigos con solo unos pocos fotogramas de animación y un solo sprite. Además, CZ Effects es una excelente opción para efectos de sonido, ya que no requiere archivos de onda grandes.

Entonces, LittleJS puede ayudar mucho con eso. Por lo general, uso arte de píxeles de bajo riesgo para mis cosas de JS13K, pero LittleJS puede agregar tinte de color a los sprites. Por ejemplo, en Space Huggers, el juego que lancé para el último JS13K, hay un sprite con solo dos fotogramas de animación que uso para los enemigos. Y es como, no tiene saturación está completamente desaturado. Entonces puedo aplicarle color y hacer que parezca de diferentes colores de enemigos. Luego tengo otro sprite que coloco encima de eso, que puedo tener diferentes colores para la máscara del enemigo. Así que con solo esos dos pequeños elementos, estoy usando dos fotogramas de animación y un solo sprite de una especie de ojo encima de ellos, y tengo una gran variedad. Así que piensa en combinar arte, piensa en usar cosas más pequeñas. CZ Effects también es genial para eso porque el sistema de efectos de sonido no requiere archivos de onda ni nada. Así que es súper pequeño. No sé, Michelle, ¿qué más responde eso? Sí, creo que es una buena respuesta.

Getting Started and 3D Capabilities

Short description:

Si quieres trabajar directamente con el código, comienza con uno de los ejemplos y ajústalo. LittleJS actualmente tiene un sistema de renderizado 2D, pero puedes lograr efectos pseudo 3D. Utiliza WebGL y se puede ampliar para renderizar lo que desees. El resto del motor funciona bien con un sistema 3D. El código WebGL es fácil de leer y está todo en un solo archivo fuente.

Y creo que esto nos lleva muy bien a la siguiente pregunta de Tam Tarr, quien posiblemente esté buscando ingresar a los juegos JS y NK. Pero si alguien quisiera comenzar a programar con el motor, ¿cómo se comienza realmente? ¿Hay una interfaz, como los motores de juego populares similares, cómo se comienza realmente con el motor?

Absolutamente, así que creo que realmente hay dos tipos de motores de juego disponibles. Tienes el game engine que tiene una interfaz, una UI, que es algo que ha surgido en los últimos 10 o 20 años. Así no es como solían funcionar los motores de juego en el pasado. Entonces tienes Unreal, Unity, GameMakers, todas estas cosas, Pico-8 y donde puedes tener una interfaz incorporada. Puedes crear tu arte, puedes crear tus niveles y todo eso. Luego hay otra clase de motores de juego que son solo el código en sí. No hay una interfaz para el motor. Para el editor, uso Visual Studio para la interfaz de codificación y uso una extensión, una extensión de codificación en vivo. Puedo presionar un botón y automáticamente cargará el código o cada vez que guardo un archivo, se volverá a cargar automáticamente el juego en el navegador que tengo en una pantalla separada. Esa es mi interfaz. Luego tengo el código frente a mí. ¿Sabes a lo que me refiero? Es como si quisieras trabajar directamente con el código, la forma en que comenzarías, recomendaría es comenzar con uno de los ejemplos y comenzar a ajustarlo desde allí. Así es como pretendo que las personas lo usen, al menos la primera vez, elige el ejemplo que más se acerque a lo que quieres hacer y comienza a modificarlo desde allí.

Sí, también podría pedirte que compartas algunos enlaces a esos ejemplos. Probablemente sea casi la última pregunta que tengo porque se me está acabando el tiempo aunque tengo muchas otras preguntas pero es de Maya y Zalediq, ¿LittleJS es solo para 2D o tiene capacidades 3D, soporte de modelos 3D y cosas así o solo es 2D? Bueno, actualmente lo que está incorporado es un sistema de renderizado 2D. Me enfoqué en el renderizado en pilas aunque puedes hacer muchas cosas como efectos pseudo 3D. Gran parte de lo que consideramos 3D, algunas de las cosas más geniales que parecen 3D. no utilizan realmente modelos 3D. sino más bien un tipo de efecto 3D. Por ejemplo, para mi primer juego JS 13K, agregué sombras, era un juego de vista superior y agregué estas sombras que hacían que todo pareciera casi 3D. Entonces puedes hacer cosas como esa. También utiliza web, también tiene WebGL incorporado de forma predeterminada. Por lo tanto, no sería difícil ampliarlo para comenzar a renderizar lo que desees. En lugar de eso, podrías renderizar lo que quieras. Creo, en otras palabras, creo que podría ser un buen lugar para que las personas comiencen a ver cómo funciona WebGL. y construir a partir de eso. El resto del game engine, por cierto, funcionaría perfectamente bien con un sistema 3D. Realmente solo me enfoqué en el renderizado en lo que necesitaba enfocarme, ¿sabes? Así que me enfoqué en 2D. Pero el código WebGL es completamente fácil de leer y está todo en un solo archivo fuente. Así que es muy fácil de revisar.

Sí, genial. Y creo que casi se nos acaba el tiempo.

Q&A and Conclusion

Short description:

No tenemos tiempo para responder todas las preguntas sobre la adopción de Little.js en juegos a gran escala y cómo el motor de juego funciona tan bien a pesar de su tamaño reducido. Frank estará disponible en el canal de los oradores en Discord para continuar la discusión y responder cualquier pregunta. Gracias por su tiempo y por aprender sobre Little.js.

Y creo que casi se nos acaba el tiempo. Sé que hay muchas preguntas sobre la adopción de Little.js en juegos a gran escala, cómo lograste que el game engine funcione tan bien, a pesar de ser tan pequeño.

Tuvimos una conversación fantástica entre bastidores aquí sobre la naturaleza de código abierto de Little.js y cómo participar si quieres comenzar a contribuir. Desafortunadamente, no tenemos tiempo para responder todas esas preguntas en este momento.

Pero afortunadamente para todos ustedes, Frank se quedará. No aquí mismo, pero lo encontrarán en Discord. Así que Frank estará en el canal de los oradores. Así que vayan y charlen con Frank, háganle todas esas preguntas. Y sí, conozcan a otras personas y háganle a Frank algunas preguntas realmente interesantes. Ha sido genial hablar con él entre bastidores aquí. Así que muchas gracias por tu tiempo, Frank y por enseñarnos todo sobre Little.js. Gracias Michelle, lo aprecio mucho. ♪♪♪ ♪♪♪

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. 
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.
How to Make a Web Game All by Yourself
JS GameDev Summit 2023JS GameDev Summit 2023
27 min
How to Make a Web Game All by Yourself
It's never been easier to make your own web game, but it's still extremely difficult. What game should you make? Which engine should you choose? Let's discuss how to answer these problems and ways to leverage the unique platform that is the web.

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