Haciendo Juegos Increíbles con LittleJS

This ad is not shown to multipass and full ticket holders
React Summit US
React Summit US 2025
November 18 - 21, 2025
New York, US & Online
The biggest React conference in the US
Learn More
In partnership with Focus Reactive
Upcoming event
React Summit US 2025
React Summit US 2025
November 18 - 21, 2025. New York, US & Online
Learn more
Bookmark
Project website
Rate this content

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

This talk has been presented at JS GameDev Summit 2022, check out the latest edition of this JavaScript Conference.

FAQ

Little.js es un motor de juegos JavaScript muy ligero y rápido, que incluye todas las herramientas necesarias para comenzar a desarrollar juegos de inmediato. Es de código abierto bajo la licencia MIT, facilitando su uso sin restricciones de licencias complejas. Ofrece un renderizado de sprites extremadamente rápido, soporte para WebGL y Canvas, y es ideal para competencias de codificación limitadas por tamaño como JS13K.

Little.js fue creado por Frank Forse, un desarrollador con más de 20 años de experiencia en el desarrollo de videojuegos, habiendo trabajado en títulos conocidos como DOOM, PsyOps y Starhawk, además de participar en competencias de desarrollo de juegos de 48 horas y en la comunidad JS13K.

Little.js soporta la creación de juegos tanto en dispositivos móviles como de escritorio, manejo de entradas como teclado, mouse y hasta cuatro gamepads, incluyendo un gamepad en pantalla para dispositivos táctiles. También incluye un sistema de audio único para efectos de sonido generativos y posicionales, así como un sistema de música.

Para comenzar con Little.js, puedes explorar y utilizar los proyectos de inicio que se incluyen con el motor, los cuales cubren varios tipos de juegos y demuestran las funcionalidades del motor. Además, toda la documentación está disponible en su sitio web, generada automáticamente a partir de los comentarios en el código.

Aunque Little.js es ideal para competencias de codificación de juegos de tamaño reducido, como JS13K, también está diseñado para escalar y manejar proyectos de juegos más grandes, ofreciendo un rendimiento eficiente y una amplia gama de funcionalidades.

Frank Force
Frank Force
34 min
07 Apr, 2022

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Little.js es un motor de juegos JavaScript superligero y rápido que tiene todo incluido para comenzar a hacer juegos de inmediato. Tiene una huella diminuta 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 integral y varios proyectos iniciales 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.

1. Introducción

Short description:

Bienvenidos a mi charla sobre LittleJS Engine 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 completado muchas masterclass de 48 horas y gané el segundo lugar. He publicado más de mil pequeños programas JS en Twitter, creando una amplia variedad de salidas visuales. Recientemente, me he interesado en el arte generativo de larga duración.

Hola a todos. Bienvenidos a mi charla sobre LittleJS Engine y cómo puedes crear juegos increíbles con él. ¿Quién soy? 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 masterclass de 48 horas, y he hecho muchas otras cosas de desarrollo indie. He hecho algunos JS 13k's y gané el segundo lugar. También gané la Ilusión Óptica del Año con un programa JS, y he publicado más de mil pequeños programas JS en un sitio web llamado Twitter, donde hacemos programas JS de 140 caracteres. Son súper pequeños, pero he logrado crear una amplia variedad de salidas visuales. Más recientemente, me he interesado en el arte generativo de larga duración, como ves aquí, que están todos creados con JavaScript.

2. Motor de Juego Little.js

Short description:

Little.js es un motor de juego JavaScript super ligero y rápido que tiene todo incluido para comenzar a hacer juegos de inmediato. Tiene una huella minúscula y no tiene dependencias, lo que lo hace perfecto para competencias de codificación de tamaño como JS13K. Little.js está lleno de características, incluyendo una rápida representación de sprites, un sistema de representación de datos de nivel, soporte móvil y táctil, manejo de física y colisiones, y un sistema de audio único. También proporciona una solución integral para el manejo de entradas y tiene una documentación completa. Únete a nuestra comunidad de Discord para compartir tu trabajo y hacer preguntas.

