html5 canvas 2nd edition - PDF Free Download

instances on (and the Canvas object within) a web page. For example, multiple Canvas elements can be spread across a web page, and as the user makes changes to one, the others can be updated. This can be used for fun applications, such as a “minimap” in a game, or even in serious applications, such as stock portfolio charting and personalization features.

Copying from One Canvas to Another

www.it-ebooks.info

|

181

Using Pixel Data to Detect Object Collisions We can use the context.getImageData() function on two image objects to perform pixel-level collision detection between the images. As of this writing, you must run this application from a web server in order to manipulate the local file image data on the canvas. If you are using the Safari browser (version 5.1.7 as of this writing), you can test the application on a local drive and it will function properly.

This is not a simple task, but it is ultimately straightforward. We must remember that when we are using getImageData(), we are copying the color values from the actual canvas and not the images themselves. For this reason, we cannot simply use the Image object data as the source of our collision testing but must copy that data from the canvas to a variable and then use that data in the collision check. Visit the http://www.playmycode.com blog for further details about col‐ lision detection and other game related topics. This site was immensely helpful in finding a decent algorithm for getImageData().

Testing the alpha value of each pixel against each pixel in two objects is an expensive operation. So, we are going to first test to see whether our objects’ bounding boxes collide before we start to test each pixel in each object. Here is the boundingBoxCollide() function we will use. It is also used in Example 4-18, and in Chapter 8 and Chapter 9 when we create games for the Canvas: function boundingBoxCollide(object1, object2) { var left1 = object1.x; var left2 = object2.x; var right1 = object1.x + object1.width; var right2 = object2.x + object2.width; var top1 = object1.y; var top2 = object2.y; var bottom1 = object1.y + object1.height; var bottom2 = object2.y + object2.height; if (bottom1 < top2) return(false); if (top1 > bottom2) return(false); if (right1 < left2) return(false); if (left1 > right2) return(false); return(true);

182

|

Chapter 4: Images on the Canvas

www.it-ebooks.info

}

As you can see, this function takes in two parameters. These are the two logical objects that we want to test the collision on. As long as the object instances include x, y, width, and height attributes, the function will perform properly. First let’s examine the objects that we are going to test collisions on.

The Colliding Objects We are going to use two PNG image files as the design for our objects. They will both be 48-pixel by 48-pixel images. The first will be a blue plus sign, and the second will be a red circle with a round “bite” taken out of it. Figure 4-19 shows the drawing objects for our pixel-level collision detection.

Figure 4-19. The drawing objects for our pixel-level collision detection We will create two objects to hold the data for these images: var blueObject={}; var redObject={}; blueObject.x=0; blueObject.y=200; blueObject.dx=2; blueObject.width=48; blueObject.height=48; blueObject.image=new Image(); blueObject.image.src="blueplus.png"; redObject.x=348; redObject.y=200; redObject.dx=-2; redObject.width=48; redObject.height=48; redObject.image=new Image(); redObject.image.src="redcircle.png";

Using Pixel Data to Detect Object Collisions

www.it-ebooks.info

|

183

We also need to draw each of the two images to the Canvas briefly and store the Image Data value for each: context.drawImage(blueObject.image, 0, 0); blueObject.blueImageData=context.getImageData(0, 0, blueObject.width, blueObject.height); context.clearRect(0,0,theCanvas.width, theCanvas.height);redObject.x=348; context.drawImage(redObject.image, 0, 0); redObject.redImageData=context.getImageData(0, 0, redObject.width, redObject.height); context.clearRect(0,0,theCanvas.width, theCanvas.height);

We draw at 0,0 for ease of use, but these could be drawn on a second hidden canvas or anywhere on the current canvas. We want to erase them right after we place them because we need to store only the pixel color data for each. Specifically, we will be using every fourth item in the array of pixel data. This is the transparency value of the pixel.

How We Will Test Collisions We will employ a simple setTimeout loop to move these objects closer and closer to‐ gether. As the bounding boxes of each collide, our code will then drop into an algorithm that will test the alpha value on each pixel at the overlap between the objects. If this alpha value is not 0, we know that the objects have collided.

