Choosing a Game Engine or Framework for HTML Game Development

Rate this content
Bookmark

We have never had so many great options for game engines and frameworks. Sometimes though, too many options can be paralyzing. In this talk we are going to discuss the various available game engines and development frameworks for HTML game development and hopefully help you select the one that is right for you.

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

FAQ

The two major approaches are the native approach, where you develop it like any other web-based application using JavaScript, and the compiled approach, where you treat the web browser as a virtual machine using technologies like WebAssembly and Emscripten.

Popular game engines that support web export include Unity, Godot, and Default. Unreal Engine used to support web export but has deprecated it, although third-party plugins are available.

For creating 3D web games, PlayCanvas and Babylon.js are recommended. PlayCanvas offers a full 3D World Editor and is browser-based, while Babylon.js is open-source and supported by Microsoft.

Good options for 2D web game development include Default, GameMaker Studio, Construct 3, and GDevelop. Default and GameMaker are more traditional engines, while Construct 3 and GDevelop offer visual programming interfaces.

Yes, it is more feasible to build your own game engine for web development than for other platforms, thanks to the availability of modular libraries and frameworks like Three.js for 3D and PhaserJS for 2D.

Notable 3D frameworks include Three.js and Babylon.js. For 2D frameworks, PhaserJS, MelonJS, and Cocos2DJS are popular choices.

For developers on a budget or who prefer open-source software, Godot is a strong choice for both 2D and 3D games. For 2D games, Default is also a good option as it is mostly open-source.

For 2D level design in web games, Tiled and LDTK (Level Design Toolkit) are highly recommended tools.

Sound.js and Howler.js are two popular audio libraries for web game development. They simplify dealing with audio complexities and browser eccentricities.

When choosing a game engine for web development, consider factors such as whether your game is 2D or 3D, your budget, the importance of open-source software, and your primary platform. For maximum platform support, Unity is a strong choice. For open-source preferences, Godot is recommended.

Mike Fleischauer
Mike Fleischauer
25 min
08 Apr, 2022

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Welcome to the Web Game Dev Summit where game engine options for web-based games are explored. Native and compiled development approaches are discussed, with off-the-shelf engines like Unity and HTML5-specific engines as options. Godot Engine is highlighted as an open source engine with strong web support. Traditional game engines like Default, GameMaker Studio, and Babylon.js are mentioned, along with frameworks like PhaserJS and Cocos2DJS. JavaScript libraries for game development, audio support options, and considerations for choosing the right engine are also covered.

1. Introduction to Web Game Development

Short description:

Welcome to my Web Game Dev Summit where we'll explore game engine options for web-based games. There are two major approaches to developing games in the browser: native and compiled. Native development is ideal for web-focused projects, providing tight integration with the browser. Compiled development treats the web as another platform, allowing for additional targets. You can use off-the-shelf game engines like Unity or explore HTML5-specific engines. Alternatively, you can build upon existing frameworks and libraries. Web development is modular and offers many options.

Hello ladies and gentlemen, this is Mike Fleischer and welcome to my Web Game Dev Summit. Now I run the channel GameFromScratch and GameFromScratch.com for the last decade, and over that decade I have covered literally hundreds of game engines and frameworks. And we've never been more spoiled for choice. If you want to develop a game these days, there are so many options out there commercial and free, open source and closed source. You're absolutely spoiled for choice.

Now the problem with being spoiled for choice is too many choices, and that makes any decision harder, especially when you're just starting out. So if you're trying to figure out what technology or game engine to use for your next web-based game, hopefully this talk will help. There are two major approaches to how you can develop a game in the browser. One is you can take the native approach, basically develop it like you would any other web-based application. There are a number of engines and frameworks out there that work, you're typing directly in JavaScript. This makes a lot of sense if your primary publishing platform is for the web. If your lead target is the web, and the most important platform is the web, this is a great way to go. It gives you nice tight integration back to the browser itself. It makes your debugging experience a little bit easier. The other option is basically compiled. This is treating your web browser more or less like it was a virtual machine. Using technology such as WebAssembly or ASMJS as a backfill, and technology such as Emscripten, the tool chains for your game engine or framework of choice, compiles down to almost a byte code that runs inside of your browser. This doesn't generally have tight integration with the browser, at least not when jumping But the nice approach to the compiled approach is you're treating the web basically just as another platform. So instead of compiling for Windows and Mac and mobile and so on, you can add web as an additional target. This is the approach that a lot of traditional game engines take.

