Lecciones de 7 años de juegos .IO: Lo que funciona, lo que no funciona, hacia dónde ir a partir de aquí

Rate this content
Bookmark

Habiendo trabajado durante 7 años en juegos .io populares como Krunker.io, Diep.io y Ev.io, he visto cómo el mercado de juegos web multijugador crece y evoluciona en la vanguardia de la tecnología web a lo largo de los años.

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

FAQ

Los juegos I-O son juegos web multijugador que son fáciles de aprender pero pueden jugarse durante horas. Estos juegos suelen tener mecánicas simples, gráficos básicos y permiten grandes salas de jugadores.

Algunos ejemplos populares de juegos I-O incluyen Agar.io, un juego simple donde mueves una bola y comes otras bolas, Slither.io que es una versión moderna de Snake, y Splix.io, un juego de conquista de territorios.

Los juegos I-O comparten características clave como tiempos de inicio de cinco segundos, aprendizaje de mecánicas en 60 segundos, clasificaciones efímeras y efectos de red que facilitan el rápido crecimiento y compromiso del jugador.

Los juegos I-O se benefician de la ausencia de un proceso de revisión y descargas porque permite a los desarrolladores iterar rápidamente y lanzar juegos en tiempos muy cortos, facilitando la prueba y adaptación basada en la recepción del usuario.

Los juegos I-O a menudo no requieren un gran presupuesto de marketing porque utilizan el efecto de red y estrategias como compartir códigos de grupo o enlaces en plataformas como Discord o Twitch, lo que permite a los jugadores invitar fácilmente a otros a unirse.

Uno de los principales desafíos es la monetización, ya que las compras dentro de la aplicación son difíciles debido al menor compromiso comparativo con juegos en otras plataformas. Además, los picos de tráfico pueden variar dramáticamente, disminuyendo durante vacaciones o fines de semana.

Para mantener a los jugadores comprometidos, los juegos I-O utilizan mecánicas como clasificaciones efímeras que requieren juego continuo para mantenerse en la cima, y ofrecen recompensas y beneficios en otras plataformas para trasladar a los jugadores fuera de la web.

Los estándares web como WebGPU y WebXR están facilitando la publicación de juegos más intensivos en recursos en la web, lo que podría mejorar la calidad y la interactividad de los juegos I-O, permitiendo experiencias multijugador más ricas y envolventes.

Nathan Flurry
Nathan Flurry
14 min
28 Sep, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Los juegos .IO son juegos web multijugador que son fáciles de aprender pero se pueden jugar durante horas. Los desarrolladores han agregado mecánicas de juego más profundas y han adaptado los juegos .IO para dispositivos móviles, generando altos ingresos. La adquisición de usuarios para los juegos .IO se realiza compartiendo los juegos para jugar juntos en la escuela. La monetización de los juegos .IO se realiza principalmente a través de anuncios, ya que es difícil generar compras dentro de la aplicación desde la web. Los estándares web y el contenido generado por los usuarios están abriendo nuevas posibilidades para mejores juegos web.

1. Introducción a los juegos I-O

Short description:

He estado trabajando en juegos I-O durante siete años y voy a compartir algunos consejos sobre tecnología de diseño de juegos y decisiones comerciales que puedes utilizar para construir tu propio juego I-O asesino. Los juegos I-O son juegos web multijugador que son fáciles de aprender pero se pueden jugar durante horas. La locura de los juegos .IO comenzó en 2015 con Agar.io, un juego en el que los jugadores mueven una bola y comen otras bolas. Se hizo tan popular que incluso apareció en House of Cards. Esto llevó a la creación de Iogames.space, un portal web que presenta juegos I-O.

Mi nombre es Nathan Flurry. He estado trabajando en juegos I-O durante siete años. Algunos títulos en los que he trabajado incluyen Krunker, D-E-F, eeveeo y MooMoo. Voy a compartir algunos consejos sobre tecnología de diseño de juegos y decisiones comerciales que puedes utilizar para construir tu propio juego I-O.