Entonces, ¿qué es Little.js y por qué deberías importarte? Bueno, Little.js es un motor de juego JavaScript super ligero y rápido. Tiene todo incluido para comenzar a hacer juegos de inmediato, y varios proyectos de ejemplo para ayudarte a comenzar. También es muy importante asegurarse de que se lance con una licencia de código abierto MIT, para que cualquiera pueda usarlo sin preocuparse por acuerdos de licencia complicados.

Little.js se demuestra mejor con mi juego Space Huggers, que originalmente lancé para JS13K, pero luego lo actualicé en nuevos terrenos. Así que por favor, échale un vistazo para una gran demostración de todo lo que Little.js puede hacer. Little.js está lleno de características, con todo incluido para comenzar a hacer juegos. Para muchos motores de juegos, el tamaño del motor de juego no es una característica, pero para Little.js, es una de las principales características porque la huella es extremadamente pequeña. No hay dependencias y me aseguré de que la interfaz también sea super simplificada. Esto permite que se ajuste en un archivo zip super 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 hacer juegos grandes. Hablaremos de eso pronto.

Porque tiene una representación de sprites muy, muy rápida del orden de 100,000 sprites. Y también tiene un sistema de representación de datos de nivel super rápido. Combinando estas dos cosas, puedes tener un juego completamente funcional con soporte WebGL y canvas para lo mejor de ambos mundos. También tiene soporte móvil y táctil, porque eso es tan importante hoy en día. Little.js es un motor de juego orientado a objetos que utiliza EngineObject como la 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 incorporado el manejo de física y colisiones, y algunas otras características que necesitarás, como un sistema de padres e hijos y clasificación para la representación y las características de debug. 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 activos, por lo que es muy rápido para iterar con él. Y estos efectos de sonido son posicionales, por lo que el paneo estéreo y el volumen se atenúan automáticamente para hacerlo sonar como si viniera de una ubicación en el mundo. Little.js también proporciona un pequeño sistema de música, que es realmente útil para competencias de codificación de tamaño. Y por supuesto puedes usar archivos WAV MP3 o ODD también. Little.js tiene una solución integral para el manejo de entradas para teclado y ratón, 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 en el que puedes navegar toda la documentación, que se genera automáticamente a partir del código en los comentarios usando js-doc. El código en sí también es muy simple y fácil de leer, y está lleno de comentarios para que todos puedan entender cómo funciona todo. Hay un sistema de construcción incluido con varios proyectos iniciales, y recientemente hemos creado 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 de matemáticas 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 seguir fácilmente el tiempo. El objeto Engine es la clase base para Little.js, y la clase ParticleSystem añade funcionalidad de emisión de partículas. Little.js también tiene un sistema de metales incorporado para el seguimiento de logros y un sistema de física simple para la colisión de cajas delimitadoras alineadas con 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 algunos de ellos.

Vector2 es la clase de matemáticas 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 esparcidas por todo el código para asegurar que todo se utilice correctamente. Y estas aserciones se eliminarán automáticamente de las versiones de lanzamiento para 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 a 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 seguir cuánto tiempo ha pasado desde que se estableció sin ninguna actualización requerida. 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 luego, cuando estés listo, puedes llamar a onset para volver a ponerlo en modo de inicio. Uso estos todo el tiempo en mi código de juego. Así que espero que le des una oportunidad.

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

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

Little.js tiene su propio sistema de metales incorporado para el seguimiento de los logros del jugador. Se guarda automáticamente en el almacenamiento local. Y hay un pop-up que aparece cuando se desbloquea por primera vez un logro. Y este sistema de metales tiene soporte para new ground incorporado automáticamente para que puedas poner tu juego en new grounds muy fácilmente.

Little.js tiene su propio sistema de física simple y rápido incorporado. Ahora, esto es solo para la colisión de cajas delimitadoras alineadas con el eje. Así que 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, la física de objeto contra nivel y la física de objeto contra objeto. La física de objeto contra nivel permite una colisión súper rápida entre un objeto en movimiento rápido y datos de nivel de mosaico estacionario. La física de objeto contra objeto proporciona un solucionador de física 2D para colisiones entre objetos. El sistema de renderizado combina WebGL y Canvas 2D, con WebGL ofreciendo un renderizado de sprites increíblemente rápido y Canvas 2D proporcionando versatilidad para el fondo, texto y depuración. El sistema de capas de mosaico permite un renderizado de nivel rápido con múltiples capas y la capacidad de dibujar directamente para efectos persistentes.

