Making “Bite-Sized” Web Games with GameSnacks

Rate this content
Bookmark
The video discusses the advantages of creating bite-sized games with GameSnacks, highlighting the importance of optimizing game file sizes for better accessibility and performance. GameSnacks focuses on reducing file sizes to ensure games load quickly, even on slower internet connections. Techniques such as gzip encoding and lazy loading are recommended for minimizing file sizes. JavaScript, visuals, and audio are identified as key contributors to web game file sizes. Minification and procedural formats like SVG and MIDI are suggested for further optimization. The video also emphasizes the benefits of showing visuals quickly during game loading to reduce perceived load times. Tools like Phaser, Pixie, and Unity are mentioned as popular choices for web game development. Testing on slower internet connections using browser tools is also advised. The talk addresses various strategies for optimizing web games, catering to developers and tech enthusiasts interested in improving game accessibility and performance.

From Author:

One of the great strengths of gaming on the web is how easily accessible it can be. However, this key advantage is often negated large assets and long load times, especially on slow mobile connections. In this talk, Alex Hawker from Google’s GameSnacks will illustrate how they are tackling this problem and some key learnings the team found while optimizing third party games and designing their own ultra-lightweight game engine.

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

FAQ

GameSnacks is a new team at Google dedicated to growing the web gaming ecosystem to help make games universally accessible and useful. They focus on optimizing web game file sizes to improve accessibility and performance.

Bite-sized games are important because they enhance the accessibility and virality of web games. Smaller file sizes ensure that games can be quickly downloaded and played even on slower internet connections, making them more universally accessible.

Gzip encoding reduces the file size of code and other applicable files by an average of 75%. It compresses files like code, configs, and specific formats such as SVG or MIDI, allowing fewer bytes to be sent to the client. However, it should only be used on uncompressed files and needs to be enabled on the server.

Showing a visual quickly is crucial because research shows that increasing page load time from 1 second to 5 seconds increases bounce rates by 90%. An animated visual or loading screen reassures users that the game is loading and reduces the perceived load time.

Lazy loading is the practice of loading only the content needed at the current point in time rather than loading everything upfront. This technique helps get users into the game faster by reducing the initial download size and often decreases the average download required.

The key contributors to web game file size are JavaScript, Visuals, and Audio. In a typical web game, JavaScript can compose 20% of the overall size, while Visuals and Audio can make up around 43% each.

Minification reduces JavaScript file size by removing unnecessary characters from the code without changing its functionality. Tools like Tercer and Google's Closure Compiler can be used for this process, often as part of a build step in tools like Webpack. Additionally, enabling variable name mangling can provide further reductions.

To optimize visual assets, consider using stylized graphics instead of realistic ones, which require less texture data and lighting calculations. Use unlit materials for simpler shading, bake shadows into textures, and prefer procedural formats like SVG for smaller file sizes and resolution-independent images.

Procedural formats like SVG and MIDI store a series of instructions to generate data at runtime rather than storing the data itself. These formats are incredibly small and customizable, which can lead to significant file size reductions and additional benefits like resolution-independent images and varied sound effects.

WebAssembly and WebGPU are exciting new web technologies that enable advanced features like compute shaders and extend the capabilities of web development to traditional C/C++ frameworks like Unity. These technologies open up more ways to build and optimize web games, making development more flexible and powerful.

Alex Hawker
Alex Hawker
33 min
07 Apr, 2022

Comments

Sign in or register to post your comment.

Video Transcription

1. Introduction to GameSnacks and Game Optimization

Short description:

Welcome to making bite-sized games with GameSnacks. The web has the advantage of easy accessibility for gaming, but large file sizes hinder this. Gamesnacks is working on optimizing game sizes. Using gzip encoding and showing visual elements quickly improve user experience.

Hello, and welcome, everyone, to making bite-sized games with GameSnacks. I'm Alex Hawker, I'm a software engineer on the GameSnacks team at Google. My main focus has been a variety of web gaming infrastructure and distribution-related projects, many of which revolve around this very challenge of optimizing web game file size.

Now, you may be thinking, why bite-sized games? Aren't internet speeds good enough these days? Well, one of the key advantages of the web as a platform for gaming is its capability for virality, perfectly expressed in examples from io Games to the recent hit, Wordle. But this advantage of easy accessibility is severely negated when file sizes soar too high. Despite advances like 5G, much of the world still frequently experiences slower connections, from Australia, to India, to right here in the US. I know I've certainly experienced many times in places where my phone's internet speed suddenly slows to a crawl. And in times like these, when even just a 10 megabyte game can take over 3 minutes to download, every byte counts. No one wants to see that blank screen on the left, they want to play some games.

