Optimización de juegos HTML5: 10 años de aprendizaje

Rate this content
Bookmark

El motor de juegos de código abierto PlayCanvas está construido específicamente para el navegador, incorporando 10 años de aprendizaje sobre optimización. En esta charla, descubrirás la salsa secreta que permite a PlayCanvas generar juegos con tiempos de carga increíblemente rápidos y tasas de fotogramas sólidas como una roca.

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

FAQ

PlayCanvas es utilizado por desarrolladores de juegos en todo el mundo para crear diversos tipos de juegos, desde juegos casuales hasta juegos .io y FPS. Además, alimenta Snap Games, la plataforma de juegos de Snapchat, con más de 200 millones de jugadores.

La optimización sigue siendo crucial debido a que mejora los tiempos de carga y la tasa de fotogramas, lo que afecta directamente la experiencia del usuario. Los tiempos de carga lentos pueden hacer que los usuarios abandonen un juego, mientras que una tasa de fotogramas optimizada asegura un juego fluido y agradable.

Chrome DevTools incluye pestañas como la de Red, que muestra los recursos que está cargando un juego, y la de Performance, que muestra cómo se están cargando estos recursos, facilitando la identificación de áreas para la optimización.

La compresión de texturas reduce el tamaño de los archivos de texturas, lo que disminuye el tiempo de carga y el uso de memoria en los dispositivos. Formatos como Basis y herramientas en PlayCanvas permiten la compresión eficiente de texturas para mejorar el rendimiento del juego.

PlayCanvas es un motor de juegos de código abierto escrito en JavaScript y basado en WebGL. Ofrece un editor visual basado en navegador que permite la colaboración en tiempo real y está construido en la nube.

GLTF es un formato abierto diseñado para ser el 'JPEG del 3D', que almacena datos en un formato listo para GPU, lo que permite una carga y renderización más rápidas. Es ampliamente utilizado en PlayCanvas para optimizar el rendimiento de los juegos 3D.

Elegir la resolución correcta es crucial porque renderizar a la resolución completa puede ser innecesariamente demandante para el hardware, especialmente en dispositivos más antiguos o menos potentes. Ofrecer opciones de resolución ajustables o detectar la GPU puede ayudar a optimizar el rendimiento.

Will Eastcott
Will Eastcott
33 min
08 Apr, 2022

Comments

Sign in or register to post your comment.
Video Summary and Transcription
PlayCanvas es un motor de juegos de código abierto utilizado por desarrolladores de juegos en todo el mundo. La optimización es crucial para los juegos HTML5, centrándose en los tiempos de carga y la tasa de fotogramas. La optimización de texturas y mallas puede reducir significativamente los tamaños de descarga. Los formatos GLTF y GLB ofrecen tamaños de archivo más pequeños y tiempos de análisis más rápidos. Comprimir los recursos del juego y utilizar formatos de archivo eficientes puede mejorar los tiempos de carga. La optimización de la tasa de fotogramas y el escalado de resolución son importantes para un mejor rendimiento. La gestión de las llamadas de dibujo y el uso de técnicas de agrupación pueden optimizar el rendimiento. Las herramientas de desarrollo del navegador, como Chrome y Firefox, son útiles para la depuración y el perfilado. Detectar el rendimiento del dispositivo y optimizar en función de dispositivos específicos puede mejorar el rendimiento del juego. Apple está avanzando con la implementación de WebGPU. Los juegos HTML5 pueden ser enviados a la App Store utilizando Cordova.
Available in English: Optimizing HTML5 Game Performance

1. Introducción a PlayCanvas y Optimización de Juegos

Short description:

Hola, mi nombre es Will Eastcott. Soy el creador de PlayCanvas. Hoy, hablaré sobre la optimización de juegos HTML5 basada en 10 años de experiencia con el motor de juegos PlayCanvas. PlayCanvas es un motor de juegos de código abierto escrito en JavaScript y basado en WebGL. Incluye un editor visual basado en el navegador para el desarrollo de juegos colaborativo en tiempo real. Alimenta Snap Games en Snapchat y es utilizado por desarrolladores de juegos en todo el mundo para varios tipos de juegos. Mi viaje en la optimización de juegos comenzó con Renderware, un motor de juegos utilizado en la generación de PlayStation 2. Los desarrolladores de juegos HTML5 ahora tienen hardware potente y herramientas incorporadas, pero la optimización sigue siendo crucial, centrándose en los tiempos de carga y la optimización de la tasa de fotogramas.

♪ Hola, mi nombre es Will Eastcott. Soy el creador de PlayCanvas. Y voy a hablarles hoy sobre la optimización de juegos HTML5 basada en 10 años de aprendizaje trabajando en el motor de juegos PlayCanvas.

Así que para empezar, quiero comenzar explicando un poco sobre qué es PlayCanvas. Es un motor de juegos de código abierto. Está escrito en JavaScript. Está basado en WebGL. Y también obtienes este editor visual que es como basado en el navegador. Es colaborativo en tiempo real. Está construido en la nube. Así que sí, puedes construir visualmente tus juegos en este editor.

Así que PlayCanvas en realidad alimenta Snap Games, que es la plataforma de juegos en Snapchat. Ha tenido más de 200 millones de jugadores. Hay un gran número de juegos que puedes revisar de casi cualquier género, así que te animo a que los revises. Pero PlayCanvas no solo es utilizado por los desarrolladores de juegos basados en Snapchat. Es utilizado por desarrolladores de juegos en todo el mundo para hacer todo tipo de juegos diferentes, desde juegos casuales hasta juegos .io. Es bastante popular entre los desarrolladores de juegos FPS, y puedes ver varios de esos representados allí.

Ahora, mi viaje personal trabajando en la optimización de juegos comenzó a principios de los años 2000 trabajando para una empresa llamada Criterion Software en un motor de juegos llamado Renderware. Ahora, Renderware se utilizó para alimentar alrededor de un tercio de los juegos en la generación de PlayStation 2, y día a día estaría trabajando en este tipo de hardware. Así que estamos hablando de un kit de desarrollo de PlayStation 2 T-10,000. Y sí, si querías hacer un análisis de rendimiento en ese tipo de hardware, te costaría. Y a menudo necesitarías ir a la sede de Sony y trabajar en hardware especial que fue desarrollado por entonces, hardware muy caro. Era increíblemente inconveniente.

Avanzamos rápidamente hasta 2022, y los desarrolladores de juegos HTML5 están viviendo el sueño, ¿verdad? Quiero decir, tenemos hardware increíblemente potente en la palma de nuestras manos. Y tenemos grandes herramientas que están integradas directamente en nuestros navegadores web. Entonces, ¿sigue siendo importante la optimización? Bueno, alerta de spoiler, sí lo es. Ahora, la optimización del rendimiento, en mi opinión, se divide en dos áreas principales. Los tiempos de carga, y también la optimización de la tasa de fotogramas. Y comencemos a hablar de los tiempos de carga. Ahora, esto es algo que no queremos que nuestros usuarios finales vean, barras de carga.

2. Investigando los tiempos de carga y la optimización de texturas

Short description:

¿Por qué importa si presentamos a nuestros usuarios barras de carga? Después de 6 segundos de espera, tendemos a perder el 40% de nuestra audiencia. Para investigar los tiempos de carga, podemos usar herramientas avanzadas incorporadas en el navegador, como Chrome DevTools. Al ordenar los recursos según su tamaño, podemos identificar oportunidades de optimización. En los juegos HTML5, la mayoría de los datos son de textura, y las imágenes grandes pueden causar fallos y largos tiempos de carga. Sin embargo, la compresión de texturas de hardware puede ayudar reduciendo el uso de memoria de la GPU y eliminando los costos de decodificación.

Entonces, ¿por qué importa si presentamos a nuestros usuarios con barras de carga? Bueno, resulta que después de 6 segundos de espera, tendemos a perder algo así como el 40% de nuestra audiencia que simplemente se va, no está dispuesta a esperar a que se cargue la página.