Hay dos tipos de física, una física de objeto contra nivel y una física de objeto contra objeto. Y ambos tipos de física se combinan para ofrecerte una solución física completa.

La física de objeto contra nivel es donde obtienes la colisión súper rápida entre un objeto en movimiento rápido y un nivel de mosaico estacionario data. Se proporcionan varias funciones para probar donde la colisión es hacer un array cast. 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 contra 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, la amortiguación, la elasticidad y la fricción. Y un sistema de renderizado de Little.js es 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 de nivel data y otros efectos donde puedes, donde necesitarías un renderizado de Canvas 2D. Luego tienes una capa intermedia de renderizado de sprites súper rápido y efectos de partículas hecho usando WebGL. Y tu capa superior es otra capa de Canvas 2D para el texto de superposición y efectos, el HUD, cualquier tipo de información de debugging.

Ahora, el renderizado de WebGL es impresionante porque es increíblemente rápido. Puedes renderizar miles y miles de sprites a 60 fotogramas por segundo. Lo hace agrupando todas estas llamadas de dibujo. Y es capaz de hacer esto porque todos esos sprites están en la misma hoja de mosaicos. Así que solo se necesita una textura. Creo que incluso para juegos mucho más grandes, puedes caber fácilmente la mayoría del arte en una sola hoja de mosaicos. Aunque por supuesto es posible usar múltiples texturas si lo necesitas.

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

El sistema de capas de mosaicos es el renderizado de nivel rápido. Ahí es donde tienes una cuadrícula de mosaicos que se almacenan en un canvas fuera de pantalla para un renderizado súper rápido. Está pensado para coincidir con los datos de colisión para que tengas una colisión de nivel y renderizado en marcha. Y puedes usar múltiples capas de mosaicos si necesitas tener una capa trasera y delantera o capas una al lado de la otra. Otra gran cosa de este sistema es que estas capas son, ya que se almacenan en otro canvas, puedes dibujar en ese canvas directamente para efectos persistentes como la destrucción. La forma en que todo esto funciona es manteniendo un array de estos objetos de datos de capa de mosaicos que es cómo dibujar cada mosaico.

5. Renderizado, Audio y Proyectos Iniciales

Short description:

Little.js proporciona un sistema de renderizado rápido para mosaicos, 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 iniciales 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, el espejo, el color, y el índice de mosaico para cada mosaico. Y recorrerá todo ese array y renderizará todos esos mosaicos en el canvas 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 al que puedes acceder presionando el botón 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 pequeño generador de efectos de sonido. Tiene su propio editor de efectos de sonido, que es otro sitio web que he lanzado separadamente de little.js. Puedes usarlo para cualquier juego que te guste. El diseñador de efectos de sonido es realmente agradable porque hay un montón de presets 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 un archivo WAV si quieres.

ZZFXM es el pequeño reproductor de música que se incluye con little.js, y esto es algo que realmente necesitas si estás haciendo una competencia de codificación de tamaño. Es capaz de reproducir música usando ZZFX para generar los efectos de sonido con un formato de música super pequeño que es legible por humanos y un reproductor super 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, podrías querer usar un archivo mp3 o AUG para tu música, o incluso WAV.

Se proporcionan varias funciones más para audio como la síntesis de voz y la capacidad de reproducir muestras directamente.

