Making Awesome Games with LittleJS

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.

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.

Little.js is built with an object-oriented structure. It comes with several classes. Pretty much all the components are created with a class. So let's talk about how some of those work.

Vector2 is the low-level math class used by Little.js, which holds an X and Y coordinate, and it has all the standard math functions that you would expect. I found that it's better to not modify, but simply return a copy from these math functions so you can create a chain of more complex vector math. I also have asserts peppered throughout the code to ensure that everything is used properly. And these asserts will automatically be removed from release builds for a little bit of speed boost.

The Color class handles all the Color math computations. It holds an RGBA color and has a similar math functions to Vector2, like your add, subtract, and multiply stuff. There's conversions to and from HSL and Hex, as well as other useful functions like lerp and mutate.

Another great and useful feature is the Timer class, which is a simple object that allows you to track how long has passed since it was set without any update required. So in other words, you will call set, pass in the seconds, start it. Then you will call get to see how long has passed. And then when you're ready, you can call onset to set it back to onset mode. I use these all the time in my gameplay code. So I hope you will give that a shot.

The Engine object is the base class for Little.js, which contains most of the functionality for collision and rendering. And all these Engine objects are stored in a list where there'll be automatically updated and rendered each frame. And they have the standard attributes that you would expect for a low level object like that with a positions, size, how it's drawn.

The ParticleSystem class provided by Little.js extends Engine objects to add the ability to emit particles. And these particles also extend Engine object so they can have physics and collision on them. They have a variety of parameters to tweak for to create all different types of particle effects like a fire, smoke or whatever you need for that type of game.

Little.js has its own metal system built in for tracking player achievements. It's automatically saved to local storage. And there's a pop-up that shows up when an achievement is first unlocked. And this metal system has a new ground support automatically built in so you can put your game on new grounds very easily.

Little.js has its own simple and fast physics system built in. Now, this is just for axis align bounding box collision. So there's no ability to rotate these objects with physics that you can rotate them how they are rendered.

There are two types of physics, an object versus level physics and an object versus object physics. And both of these types of physics combine to give you a full physical solution.

The object versus level physics is where you get the super fast collision between a fast moving object and a stationary tile level data. There are several functions provided to test where collision is do array cast. And I found that it's possible to have very huge levels and it's a very performant way of doing physics.

There's also a full 2D physics solver for object versus object collisions. And you can have a few hundred objects interacting in that way. It's not a perfectly realistic physics system, but there are several parameters you can tweak to control how these objects behave, like the mass, dampening, elasticity and friction.

A little JS rendering system is the best of WebGL and Canvas 2D. You can think of it like a WebGL sandwich, where there's a bottom layer of Canvas 2D for the background and the level data and other effects where you can, where you would need a Canvas 2D rendering. Then you have a middle layer of super fast sprite rendering and particle effects done using WebGL. And your very top layer is another Canvas 2D layer for the overlay text and effects, the HUD, any type of debugging info.

Now the WebGL rendering is awesome because it's just so incredibly fast. You can render out thousands and thousands of sprites at 60 frames per second. It does this by batching up all these draw calls. And it's able to do this because all those sprites are on the same tile sheet. So there's only one texture necessary. I think even for much larger games, you can easily fit most of the art on a single tile sheet. Though it's of course possible to use multiple textures if you need to.

And there's some really nice sprite rendering features available, like being able to tint sprites, apply add of color, rotate, and mirror sprites. The Canvas 2D rendering is for the back and front layers. It's a little bit slower than the WebGL rendering but much more versatile because you have all of your standard Canvas 2D functions like a text rendering, drawing shapes and lines, things like that. The level data also uses Canvas 2D to render. And if you prefer, you can even disable WebGL and everything will be rendered to Canvas 2D.

The tile layer layer system is the fast level rendering. That is where you have a grid of tiles that are cached to an offscreen canvas for super fast rendering. It's kind of intended to be matched up with the collision data so that you have a level collision and rendering going on. And you can use multiple tile layers if you need to have a back and front layer or layers next to each other. Another great thing about this system is that these layers are, since they're stored on another canvas, you can actually draw to that canvas directly for persistent effects like destruction. The way this all works is by holding an array of these tile layer data objects which is how to draw each tile.

