Making Awesome Games with LittleJS

Rate this content
Bookmark
Project website
The video talk discusses Little.js, a lightweight and fast JavaScript game engine ideal for both small and large games. It was created to fill niches and provide a didactic tool for developers. The engine supports fast sprite rendering, WebGL and Canvas 2D, mobile and touch devices, and includes a unique audio system. Little.js also features object-oriented structures, physics systems, and a built-in particle editor. It is perfect for JS13K competitions and larger projects. The video provides tips for optimizing game size, such as using the built-in builder and managing art assets. The speaker encourages developers to share their games and join the community on Discord. The talk also highlights the benefits of using Little.js for various game types, including platformers and puzzle games.

From Author:

LittleJS is a super lightweight game engine that is easy to use and powerfully fast. The developer will talk about why he made it, what it does, and how you can use it to create your own games. The talk will include a demonstration of how to build a small game from scratch with LittleJS.

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

FAQ

Little.js is a super lightweight and fast JavaScript game engine designed for creating both small and large games. It includes everything needed to start making games immediately and comes with several example projects.

Little.js was created by Frank Force, a game developer with over 20 years of experience. He has worked on games such as DOOM, PsyOps, and Starhawk, and has also participated in many 48-hour game jams and JS13K competitions.

Little.js features include super fast sprite rendering, a built-in physics and collision system, mobile and touch support, a unique audio system with positional generative audio, and comprehensive input handling for keyboard, mouse, and gamepads. It also offers WebGL and Canvas 2D support, making it versatile for various game development needs.

Yes, Little.js is open source and released under the MIT license, allowing anyone to use it without worrying about complicated licensing agreements.

The best demonstration of Little.js capabilities is the game Space Huggers, which was originally released for the JS13K competition and later updated on Newgrounds. This game showcases many of the features and performance capabilities of Little.js.

Yes, Little.js has built-in support for mobile and touch devices, making it suitable for developing games that can be played on smartphones and tablets.

Little.js comes with fully documented code, and there is a website where you can browse all the documentation. The documentation is auto-generated from code comments using js-doc, and the code is packed with comments to help users understand how everything works.

Little.js is versatile and can be used to make a wide range of games, from small size-coding competition games to larger, more complex games. It includes several starter projects such as a platformer, a puzzle game, and an arcade-style game like Breakout.

Little.js has a unique audio system with positional generative audio, allowing you to create sound effects without asset files. It includes ZZFX for tiny sound effects and ZZFXM for tiny music playback. You can also use WAV, MP3, or OGG files if needed.

There is a Discord community for Little.js where people can share their work, ask questions, and get support. Additionally, you can follow Frank Force on Twitter for updates and more information about Little.js and his other projects.

Frank Force
Frank Force
34 min
07 Apr, 2022

Comments

Sign in or register to post your comment.

Video Transcription

1. Introduction

Short description:

Welcome to my talk about LittleJS Engine and how you can make awesome games with it. I'm Frank Forse, the creator of LittleJS. I've worked in game dev for over 20 years on some games you've probably played, like DOOM, PsyOps, and Starhawk. I've also completed many 48-hour game jams and won second place. I've published over a thousand tiny JS programs on Twitter, creating a wide variety of visual outputs. Recently, I've been interested in long form generative art.

Hi, everyone. Welcome to my talk about LittleJS Engine and how you can make awesome games with it. Who am I? Well, I'm Frank Forse, the creator of LittleJS. I've worked in game dev for over 20 years on some games you've probably played, like DOOM, PsyOps, and Starhawk. I've also completed many 48-hour game jams, and I've done a lot of other indie dev stuff. I've done a few JS 13k's and won second place. I've also won Optical Illusion of the Year with a JS program, and I've published over a thousand tiny JS programs on a website called Twitter, where we make 140-character JS programs. They are super small, but I've managed to create a wide variety of visual outputs. More recently, I've been interested in long form generative art, like you see here, which are all created with JavaScript.

2. Little.js Game Engine

Short description:

Little.js is a super lightweight and fast JavaScript game engine that has everything included to start making games right away. It has a tiny footprint and no dependencies, making it perfect for size-coding competitions like JS13K. Little.js is packed full of features, including fast sprite rendering, a level data-rendering system, mobile and touch support, physics and collision handling, and a unique audio system. It also provides an all-inclusive input handling solution and has comprehensive documentation. Join our Discord community to share your work and ask questions.

So what is Little.js, and why should you care? Well, Little.js is a super lightweight and fast JavaScript game engine. It has everything included to start making games right away, and several example projects to get you started. It is also very important to make sure that this is released with an open source MIT license, so that anyone can use it without worrying about complicated licensing agreements.

Little.js is best demonstrated by my game Space Huggers, which I originally released for JS13K, but I've later updated it on new grounds. So please check that out for a great demonstration of all the stuff that Little.js can do. Little.js is packed full of features, with everything included to start making games. For many game engines, the size of the game engine is not a feature, but for Little.js, it is one of the main features because the footprint is extremely tiny. There are no dependencies and I made sure that the interface is also super streamlined. This allows it to fit in a super small zip file for size-coding competitions like JS13K, but also makes the code very easy to use and work with. It's a great way to start learning about how game engines work. It can also make big games, too. We'll talk about that soon.

Because it has very, very fast sprite rendering of on the order of 100,000 sprites. And it also has a super fast level data-rendering system, too. Combining these two things, you can have a fully featured game with WebGL and canvas support for the best of both worlds. It also has mobile and touch support, because that's so important these days. Little.js is an object-oriented game engine that uses EngineObject as the base class. You can extend this for use in your own game. Every EngineObject will automatically be updated and drawn every frame. It also has physics and collision handling built in, and some other features that you will need, like a parent-child system and sorting for rendering and debug features. Little.js has a very unique audio system with positional generative audio. You can create sound effects without needing any kind of asset file, so it's a very fast to iterate with. And these sound effects are positional so that the stereo panning and volume is automatically attenuated to make it sound like it's coming from a location in the world. Little.js also provides a tiny music system, which is really useful for size coding competitions. And you can of course use WAV MP3 or ODD files too. Little.js has an all-inclusive input handling solution for keyboard and mouse as well as up to four gamepads, and even has an on-screen gamepad for touch devices. The code is fully documented. There's a website that you can browse all the documentation, which is auto-generated from code in the comments using js-doc. The code itself is also very simple and easy to read, and it's packed full of comments so that everyone can understand how everything works. There's a build system included with several starter projects, and we've recently created a Discord for people to share their work and ask questions.

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

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
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.
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
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.
How Not to Build a Video Game
React Summit 2023React Summit 2023
32 min
How Not to Build a Video Game
Watch video: How Not to Build a Video Game
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.
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!
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.
Web 3 Gaming: What it is and Why it Matters
JS GameDev Summit 2022JS GameDev Summit 2022
36 min
Web 3 Gaming: What it is and Why it Matters
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.
Increase the Performance of Your Games using Canvas
JS GameDev Summit 2023JS GameDev Summit 2023
8 min
Increase the Performance of Your Games using 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.

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
Top Content
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.
Tiny Game Live Coding Workshop
JS GameDev Summit 2023JS GameDev Summit 2023
115 min
Tiny Game Live Coding Workshop
Workshop
Frank Force
Frank Force
Dive into the captivating world of micro-game development with Frank Force in this interactive live coding workshop. Tailored for both seasoned developers and curious newcomers, this session explores the unique challenges and joys of creating games and demos with extreme size constraints.