Basics of Transparent Blitting, Part 1
Pages: 1, 2, 3

Defining the Boundary Rectangles

Remember blitting operations use bounding rectangles to perform the pixel copy operations. We will need to define two bounding rectangles. The first is the source rectangle. The source rectangle is the bounding rectangle of our monster sprite. We already know this to be 265 737 328 800. Top left is x1=265, y1= 737 and bottom right is x2=328, y2=800. We know the monster sprite is 63 pixels x 63 pixels. So we could describe the rectangle as being located with its top left edge at x1=265, y1=737 and the sprite is 63 pixels wide by 63 pixels tall.

Likewise, when we blit the sprite we are going to need to know a destination rectangle. This is where we are copying our sprite. What we do know is that the destination rectangle is the same size as the sprite's source rectangle. The destination rectangle is 63 pixels tall and 63 pixels wide. What we only really need to know is the top-left position of the destination rectangle when we execute the copy. Do you follow me here? Both the source sprite rectangle and the destination rectangle are 63 pixels high x 63 pixels wide.

Our blitter will need to know the source sprite's top left position, src_x and src_y. We will need to know the sprite's height and width. And we will need to know the destination rectangle's top-left position. Figure 4 shows how we’re going to define the rectangular boundaries for our blitter operation. The source rectangle, src, is the location of our monster sprite in the sprite's buffer. The destination rectangle, dst, is where we are going to copy our monster sprite to.

Figure 4. Defining the rectangular boundaries.

 

Let’s play around with an example so you get an idea of what we’re doing. Remember, our sprite’s rectangle is defined to be 265 737 328 800.

set src_x 265
set src_y 737
set width 63
set height 63

# calculate source bounding rectangle
set src_x2 [expr $src_x + $width]
set src_y2 [expr $src_y + $height]

And cutting and pasting the above code into the Wish Shell console, we get:

() 22 % # calculate source bounding rectangle
() 23 % set src_x2 [expr $src_x + $width]
328
() 24 % set src_y2 [expr $src_y + $height]
800

Using Figure 4 as our example, we have src_x =265, src_y=737, src_x2=328, and src_y2=800. This is the bounding rectangle of our happy, jumping monster sprite.

For the destination rectangle we’re going to copy the blit operation from the previous article, Basics of Offscreen Buffering. The example from that article didn’t use a transparency pixel because the Tk image library doesn’t support this method of blitting. We’re going to blit to the center of the offscreen buffer. The top-left corner of the destination rectangle is dst_x=320 and dst_y=303.

set dst_x 320
set dst_y 303
set width 63
set height 63

# calculate destination bounding rectangle
set dst_x2 [expr $dst_x + $width]
set dst_y2 [expr $dst_y + $height]

Plugging this code snippet into the Wish Shell console, we get:

() 29 % # calculate destination bounding rectangle
() 30 % set dst_x2 [expr $dst_x + $width]
383
() 31 % set dst_y2 [expr $dst_y + $height]
366

Teacher, My Head is Full!!!

Time for a break? Talk about information overload. We covered a lot of ground here from the hexadecimal number system to sprite-bounding rectangle-coordinate systems. Give yourself a pat on the back. This was a lot of material. Next week we’ll put this all to use and actually work with accessing and manipulating raw pixel values. Finally, we’ll be able to see our little monster friend magically appear with a background and no ugly fuchsia pixels.

Michael J. Norton is a software engineer at Cisco Systems.

---

Return to MacDevCenter.com.