WebGL abstraction layers, 3D model loading, and scene graph management available in 3JS
VR frameworks like A-Frame built on 3JS allow HTML markup for 3D worlds
JavaScript-based libraries for 2D and 3D physics simulations include Box2D, MatterJS, and AmmoJS
PixyJS abstracts rendering for fast 2D drawing without WebGL knowledge
Tools like Tiled and LDTK aid in 2D level design for custom game engines
The world of web-based game development offers an abundance of tools and frameworks for creating both simple and complex games. A core component in this space is 3JS, a powerful library that provides essential features like WebGL abstraction layers, 3D model loading, and scene graph management. With these tools, developers can build their game engines or integrate them into pre-existing ones.
For those interested in virtual reality, A-Frame is an excellent choice. Built on top of 3JS, A-Frame allows developers to use HTML-like markup to create immersive 3D environments, making it accessible for web developers familiar with HTML.
Physics simulations are crucial for game realism. JavaScript-based libraries like Box2D provide 2D physics solutions, while MatterJS and PlankJS offer alternatives. For 3D physics, AmmoJS, a Bullet physics port, can be used for detailed simulations. These libraries offer flexibility depending on the game design requirements.
Rendering is another critical aspect of game development. PixyJS serves as an abstraction layer for rendering, facilitating fast 2D drawing without requiring in-depth WebGL knowledge. This makes PixyJS an invaluable tool for developers focusing on 2D games.
Building a custom game engine requires more than just libraries; it demands tools for designing levels and managing assets. Tiled, an open-source project, is a versatile tool for creating 2D maps with various projections. LDTK, or Level Design Toolkit, is a younger but highly efficient tool for visual composition and game object management.
The vast array of available game engines and frameworks can be overwhelming. Developers must choose between native development, which integrates closely with web browsers, and compiled approaches using technologies like WebAssembly. These choices are influenced by the intended target platform and the developer's familiarity with the tools.
Traditional game engines like Unity and Godot offer a wide range of features, with Unity being a popular choice due to its extensive community and support. However, it comes with licensing fees. Godot, on the other hand, is open-source and rapidly growing, making it an attractive option for budget-conscious developers.
For 2D game development, engines like Default and GameMaker Studio provide robust environments with unique approaches. Default uses Lua for scripting, while GameMaker offers a drag-and-drop interface and its scripting language, making it accessible for beginners.
When developing specifically for the web, PlayCanvas and Babylon.js stand out as primary options. PlayCanvas offers a browser-based development environment, while Babylon.js is open-source and code-centric, suitable for those who prefer working directly with code.
Construct 3 and GDevelop are visual programming tools that simplify game development, generating JavaScript code from visual layouts. Both focus primarily on 2D games, providing easy-to-use interfaces for non-programmers.
Frameworks like PhaserJS and MelonJS are modular, enabling developers to build games without full-fledged engines. These frameworks offer essential features for 2D game development, such as sprite management and audio support.
For developers who prefer building their engines, the web offers a modular approach, allowing the integration of various libraries and tools. This approach is less daunting than it may seem, thanks to the modularity of JavaScript technologies.
Selecting the right engine or framework depends on several factors, including the game's dimensionality, budget, open-source preferences, and primary platform. Developers must consider these aspects carefully to make an informed decision that aligns with their project goals.
The landscape of web-based game development is rich with possibilities, and the right combination of tools and frameworks can lead to successful game creation. Whether building from scratch or using existing engines, developers have the resources to bring their game ideas to life.
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.
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.
Notable 3D frameworks include Three.js and Babylon.js. For 2D frameworks, PhaserJS, MelonJS, and Cocos2DJS are popular choices.
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.
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 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.
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.
For 2D level design in web games, Tiled and LDTK (Level Design Toolkit) are highly recommended tools.
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.
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.
3. Godot Engine and Web Support
Unreal and Unity have licensing fees, while Godot is fully open source with a strong community. Godot is improving in both 2D and 3D spaces, with upcoming releases promising better visuals. Godot also supports WebAssembly compilation and has well-tested web support.
4. Traditional Game Engines: Default
Today we're going to talk about two 2D game engine options in this space, traditional game engines. The first one is the Default game engine. It is now completely free to use and the code is entirely available. Default is an excellent game engine with a unique approach. It uses the Lua programming language and a messaging based system. It compiles out to WebAssembly and offers good performance.
5. Web Game Engine Options (Cont.)
GameMaker Studio is a 2D game engine that has been around for over 20 years. It recently acquired by Opera and has targets for different platforms. PlayCanvas is a browser-based 3D game engine with a full functioning 3D World Editor. It is commercial but offers open source components. Babylon.js is an open source 3D game engine and framework heavily supported by Microsoft. Cocos Creator is a free-to-use 3D game engine built on top of an open source framework.
6. Game Engine and Framework Options
Do not mix Cocos Creator up with Cocos 2D. On the topic of 2D, we have a few options there. Construct 3 and G develop are visual programming tools that output web-based projects. Stencil is a visual programming language for 2D environments. Moving on to frameworks, PhaserJS, MelonJS, and Cocos2DJS are top-level options for building games. Cocos2D provides extensive functionality, PhaserJS is an HTML5-based 2D framework, and MelonJS is a smaller alternative. In the 3D space, 3JS is the predominant framework.
7. JavaScript Libraries and Level Design Tools
3JS provides a WebGL abstraction layer and supports 3D model loading, scene graph management, and object loading. A-Frame is a VR framework built on top of 3JS. Other JavaScript-based libraries for game development include Box2D, MatterJS, PlankJS, AmmoJS, and OIMO. PixyJS is a rendering library that abstracts away the rendering layer for fast 2D drawing. You can build your own engine using these libraries or use frameworks like Phaser, Melon, and Cocos2D. Tiled and LDTK are recommended 2D level design tools for creating maps and setting up gameplay objects.
8. Audio Support in Game Development
If you need to add audio to your own framework or game engine, there are a couple of options out there. Two options to consider are Sound.js and Howler.js. Both are open source projects that hide the complexities of dealing with audio and provide fallbacks to browser audio support. There are many other libraries available for audio support, and you can leverage these open source projects to create your own engine with less effort.
9. Choosing the Right Game Engine
Choosing the right engine is a matter of fitting your needs. There are more options available, and finding support becomes harder for more obscure engines. Asking questions about 2D or 3D, budget, and open source access can help narrow down the choices. Consider the primary platform and the performance trade-offs of web technologies. Rolling your own engine is an option, especially in the web world. 3JS provides most 3D functionality, and there are audio libraries available.
10. Choosing Game Engines and Frameworks
If you need physical libraries, they are out there. On the 2D side, there are renderers and physics engines like Phaser and Cocos. Unity is a top choice for broad platform support. For budget-conscious or open source-oriented developers, Godot is recommended. The Default engine is unique and suitable for 2D games. Visual programming options include GDevelop, Construct 3, and Stencil.
11. Game Engine Recommendations
GDevelop is the cheapest option, while Construct 3 is the most mature. Both are primarily 2D engines. For 3D web-only games, Babylon and PlayCanvas are recommended, with PlayCanvas being more focused on level construction and tools, and BabylonJS being a cost-effective choice. For 2D games with more code-centric development or integration of external tools, frameworks like Phaser are available. If you want to build your own engine, consider using the 3JS JavaScript framework for 3D game development.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Walt will show you 2 ways to quickly create a game server on Vultr - one with our one-click Minecraft installation on Vultr Marketplace, and another within Terminal after deploying a Vultr server.
Largely based on Free Association in the Metaverse - Avaer @Exokit - M3, Avaer will demo some of the ways that open standards enable open and free traversal of users and assets throughout the interconnected metaverse.
Comments