Mejora el rendimiento de tus juegos utilizando Canvas

Rate this content
Bookmark

En esta charla, profundizaremos en el enorme potencial del elemento Canvas de HTML5 como herramienta para el desarrollo de juegos. Comenzando con una visión general de la API de Canvas y sus capacidades gráficas, analizaremos los beneficios para renderizar gráficos 2D en juegos web. Los participantes obtendrán información sobre técnicas de optimización, técnicas avanzadas de dibujo y animación, y estrategias para aprovechar al máximo las capacidades de Canvas y crear experiencias de juego fluidas y de alto rendimiento. Llena de ejemplos de la vida real, esta charla es imprescindible para profesionales que buscan llevar sus juegos web a nuevos niveles de rendimiento.

8 min
28 Sep, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

La charla analiza el uso del elemento canvas en juegos y aplicaciones web para mejorar el rendimiento. Compara la API de Canvas y la API de WebGL, resaltando las ventajas y desventajas de cada una. La API de Canvas permite tanto el renderizado de CPU como el de GPU, mientras que la API de WebGL solo utiliza GPU y aceleración de hardware. El uso del elemento canvas puede mejorar significativamente el rendimiento, pero conlleva una mayor complejidad y costos de desarrollo.

Available in English

1. Introducción al elemento Canvas

Short description:

Hola, mi nombre es Ilya Chernevsky y trabajo como desarrollador web en Evolution Company. Hoy quiero contarles sobre mi experiencia utilizando el elemento canvas en juegos y aplicaciones web para mejorar el rendimiento. Veamos las ventajas y desventajas de canvas. Las ventajas incluyen rendimiento y velocidad, ahorro de memoria y control sobre cada píxel. Las desventajas incluyen dificultad para implementar animaciones, complejidad en la manipulación de píxeles y consideraciones para la pixelación del dispositivo. Cuando la gente habla de Canvas, generalmente se refiere a la API de Canvas y la interfaz de contexto de renderizado 2D de Canvas. Sin embargo, si quieres aprovechar todo el poder de la GPU, debes considerar el uso de WebGL.

Hola, mi nombre es Ilya Chernevsky, y trabajo como desarrollador web en Evolution Company y creo la parte frontal de los juegos. Hoy quiero contarles sobre mi experiencia utilizando el elemento canvas en juegos y aplicaciones web, principalmente para mejorar el rendimiento.

Veamos este elemento en uno de los juegos de Evolution, contiene aproximadamente 4,000 elementos DOM, básicamente, estos son elementos SVG con sus propios estilos, atributos, clases, tamaños, posicionamiento, etc. Puedes decir que 4,000 no es tanto, tal vez, pero ¿sabes qué podría ser mejor? Creo que es mejor tener solo un elemento DOM.

En primer lugar, ¿qué es canvas? Y su núcleo, canvas es un área rectangular donde podemos crear gráficos dinámicamente usando JavaScript. Dibujar en canvas proporciona una forma de bajo nivel de mostrar gráficos en el navegador. Las operaciones DOM en el navegador se consideran bastante lentas, por eso, por ejemplo, el equipo de React desarrolló el concepto de virtual DOM para minimizar el manejo de elementos DOM.

Veamos las ventajas y desventajas de canvas. Comencemos con las ventajas. En primer lugar, y creo que lo más importante, es el rendimiento y la velocidad. Solo tenemos un elemento DOM. El segundo es el ahorro de memoria, ya que no es necesario almacenar información sobre un gran número de elementos DOM. Y el control, el desarrollador puede controlar cada píxel en el área de dibujo. Ahora veamos las desventajas existentes de este enfoque. Una de las más obvias son las animaciones. Son más difíciles de implementar. Por supuesto, no podemos usar la propiedad de animación y transición de CSS. En el caso de los elementos DOM, por ejemplo, cuando se mueven, el navegador mismo borra el objeto antiguo y dibuja el nuevo en un lugar nuevo. Y en el caso de Canvas, el desarrollador se ve obligado a dibujar independientemente cada fotograma utilizando la función requestAnimationFrame de la API web del navegador. Y la segunda desventaja es la complejidad. En general, los elementos DOM son más fáciles de manipular que los píxeles y el uso de la API de Canvas es más difícil. En el caso de los elementos DOM, el navegador hace parte del trabajo por nosotros. Y finalmente, las características de trabajar con pantallas, con la pixelación del dispositivo, más de una. Por ejemplo, cuando trabajamos con teléfonos inteligentes, hay que tener en cuenta las dimensiones del Canvas. Y a veces esto puede llevar a artefactos inesperados. Y en general, uno se ve obligado a pensar más en otras características de Canvas que pueden no ser inmediatamente obvias.