Little.js viene con una variedad de proyectos iniciales en los que puedes construir, para prácticamente cualquier tipo de juego que te gustaría hacer. Helloworld es simplemente tu proyecto inicial de ejemplo simple que muestra la funcionalidad central de Little.js, como un sistema de partículas, nivel de data y objetos de juego, ese tipo de cosas. La prueba de estrés es lo que puedes usar para probar cuántos sprites es capaz de renderizar a 60 FPS en una variedad de dispositivos diferentes. Hemos encontrado que funciona muy bien en dispositivos móviles, a veces incluso mejor que en el escritorio. Se proporciona un juego de rompecabezas, que es un juego de rompecabezas básico de estilo match three. Y puedes usar un touch pad o un ratón para controlarlo. Y siéntete libre de construir en estos proyectos iniciales para tu propio juego si quieres, para eso están. Para un juego de estilo arcade, tenemos Breakout. Muestra una colisión y física. También puedes controlarlo con un touch pad o un game pad de ratón. El ejemplo más complicado es el Plataformas, que tiene una física más avanzada para plataformas, saltos, escaleras, cajas y enemigos disparando, ese tipo de cosas. También he lanzado el Editor de Partículas, así que puedes usar esto para crear sistemas de partículas para tu juego. Todavía es un trabajo en progreso. Hay muchas más cosas que quiero añadirle, 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 ser parte de él. Han pasado menos de un año desde su lanzamiento, y ya tiene más de 2000 me gusta en GitHub. He refinado mi juego Spacehuggers y lo he lanzado en Newgrounds con el Sistema de Logros. Isletopia se está desarrollando utilizando Little.js y pronto estará disponible 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 escuchar 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 actualizaciones.

Así que hablemos sobre cuál es el futuro para Little.js y cómo podrías querer ser parte de él. Han pasado menos de un año desde que lancé Little.js y ya tiene más de 2000 me gusta en GitHub. Tomé mi juego JS13K, Spacehuggers, lo refiné un poco y lo lancé en Newgrounds con el Sistema de Logros. Así que por favor échale un vistazo. Mucha gente lo jugó, y creo que definitivamente es uno de los mejores juegos que he hecho. Se puede jugar completamente en escritorio o móvil. Incluso puedes jugar en cooperativo con hasta cuatro jugadores.

Isletopia se está desarrollando usando little.js, y puedes añadirlo a tu lista de deseos. Pronto estará disponible 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 se reduce a lo que otras personas están interesadas y lo que quieren 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 tamaño. Aunque, como dije, definitivamente es capaz de expandir un juego a un juego más grande. Me gustaría hacer más cosas de Space Hugger en algún momento. Tengo muchas ideas de cómo construir para eso, aunque eso no es realmente mi enfoque en este momento. Entonces, ¿por qué no me dices lo que 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 hecho, y estoy muy feliz de tener esta oportunidad de compartirlo con todos. Está completamente abierto para que todos lo usen para cualquier cosa que quieran usarlo. Así que, por favor, dale me gusta 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 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, ZZFX por ejemplo, y muchas otras pequeñas herramientas. Otras cosas de game development, revisa mi Twitter. Ahí es donde publiqué todos esos mil pequeños programas de JavaScript que son tan divertidos para 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 Juegos y Little.js

Short description:

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

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

Antes de saltar a algunas de las preguntas y estábamos teniendo una muy buena conversación detrás del escenario, así que vamos a llevar eso al escenario principal. Pero vamos a echar un vistazo a estas preguntas de la encuesta. Así que si miramos en la pantalla, podemos ver que es casi una división 50-50 en este momento. La gente quiere aprender sobre el game engine. Así que aprender sobre Little.js y también sobre hacer juegos pequeños. A nadie le interesa demasiado hacer juegos grandes como Little.js u otras cosas. Pero sí, parece que estos son los dos principales áreas de enfoque en este momento.

Así que sé que tu charla no profundizó mucho en cómo funciona el game engine en realidad. Pero parece que a mucha gente le gustaría saber. ¿Dónde pueden encontrar esa información? ¿Hay tutoriales o videos que puedan ver? Entonces, sí, mi enfoque con Little.js es hacer que el game engine en sí sea tan simple y fácil de entender y bien comentado y cosas así, que tú, para entender cómo funciona el game engine, estás como permitido, se supone que debes mirar el código en sí. Así que si tomas la mayoría de los motores de juegos, el código para el game engine, nunca se supone que debes mirar. De hecho, probablemente será una gran sobrecarga y confuso para ti, y definitivamente no querrás cambiarlo. Pero Little.js, es un paradigma totalmente diferente donde puedes usarlo directamente de la caja y hay versiones minificadas disponibles o para hacer juegos pequeños, que a mucha gente le interesa. Incluso puedes querer hacer algunos cambios en el motor central en sí. Y puedes, porque es tan simple y fácil de entender.

