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.

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

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.

QnA

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
El motor de juegos de código abierto PlayCanvas está construido específicamente para el navegador, incorporando 10 años de aprendizaje sobre optimización. En esta charla, descubrirás la salsa secreta que permite a PlayCanvas generar juegos con tiempos de carga increíblemente rápidos y tasas de fotogramas sólidas como una roca.
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
Durante esta sesión, veremos un par de demostraciones de lo que puedes hacer usando WebXR, con Babylon.js. Desde experimentos de audio en VR, hasta juegos casuales en VR en una máquina de arcade hasta un uso más serio para crear nuevas formas de colaboración usando AR o VR, deberías tener una comprensión bastante buena de lo que puedes hacer hoy.
Consulta también el artículo para ver el contenido completo, incluyendo ejemplos de código: artículo. 
Cómo no construir un videojuego
React Summit 2023React Summit 2023
32 min
Cómo no construir un videojuego
En esta charla profundizaremos en el arte de crear algo significativo y gratificante. A través de la mirada de mi propio viaje de redescubrir mi pasión por la programación y construir un videojuego desde cero con JavaScript y React, exploraremos los compromisos entre soluciones fáciles y rendimiento rápido. Obtendrás información valiosa sobre prototipado rápido, infraestructura de pruebas y una variedad de trucos de CSS que se pueden aplicar tanto al desarrollo de juegos como a tu trabajo diario.
¡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!
Unity, cuando se implementa en la web, enfrenta tres desafíos críticos: el tamaño de la compilación, el uso de memoria y el rendimiento general. Esta charla profundiza en técnicas avanzadas de optimización para ayudarte a abordar cada uno de estos problemas. Los asistentes obtendrán información sobre:
- Estrategias efectivas para optimizar texturas, audio y modelos.- Un análisis detallado de nuestra experimentación con ASTC en Unity, arrojando luz sobre los resultados inesperados a pesar de las afirmaciones de Unity.- Una guía completa de la herramienta de perfilado de memoria de Unity y sus implicaciones.- Una exploración de configuraciones de Unity menos conocidas que siguen siendo subutilizadas por muchos desarrolladores.
Además, presentaremos nuestra herramienta propietaria diseñada específicamente para la optimización de Unity. También mostraremos el panel de control para desarrolladores de CrazyGames, nuestra plataforma que permite a los desarrolladores monitorear y mejorar el rendimiento de sus juegos web de manera fluida.
Únete a nosotros para equiparte con las últimas estrategias y herramientas para elevar tus proyectos de juegos web de Unity.
Cómo hacer un juego web tú solo
JS GameDev Summit 2023JS GameDev Summit 2023
27 min
Cómo hacer un juego web tú solo
Nunca ha sido tan fácil hacer tu propio juego web, pero sigue siendo extremadamente difícil. ¿Qué juego deberías hacer? ¿Qué motor deberías elegir? Vamos a discutir cómo responder a estos problemas y formas de aprovechar la plataforma única que es la web.

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
WorkshopFree
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.
Construyendo el Metaverso Interconectado y Traversable
JS GameDev Summit 2022JS GameDev Summit 2022
103 min
Construyendo el Metaverso Interconectado y Traversable
WorkshopFree
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.