Rotación de imágenes

Por petición especial de Sebas, he decidido adelantar este curso unas semanas. Afortunadamente, ya tenemos todas las herramientas básicas necesarias para conseguir esta tarea, así que no habrá problemas en comprender esta parte.

Hay tres técnicas básicas que acompañan a una imagen: Moverla de lugar (Que es lo que hemos estado viendo desde un comienzo), Escalarla (Para hacerla más grande, más chica e invertirla, que lo vimos en el tema pasado Animaciones en el juego) y por último Rotarla. Sin embargo, para conseguir esta última tarea, tenemos que olvidar todo lo que sabemos de las dos primeras.

Rotar una imagen tiene un pequeño grado de complejidad, ya que no existe una función como tal que rote una imagen. Lo que se puede hacer, es rotar el contexto del canvas, y mediante esta técnica, dibujar una imagen rotada. Esto se hace mediante 6 pasos básicos:

1. Guardar el formato actual del contexto mediante ctx.save().
2. Trasladar al centro del lugar donde queremos dibujar nuestra imagen con ctx.translate(x,y).
3. (Opcional) Escalar el contexto para dibujar la imagen escalada mediante ctx.scale(x,y).
4. Rotar el contexto para dibujar la imagen rotada con ctx.rotate(rads).
5. Dibujar la imagen, restando la mitad del ancho y del alto para dibujarla centrada, con ctx.drawImage(img,x,y);
6. Restaurar nuestro contexto a su forma original con ctx.restore().

Hay tres puntos que quiero resaltar en estos datos. Primero que nada, la rotación se hace en radianes, por lo que si tenemos el ángulo en grados, debemos multiplicarlo por Math.PI/180.

Después, observen que subrayo "al centro" en la traslación. Esto es porque la imagen rota desde el punto 0,0 donde está el contexto, y si lo hacemos de otra forma, nos resultará en un efecto no deseado; pueden probarlo si gustan para que comprendan a lo que me refiero. Este punto de centrar la imagen puede ser complicado con los rectángulos, pero tenemos experiencia reciente en dibujar círculos, y como su posición viene desde el centro, aprovecharemos esta propiedad para no complicarnos con cuentas a la hora de dibujar nuestras imágenes.

Por último, noten que en el punto 5 indico que hay que restar la mitad del ancho y alto de la imagen. Esto es claro, por efecto del punto anterior, para que la imagen se dibuje de forma centrada.

Ahora que hemos comprendido esto, ¡Llevemos los conocimientos a la práctica! Tomaremos como base el código de la Parte 2.2. Distancia entre círculos, y borraremos todo lo referente al círculo target. Posteriormente, comenzaremos modificando la función Circle, agregándole dos nuevas variables: scale y rotation.

function Circle(x,y,radius){
 this.x=(x==null)?0:x;
 this.y=(y==null)?0:y;
 this.radius=(radius==null)?0:radius;
 this.scale=1;
 this.rotation=0;

Ahora, importemos la imagen que queremos dibujar. Yo he elegido un simple triángulo que usé en otro juego como nave espacial:

var iShip=new Image();
iShip.src='assets/ship.png';

En la función act, agregaremos una línea para que aumente en 5 la rotación de la imagen:

 player.rotation+=5;

Por último, comentaremos el dibujado del círculo, y agregaremos los seis pasos indicados para dibujar nuestra imagen rotada:

 ctx.save();
 ctx.translate(player.x,player.y);
 ctx.scale(player.scale,player.scale);
 ctx.rotate(player.rotation*Math.PI/180);
 ctx.drawImage(iShip,-iShip.width/2,-iShip.height/2);
 ctx.restore();

De esta forma, tendremos una imagen que rote de forma continua. Ahora con este código, puedes jugar con la rotación y escala de las imágenes. Yo he escalado la imagen al doble de su tamaño en el código final, el cual quedaría de esta forma:

Ejemplo final:

[Canvas not supported by your browser]

'use strict';
window.addEventListener('load',init,false);
var canvas=null,ctx=null;
var mousex=0,mousey=0;
var player=new Circle(0,0,10);
player.scale=2;

var iShip=new Image();
iShip.src='assets/ship.png';

function init(){
 canvas=document.getElementById('canvas');
 canvas.style.background='#000';
 ctx=canvas.getContext('2d');
 run();
}

function run(){
 setTimeout(run,50);
 act();
 paint(ctx);
}

function act(){
 player.x=mousex;
 player.y=mousey;
 player.rotation+=5;
 
 if(player.x<0)
  player.x=0;
 if(player.x>canvas.width)
  player.x=canvas.width;
 if(player.y<0)
  player.y=0;
 if(player.y>canvas.height)
  player.y=canvas.height;
}

function paint(ctx){
 ctx.clearRect(0,0,canvas.width,canvas.height);
 /*ctx.strokeStyle='#0f0';
 ctx.beginPath();
 ctx.arc(player.x,player.y,player.radius,0,Math.PI*2,true);
 ctx.stroke();*/
 ctx.save();
 ctx.translate(player.x,player.y);
 ctx.scale(player.scale,player.scale);
 ctx.rotate(player.rotation*Math.PI/180);
 ctx.drawImage(iShip,-iShip.width/2,-iShip.height/2);
 ctx.restore();
 
 ctx.fillStyle='#fff';
 ctx.fillText('Rotation: '+player.rotation,10,10);
}

document.addEventListener('mousemove',function(evt){
 mousex=evt.pageX-canvas.offsetLeft;
 mousey=evt.pageY-canvas.offsetTop;
},false);

function Circle(x,y,radius){
 this.x=(x==null)?0:x;
 this.y=(y==null)?0:y;
 this.radius=(radius==null)?0:radius;
 this.scale=1;
 this.rotation=0;
 
 this.distance=function(circle){
  if(circle!=null){
   var dx=this.x-circle.x;
   var dy=this.y-circle.y;
   return (Math.sqrt(dx*dx+dy*dy)-(this.radius+circle.radius));
  }
 }
}