Complimentary to the decision of working natively in the browser or compiling it using a technology such as WebAssembly and Emscripten, you also have pretty much three different major decisions on terms of what kind of game technology you wish to use to develop your game. At the top, you've got the idea of just using a standard off-the-shelf game engine, the likes of Unity, Unreal, Godot. You know them. Basically, they treat the web as just another platform. Sometimes it's just a matter of even just a build for web and your game is created. Now, on top of that, you also have some of the HTML5 specific 3D and 2D game engines out there. We're going to cover some of those in this video as well. And then, finally, you have the option of building upon a framework or a collection of libraries that are out there and more or less rolling your own. Now, traditionally, I wouldn't recommend rolling your own game engine because there is a ton more work than you realize, but when it comes to web development, there are so many libraries and frameworks such as Three.js or Box Physics, etc., that you can build upon, that the idea of making your own game engine isn't actually as daunting as it would be in a lot of other scenarios. And one of the things about web development in general and JavaScript technologies is they tend to be very modular in approach.

2. Web Game Engine Options

Short description:

And it's more a matter of fitting together Lego pieces and building your own engine out of out-of-the-box components as opposed to starting everything from scratch. Let's talk about traditional game engines that have web export. Unity is the biggest player, with the most developers, the biggest community, and broad platform support. It is a fully functioning 3D and 2D game engine with a large volume of learning materials. Unreal Engine has deprecated web target support, but there are third-party plugins. Unreal Engine and Unity are the closest competitors for web-based titles. Another option is the Godot Engine.

And it's more a matter of fitting together Lego pieces and building your own engine out of out-of-the-box components as opposed to starting everything from scratch. So we're going to look at some of those building blocks you could also work with as well.

But first, let's talk about traditional game engines. Start things off by talking about some of the traditional game engines that all have some form of web export. I think now in an age where browser plugins are no longer a thing, you're basically looking at an Emscripten backend compiling to WebAssembly in some form for all of these things we were about to mention. And these are great choices, especially if you are already developing a game and you just want to add web as another platform.

And we're going to start with the most obvious example. Now I'm not going to cover all the game engines options out there that compile to web because there are just so many of them. We're going to talk about some of the biggest players in this space. And the biggest player straight out is Unity. Now Unity has the most developers. It has the biggest community. It probably has the broadest platform support out there. It is a fully functioning 3D and 2D game engine. Your primary scripting language is going to be the C sharp programming language. But there are a number of visual scripting options including two that are officially supported by Unity themselves. It has the largest volume of learning materials out there. And quite frankly, if you are not doing web first and you don't know any better which one to pick, Unity is probably as easy of a choice as you could make, just because the community is as good as it gets. The Unity community is massive. That means there are a number of training materials, there are a number of tutorials, there are a number of people that you can talk to if you need help and so on. So Unity is an excellent option, especially if the web isn't your lead platform. If you just want to add another platform to the list, if you're developing for desktop and mobile and web, well Unity could be a good choice.

Another option that used to exist was Unreal Engine. Now Unreal Engine has actually deprecated their web target support. There are third-party plugins that bring this functionality there but I don't think I would recommend Unreal Engine for anyone unless you were already working on an Unreal Engine project because Unreal just hasn't really expanded that much in the web space. There are ways to do it and there are third-parties working on picking up where Epic Games dumped their support. But just know Unreal Engine and Unity are probably the closest direct competitors that you can find when it comes to developing web-based titles. Not really. Unreal Engine is way behind in that regard. On the engine side if you're looking more towards free and specifically open source another option for you is the Godot Engine.

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.
Making Awesome Games with LittleJS
JS GameDev Summit 2022JS GameDev Summit 2022
34 min
Making Awesome Games with LittleJS
Top Content
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 built with an object-oriented structure and comes with several classes. It provides a fast rendering system, a comprehensive audio system, and various starter projects for different game types. Little.js is designed to be simple and easy to understand, allowing you to look at and modify the code.
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.

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.