Lessons From 7 Years of .IO Games: What Works, What Doesn’t Work, Where to Go From Here

Rate this content
Bookmark

Having worked for 7 years on popular .io games like Krunker.io, Diep.io, and Ev.io, I've seen the multiplayer web game market grow and evolve on the bleeding edge of web tech over the years.

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

FAQ

I-O games are multiplayer web games that are easy to play and can be addictive with gameplay extending for hours. They cater to players with short attention spans by offering simple mechanics and the ability to play in large lobbies, making them engaging and accessible.

Agar.io, launched in 2015, was pivotal in popularizing I-O games by featuring simple gameplay where players control a blob to consume others in a competitive lobby. Its simplicity and multiplayer aspect attracted massive player engagement and set the stage for subsequent I-O games.

Initially characterized by basic graphics and simple gameplay, I-O games evolved around 2016 by incorporating more complex game mechanics like skill trees and themed gameplay, enhancing depth and engagement without compromising the ease of access.

I-O games engage players through features like five-second startup times, quick learning of game mechanics, ephemeral leaderboards, and network effects that encourage frequent and short play sessions. These elements help maintain player interest and competitive spirit.

I-O games typically grow their user base through network effects and organic sharing among players, especially in school settings. This grassroots approach allows them to acquire users without the need for traditional marketing expenditures.

Monetizing I-O games is challenging due to their casual nature and the environments they are often played in, like schools. Strategies such as offering in-game purchases or pushing players to other platforms where monetization is easier have been employed to tackle this issue.

Recent improvements in web gaming standards, such as WebGPU, WASM threads, and enhanced web transports for low latency, are set to significantly enhance the quality and performance of multiplayer web games, making them more competitive with traditional gaming platforms.

Nathan Flurry
Nathan Flurry
14 min
28 Sep, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

I-O games are multiplayer web games that are easy to pick up but can be played for hours. Developers have added deeper game mechanics and adapted I-O games for mobile, generating high revenue. Acquiring users for I-O games is done by sharing the games to play together at school. Monetization of I-O games is primarily through ads, as it is difficult to generate in-app purchases from the web. Web standards and user-generated content are opening up new possibilities for better web games.

1. Introduction to I-O Games

Short description:

I've been working on I-O games for seven years and I'm going to share some tips on game design technology and business decisions that you can use to build a killer I-O game yourself. I-O games are multiplayer web games that are easy to pick up but can be played for hours on end. The whole .IO craze was kicked off in 2015 with Agar.io, a game where players move a blob and eat other blobs. It became so popular that it even appeared in House of Cards. This led to the creation of Iogames.space, a web portal featuring I.O. games.

My name is Nathan Flurry. I've been working on I-O games for seven years. Some titles I've worked on include Krunker, D-E-F, eeveeo, and MooMoo. I'm going to share some tips on game design technology and business decisions that you can use to build a killer I-O game yourself.

Before diving into it, I want to give an overview of what an I-O game is. I-O games are multiplayer web games that are easy to pick up but can be played for hours on end. You can think of it like the tick-tock of gaming by catering to short attention spans with endless gameplay. The whole .IO craze was kicked off in 2015 when a game called Agar.io launched. This game was dead simple. All you could do was move the blob and eat other blobs. The killer feature though was that lobbies had over 50 players in them, so players would have to spend hours on end collaborating with friends to get at the top of the leaderboard, even though the mechanics are dead simple. Agar.io was so popular, it made an appearance in House of Cards in 2016.

A series of games followed suit with simple mechanics, basic graphics and large lobbies including Slither.io, which is a modern take on Snake, and Splix.io, which is a territory conquering game. This led to the creation of Iogames.space which is a popular web portal that features specifically I.O. games. If you played a lot of web games during this time, I.O.games.space was such an awesome site because there was a brand new multiplayer game almost every single day with unique mechanics. Because there was no review process or downloads required for publishing I.O. games, developers could quickly iterate on games, and many of the best games you know today were developed in less than a month and matured over the following years. Older web portals also got onto the trend and started featuring I.O. games to fill out the void that Flash and Shockwave left when they were phased out.

2. Evolution of I-O Games

Short description:

Around 2016, developers started adding deeper game mechanics to I-O games. Around 2018, developers realized that many players were students in classrooms, playing these games as a substitute for console and desktop games. Some developers adapted I-O game mechanics for mobile, generating high revenue. Key pillars of I-O games include fast startup times, short learning times, ephemeral leaderboards, and network effects. To achieve fast startup times, games are designed to load within five seconds on low-end hardware. Nonessential assets are lazily loaded, and the engine is structured to load assets individually as needed. The initial JavaScript bundle for Kronka includes core maps, class configuration, and character models.

Around 2016, developers started adding deeper game mechanics by adding up great trees. Diep was a game where players could build unique tanks, Mop was an animal based game where players climbed the food chain, and Moo Moo was a PvP sandbox game where players could build forts. This was around the time I started working on some of the original games built by Sydney DeBrese, like Moo Moo and some less known games.

Around 2018, developers realized that many of their players were students in classrooms, playing these games as a substitute for console and desktop games available at home. They started building simplified browser based versions of popular games tailored for short play sessions. Most notably, I worked on Crunker, which is a counterstrike in the browser. Other examples include Zombs Royale and Build Royale, which are 2D versions of Fortnite, and Evo, which brought Destiny-like gameplay to the browser. If you go to a public library today, I guarantee you you'll see players, you'll see students playing one of these games.

