Aumenta el Rendimiento de Tus Juegos usando Canvas

Hola, mi nombre es Ilya Chernevsky, y trabajo como desarrollador web en Evolution Company y creo el front end de juegos. Hoy, quiero contarles sobre mi experiencia usando el elemento canvas en juegos y aplicaciones web, principalmente, para aumentar 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étera. Podrías decir que 4,000 no es tanto, quizás, pero ¿sabes qué podría ser mejor? Creo que mejor es tener solo un elemento DOM.

Primero, ¿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 para 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 DOM virtual para minimizar el manejo de elementos DOM.

Veamos las ventajas y desventajas del canvas. Comencemos con las ventajas. Primero que nada, y creo que lo más importante, es el rendimiento y la velocidad. Solo tenemos un elemento DOM. Segundo es el ahorro de memoria, ya que no hay necesidad de almacenar información sobre un gran número de elementos DOM. Y 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 animación y la propiedad de 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 nuevo lugar. Y en el caso de Canvas, el desarrollador se ve obligado a dibujar independientemente cada cuadro usando la función request animation frame de la web API del navegador. Y el segundo inconveniente es la complejidad. En general, los elementos DOM son más fáciles de manipular que los píxeles y usar la Canvas API es más difícil. En el caso de los elementos DOM, el navegador hace parte del trabajo por nosotros. Y finalmente, características de trabajar con pantallas, con la pixelación del dispositivo, más de una. Por ejemplo, cuando trabajamos con smartphones, tienes que estar atento a las dimensiones del Canvas. Y a veces esto puede llevar a artefactos inesperados. Y en general, te ves obligado a pensar más sobre otras características de Canvas que pueden no ser inmediatamente obvias.

Cuando la gente habla de Canvas, a menudo se refieren a la Canvas API y la interfaz de contexto de renderizado 2d de Canvas. Esta es la forma más simple y de bajo nivel para renderizar en el navegador. Sin embargo, si deseas utilizar todo el poder de la GPU, entonces deberías considerar usar WebGL. WebGL API se usa con el mismo elemento HTML canvas, pero para renderizar se usa un contexto de dibujo diferente, contexto de renderizado WebGL, y también usa una API diferente, WebGL API.

Así que con un elemento HTML canvas, podemos usar dos APIs diferentes, Canvas API y WebGL API. Vamos a comparar estas dos formas. Canvas API puede usar renderizado por CPU o GPU. El navegador, por sí mismo, decide esto según su lógica interna. Sin embargo, basado en sus algoritmos internos, el navegador decide usar CPU. En este caso, la aceleración de hardware gráfico no se usará porque está físicamente ubicada en la tarjeta gráfica.

Sin embargo, no es obligatorio que usar aceleración de hardware necesariamente lleve a un aumento de rendimiento, a menudo lo hará pero no siempre. WebGL API usa solo GPU y también aceleración de hardware si la tarjeta gráfica lo tiene, lo cual casi siempre ocurre. Esto casi siempre se acelera porque la GPU está optimizada para gráficos y esto libera recursos de CPU para ejecutar el resto de la aplicación.

Así que, también hay que mencionar que la complejidad de usar ambas de estas tecnologías es diferente. Mientras que Canvas API es menos difícil de usar y puede ser usada 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 usa más a menudo 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 un raster. Por lo tanto, por ejemplo, cuando hacemos zoom en el elemento Canvas, veremos que la calidad de la imagen ha empeorado. Además, el texto escrito en Canvas estará 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 bajo nivel y alto rendimiento. Usarlo 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.