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 Force, 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 JS13Ks and won second place. I've also won Optical Illusion of the Year with a javascript program. And I've published over a thousand tiny javascript programs on a website called Twitter, where we make 140-character javascript programs. So 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 is all created with javascript. So what is LittleJS and why should you care? Well, LittleJS 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. LittleJS is best demonstrated by my game Space Huggers, which I originally released for JS13K, but I've later updated it on Newgrounds. So please check that out for a great demonstration of all the stuff that LittleJS can do. LittleJS 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 LittleJS, 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. So 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 a webgl and Canvas support for the best of both worlds. It also has a mobile and touch support, because that's so important these days. LittleJS 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 a 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. LittleJS 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 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. LittleJS also provides a tiny music system, which is really useful for size coding competitions. And you can, of course, use a WAV MP3 or OGG files too. LittleJS 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 jsdoc. 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. LittleJS 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 LittleJS, 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 similar math functions to Vector2, like your add, subtract, multiply stuff. Has 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 would call set, pass in the seconds to start it. Then you will call get to see how long has passed. And then when you're ready, you can call unset to set it back to unset mode. I use these all the time in my gameplay code, so I hope you'll give that a shot. The Engine object is the base class for Little.js, which contains most of the functionality for collision and rendering. All these Engine objects are stored in a list, where they'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 position, 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 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 Newgrounds support automatically built in, so you can put your gameplay in Newgrounds 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, though 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 a ray 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. And 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 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 debug 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 in 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 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 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 there's 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. CZFX is the tiny sound effect generator. It has its own sound effect editor, which is another website that I've released CZFX 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. CZFXM 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 CZFX 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 want to just use an MP3 or OGG 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. Hello World 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 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 any of 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 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 LittleJS and how you might want to be a part of it. So it's been less than a year since I released LittleJS, and it already has over 2,000 likes on GitHub. I've taken my JS13K game Space Huggers 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 LittleJS, 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 CZFX 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 LittleJS because this game engine really excels at those size coding game jams. But like I said, it's definitely able to expand a game into a larger game. I would like to do more Space Huggers stuff at some point. I have so many ideas for how to build out for that, though it's not really my focus right now. So why don't you tell me what you'd like to see, and what kind of games you want to make with LittleJS? That's all I have for today. Thank you for watching. I really feel like LittleJS 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 at killedbyapixel. 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, I definitely will be making another game with LittleJS for JS13K. 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. Other 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 FXHash, 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 LittleJS, share the games you make with us, and you're just going to 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 going to 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 LittleJS, and also about making small games. No one's too interested in making large games with LittleJS 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, so my approach with LittleJS is to make the game engine itself so simple and easy to understand and well-commented and stuff like that, that in order to understand how the game engine works, 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 LittleJS, 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&A. So one of my first big questions is, yeah, why build a game engine? Why did you start? Tell us about your journey. And Melody in the chat also has a follow-on with that, which is, what is your motivation to developing your own engine specifically? Absolutely, those are great questions. Well, 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 going to be too big. So there's a very small set of what you might call micro frameworks. Most of them are not really full game engines, like LittleJS 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 LittleJS. 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 is not, that's a C++ game engine. It's not meant for making a tiny web game. So I kind of had to make my own game engine. I made a game called Bounce Back, which was like a Zelda style roguelike 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 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 a lot of 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. 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're meant to, where you can almost learn a little bit about how game engines work just by, you know, looking at the code and stuff. Now, I'm very familiar with JS13K games. I've been a judge for the last two or three years now. So speaking of JS13K games, what is one of your top tips for someone who would be looking to enter into JS13K games using LittleJS as the game engine? Yeah, absolutely. So far, I'm the only one that has used LittleJS in JS13K 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? LittleJS 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 JS13K. 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. You're for JS13K, 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-res pixel art for my JS13K stuff. But LittleJS can add color tinting to sprites. So for example, on Space Huggers, the game that I released for last JS13K, there is one sprite with just two frames of animation that I use for the enemies. And 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 an eye thing over top of them. And I have all different variety. So think about combining art. Think about using less smaller things. CZFX is also great for that because the sound effects system doesn't require WAV files or anything. So it's super small. I don't know, Michelle, what else does that answer? Yeah, I think it's a good answer. And I think it leads nicely into the next question from Tam Ta, who is possibly looking to get into JS13K games. But if one was to start coding with the engine, how do you actually start? Is there an interface, like similar popular game engines? 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 something that has cropped up within the past 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 Game Makers, all this stuff, Pico-8, 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. So I can push a button and it will automatically load the code. Actually, whenever I save a file, it will automatically reload the game in the browser, which I have on a separate screen. So that's kind of my interface. Then I have the code in front of me. You know what I mean? So it's just like, if you want to work directly with the code, I'd say 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 people to use it, at least for the first time, is pick whichever example is closest to what you want to 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. It is from both Maya and Zaledig. Is little.js 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 tile 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. 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 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. 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 want to 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.