Entonces, cuando comenzamos una investigación sobre el tiempo de carga, ¿qué tipo de herramientas tenemos disponibles que pueden ayudarnos a investigar la optimización de los tiempos de carga? Bueno, como dije, incorporado directamente en el navegador, tienes algunas herramientas bastante avanzadas. En Chrome DevTools, tienes un par de pestañas. Tienes la pestaña de Red, que te muestra qué recursos está cargando Mi Juego, y luego tienes la pestaña de Performance que muestra cómo Mi Juego está cargando esos recursos. Entonces, cuando comienzas tu investigación, normalmente buscas las frutas más bajas. Si miras en la parte inferior izquierda de la pestaña del navegador, verás el número de solicitudes realizadas por el navegador. Verás la cantidad de data que se transfiere, y verás el tiempo que tarda en cargar tu juego. Ahora, lo primero que querrás hacer es ordenar la lista de recursos según su tamaño, porque, obviamente, cuanto más grande sea el recurso, mayores serán las oportunidades de optimización. Puedes buscar duplicados o recursos redundantes que tu juego realmente no debería estar cargando en primer lugar. Y si miramos el archivo más grande que se está cargando aquí en nuestro juego, es un jpeg de 2.2 megabytes. Entonces podemos preguntarnos, oye, ¿podemos reducir el tamaño de estos recursos? ¿Podemos optimizarlos de alguna manera?

Ahora, resulta que en los juegos HTML5, normalmente la mayoría de los data tienden a ser data basada en texturas. Y en nuestro ejemplo en la diapositiva anterior, teníamos un jpeg de 2.2 megabytes. Ahora, si el navegador descarga este archivo, necesitamos descomprimirlo en memoria. Y eso son 48 megabytes de data. Luego tenemos que pasarlo a WebGL para ser utilizado como textura. Y se hace una copia de él, además, tenemos que generar mitmaps, que son otros 64 megabytes de data. Así que juntos, eso son como 112 megabytes de data solo para un único jpeg. Ahora, si intentas cargar unos 10 de estos en una pestaña del navegador en móvil, te garantizo que harás que la pestaña se bloquee. Así que necesitamos algún tipo de solución para esto. Además, cada vez que recargamos un jpeg, tenemos que pagar, como, un costo de decodificación. Lleva tiempo descomprimir realmente los data del jpeg a un formato sin comprimir. Y en este caso, esta textura de 2 megabytes tarda 160 milisegundos, lo cual es simplemente excesivo. Porque va a hacer que el marco principal se bloquee, y va a causar largos tiempos de carga. Afortunadamente, tenemos compresión de texturas de hardware que podemos usar para cargar data de textura más optimizada. Entonces, si tomamos nuestro jpeg original de 2.2 megabytes y lo reducimos a algunos formatos de textura de hardware nativamente soportados como DXT, PVR y ETC, encontramos que los tamaños son en realidad más grandes que el jpeg original. Entonces, como el formato de esta compresión de textura de hardware data es nativo para la GPU, podemos simplemente suministrarlo a la GPU sin costo de decodificación, lo cual es genial. Además, la cantidad de memoria de la GPU utilizada por los formatos de data comprimidos de textura de hardware está entre 1 5th y 1 10th del jpeg original. Así que al menos estamos seguros de que no vamos a hacer que la pestaña del navegador se bloquee. Pero estamos pagando los costos por tener que descargar imágenes grandes. Y eso es un problema.

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