And they're just a small object that holds the rotation, mirror, color, and tile index for each tile. And it will spin through that entire array and render out all those tiles to the offscreen canvas, and then each frame, it doesn't need to do that. So it's much, much faster.

There's also a debug overlay system that you can access by pressing the tilde button. It has an object inspector and a few other really useful modes for physics particles and stuff like that.

The little.js audio system provides generative sound and music. ZZFX is the tiny sound effect generator. It has its own sound effect editor, which is another website I've released ZZFX separately from little.js. You can use it for any game you'd like. The sound effects designer is really nice because there are a bunch of presets you can click on, but also you can individually tweak all the parameters. You can also save out sounds and export, import, and even save as a WAV file if you'd like.

ZZFXM is the tiny music player that's included with little.js, and this is something that you really need if you're doing a size coding competition. It is able to play music using ZZFX to generate the sound effects with a super tiny music format that's human readable and a super tiny player. The output is also in stereo, and there are a bunch of tools that are available for creating these music, like a sequencer and converter from Protracker. And of course, if you have more space, you might wanna just use an mp3 or AUG file for your music, or even WAV.

There are several more functions for audio that are provided, like speech synthesis and the ability to play samples directly.

Little.js comes with a variety of starter projects you can build on, for pretty much any type of game that you might like to make. Helloworld is just your simple example starter project that shows off the various core functionality of Little.js, like a particle system, level data and game objects, that type of thing. Stress test is what you can use to test how many sprites it's able to render at 60 FPS on a variety of different devices. We've found that it works really well on mobile devices, sometimes even better than desktop. There's a puzzle game provided, which is a basic match three style puzzle game. And you can use a touch pad or a mouse to control that. And feel free to build on these starter projects for your own game if you'd like, that's why they're there. For an arcade style game, we have Breakout. It shows a collision and physics. You could also control it with a touch pad or a mouse game pad. The most complicated example is the Platformer, which has more advanced physics for platforming, jumping ladders, crates and enemies shooting, that type of thing. I've also released the Particle Editor, so you can use this to create particle systems for your game. It's still a work in progress. There's a lot more things that I want to add to it, but it's definitely a good proof of concept.

So let's talk about what the future is for Little.js and how you might want to be a part of it. So it's been less than a year since I released Little.js and it already has over 2000 likes on GitHub. I've taken my JS13K game, Spacehuggers, and refined it a bit and released it on Newgrounds with the Achievement System. So please check that out. A lot of people played it, and I think it's definitely one of the best games I've made. It's fully playable on desktop or mobile. You can even play co-op with up to four players.

Isletopia is being developed using little.js, and you can wishlist that. It's coming to Steam soon. The particle editor is still in development, as are a few other tools that we're working on. I really want to make a CZ Effects music generator, so we'll see if I get to that. And it really comes down to what other people are interested in and what they want to see. I think that the next JS13K is going to be huge for little.js, because this game engine really excels at those size coding game jams. Though, like I said, it's definitely able to expand a game into a larger game. I would like to do more Space Hugger stuff at some point. I have so many ideas for how to build out for that, though that's not really my focus right now. So, why don't you tell me what you like to see, and what kind of games you want to make with little.js.

That's all I have for today. Thank you for watching. I really feel like little.js is one of the best things that I've ever made, and I'm just so happy that I have this opportunity to share it with everybody. It's fully open sourced for everyone to use for anything that they want to use it for. So, please, like it on GitHub, download it, and try the example games. You can follow me on Twitter for, at Killed By A Pixel. I post all the time about everything I'm working on, whether it be generative art or games. And next year, or this coming year, definitely will be making another game with little.js for JS 13K. Make sure you check out my GitHub because I have a lot of other cool stuff I've been working on, ZZFX for example, and many other small tools. Another game development stuff, check out my Twitter. That's where I published all those thousand tiny JavaScript programs that are so fun to mess around with. And if you're interested in generative art, definitely check out my FX hash, which is where I've been releasing these long form generative art programs. So I'm going to wrap it up and thank everyone for watching.