Around the same time, some developers realized Io game mechanics could be adapted for mobile, to leverage new audiences and higher ad revenue. Most notably Voodoo adapted games like Paper.io, Whole.io for mobile touch friendly controls, with offline modes with fake opponents. The company Voodoo refined this technique so well that they generated $430 million in revenue in 2021, and had six billion downloads across all of those games. All of these Io games have a few key pillars in common, five second startup times, 60 second mechanic learning times, ephemeral leaderboards, and network effects. If you follow these pillars, your game will be able to replicate what works well for popular Io games.

For five second startup times, as I mentioned earlier, most Io gamers are students in classrooms. To give some context, Gen Z has an average of eight second attention span, and Io games only stick if players can get in the game before they lose interest. Because of that, we ensure that all of our games load within five seconds on low end hardware, which is a tall order for any traditional desktop game. Thankfully, the web is uniquely suited for this. If a web browser can load everything from Google Docs to Figma within a few seconds, it's entirely doable for games too. For example, when working on Kronka, we needed to build an immersive 3D game that still loaded within a five second window. Most important thing we did to achieve this is that we did not use a game engine like Unity. Game engines are great because they give you everything you need out of the box, but that comes at the cost of really long load times. Only one game I've mentioned this entire talk was built with Unity, and this is why.

Another important thing we did was lazily load all nonessential assets. Similar to how web pages lazily load images and scripts, games are exactly the same. If you open Kronka, you'll notice that you'll connect to a server before the textures load or the sound starts playing. That's because everything required to play the game is under five megabytes and the rest is lazily loaded. We also structured the engine so that it could load assets individually as needed, instead of downloading a single large package on startup. For example, there are thousands of scans and weapon models available in the game, but we only download the relevant content when needed. Similarly, we embed as much as possible into the initial JavaScript bundle you load on startup. Everything from the core maps, the class configuration, the character models are embedded into the initial JavaScript package for Kronka.

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.
Remix Flat Routes – An Evolution in Routing
Remix Conf Europe 2022Remix Conf Europe 2022
16 min
Remix Flat Routes – An Evolution in Routing
Top Content
Remix Flat Routes is a new convention that aims to make it easier to see and organize the routes in your app. It allows for the co-location of support files with routes, decreases refactor and redesign friction, and helps apps migrate to Remix. Flat Folders convention supports co-location and allows importing assets as relative imports. To migrate existing apps to Flat Routes, use the Remix Flat Routes package's migration tool.
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.

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.
Integrating LangChain with JavaScript for Web Developers
React Summit 2024React Summit 2024
92 min
Integrating LangChain with JavaScript for Web Developers
Featured Workshop
Vivek Nayyar
Vivek Nayyar
Dive into the world of AI with our interactive workshop designed specifically for web developers. "Hands-On AI: Integrating LangChain with JavaScript for Web Developers" offers a unique opportunity to bridge the gap between AI and web development. Despite the prominence of Python in AI development, the vast potential of JavaScript remains largely untapped. This workshop aims to change that.Throughout this hands-on session, participants will learn how to leverage LangChain—a tool designed to make large language models more accessible and useful—to build dynamic AI agents directly within JavaScript environments. This approach opens up new possibilities for enhancing web applications with intelligent features, from automated customer support to content generation and beyond.We'll start with the basics of LangChain and AI models, ensuring a solid foundation even for those new to AI. From there, we'll dive into practical exercises that demonstrate how to integrate these technologies into real-world JavaScript projects. Participants will work through examples, facing and overcoming the challenges of making AI work seamlessly on the web.This workshop is more than just a learning experience; it's a chance to be at the forefront of an emerging field. By the end, attendees will not only have gained valuable skills but also created AI-enhanced features they can take back to their projects or workplaces.Whether you're a seasoned web developer curious about AI or looking to expand your skillset into new and exciting areas, "Hands-On AI: Integrating LangChain with JavaScript for Web Developers" is your gateway to the future of web development. Join us to unlock the potential of AI in your web projects, making them smarter, more interactive, and more engaging for users.
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.
Managers Are From Mars, Devs Are From Venus
TechLead Conference 2024TechLead Conference 2024
111 min
Managers Are From Mars, Devs Are From Venus
Workshop
Mo Khazali
Mo Khazali
A Developer’s Guide to Communicating, Convincing, and Collaborating Effectively With Stakeholders
It’s a tale as old as time - collaboration between developers and business stakeholders has long been a challenge, with a lack of clear communication often leaving both sides frustrated. The best developers can deeply understand their business counterparts’ needs, effectively communicate technical strategy without losing the non-technical crowd, and convince the business to make the right decisions. Working at a consultancy, I’ve both failed and succeeded in architecting and “selling” technical visions, learning many lessons along the way.Whether you work at a product company, are a consultant/freelancer, or want to venture beyond just being a developer, the ability to convince and clearly communicate with stakeholders can set you apart in the tech industry. This becomes even more important with the rise of GenAI and the increasingly competitive developer market, as problem-solving and effective communication are key to positioning yourself.In this workshop, I’ll share real-world examples, both good and bad, and guide you through putting the theory into practice through dojos.