Fantástico. Bien, pasemos a algunas de las preguntas y respuestas. Entonces, una de mis primeras grandes preguntas es, sí, ¿por qué construir un game engine? ¿Por qué empezaste? Cuéntanos sobre tu viaje. Y Melanie, o Melody en el chat también tiene una pregunta relacionada con eso, 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 alrededor de la mitad de las personas están interesadas en juegos pequeños y cosas así. Entonces, si sabes un poco sobre eso, probablemente sabes que no puedes usar la mayoría de los motores de juegos para JS13K, porque van a ser demasiado grandes. Así que hay un conjunto muy pequeño de, lo que podrías llamar micro frameworks. La mayoría de ellos no son realmente motores de juegos completos, como Little JS está destinado a ser un game engine completo que puedes usar directamente de la caja sin mucho código extra. Pero hay otros frameworks que puedes usar y cosas así.

Motivación y Consejos para Juegos JS13K

Short description:

Hice mi propio motor de juegos para JS13K y aprendí mucho de él. Tener un motor de juegos que tú mismo hiciste ahorra mucho tiempo. Quería llenar nichos que actualmente no están llenos y crear un tipo de motor de juegos didáctico. Little JS es el único motor utilizado en JS13K hasta ahora. Consejos para JS13K: Usa 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 haciendo JS13K durante, este es el tercer año que lo hice, cuando hice Little JS. Y el primer año que lo hice, hice mi propio game engine desde cero también. Porque como dije, tienes que hacerlo o usar un pequeño framework o algo así. No puedes usar, definitivamente no puedo usar Unreal, en el que soy realmente bueno, pero ese es un game engine de C++. No está destinado para hacer un pequeño juego web. Así que tuve que hacer mi propio game engine.

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 juegos que he hecho, por cierto. He hecho muchos motores de juegos. También lancé uno, un game engine de C++, hace unos 10 años, que he usado para muchas, muchas cosas diferentes. Y otra cosa sobre hacer tu propio game engine o este tipo de hacer tu propia biblioteca y framework es que me gusta hacer muchos proyectos pequeños, diría. Pero encontré que uno de los problemas con eso es que tienes mucho código de plantilla que sigues pegando y cambiando y cosas así. Y eso puede hacer que sea realmente engorroso tener, digamos, 10 proyectos diferentes que todos tienen 10 copias diferentes, ligeramente diferentes de este game engine que pueden tener cualquier número de correcciones de errores o cualquier cosa que hayas hecho. Así que tener un game engine que tú mismo hiciste que puedes evolucionar lentamente y usar para todos tus diferentes proyectos realmente ahorra mucho tiempo. Y esa fue otra gran parte de mi motivación, ¿sabes? También intentando hacer cosas que como intentar llenar estos nichos que actualmente no están llenos. Como ser increíblemente súper rápido y realmente simple. Como este tipo de motor de juegos casi didáctico donde puedes aprender un poco sobre cómo funcionan los motores de juegos solo mirando el código y cosas así.

Ahora, estoy muy familiarizado con los juegos JS 13k. He sido juez durante los últimos dos o tres años. Entonces, hablando de juegos JS 13k, ¿cuál es uno de tus principales tips para alguien que estaría buscando participar en juegos JS 13k usando Little JS como el game engine? Sí, absolutamente. Hasta ahora soy el único que ha usado Little JS en JS 13k porque eso es cuando lo lancé el año pasado. Ahora espero que este año más personas lo usen. Y cuando lo hagan, sí, ¿cuáles son mis tips? Bueno, Little JS tiene, puedes usar el constructor incorporado, el constructor de paquetes, como quieras llamarlo, para reducir todo a un archivo zip súper pequeño. Básicamente hace exactamente lo que necesitas para JS 13k. Así que la forma en que lo tengo configurado es el programa 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 con lo que realmente me gustaría ayuda si alguien más quiere rehacer el sistema de herramientas de construcción. Es muy simple ahora, y probablemente alguien debería mirarlo. Pero ahora es un simple archivo bat, haces clic en eso, construye todo a un archivo zip. Para JS 13k, recuerda ¿qué ocupa espacio? Así que eso es principalmente no el código, sino el arte.

Tinte de Color para Sprites y Efectos CZ

Short description:

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