And I'll say, believe in yourself, try to make games with Little.js, share the games you make with us. And you're just gonna keep making better and better games every time you make a game. And I can't wait to see what everybody does with it. So thanks for watching. Take care of yourselves and have a great day.

Before we jump into some of the questions and we were having a really good conversation backstage so we're gonna bring that to the front stage. But we'll take a look at these poll questions. So if we have a look on the screen, we can see that it's almost a 50-50 split at the moment. People wanting to learn about the game engine. So learn about Little.js and also about making small games. No one's too interested in making large games as Little.js or other things. But yeah, it looks like these are the two main focus areas at the moment.

So I know your talk didn't go super deep into how the actual game engine works. But it looks like lots of people want to know. So where can they find that information? Are there tutorials out there or videos they can watch? So, yeah, my approach with Little.js is to make the game engine itself so simple and easy to understand and well-commented and stuff like that, that you, in order to understand how the game engine works, you're kind of like allowed to, you're meant to look at the code itself. So if you take most game engines, the code for the game engine, you're never supposed to look at. In fact, it will probably be a huge overload and confusing to you, and you definitely don't want to change it. But Little.js, it's a totally different paradigm where you can use it straight out of the box and there's minified versions available or for making small games, which a lot of people are interested in. You may even want to make some changes to the core engine itself. And you can, because it's so simple and easy to understand.

Fantastic. All right, let's jump over to some of the Q and A. So one of my first big questions is, yeah, like why build a game engine? Like why did you start? Like, tell us about your journey. And Melanie, or Melody in the chat also has a following with that, which is, what is your motivation to developing your own engine specifically? Absolutely, those are great questions. Well, if you know, if I hope some people are a little bit familiar with JS13K and other size coding competitions. Well, in the poll question, it seems like about half the people are interested in small games and stuff. So if you know a little about that, you probably know that you cannot use most game engines for JS13K, because they're gonna be too big. So there's a very small set of like, what you might call micro frameworks. Most of them are not really full game engines, like Little JS is intended to be a full game engine you can use out of the box without much extra code. But there are other frameworks you can use and stuff.

For me, I had been doing JS13K for, this is the third year I had done it, when I made Little JS. And the first year I'd done it, I made my own game engine from scratch there too. Because like I said, you kind of have to or use a small framework or something. You cannot use, I definitely can't use Unreal, which I'm really good at, but that's a C++ game engine. It's not meant for making a tiny web game. So I kinda had to make my own game engine.

I made a game called bounce back, which was like a Zelda style rogue-lite game. And that engine I learned a lot from and I kind of evolved towards this one. And these aren't the only two game engines I've made by the way. I've made many game engines. I also released one, a C++ game engine, like about 10 years ago, that I've used for many, many different things. And another thing about making your own game engine or this kind of making your own like library and framework is I like to make a lot of small projects I would say. But I found that one of the problems with that is you have like a lot of like boilerplate code that you keep pasting and changing and stuff. And that can make it really just cumbersome to have say 10 different projects that all have 10 different, slightly different copies of this game engine that may have any number of bug fixes or any things that you've done. So having a game engine that you made yourself that you can slowly evolve and use for all of your different projects really saves a lot of time. And that was another big part of my motivation, you know? Also just trying to do things that like trying to fill these niches that currently aren't filled. Like being incredibly super fast and just really simple. Like these kind of almost a didactic type of game engine where you can almost learn a little bit about how game engines work just by looking at the code and stuff.

Now, I'm very familiar with JS 13k games. I've been a judge for the last two or three years now. So speaking of JS 13k games, what is one of your top tips for someone who would be looking to enter into JS 13k games using Little JS as the game engine? Yeah, absolutely. So far I'm the only one that has used Little JS in JS 13k because that's when I released it last year. Now I hope that this year more people will use it. And when they do, yeah, so what are my tips? Well, Little JS has, you can use the built-in builder, package builder, whatever you call it, to build everything down to a super tiny zip file. It basically does exactly what you need for JS 13k. So the way I have it set up is the hello world program is the default and you click on your build, it's the bat file, so it's very simple to see how it works. And that might be something that I actually would like help with if someone else wants to rework the build tool system. It's very simple right now, and that could use probably someone to look at. But right now it's a simple bat file, you click that, builds everything to a zip file. For JS 13k, remember what takes up space? So that is primarily not the code, but the art.

