HTML and CSS Reference
In-Depth Information
Figure 9-9. The mediumrocks.png tile sheet
In Geo Blaster Extended , we used all five tiles to create a simulated rotation animation.
Here, we will only use the first tile. We will draw this first tile and rotate it on the
Canvas2 by 10 degrees, and then copy the current imageData pixels from this canvas to
an array of imageData instances, called rotationImageArray .
We will then repeat this process by rotating theCanvas2 by 10 more degrees and in a
loop until we have 36 individual frames of imageData representing the rotation anima-
tion for our medium rock in an array:
var rotationImageArray = [];
var animationFrame = 0;
var tileSheet = new Image();
tileSheet.addEventListener('load', eventSheetLoaded , false);
tileSheet.src = "mediumrocks.png";
The rotationImageArray variable will hold the generated imageData instances, which
we will create by using a rotation transformation on theCanvas2 .
The animationFrame is used when redisplaying the rotation animation frames in
rotationImageArray back to the first theCanvas to demo the animation.
When the tileSheet is loaded, the eventSheetLoaded() function is called, which in turn
calls the startup() function. The startup() function will use a loop to create the 36
frames of animation:
function startUp(){
for (var ctr=0;ctr<360;ctr+=10){
context2.fillStyle = "#ffffff";
var angleInRadians = ctr * Math.PI / 180;
context2.translate(16, 16);
context2.drawImage(tileSheet, 0, 0,32,32,-16,-16,32,32);
var imagedata = context2.getImageData(0, 0, 32, 32)
setInterval(drawScreen, 100 );
This loop first clears theCanvas2 with a white color, and then saves it to the stack. We
then translate to the center of our object and rotate the canvas by the current ctr value
(an increment of 10 ). Next, we draw the first tile from mediumrocks.png and save the
result into a new local imageData instance using the getImageData() function.
Search WWH ::

Custom Search