Aplicar aceleración a nuestras animaciones nos ayudará a que estas se vean más reales y menos estáticas.
Es por eso que el uso de aceleración en las animaciones es muy importante en el desarrollo de juegos, para lograr efectos más reales y movimientos más fluidos.
En el sitio web www.redusers.com/u/5j3 podemos disfrutar de un interesante juego desarrollado en HTML5 donde se utilizan animaciones con aceleración.
Para crear una animación de movimiento cuadrático en el elemento canvas de HTML5 podemos incrementar la velocidad horizontal (Vx) o bien la velocidad vertical (Vy), así como también ambas a cualquier cuadro de la animación, y luego actualizar la posición del objeto de acuerdo con la siguiente ecuación:
distance = velocity * time + 1/2 * acceleration * time ^2
Veamos un ejemplo de código donde se aplica esta aceleración:
<canvas id=”NuevoCanvas” width=”578″ height=”200″></canvas>
<script>
window.requestAnimFrame = (function(callback) {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000 / 60);
};
})();
function drawRectangle(myRectangle, context) {
context.beginPath();
context.rect(myRectangle.x, myRectangle.y, myRectangle.width, myRectangle.height);
context.fillStyle = ‘#8ED6FF’;
context.fill();
context.lineWidth = myRectangle.borderWidth;
context.strokeStyle = ‘black’;
context.stroke();
}
function animate(myRectangle, canvas, context, startTime) {
// Actualización
var time = (new Date()).getTime() – startTime;
// pixeles por segundo^2
var gravity = 200;
myRectangle.y = 0.5 * gravity * Math.pow(time / 1000, 2);
if(myRectangle.y > canvas.height – myRectangle.height – myRectangle.borderWidth / 2) {
myRectangle.y = canvas.height – myRectangle.height – myRectangle.borderWidth / 2;
}
lastTime = time;
// Limpiar
context.clearRect(0, 0, canvas.width, canvas.height);
// Dibujar
drawRectangle(myRectangle, context);
// Pedir un nuevo cuadro
requestAnimFrame(function() {
animate(myRectangle, canvas, context, startTime);
});
}
var canvas = document.getElementById(‘myCanvas’);
var context = canvas.getContext(‘2d’);
var myRectangle = {
x: 239,
y: 0,
width: 100,
height: 50,
borderWidth: 5
};
drawRectangle(myRectangle, context);
// Esperar un segundo antes de de la caída del rectángulo
setTimeout(function() {
var startTime = (new Date()).getTime();
animate(myRectangle, canvas, context, startTime);
}, 2000);
</script>
</body>
En el sitio web www.redusers.com/u/5j4 podemos ver otro interesante juego que hace uso de animaciones con aceleración en HTML5.
Podemos ver un interesante ejemplo de desarrollo de juegos con HTML5 en www.redusers.com/u/5j5. El efecto de aceleración es claro en el movimiento de los números de puntaje.