Checking for Intersection Between Two Objects After we have detected that we have a bounding box collision, we can simply loop through all of the pixels in each ImageData set, find the ones that match, and then check to see whether the alpha value for that pixel is 0. The problem with this approach is that it is slow and pretty much unusable for objects larger than a few pixels in width and height. Our 48×48 pixel images are each composed of 2,304 individual pixels. That is far too many to loop through on each frame tick, even for a single collision test. What we are going to do first is find where the two bounding boxes for our objects intersect and then check only those pixels. Figure 4-20 shows an area of intersection where there would be a pixel-based collision.

184

|

Chapter 4: Images on the Canvas

www.it-ebooks.info

Figure 4-20. The area where a pixel based collision will take place To check the pixels in only the area of intersection rather than the entire set of pixels in each object, we need to first find this area of intersection. We will accomplish this by using the Math.min and Math.max Javascript functions on the current object positions and their associated widths and heights: var var var var

xMin yMin xMax yMax

= = = =

Math.max( Math.max( Math.min( Math.min(

blueObject.x, redObject.x ); blueObject.y, redObject.y ); blueObject.x+blueObject.width, redObject.x+redObject.width ); blueObject.y+blueObject.height, redObject.y+redObject.height

Based on the locations of the two objects and the width (or height, depending on the axis), these will give us four values needed to define the area in intersection. xMin and yMin give us the location of the top-left corner of the intersection, and xMax and yMax give us the bottom-right corner of the intersection.

The next step is to create a nested loop where we iterate though all the horizontal (x) values in the intersection and through each vertical pixel (y). At each of these points, we find the transparency value for the pixel in each object at that point and compare it to 0.

The pixelX loop for ( var pixelX = xMin; pixelX < xMax; pixelX++ )

Next we create a nested loop for the y positions in the intersection area.

Using Pixel Data to Detect Object Collisions

www.it-ebooks.info

|

185

The nested pixelY loop for ( var pixelY = yMin; pixelY < yMax; pixelY++ )

When we have both a pixelX value and pixelY value, we need to find the transparency value for that pixel in each of our objects. Remember that ImageData objects are simply a single-dimensional array of four numbers for each pixel in the image. So, every fourth number in the array is the transparency value for a pixel. Therefore, the transparency value for a single pixel in our array will be found by using the following steps: 1. Subtract the current x value of our object from the current pixelX value. 2. Add the result of subtracting the current y of our object from the current pixelY value to the result in step 1. 3. Multiply the new value by 4 (because a pixel is every four values in our array). 4. Add 3 to this to find the transparency value. It sounds complicated, but the code to find the red and blue object pixels comes out looking like this: var bluepixel = ((pixelX-blueObject.x ) + (pixelY-blueObject.y ) *blueObject.width )*4 + 3 ; var redpixel = ((pixelX-redObject.x) + (pixelY-redObject.y) *redObject.width)*4 + 3 ;

The collision check When we have the transparency value for both pixels, to see whether they collide is a simple matter of making sure that both bluepixel and redpixel in our ImageData arrays for the objects are both not 0: if (( blueObject.blueImageData.data [ bluepixel ] !== 0 ) &&( redObject.redImageData.data [ redpixel ] !== 0 )) { console.log("pixel collision") blueObject.dx=0; redObject.dx=0; break; }

We have added a console log message and have set both of our objects’ dx values to 0 so that they will stop on impact. Figure 4-21 shows the result of this collision.

186

|

Chapter 4: Images on the Canvas

www.it-ebooks.info

Figure 4-21. The result on the Canvas of a pixel collision based impact

All of the code for this example Example 4-18 contains the entire set of code needed to test out collisions, based on pixel color transparency values. Example 4-18. Testing pixel collisions with color transparency values Chapter 4 Example 18: Pixel Collisions

What’s Next? We covered quite a lot in this chapter, evolving from simply loading images to animating and rotating them. We looked at using tile sheets and tile maps, and then we built some useful applications with Canvas image functions and capabilities. In the first four chap‐ ters, we’ve covered most of what Canvas offers as a drawing surface. In the next six chapters, we will cover more advanced topics, such as applying 2D physics to Canvas objects, integrating the HTML5