Antes de adentrarnos en ello, quiero dar una visión general de lo que es un juego I-O. Los juegos I-O son juegos web multijugador que son fáciles de aprender pero se pueden jugar durante horas. Puedes pensar en ellos como el tic-tac de los juegos, satisfaciendo la atención corta con una jugabilidad interminable. La locura de los juegos .IO comenzó en 2015 cuando se lanzó un juego llamado Agar.io. Este juego era muy simple. Lo único que podías hacer era mover la bola y comer otras bolas. Lo más destacado era que las salas tenían más de 50 jugadores, por lo que los jugadores tenían que pasar horas colaborando con amigos para llegar a la cima de la clasificación, aunque las mecánicas eran muy simples. Agar.io fue tan popular que apareció en House of Cards en 2016. Le siguieron una serie de juegos con mecánicas simples, gráficos básicos y salas grandes, incluyendo Slither.io, que es una versión moderna de Snake, y Splix.io, que es un juego de conquista de territorios. Esto llevó a la creación de Iogames.space, que es un portal web popular que presenta específicamente juegos I-O. Si jugaste muchos juegos web durante este tiempo, I.O.games.space era un sitio increíble porque casi todos los días había un juego multijugador nuevo con mecánicas únicas. Debido a que no se requería un proceso de revisión ni descargas para publicar juegos I-O, los desarrolladores podían iterar rápidamente en los juegos, y muchos de los mejores juegos que conoces hoy en día se desarrollaron en menos de un mes y maduraron durante los años siguientes. Los antiguos portales web también se sumaron a la tendencia y comenzaron a presentar juegos I-O para llenar el vacío que dejaron Flash y Shockwave cuando fueron eliminados.

2. Evolución de los juegos I-O

Short description:

Alrededor de 2016, los desarrolladores comenzaron a agregar mecánicas de juego más profundas a los juegos I-O. Alrededor de 2018, los desarrolladores se dieron cuenta de que muchos jugadores eran estudiantes en las aulas, jugando estos juegos como sustitutos de los juegos de consola y de escritorio. Algunos desarrolladores adaptaron las mecánicas de los juegos I-O para dispositivos móviles, generando altos ingresos. Los pilares clave de los juegos I-O incluyen tiempos de inicio rápidos, tiempos de aprendizaje cortos, clasificaciones efímeras y efectos de red. Para lograr tiempos de inicio rápidos, los juegos están diseñados para cargarse en cinco segundos en hardware de baja gama. Los activos no esenciales se cargan de forma diferida y el motor está estructurado para cargar los activos individualmente según sea necesario. El paquete inicial de JavaScript para Kronka incluye mapas principales, configuración de clases y modelos de personajes.

Alrededor de 2016, los desarrolladores comenzaron a agregar mecánicas de juego más profundas mediante la adición de grandes árboles. Diep fue un juego en el que los jugadores podían construir tanques únicos, Mop era un juego basado en animales en el que los jugadores escalaban la cadena alimentaria y Moo Moo era un juego de sandbox PvP en el que los jugadores podían construir fortalezas. Esto fue alrededor del momento en que comencé a trabajar en algunos de los juegos originales construidos por Sydney DeBrese, como Moo Moo y algunos juegos menos conocidos. Alrededor de 2018, los desarrolladores se dieron cuenta de que muchos de sus jugadores eran estudiantes en las aulas, jugando estos juegos como sustitutos de los juegos de consola y de escritorio disponibles en casa. Comenzaron a construir versiones basadas en el navegador simplificadas de juegos populares adaptadas para sesiones de juego cortas. El más notablemente, trabajé en Crunker, que es un Counter-Strike en el navegador. Otros ejemplos incluyen Zombs Royale y Build Royale, que son versiones 2D de Fortnite, y Evo, que trajo una jugabilidad similar a Destiny al navegador. Si vas a una biblioteca pública hoy, te garantizo que verás jugadores, verás estudiantes jugando uno de estos juegos. Al mismo tiempo, algunos desarrolladores se dieron cuenta de que las mecánicas de los juegos I-O podrían adaptarse para dispositivos móviles, aprovechando nuevas audiencias y mayores ingresos publicitarios. Especialmente, Voodoo adaptó juegos como Paper.io y Whole.io para controles táctiles móviles, con modos sin conexión con oponentes ficticios. La compañía Voodoo refinó esta técnica tan bien que generaron $430 millones en ingresos en 2021 y tuvieron seis mil millones de descargas en todos esos juegos. Todos estos juegos I-O tienen algunos pilares clave en común: tiempos de inicio de cinco segundos, tiempos de aprendizaje de mecánicas de 60 segundos, clasificaciones efímeras y efectos de red. Si sigues estos pilares, tu juego podrá replicar lo que funciona bien para los juegos I-O populares. Para los tiempos de inicio de cinco segundos, como mencioné anteriormente, la mayoría de los jugadores de I-O son estudiantes en las aulas. Para dar un poco de contexto, la Generación Z tiene un promedio de atención de ocho segundos y los juegos I-O solo se mantienen si los jugadores pueden ingresar al juego antes de perder interés. Debido a eso, nos aseguramos de que todos nuestros juegos se carguen en cinco segundos en hardware de gama baja, lo cual es una tarea difícil para cualquier juego de escritorio tradicional. Afortunadamente, la web es especialmente adecuada para esto. Si un navegador web puede cargar todo, desde Google Docs hasta Figma, en unos pocos segundos, también es completamente factible para los juegos. Por ejemplo, cuando trabajamos en Kronka, necesitábamos construir un juego 3D inmersivo que aún se cargara en una ventana de cinco segundos. Lo más importante que hicimos para lograr esto es que no usamos un motor de juego como Unity. Los motores de juego son excelentes porque te brindan todo lo que necesitas de inmediato, pero eso conlleva tiempos de carga muy largos. Solo un juego que mencioné en toda esta charla se construyó con Unity, y esta es la razón. Otra cosa importante que hicimos fue cargar de forma diferida todos los activos no esenciales. Al igual que las páginas web cargan imágenes y scripts de forma diferida, los juegos son exactamente iguales. Si abres Kronka, notarás que te conectarás a un servidor antes de que se carguen las texturas o comience a reproducirse el sonido. Eso se debe a que todo lo necesario para jugar el juego tiene menos de cinco megabytes y el resto se carga de forma diferida. También estructuramos el motor para que pueda cargar los activos individualmente según sea necesario, en lugar de descargar un solo paquete grande al inicio. Por ejemplo, hay miles de escaneos y modelos de armas disponibles en el juego, pero solo descargamos el contenido relevante cuando es necesario. Del mismo modo, incrustamos tanto como sea posible en el paquete inicial de JavaScript que se carga al inicio. Todo, desde los mapas principales, la configuración de clases, los modelos de personajes

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