Well this is one of the things that we're working on here at Gamesnacks. Gamesnacks is a new team at Google dedicated to growing the web gaming ecosystem to help make games universally accessible and useful. As part of this effort, we've experimented heavily with optimizing games and their file sizes. Even going so far as to build an experimental game engine to see just how far you can take these optimizations, and how worthwhile the various types can be. I'm here today to share with you the highlights of these learnings. We'll start with a few general considerations that apply to optimizing game size then dive into specific optimizations for different file types.

First off, using gzip encoding on game files is an easy first step to improving file savings. On average, it reduces the file size of code and other applicable files by 75%. For those unfamiliar, gzip is essentially an open source equivalent to zip. Browsers today support servers sending them these gzip-compressed files, which allows us to reduce how many bytes we need to send. However, due to the way gzip works, it doesn't work well on every file. You should instead only use it on uncompressed files like code, configs, and specific formats like svg or midi. Unlike other tips, using gzip is not a change made to the game project itself, but instead has to be enabled on the server. Fortunately, this is usually pretty straightforward. For instance, in Google Cloud Storage, you can just add this Zed flag with the list of extensions you want gzipped.

Next up, we've got well this is kind of an awkward pause. Not really all that pleasant, which is why it's so important to get some sort of visual shown to users quickly. This is critical, because research shows that just having the page load time go from 1 second to 5 seconds increases the bounce rate of the page by 90%. So showing the user some ideally animated visual — whether a splash screen or a loading screen — reassures them that things aren't broken, and gives them something to focus on to make the load feel faster to the user. So even though this won't improve the total load times, or likely might even make it slightly worse, it's overall a very big win, since at the end of the day, the user's perception is what matters, not the raw metrics. In a similar vein, lazy loading content can be a big win.

2. Lazy Loading and JavaScript Size

Short description:

Lazy loading is a technique where you only load the content that you need at the current point in time. This can be done on a fine-grained level, loading assets on the fly and using placeholders. It helps get the user into the game faster and reduces the average download required. JavaScript is relatively small compared to Visuals and Audio in terms of file size, but it can be heavier than it seems.

This is when, rather than loading everything eagerly ahead of time, you only load the content that you need at the current point in time. So if we had this space game with four worlds, maybe we'd only load the core game mechanics and the rocket ship level assets first, and defer the rest to be loaded later when the player gets to it. You can also do this on a more fine-grained level, where individual assets are loaded on the fly and rendered with placeholders in the meantime.

This is a popular technique in Unreal Engine with rendering low-resolution versions of textures as a placeholder to speed up loading times. With these techniques, even though the total game size stored on a server doesn't decrease, it really helps get the user into the game a lot faster and often reduces the average download required. There are some trade-offs though, as this does require careful planning and code to handle breaking up the game into self-contained segments, which is easier for some game types and some game engines than it is on others. Additionally, if you're planning on embedding this game on the user's device, for instance with something like Cordova or Electron, lazy loading isn't going to give you many big wins since the user needs the entire thing anyways.

Now that we've covered some general tips, let's take a deeper dive into some key contributors of file size. I've broken down a typical web game from our catalog down into what composes its GZIPed file size, and we can clearly see three major categories emerge — JavaScript, Visuals, and Audio. Let's start with JavaScript. So JavaScript is relatively small compared to Visuals and Audio. Our representative game, thanks in part to GZIP, had JavaScript composing only 20% of its overall size, compared to 43% of Visuals and Audio. However, even though its raw file size is smaller, JavaScript can be a lot heavier than it at first seems.

QnA

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.
Embracing WebGPU and WebXR With Three.js
JSNation 2024JSNation 2024
27 min
Embracing WebGPU and WebXR With Three.js
The 3JS project has evolved into a community-driven effort with numerous contributors over the past 14 years. It started with 3D engine work in Flash and transitioned to using SVGs for rendering in HTML5 before adopting WebGL. The project showcases various projects and frameworks, including a no-code tool powered by 3.js. The team is working on a new render using WebGPU and developing a new shader language called TSL. The hope is that WebGPU will eventually replace WebGL, offering better control and performance.

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.