• Choose a category
• All
• Classic-Fiction

In Chapter 4, we briefly examined two principles we can use to help eliminate the need to precreate rotations of objects in tile sheets. Creating these types of tile sheets can be cumbersome and use up valuable time that’s better spent elsewhere in the project.

The idea will be to take a single image of a game object (e.g., the first tile in the medium rock tile sheet), create a “dynamic tile sheet” at runtime, and store it in an array rather than using the prerendered image rotation tiles.

To accomplish this, we need to make use of a second canvas, as well as the getImageData() and putImageData() Canvas functions. If you recall from Chapter 4, getImageData() will throw a security error if the HTML page using it is not on a web server.

Currently, only the Safari browser will not throw this error if the file is used on a local filesystem. For this reason, we have separated this functionality from the Geo Blaster Extended game and will simply demonstrate how it could be used instead of replacing all the tile sheets in the game with this type of prerendering.

We will start by creating two elements on our HTML page:

The first , named canvas, will represent our hypothetical game screen, which will be used to display the precached dynamic tile sheet animation.

The second , named canvas2, will be used as a drawing surface to create the dynamic tile frames for our tile sheet.

We will need to separate context instances in the JavaScript, one for each :

var theCanvas = document.getElementById("canvas");

var context = theCanvas.getContext("2d");

var theCanvas2 = document.getElementById("canvas2");

var context2= theCanvas2.getContext("2d");

We will use the mediumrocks.png file (Figure 9-9) from the Geo Blaster Extended game as our source for the dynamic tile sheet. Don’t let this confuse you. We are not going to use all five tiles on this tile sheet—only the first tile.

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 theCanvas2 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 animation 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