Entonces, LittleJS puede ayudar mucho con eso. Normalmente uso arte pixelado de bastante bajo riesgo para mis cosas de JS 13k, 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 animation que uso para los enemigos. Y es algo así como, no tiene saturación está completamente desaturado. Así que puedo aplicarle color y hacer que parezca que tiene diferentes colores de enemigos. Luego tengo otro sprite que superpongo a ese, que puede tener diferentes colores para la máscara del enemigo. Así que con solo ese pequeño bit de dos, estoy usando dos fotogramas de animation y un sprite de algo parecido a un ojo encima de ellos, y tengo toda una variedad diferente. Así que piensa en combinar arte, piensa en usar cosas más pequeñas. Los efectos CZ también son geniales 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, ¿eso responde a tu pregunta? Sí, creo que es una buena respuesta.

Comenzando y Capacidades 3D

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 extender para renderizar lo que quieras. El resto del motor funciona bien con un sistema 3D. El material de WebGL es fácil de leer y está todo en un solo archivo fuente.

Y creo que esto lleva muy bien a la siguiente pregunta de Tam Tarr, que posiblemente está buscando adentrarse en los juegos de JS y NK. Pero si uno quisiera empezar a programar con el motor, ¿cómo se empieza realmente? ¿Hay una interfaz, similar a los motores de juegos populares, cómo se empieza realmente con el motor?

Absolutamente, creo que realmente hay dos tipos de motores de juegos por ahí. Tienes el game engine que tiene una interfaz, una UI, que es más, que es algo que ha surgido en los últimos 10 o 20 años. Así no es como solían funcionar los motores de juegos en el pasado. Así que tienes tu Unreal, tu Unity, tus GameMakers, todas estas cosas, Pico-8 y donde puedes tener una interfaz que está toda integrada. Puedes hacer tu arte, puedes crear tus niveles y todo eso. Luego hay otra clase de motores de juegos que son solo el código en sí. No hay UI para el motor. Para el editor, uso Visual Studio para la interfaz de programación y uso una extensión, una extensión de programación en vivo. Puedo pulsar un botón y automáticamente cargará el código o en realidad cada vez que guardo un archivo, automáticamente recargará el juego en el navegador que tengo en una pantalla separada. Esa es mi interfaz. Luego tengo el código delante de mí. ¿Sabes a qué me refiero? Es como si quisieras trabajar directamente con el código, la forma en que te recomendaría empezar es comenzar con uno de los ejemplos y empezar a ajustarlo desde ahí. Así es como pretendo que la gente lo use, al menos por primera vez es como elegir el ejemplo que esté más cerca de lo que quieres hacer y empezar a hackearlo desde ahí.

Sí, también, podría pedirte que dejes algunos enlaces a esos ejemplos. Probablemente casi la última pregunta que tengo porque me estoy quedando sin tiempo aunque tengo muchas otras preguntas pero es de Maya y Zalediq, ¿LittleJS es solo para 2D o tiene capacidades 3D, formato de soporte de modelos 3D y cosas así o es solo 2D? Bueno, actualmente lo que está integrado es un sistema de renderizado 2D. Me centré en el renderizado de pilas aunque puedes hacer muchas cosas como pseudo 3D. Muchas de las cosas que consideramos como 3D, algunas de las cosas que parecen más 3D no están usando realmente modelos 3D sino más bien un tipo de efecto 3D-ish donde, bueno, en realidad para mi primer juego JS 13K, añadí como sombra, era como un juego de vista superior y añadí como estas sombras que hacían que todo pareciera casi 3D. Así que puedes hacer cosas así. También utiliza web, también tiene WebGL integrado por defecto. Así que no sería difícil extenderlo para empezar a renderizar lo que quieras. Como ahora mismo renderiza un cuadrado en el centro de la pantalla y eso tiene todo en él. Así que en lugar de eso, podrías renderizar lo que quieras. Creo, en otras palabras, creo que podría ser un buen lugar para que la gente empiece a ver cómo funciona WebGL y a partir de ahí. El resto del game engine, por cierto, funcionaría perfectamente bien con un sistema 3D. Realmente es solo el renderizado en el que necesito centrarme, ¿sabes? Así que me centré en 2D. Pero el material de WebGL es completamente fácil de leer y todo en un solo archivo fuente. Así que es realmente fácil de revisar.