So LittleJS can help with that a big deal. I usually use pretty low risk pixel art for my JS 13k stuff, but LittleJS can like add color tinting to sprites. So for example, on Space Huggers, the game that I released for last JS13k, there is one sprite just two frames of animation that I use for the enemies. And it's kind of just like, it has no saturation it's fully desaturated. So I can apply color to it and make it look like different enemy colors. Then I have another sprite that I layer on top of that, that I can have different colors for the mask of the enemy. So I have with just that tiny bit of two, I'm using two frames of animation and one sprite of like an eye thing over top of them, and I have all different variety. So think about combining art, think about using less, smaller things. CZ effects is also great for that because the sound effects system doesn't require wave files or anything. So it's super small. I don't know Michelle, what else does that answer?

And I think it leads nicely into the next question from Tam Tarr, who's possibly looking to get into JS and NK games. But if one was to start coding with the engine, how do you actually start? Is there like an interface, like similar popular game engines, like how do you actually start with the engine?

Absolutely, so I think there's really two types of game engines out there. You've got the game engine that has an interface, a UI, which is more, which is something that's cropped up within the past like 10 or 20 years. That's not how game engines used to work back in the day. So you have your Unreal, your Unity, your GameMakers, all this stuff, Pico-8 and where you can have an interface there that is all built in. You can make your art, you can create your levels and all that. Then there's another class of game engines which are just the code itself. There is no UI for the engine. For the editor, I use Visual Studio for the coding interface and I use an extension, a live coding extension. I can push a button and it'll automatically load the code or actually whenever I save a file, it will automatically reload the game in the browser which I have on a separate screen. That's kind of my interface. Then I have the code in front of me. You know what I mean? It's just like if you want to work directly with the code, the way you would get started, I would recommend is to start with one of the examples and kind of start tweaking it out from there. That's how I intend to people to use it, at least for the first time is like pick whichever example is closest to what you wanna make and kind of start hacking into it from there.

Yeah, also, I might get you to drop some links to those examples. Probably almost the last question I have because I'm running out of time even though I've got so many other questions but is from both Maya and Zalediq, is LittleJS only for 2D or does it have 3D capabilities, 3D model support format and things like that or is it only 2D? Well, currently what's built in is a 2D rendering system. I focused on pile rendering though you can do a lot of like pseudo 3D stuff. A lot of what we think of as 3D, some of the coolest looking 3D type things are not using actually 3D models but more of like a 3D-ish type of effect where, well actually for my first JS 13K game, I added like shadow, it was like a top down game and I added like these shadows that made everything seem almost 3D. So you can do stuff like that. It also uses web, it also has WebGL built in by default. So it wouldn't be hard to extend it to start rendering whatever you want. Like right now it renders a quad in the center of the screen and that has everything on it. So instead of that, you could render whatever you want. I think, in other words, I think it might be a good place for people to start looking at how WebGL works and building off of. The rest of the game engine, by the way, would work perfectly fine with a 3D system. It's really just the rendering that I kind of need to focus, you know? So I focused on 2D. But the WebGL stuff is all completely easy to read and all in like one source file. So it's really easy to check out.

Yeah, nice. And I think we're almost at time.

And I think we're almost at time. I know there's quite a lot of questions about like the adoption of Little.js to larger scale games, how you made the game engine perform so well, even though it's so small.

We had a fantastic conversation backstage here about the open source nature of Little.js and how to get involved if you wanna start contributing. Unfortunately, we don't have time to answer all those questions right now.

But lucky for you all, Frank is staying around. Not right here, but you'll find him in Discord. So Frank will be over in the speakers channel. So go over and have a chat to Frank, go ask all those questions. And yeah, just get to know other people and just ask Frank some really cool stuff. Like he's been really awesome to chat to backstage here. So thank you so much for your time Frank and teach us all about Little.js. Thanks Michelle, I really appreciate it.