Cuando la gente habla de Canvas, generalmente se refiere a la API de Canvas y la interfaz de contexto de renderizado 2D de Canvas. Esta es la forma más simple y de bajo nivel de renderizar en el navegador. Sin embargo, si quieres aprovechar todo el poder de la GPU, debes considerar el uso de WebGL. La API de WebGL se utiliza con el mismo elemento canvas de HTML. pero para el renderizado se utiliza un contexto de dibujo diferente, el contexto de renderizado de WebGL, y también se utiliza una API diferente, la API de WebGL.

2. Comparación de la API de Canvas y la API de WebGL

Short description:

La API de Canvas y la API de WebGL son dos formas de utilizar el elemento canvas. La API de Canvas puede utilizar renderizado de CPU o GPU, mientras que la API de WebGL utiliza solo GPU y aceleración de hardware. La complejidad de utilizar estas tecnologías difiere, siendo la API de Canvas menos difícil de usar. Sin embargo, WebGL es más desafiante y a menudo requiere bibliotecas de terceros. La imagen en Canvas es una imagen de mapa de bits, lo que puede resultar en una disminución de la calidad de la imagen al hacer zoom. En conclusión, utilizar Canvas en aplicaciones puede mejorar significativamente el rendimiento, pero es importante considerar el aumento de la complejidad y el costo de desarrollo.

Entonces, con un elemento canvas de HTML, podemos utilizar dos API diferentes, la API de Canvas y la API de WebGL. Comparemos estas dos formas. La API de Canvas puede utilizar renderizado de CPU o GPU. El navegador, por sí mismo, decide esto según su lógica interna. Sin embargo, según sus algoritmos internos, el navegador decide utilizar la CPU. En este caso, no se utilizará la aceleración por hardware de la tarjeta gráfica.

Sin embargo, no es obligatorio que el uso de la aceleración por hardware conduzca necesariamente a un aumento del rendimiento, a menudo lo hará pero no siempre. La API de WebGL utiliza solo GPU y también aceleración de hardware si la tarjeta gráfica lo tiene, lo cual casi siempre es así. Esto casi siempre es más rápido porque la GPU está optimizada para gráficos y esto libera recursos de la CPU para ejecutar el resto de la aplicación.

También es importante mencionar que la complejidad de utilizar ambas de estas tecnologías es diferente. Mientras que la API de Canvas es menos difícil de usar y se puede utilizar sin bibliotecas externas, por ejemplo, WebGL es mucho más difícil de usar y tiene un umbral de entrada mucho más alto. Se utiliza con mayor frecuencia con bibliotecas de terceros, como Babylon.js, por ejemplo, o 3.js. A diferencia de los elementos HTML y SVG, la imagen en Canvas es una imagen de mapa de bits. Por lo tanto, por ejemplo, cuando hacemos zoom en el elemento Canvas, veremos que la calidad de la imagen empeora. Además, el texto escrito en Canvas se verá borroso al hacer zoom, y para mejorar la calidad, nos veremos obligados a volver a renderizar.

En conclusión, quiero decir que Canvas es un elemento moderno de alto rendimiento de bajo nivel. Utilizarlo en tus aplicaciones puede mejorar significativamente el rendimiento. Sin embargo, es importante entender que la complejidad y el costo de desarrollo también aumentarán. Esto es especialmente cierto cuando tu aplicación tiene animaciones. Por lo tanto, es importante evaluar todos estos factores y tomar la decisión correcta. Gracias por su atención. ♪♪

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

JS GameDev Summit 2022JS GameDev Summit 2022
33 min
Building Fun Experiments with WebXR & Babylon.js
Top Content
During this session, we’ll see a couple of demos of what you can do using WebXR, with Babylon.js. From VR audio experiments, to casual gaming in VR on an arcade machine up to more serious usage to create new ways of collaboration using either AR or VR, you should have a pretty good understanding of what you can do today.
Check the article as well to see the full content including code samples: article. 
React Summit 2023React Summit 2023
32 min
How Not to Build a Video Game
In this talk we'll delve into the art of creating something meaningful and fulfilling. Through the lens of my own journey of rediscovering my passion for coding and building a video game from the ground up with JavaScript and React, we will explore the trade-offs between easy solutions and fast performance. You will gain valuable insights into rapid prototyping, test infrastructure, and a range of CSS tricks that can be applied to both game development and your day-to-day work.

Workshops on related topic

JSNation 2023JSNation 2023
116 min
Make a Game With PlayCanvas in 2 Hours
Featured WorkshopFree
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.
JS GameDev Summit 2022JS GameDev Summit 2022
121 min
PlayCanvas End-to-End : the quick version
Top Content
WorkshopFree
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.
JS GameDev Summit 2022JS GameDev Summit 2022
86 min
Introduction to WebXR with Babylon.js
Workshop
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.