Sí, genial. Y creo que casi estamos en el tiempo.

Preguntas y Respuestas y Conclusión

Short description:

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

Y creo que casi estamos en el tiempo. Sé que hay bastantes preguntas sobre la adopción de Little.js para juegos de mayor scale, cómo hiciste que el game engine funcionara tan bien, a pesar de que es tan pequeño.

Tuvimos una fantástica conversación detrás del escenario aquí sobre la naturaleza de código abierto de Little.js y cómo involucrarse si quieres empezar a contribuir. Desafortunadamente, no tenemos tiempo para responder todas esas preguntas ahora mismo.

Pero afortunadamente para todos ustedes, Frank se quedará. No justo aquí, pero lo encontrarás en Discord. Así que Frank estará en el canal de oradores. Así que vayan y tengan una charla con Frank, hagan todas esas preguntas. Y sí, conozcan a otras personas y simplemente hagan a Frank algunas preguntas realmente interesantes. Ha sido realmente genial charlar con él detrás del escenario aquí. Así que muchas gracias por tu tiempo Frank y enséñanos todo sobre Little.js. Gracias Michelle, realmente lo aprecio. ♪♪♪ ♪♪♪

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

Optimización de juegos HTML5: 10 años de aprendizaje
JS GameDev Summit 2022JS GameDev Summit 2022
33 min
Optimización de juegos HTML5: 10 años de aprendizaje
Top Content
PlayCanvas is an open-source game engine used by game developers worldwide. Optimization is crucial for HTML5 games, focusing on load times and frame rate. Texture and mesh optimization can significantly reduce download sizes. GLTF and GLB formats offer smaller file sizes and faster parsing times. Compressing game resources and using efficient file formats can improve load times. Framerate optimization and resolution scaling are important for better performance. Managing draw calls and using batching techniques can optimize performance. Browser DevTools, such as Chrome and Firefox, are useful for debugging and profiling. Detecting device performance and optimizing based on specific devices can improve game performance. Apple is making progress with WebGPU implementation. HTML5 games can be shipped to the App Store using Cordova.
Construyendo Experimentos Divertidos con WebXR & Babylon.js
JS GameDev Summit 2022JS GameDev Summit 2022
33 min
Construyendo Experimentos Divertidos con WebXR & Babylon.js
Top Content
This Talk explores the use of Babylon.js and WebXR to create immersive VR and AR experiences on the web. It showcases various demos, including transforming a 2D game into a 3D and VR experience, VR music composition, AR demos, and exploring a virtual museum. The speaker emphasizes the potential of web development in the metaverse and mentions the use of WebXR in Microsoft products. The limitations of WebXR on Safari iOS are discussed, along with the simplicity and features of Babylon.js. Contact information is provided for further inquiries.
¡Mejora el Rendimiento de Tus Juegos WebGL Unity!
JS GameDev Summit 2023JS GameDev Summit 2023
7 min
¡Mejora el Rendimiento de Tus Juegos WebGL Unity!
Top Content
The Talk discusses ways to boost the performance of WebGL Unity games, including issues with bundle size, memory usage, and runtime performance. It suggests using Brotli for compression and non-exception support for better performance. Choosing the appropriate texture compression format and experimenting with separate builds can also help. The Talk also covers optimizing textures, models, audio, and assets by reducing build size, using compression, disabling unnecessary models, and optimizing audio quality. Unity's optimization tools and profilers are recommended for analyzing performance and memory issues.
Cómo No Construir un Videojuego
React Summit 2023React Summit 2023
31 min
Cómo No Construir un Videojuego
Top Content
The Talk showcases the development of a video game called Athena Crisis using web technologies like JavaScript, React, and CSS. The game is built from scratch and includes features like multiple game states, AI opponents, and map editing. It demonstrates the benefits of using CSS for game development, such as instant load times and smooth transitions. The Talk also discusses optimizing performance, supporting dark mode, and publishing the game to other platforms.
Mejora el rendimiento de tus juegos utilizando Canvas
JS GameDev Summit 2023JS GameDev Summit 2023
8 min
Mejora el rendimiento de tus juegos utilizando Canvas
The Talk discusses the use of the canvas element in games and web applications to improve performance. It compares the Canvas API and WebGL API, highlighting the advantages and disadvantages of each. The Canvas API allows for both CPU and GPU rendering, while WebGL API only uses GPU and hardware acceleration. Using the canvas element can significantly enhance performance, but it comes with increased complexity and development costs.
Juegos Web 3: Qué es y por qué es importante
JS GameDev Summit 2022JS GameDev Summit 2022
36 min
Juegos Web 3: Qué es y por qué es importante
Web3 gaming enables decentralized identity and finance, allowing game developers to bypass centralized platforms. It is driven by wallets, ERC20 tokens, and NFTs. Web3 games focus on collaborative world-building, ownership, and open-source collaboration. The challenge is achieving decentralization while addressing economic and technological limitations. Web3 aims to redefine the gaming industry by using economic tools and exploring new genres like RPG and RTS games.