Optimización de juegos HTML5: 10 años de aprendizaje
JS GameDev Summit 2022JS GameDev Summit 2022
33 min
Optimización de juegos HTML5: 10 años de aprendizaje
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 – Una Evolución en el Enrutamiento
Remix Conf Europe 2022Remix Conf Europe 2022
16 min
Remix Flat Routes – Una Evolución en el Enrutamiento
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.
Construyendo Experimentos Divertidos con WebXR & Babylon.js
JS GameDev Summit 2022JS GameDev Summit 2022
33 min
Construyendo Experimentos Divertidos con 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.
Creando juegos increíbles con LittleJS
JS GameDev Summit 2022JS GameDev Summit 2022
34 min
Creando juegos increíbles con LittleJS
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.
Cómo no construir un videojuego
React Summit 2023React Summit 2023
32 min
Cómo no construir un videojuego
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.
¡Mejora el rendimiento de tus juegos WebGL Unity!
JS GameDev Summit 2023JS GameDev Summit 2023
7 min
¡Mejora el rendimiento de tus juegos WebGL Unity!
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

Crea un Juego Con PlayCanvas en 2 Horas
JSNation 2023JSNation 2023
116 min
Crea un Juego Con PlayCanvas en 2 Horas
Top Content
Featured WorkshopFree
Steven Yau
Steven Yau
En esta masterclass, construiremos un juego utilizando el motor WebGL de PlayCanvas desde el principio hasta el final. Desde el desarrollo hasta la publicación, cubriremos las características más cruciales como la escritura de scripts, la creación de UI y mucho más.
Tabla de contenido:- Introducción- Introducción a PlayCanvas- Lo que vamos a construir- Agregando un modelo de personaje y animación- Haciendo que el personaje se mueva con scripts- 'Falsa' carrera- Agregando obstáculos- Detectando colisiones- Agregando un contador de puntuación- Fin del juego y reinicio- ¡Resumen!- Preguntas
Nivel de la masterclassSe recomienda familiaridad con los motores de juegos y los aspectos del desarrollo de juegos, pero no es obligatorio.
Masterclass: Integrando LangChain con JavaScript para Desarrolladores Web
React Summit 2024React Summit 2024
92 min
Masterclass: Integrando LangChain con JavaScript para Desarrolladores Web
Featured Workshop
Vivek Nayyar
Vivek Nayyar
Sumérgete en el mundo de la IA con nuestro masterclass interactivo diseñado específicamente para desarrolladores web. "Masterclass: Integrando LangChain con JavaScript para Desarrolladores Web" ofrece una oportunidad única para cerrar la brecha entre la IA y el desarrollo web. A pesar de la prominencia de Python en el desarrollo de IA, el vasto potencial de JavaScript sigue siendo en gran medida inexplorado. Este masterclass tiene como objetivo cambiar eso.A lo largo de esta sesión práctica, los participantes aprenderán cómo aprovechar LangChain, una herramienta diseñada para hacer que los modelos de lenguaje grandes sean más accesibles y útiles, para construir agentes de IA dinámicos directamente dentro de entornos JavaScript. Este enfoque abre nuevas posibilidades para mejorar las aplicaciones web con funciones inteligentes, desde el soporte al cliente automatizado hasta la generación de contenido y más.Comenzaremos con los conceptos básicos de LangChain y los modelos de IA, asegurando una base sólida incluso para aquellos nuevos en IA. A partir de ahí, nos sumergiremos en ejercicios prácticos que demuestran cómo integrar estas tecnologías en proyectos reales de JavaScript. Los participantes trabajarán en ejemplos, enfrentando y superando los desafíos de hacer que la IA funcione sin problemas en la web.Este masterclass es más que una experiencia de aprendizaje; es una oportunidad de estar a la vanguardia de un campo emergente. Al final, los asistentes no solo habrán adquirido habilidades valiosas, sino que también habrán creado funciones mejoradas con IA que podrán llevar a sus proyectos o lugares de trabajo.Ya seas un desarrollador web experimentado curioso acerca de la IA o estés buscando expandir tus habilidades en áreas nuevas y emocionantes, "Masterclass: Integrando LangChain con JavaScript para Desarrolladores Web" es tu puerta de entrada al futuro del desarrollo web. Únete a nosotros para desbloquear el potencial de la IA en tus proyectos web, haciéndolos más inteligentes, interactivos y atractivos para los usuarios.
PlayCanvas de principio a fin: la versión rápida
JS GameDev Summit 2022JS GameDev Summit 2022
121 min
PlayCanvas de principio a fin: la versión rápida
Top Content
WorkshopFree
João Ruschel
João Ruschel
En esta masterclass, construiremos un juego completo utilizando el motor PlayCanvas mientras aprendemos las mejores prácticas para la gestión de proyectos. Desde el desarrollo hasta la publicación, cubriremos las características más cruciales como la gestión de activos, scripting, audio, depuración, y mucho más.
Introducción a WebXR con Babylon.js
JS GameDev Summit 2022JS GameDev Summit 2022
86 min
Introducción a WebXR con Babylon.js
Workshop
Gustavo Cordido
Gustavo Cordido
En este masterclass, te presentaremos los conceptos básicos de la construcción de experiencias de Realidad Mixta con WebXR y Babylon.js.
Aprenderás lo siguiente:- Cómo agregar objetos de malla 3D y botones a una escena- Cómo utilizar texturas procedurales- Cómo agregar acciones a objetos- Cómo aprovechar la experiencia predeterminada de Realidad Cruzada (XR)- Cómo agregar física a una escena
Para el primer proyecto en este masterclass, crearás una experiencia interactiva de Realidad Mixta que mostrará estadísticas de jugadores de baloncesto a fanáticos y entrenadores. Para el segundo proyecto en este masterclass, crearás una aplicación WebXR activada por voz utilizando Babylon.js y Azure Speech-to-Text. Luego, desplegarás la aplicación web utilizando el alojamiento de sitios web estáticos proporcionado por Azure Blob Storage.
Masterclass de Codificación en Vivo de Juegos Pequeños
JS GameDev Summit 2023JS GameDev Summit 2023
115 min
Masterclass de Codificación en Vivo de Juegos Pequeños
Workshop
Frank Force
Frank Force
Sumérgete en el cautivador mundo del desarrollo de microjuegos con Frank Force en este interactivo masterclass de codificación en vivo. Diseñado tanto para desarrolladores experimentados como para curiosos principiantes, esta sesión explora los desafíos únicos y las alegrías de crear juegos y demos con restricciones extremas de tamaño.
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
Una Guía para Desarrolladores sobre Cómo Comunicar, Convencer y Colaborar Efectivamente con los Stakeholders
Es una historia tan antigua como el tiempo: la colaboración entre desarrolladores y stakeholders de negocios ha sido durante mucho tiempo un desafío, con una falta de comunicación clara que a menudo deja a ambas partes frustradas. Los mejores desarrolladores pueden comprender profundamente las necesidades de sus contrapartes de negocios, comunicar efectivamente la estrategia técnica sin perder a la audiencia no técnica y convencer al negocio de tomar las decisiones correctas. Trabajando en una consultoría, he fallado y tenido éxito en arquitectar y “vender” visiones técnicas, aprendiendo muchas lecciones en el camino.Ya sea que trabajes en una empresa de productos, seas consultor/freelancer, o quieras aventurarte más allá de ser solo un desarrollador, la capacidad de convencer y comunicar claramente con los stakeholders puede diferenciarte en la industria tecnológica. Esto se vuelve aún más importante con el auge de GenAI y el mercado de desarrolladores cada vez más competitivo, ya que la resolución de problemas y la comunicación efectiva son clave para posicionarte.En esta masterclass, compartiré ejemplos del mundo real, tanto buenos como malos, y te guiaré a través de poner la teoría en práctica mediante dojos.