Una Guía del Comportamiento de Renderizado de React
React Advanced 2022React Advanced 2022
25 min
Una Guía del Comportamiento de Renderizado de React
Top Content
This transcription provides a brief guide to React rendering behavior. It explains the process of rendering, comparing new and old elements, and the importance of pure rendering without side effects. It also covers topics such as batching and double rendering, optimizing rendering and using context and Redux in React. Overall, it offers valuable insights for developers looking to understand and optimize React rendering.
Acelerando tu aplicación React con menos JavaScript
React Summit 2023React Summit 2023
32 min
Acelerando tu aplicación React con menos JavaScript
Top Content
Mishko, the creator of Angular and AngularJS, discusses the challenges of website performance and JavaScript hydration. He explains the differences between client-side and server-side rendering and introduces Quik as a solution for efficient component hydration. Mishko demonstrates examples of state management and intercommunication using Quik. He highlights the performance benefits of using Quik with React and emphasizes the importance of reducing JavaScript size for better performance. Finally, he mentions the use of QUIC in both MPA and SPA applications for improved startup performance.
Concurrencia en React, Explicada
React Summit 2023React Summit 2023
23 min
Concurrencia en React, Explicada
Top Content
React 18's concurrent rendering, specifically the useTransition hook, optimizes app performance by allowing non-urgent updates to be processed without freezing the UI. However, there are drawbacks such as longer processing time for non-urgent updates and increased CPU usage. The useTransition hook works similarly to throttling or bouncing, making it useful for addressing performance issues caused by multiple small components. Libraries like React Query may require the use of alternative APIs to handle urgent and non-urgent updates effectively.
El Futuro de las Herramientas de Rendimiento
JSNation 2022JSNation 2022
21 min
El Futuro de las Herramientas de Rendimiento
Top Content
Today's Talk discusses the future of performance tooling, focusing on user-centric, actionable, and contextual approaches. The introduction highlights Adi Osmani's expertise in performance tools and his passion for DevTools features. The Talk explores the integration of user flows into DevTools and Lighthouse, enabling performance measurement and optimization. It also showcases the import/export feature for user flows and the collaboration potential with Lighthouse. The Talk further delves into the use of flows with other tools like web page test and Cypress, offering cross-browser testing capabilities. The actionable aspect emphasizes the importance of metrics like Interaction to Next Paint and Total Blocking Time, as well as the improvements in Lighthouse and performance debugging tools. Lastly, the Talk emphasizes the iterative nature of performance improvement and the user-centric, actionable, and contextual future of performance tooling.
How React Compiler Performs on Real Code
React Advanced 2024React Advanced 2024
31 min
How React Compiler Performs on Real Code
Top Content
I'm Nadia, a developer experienced in performance, re-renders, and React. The React team released the React compiler, which eliminates the need for memoization. The compiler optimizes code by automatically memoizing components, props, and hook dependencies. It shows promise in managing changing references and improving performance. Real app testing and synthetic examples have been used to evaluate its effectiveness. The impact on initial load performance is minimal, but further investigation is needed for interactions performance. The React query library simplifies data fetching and caching. The compiler has limitations and may not catch every re-render, especially with external libraries. Enabling the compiler can improve performance but manual memorization is still necessary for optimal results. There are risks of overreliance and messy code, but the compiler can be used file by file or folder by folder with thorough testing. Practice makes incredible cats. Thank you, Nadia!
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.

Workshops on related topic