Workshops on related topic

Crea un Juego Con PlayCanvas en 2 Horas
JSNation 2023JSNation 2023
116 min
Crea un Juego Con PlayCanvas en 2 Horas
Top Content
Featured WorkshopFree
Steven Yau
Steven Yau
En esta masterclass, construiremos un juego utilizando el motor WebGL de PlayCanvas desde el principio hasta el final. Desde el desarrollo hasta la publicación, cubriremos las características más cruciales como la escritura de scripts, la creación de UI y mucho más.
Tabla de contenido:- Introducción- Introducción a PlayCanvas- Lo que vamos a construir- Agregando un modelo de personaje y animación- Haciendo que el personaje se mueva con scripts- 'Falsa' carrera- Agregando obstáculos- Detectando colisiones- Agregando un contador de puntuación- Fin del juego y reinicio- ¡Resumen!- Preguntas
Nivel de la masterclassSe recomienda familiaridad con los motores de juegos y los aspectos del desarrollo de juegos, pero no es obligatorio.
PlayCanvas de principio a fin: la versión rápida
JS GameDev Summit 2022JS GameDev Summit 2022
121 min
PlayCanvas de principio a fin: la versión rápida
Top Content
Workshop
João Ruschel
João Ruschel
En esta masterclass, construiremos un juego completo utilizando el motor PlayCanvas mientras aprendemos las mejores prácticas para la gestión de proyectos. Desde el desarrollo hasta la publicación, cubriremos las características más cruciales como la gestión de activos, scripting, audio, depuración, y mucho más.
Introducción a WebXR con Babylon.js
JS GameDev Summit 2022JS GameDev Summit 2022
86 min
Introducción a WebXR con Babylon.js
Workshop
Gustavo Cordido
Gustavo Cordido
En este masterclass, te presentaremos los conceptos básicos de la construcción de experiencias de Realidad Mixta con WebXR y Babylon.js.
Aprenderás lo siguiente:- Cómo agregar objetos de malla 3D y botones a una escena- Cómo utilizar texturas procedurales- Cómo agregar acciones a objetos- Cómo aprovechar la experiencia predeterminada de Realidad Cruzada (XR)- Cómo agregar física a una escena
Para el primer proyecto en este masterclass, crearás una experiencia interactiva de Realidad Mixta que mostrará estadísticas de jugadores de baloncesto a fanáticos y entrenadores. Para el segundo proyecto en este masterclass, crearás una aplicación WebXR activada por voz utilizando Babylon.js y Azure Speech-to-Text. Luego, desplegarás la aplicación web utilizando el alojamiento de sitios web estáticos proporcionado por Azure Blob Storage.
Masterclass de Codificación en Vivo de Juegos Pequeños
JS GameDev Summit 2023JS GameDev Summit 2023
115 min
Masterclass de Codificación en Vivo de Juegos Pequeños
Workshop
Frank Force
Frank Force
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.
Construyendo el Metaverso Interconectado y Traversable
JS GameDev Summit 2022JS GameDev Summit 2022
103 min
Construyendo el Metaverso Interconectado y Traversable
Workshop
Avaer Kazmer
Avaer Kazmer
Basado en gran medida en Free Association en el Metaverso - Avaer @Exokit - M3, Avaer demostrará algunas de las formas en que los estándares abiertos permiten la travesía abierta y gratuita de usuarios y activos en todo el metaverso interconectado.