Mejora el rendimiento de tus juegos utilizando Canvas

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.

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. ♪♪