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";
context2.fillRect(0,0,32,32);
context2.save();
context2.setTransform(1,0,0,1,0,0)
var angleInRadians = ctr * Math.PI / 180;
context2.translate(16, 16);
context2.rotate(angleInRadians);
context2.drawImage(tileSheet, 0, 0,32,32,-16,-16,32,32);
context2.restore();
var imagedata = context2.getImageData(0, 0, 32, 32)
rotationImageArray.push(imagedata);
}
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.
