Haciendo Juegos Increíbles con LittleJS

Rate this content
Bookmark
Project website

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.

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
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!
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
32 min
Cómo no construir un videojuego
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
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.
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
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.