Web Game Engine Size Review 2023

In July 2023 I was looking for an engine that supported 2D rendering, ran in a web browser, worked on mobile, and had a minimum runtime payload size of less than 500kb.

Why this size? On the web, size costs time (time to download), and for folks on cellular data plans, it takes a part of their monthly budget. Plus, serving data from your website to people technically costs money (egress costs). While it seems almost free in small amounts, if you have a lot of traffic, it can add up.

Based on this criteria, I surveyed a number of game engines and created a chart of their minimum code runtime sizes. These are the engine code outputs with minimal or no actual “game code”. They are “transfer sizes”, so I measured the gzipped size (except for Unity, which was Brotli). I left out Unreal Engine because 1) they stopped supporting it after 4.22 (it uses wasm) and 2) it was much larger and made the rest of the graph hard to read.

I also created a chart for how long it took for me to find their approximate minimum code runtime sizes. In some cases it was very quick thanks to posted samples. For others it took time to install the tools, configure for minified/small/production, and create an empty project build.

Engines reviewed:

1. Babylon.js
2. Defold
3. Phaser
4. PixiJS
5. BevyEngine
6. Heaps
7. Unity
8. Unreal
9. Godot
10. ctjs
11. melonJS
12. Polygonjs

1. Babylon.js babylonjs.com

   Babylon.js is a WebGL JavaScript library with a focus on 3D. The code payload size is actually not bad considering the amount of features, but ultimately larger than the budget, and I don’t need 3D for this project.

2. Defold defold.com

   Defold is an editor-based game development tool, and you can write code in Lua. King (most well-known for Candy Crush) created it for internal use, then open-sourced it. It features HTML5 output via wasm. I spent some time reading documentation and trying different settings to reduce the wasm size, but it ended up being larger than the budget.

3. Phaser phaser.io

   Phaser is a JavaScript library I used for some prototypes years ago. Under the hood it uses PixiJS for the rendering engine, but it also includes audio and facilities. It had all the features I was looking for and was within budget.

4. PixiJS pixijs.com

   PixiJS is a well-known JavaScript library for 2D rendering on the web. Both Phaser and ctjs use it for their rendering needs. You have to import some helper libraries for audio and other non-rendering features (even some math), and was within budget.

5. BevyEngine bevyengine.org

   BevyEngine is a Rust-based game engine. It features HTML5 output via wasm, but it was a lot of hassle getting the HTML5 building of their samples to work locally. I ended up finding some of their online samples to get some size data points. The smallest one was over budget.

6. Heaps heaps.io

   Heaps is a game engine built upon Haxe, which looks and feels a lot like ActionScript 3. It builds to many platforms, including HTML5 via JavaScript. They had samples readily available with payloads within budget.

7. Unity unity.com

   Unity is an editor-based game development tool, and you can write code in C#. It features HTML5 output via wasm. I changed the settings for production (no debug support, etc.), but the payload was over budget.

8. Unreal unrealengine.com

   Unreal is an editor-based game development tool, and you can write code in C++ (or visual scripting with Blueprints). Version 4.22 and prior supported HTML5 output via wasm. 4.23 onwards moved the HTML5 build target to community support, but it hasn’t been updated for years. The wasm output was far over budget.

9. Godot godotengine.org

   Godot is an editor-based game development tool, and you can write code in GDScript (their language), C#, C++, and more. I have created some prototypes and game jam projects with it. It features HTML5 output via wasm. The payload was over budget.

10. ctjs ctjs.rocks

    ctjs is an editor-based game development tool, and you can write code in CoffeeScript, JavaScript, or TypeScript. It uses PixiJS for rendering. It uses JavaScript for HTML5 output and it was within budget.

11. melonJS melonjs.org

    melonJS is a JavaScript library and was within budget.

12. Polygonjs polygonjs.com

    Polygonjs is a JavaScript library that focuses a lot on 3D rendering via WebGL. It was hard to determine the payload size because all the samples included a full scene editor. Because of this and the 3D focus, I didn’t include it in my size analysis. The node-based workflow looks very interesting, though.

Based on the 500kb threshold and 2D for web and mobile web, this is the list for the next phase of testing:

1. Phaser
2. PixiJS
3. Heaps
4. melonJS
5. ctjs

Check back soon for the next article, where I outline the test project specifications I came up with and the results of building them with each of the engines.