Hi all,
Firslty a big thank you to GreenSock for this wonderful API. I'm not from a flash background and this framework has really made animation a whole lot easier for me, so a big thank you.
Secondly, I followed the Lee Brimelow tutorial that's linked off this site and decided to put together a little animation using the HTML5 Canvas. Everything is really smooth and it works perfectly, however the image seems to blur and sharpen, almost as if on each re-draw it's taking to long to render hence the blur.
It actually gives a nice motion blur effect and adds some extra realism to the moving space ships. However it's not what I need right now.
Since I'm new to animation is it possible that my canvas is just too big or maybe the png files I'm using are too big ?
Canvas Size (1000x700)
3 Image Files (421KB, 111KB, 84KB)
Here's my code if anyone wants to take a look.
Thanks in advance for any help.
var canvas = document.getElementById('red-ships');
var context = canvas.getContext('2d');
shipLarge = new Image();
shipLarge.src= "images/ship-pink-large.png";
shipLarge.xpos = 10;
shipLarge.ypos = 350;
shipMedium = new Image();
shipMedium.src= "images/ship-pink-medium.png";
shipMedium.xpos = 20;
shipMedium.ypos = 60;
shipSmall = new Image();
shipSmall.src= "images/ship-pink-small.png";
shipSmall.xpos = 550;
shipSmall.ypos = 170;
TweenMax.killDelayedCallsTo("loop");
// calculate where you want to motion tween each ship to
largeToXpos = shipLarge.xpos -10;
largeToYpos = shipLarge.ypos +15;
mediumToXpos = shipMedium.xpos +5;
mediumToYpos = shipMedium.ypos +5;
smallToXpos = shipSmall.xpos -10;
smallToYpos = shipSmall.ypos +10;
TweenMax.to(shipLarge, 5, { xpos:largeToXpos, ypos:largeToYpos, repeat: -1, yoyo: true });
TweenMax.to(shipMedium, 4, { xpos:mediumToXpos, ypos:mediumToYpos, repeat: -1, yoyo: true});
TweenMax.to(shipSmall, 4, { xpos:smallToXpos, ypos:smallToYpos, repeat: -1, yoyo: true });
// binds the loop function to the tick event
shipLarge.onload = function () {
TweenLite.ticker.addEventListener("tick", loop);
}
// redraw the elements
function loop() {
// clears the canvas before every re-draw
context.clearRect(0, 50, 1000, 750);
context.drawImage(shipLarge, shipLarge.xpos, shipLarge.ypos);
context.drawImage(shipMedium, shipMedium.xpos, shipMedium.ypos);
context.drawImage(shipSmall, shipSmall.xpos, shipSmall.ypos);
}
Zee