Masterclass de Depuración de Rendimiento de React
React Summit 2023React Summit 2023
170 min
Masterclass de Depuración de Rendimiento de React
Top Content
Featured WorkshopFree
Ivan Akulov
Ivan Akulov
Los primeros intentos de Ivan en la depuración de rendimiento fueron caóticos. Vería una interacción lenta, intentaría una optimización aleatoria, vería que no ayudaba, y seguiría intentando otras optimizaciones hasta que encontraba la correcta (o se rendía).
En aquel entonces, Ivan no sabía cómo usar bien las herramientas de rendimiento. Haría una grabación en Chrome DevTools o React Profiler, la examinaría, intentaría hacer clic en cosas aleatorias, y luego la cerraría frustrado unos minutos después. Ahora, Ivan sabe exactamente dónde y qué buscar. Y en esta masterclass, Ivan te enseñará eso también.
Así es como va a funcionar. Tomaremos una aplicación lenta → la depuraremos (usando herramientas como Chrome DevTools, React Profiler, y why-did-you-render) → identificaremos el cuello de botella → y luego repetiremos, varias veces más. No hablaremos de las soluciones (en el 90% de los casos, es simplemente el viejo y regular useMemo() o memo()). Pero hablaremos de todo lo que viene antes - y aprenderemos a analizar cualquier problema de rendimiento de React, paso a paso.
(Nota: Esta masterclass es más adecuada para ingenieros que ya están familiarizados con cómo funcionan useMemo() y memo() - pero quieren mejorar en el uso de las herramientas de rendimiento alrededor de React. Además, estaremos cubriendo el rendimiento de la interacción, no la velocidad de carga, por lo que no escucharás una palabra sobre Lighthouse 🤐)
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.
Construyendo aplicaciones web que iluminan Internet con QwikCity
JSNation 2023JSNation 2023
170 min
Construyendo aplicaciones web que iluminan Internet con QwikCity
Featured WorkshopFree
Miško Hevery
Miško Hevery
Construir aplicaciones web instantáneas a gran escala ha sido elusivo. Los sitios del mundo real necesitan seguimiento, análisis y interfaces y interacciones de usuario complejas. Siempre comenzamos con las mejores intenciones pero terminamos con un sitio menos que ideal.
QwikCity es un nuevo meta-framework que te permite construir aplicaciones a gran escala con un rendimiento de inicio constante. Veremos cómo construir una aplicación QwikCity y qué la hace única. El masterclass te mostrará cómo configurar un proyecto QwikCity. Cómo funciona el enrutamiento con el diseño. La aplicación de demostración obtendrá datos y los presentará al usuario en un formulario editable. Y finalmente, cómo se puede utilizar la autenticación. Todas las partes básicas para cualquier aplicación a gran escala.
En el camino, también veremos qué hace que Qwik sea único y cómo la capacidad de reanudación permite un rendimiento de inicio constante sin importar la complejidad de la aplicación.
Next.js 13: Estrategias de Obtención de Datos
React Day Berlin 2022React Day Berlin 2022
53 min
Next.js 13: Estrategias de Obtención de Datos
Top Content
WorkshopFree
Alice De Mauro
Alice De Mauro
- Introducción- Prerrequisitos para la masterclass- Estrategias de obtención: fundamentos- Estrategias de obtención – práctica: API de obtención, caché (estática VS dinámica), revalidar, suspense (obtención de datos en paralelo)- Prueba tu construcción y sírvela en Vercel- Futuro: Componentes de servidor VS Componentes de cliente- Huevo de pascua de la masterclass (no relacionado con el tema, destacando la accesibilidad)- Conclusión
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.
Depuración del Rendimiento de React
React Advanced 2023React Advanced 2023
148 min
Depuración del Rendimiento de React
Workshop
Ivan Akulov
Ivan Akulov
Los primeros intentos de Ivan en la depuración de rendimiento fueron caóticos. Veía una interacción lenta, probaba una optimización aleatoria, veía que no ayudaba, y seguía probando otras optimizaciones hasta que encontraba la correcta (o se rendía).
En aquel entonces, Ivan no sabía cómo usar bien las herramientas de rendimiento. Hacía una grabación en Chrome DevTools o React Profiler, la examinaba, intentaba hacer clic en cosas al azar, y luego la cerraba frustrado unos minutos después. Ahora, Ivan sabe exactamente dónde y qué buscar. Y en esta masterclass, Ivan te enseñará eso también.
Así es como va a funcionar. Tomaremos una aplicación lenta → la depuraremos (usando herramientas como Chrome DevTools, React Profiler, y why-did-you-render) → identificaremos el cuello de botella → y luego repetiremos, varias veces más. No hablaremos de las soluciones (en el 90% de los casos, es simplemente el viejo y regular useMemo() o memo()). Pero hablaremos de todo lo que viene antes - y aprenderemos cómo analizar cualquier problema de rendimiento de React, paso a paso.
(Nota: Esta masterclass es más adecuada para ingenieros que ya están familiarizados con cómo funcionan useMemo() y memo() - pero quieren mejorar en el uso de las herramientas de rendimiento alrededor de React. Además, cubriremos el rendimiento de interacción, no la velocidad de carga, por lo que no escucharás una palabra sobre Lighthouse 🤐)