Log in
JavaScript Conferences
JS GameDev Summit 2022JS GameDev Summit 2022
Top
EN

Web Game Development Tools

Mike Fleischauer
Mike Fleischauer
GameFromScratch Creator

Introduction to Web-Based Game Development

Creating games for the web has never been more accessible, thanks to a plethora of tools and frameworks available today. Whether you're interested in building 2D or 3D games, there are numerous options to explore, each offering unique features and capabilities. The challenge often lies in choosing the right tools to fit your specific needs, given the vast array of possibilities.

Understanding the differences between these tools and how they can be combined is crucial for any developer looking to create engaging web-based games. This guide will explore the landscape of game development technologies, from full-fledged game engines to modular frameworks and libraries.

3D Game Development with Three.js and Beyond

Three.js stands out as a powerful abstraction layer for WebGL, providing essential components like 3D model loading, scene graph management, and object loading. It's a versatile tool, allowing you to either build a game directly or use it as a foundation for your own engine.

For those interested in VR, A-Frame offers a framework that uses HTML-like markup to create 3D worlds, built on top of Three.js. Many game engines are either built using or extend Three.js, making it a crucial building block for creating your own 3D titles.

Other JavaScript libraries also play a significant role in game development. For physics simulations, options like Ammo.js, a port of Bullet 3D physics, provide robust 3D simulation capabilities. Although less familiar, libraries like OIMO also exist for similar purposes.

2D Game Development Tools and Frameworks

On the 2D side, several libraries cater to game developers. Box2D remains a popular choice for 2D physics, with ports like Box2D.js, Matter.js, and Plank.js offering browser-based solutions.

Rendering is another critical aspect, with PixiJS abstracting away the complexities of WebGL for fast 2D drawing. Libraries like Phaser, Melon, and Cocos2D often build on PixiJS, making it a valuable tool for 2D game development.

For developers wanting to roll their own engine, tools like Tiled and LDTK provide comprehensive level design capabilities, allowing you to visually compose worlds without starting from scratch.

Choosing the Right Game Engine

When starting with game development, the choice of engine can be daunting due to the vast options available. Unity, with its extensive community and platform support, remains a popular choice, especially for those not focusing solely on the web.

Godot offers a fully open-source alternative with strong 2D support and growing 3D capabilities. It's an excellent choice for those aligned with open-source values or on a tight budget.

For web-first developers, PlayCanvas and Babylon.js stand out. PlayCanvas offers a full 3D world editor directly in the browser, while Babylon.js provides a more code-centric, open-source approach.

Frameworks for Custom Engine Development

Developers looking for more flexibility might consider building their own engine using frameworks. PhaserJS and MelonJS offer robust options for 2D game development, providing essential features like sprite management and sound handling.

Three.js again emerges as a leading choice for those interested in 3D, offering extensive functionality for rendering and object management. Combining these with other libraries can create a custom engine tailored to specific needs.

Audio and Additional Considerations

Audio is a crucial component of any game, and libraries like Howler.js and Sound.js can simplify integration. Both are built on web audio technologies, providing seamless audio support across browsers.

Other considerations include the primary platform for your game. If web performance is critical, native development might offer better results than web technologies wrapped in solutions like Electron.

Final Thoughts on Game Development Options

The landscape of game development is rich with options, from full engines like Unity and Godot to modular frameworks like Three.js and Phaser. The key is to assess your needs, considering factors like platform targets, budget, and development philosophy.

Whether you choose a comprehensive engine or a combination of libraries, the tools available today make it possible to create engaging and dynamic games for the web. Understanding these options and how they fit together will empower you to make informed decisions and successfully bring your game ideas to life.

Watch full talk with demos and examples:

Rate this content
Bookmark

From Author:

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.

Watch video on a separate page

FAQ

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.

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.

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.

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

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.

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.

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

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

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.

game development
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.
Available in Español: Elegir un Motor de Juego o Marco de Trabajo para el Desarrollo de Juegos HTML

1. Introduction to Web Game Development

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.

2. Web Game Engine Options

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.
Available in other languages:

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
Watch video: Optimizing HTML5 Games: 10 Years of Learnings
Will Eastcott
Will Eastcott
CEO & co-founder of PlayCanvas
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.
performancegame developmentgame engine
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
David Rousset
David Rousset
Senior Program Manager @ Microsoft. Co-creator of Babylon.js.
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.
VR and ARgame development
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!
Top Content
Florin Ciornei
Florin Ciornei
CrazyGames
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.
performancewebglgame developmentreact unity webgl
Making Awesome Games with LittleJS
JS GameDev Summit 2022JS GameDev Summit 2022
34 min
Making Awesome Games with LittleJS
Top Content
Frank Force
Frank Force
Game Designer, Software Engineer
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.
game developmentgame engine
How Not to Build a Video Game
React Summit 2023React Summit 2023
31 min
How Not to Build a Video Game
Watch video: How Not to Build a Video Game
Christoph Nakazawa
Christoph Nakazawa
CEO at Nakazawa Tech
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.
case studygame developmentbuilders and founders
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
Ilia Chernetskii
Ilia Chernetskii
Evolution
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.
game development

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 Workshop
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.
webglgame development
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
Workshop
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.
game developmentgame engine
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.
3dgame development
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.
game developmentgame engine