Mejorar el rendimiento de juegos HTML5

Para ver en youtube clic aquí

No olvides suscribirte

   Dependiendo de nuestro juego, el rendimiento puede llegar a ser un dolor de cabeza, y en general para el desarrollo de juegos es algo que casi siempre hay que tener presente, tanto en el video como en esta entrada voy a hablar de 3 técnicas para mejorar el rendimiento.

Pre-renderizar

  Por una razón que cuesta un poco entender, es mas eficiente dibujar en un canvas virtual y luego cargar todo al canvas principal, que directamente dibujar en un solo canvas. Esto es muy sencillo de lograr.

  Primero el canvas virtual lo hacemos así :

 var preRender = document.createElement("canvas");

 var vctx = preRende.getContext("2d");

  Todo el juego va a ser dibujado usando este contexto "virtual", y luego en el canvas "real" hacemos así:

ctx.drawImage(preRender, 0, 0);

  

Donde "ctx" es el contexto del canvas "real"

Extracción de propiedades

  Cuando limpiamos el canvas usando "clearRect" y en alguna otra circunstancia, aveces hacemos cosas como: "canvas.width" si esto se hace dentro de nuestro bucle de juego, en cada iteración se va a extraer la propiedad del objeto a través del DOM lo cual requiere mas trabajo que pasar el número directamente, o crear una variable que almacene el valor una sola vez:

   var anchoJ = canvas.width;

   var altoJ = canvas.height;

Luego en nuestro bucle de juego las usamos así:

  canvas.clearRect(0,0,anchoJ,altoJ);

 En lugar de "extraer" la propiedad en cada iteración 

Limpiar solo las diferencias y no to el canvas

  Para lograr la animación es necesario el uso de "clearRect", pero no siempre es necesario que se limpie todo el canvas, podemos limpiar solamente lo que necesitemos ahorrandonos una infinidad de recursos en el camino. Esto puede variar dependiento de cada juego, puedes ver un ejemplo en mi video, pero en general sería algo así :

  canvas.clearRect(prevX, prevY, ancho, alto);

  Donde las variables "prevX" y "prevY" son las últimas posiciones "X" e "Y" utilizadas, las variables "ancho" y "alto" van a depender también del área que queramos limpiar.  Una forma de tratar esto, como lo hago en mi video es que cada objeto en su función de movimiento, se limpie a si mismo, por lo que estas dos últimas variables sería en ancho y alto del objeto en cuestión.

Descargas

  Aquí puedes descargar el código fuente hecho en el video:

Breakout.html