Processing 2D images and textures-using layers to draw transparent Images

Problem

In most cases, you want to draw another image on multiple images. The main problem is that if all the images cover the screen completely, they will overwrite the previous image. Make sure that you first draw the background image.

Solution

With xNa, you can specify layers or the depth of the image. The image at the maximum depth is first drawn.

Most image formats support transparency. This means that in addition to the red, green, and blue color information, it also contains Alpha information. When transparency is enabled, the transparent area of the image Displays the following items.

In xNa, you can specify a color to become transparent. This is useful for images that do not contain transparent information.

Simple and transparent working principle

Spritebatch objects can process images that contain transparent information. This is required in most cases. For example, when you draw a lawn, you want to draw another stone on it. A stone image is a simple white image with a stone in the middle.

If you draw this image on the lawn, you can also see the white background of the stone image. Therefore, you need to make the image background transparent. In this way, you draw the stone on the grass, and the transparent part of the stone image shows the color of the grass below.

To make the image processed by xNa transparent, use the spritebatch. Begin () method to enable Alpha mixing:

 
Spritebatch. Begin (spriteblendmode. alphablend); spritebatch. Draw (mytexture, vector2.zero, color. White); spritebatch. End ();
 

Transparent with color keys

For images without transparent information, you can specify a color as transparent color. This can be achieved by setting the Color Key in the image attribute. Select an image in the solution browser so that its properties are displayed in the lower right corner of the window. See Figure 3-3. Find the Color Key Color and change the color you want. The color in the image is transparent. Make sure that the Color Key Enabled is set to true.

Figure 3-3 set the Color Key Color Attribute of the texture

Use multiple layers

If you want to mix multiple images, You need to specify which image is at the top. In xNa, you can specify a layer with numbers between 0 and 1 for each image to be drawn. Layer 1 indicates that the layer is drawn first, and layer 0 indicates that the last painting is made, on top of all other layers. You can use this value as the last parameter of the spritebatch. Draw method.

You need to enable Layer sorting by Correctly Setting the spritesortmode of the spritebatch. Begin method.

For exampleCodeFirst, draw the lawn covering the entire screen. Because of this underlying texture, you can safely set the layer value of these images to 1. Then draw a cliff, which is located above the lawn, so their layer value is less than 1:

Rectangle grassrec = new rectangle (240,121, 40, 40); rectangle leftrec = new rectangle (40,121, 80, 40); rectangle topleftrec = new rectangle (40, 0, 80, 80); rectangle toprec = new rectangle (240, 0, 40, 80); rectangle toprightrec = new rectangle (320, 0, 80, 80 ); rectangle rightrec = new rectangle (320,121, 80, 40); rectangle bottomrightrec = new rectangle (320,281, 80,120); rectangle bottomrec = new rectangle (240,281, 40,120 ); rectangle bottomleftrec = new rectangle (40,281, 80,120); rectangle centerrec = new rectangle (240,201, 80, 40); spritebatch. begin (spriteblendmode. alphablend, spritesortmode. backtofront, savestatemode. none); For (INT x = 0; x <10; X ++) for (INT y = 0; y <10; y ++) spritebatch. draw (mytexture, new vector2 (x * 40, y * 40), grassrec, color. white, 0, vector2.zero, 1, spriteeffects. none, 1); spritebatch. draw (mytexture, new vector2 (40,120), leftrec, color. white, 0, vector2.zero, 1, spriteeffects. none, 0.5f); spritebatch. draw (mytexture, new vector2 (40, 40), topleftrec, color. white, 0, vector2.zero, 1, spriteeffects. none, 0.5f); spritebatch. draw (mytexture, new vector2 (120, 40), toprec, color. white, 0, vector2.zero, 1, spriteeffects. none, 0.5f); spritebatch. draw (mytexture, new vector2 (160, 40), toprightrec, color. white, 0, vector2.zero, 1, spriteeffects. none, 0.5f); spritebatch. draw (mytexture, new vector2 (160,120), rightrec, color. white, 0, vector2.zero, 1, spriteeffects. none, 0.5f); spritebatch. draw (mytexture, new vector2 (160,160), bottomrightrec, color. white, 0, vector2.zero, 1, spriteeffects. none, 0.5f); spritebatch. draw (mytexture, new vector2 (120,160), bottomrec, color. white, 0, vector2.zero, 1, spriteeffects. none, 0.5f); spritebatch. draw (mytexture, new vector2 (40,160), bottomleftrec, color. white, 0, vector2.zero, 1, spriteeffects. none, 0.5f); spritebatch. draw (mytexture, new vector2 (120,120), centerrec, color. white, 0, vector2.zero, 1, spriteeffects. none, 0.5f); spritebatch. end ();

100 lawn blocks are drawn using two loops. The nine images constitute a cliff. Both the nine images and the lawn images are stored in an image file, as shown in the left-side Figure 3-4. Therefore, the code first declares the rectangle of the sub-image in the image. By using this rectangle as the third parameter, xNa can cut out the correct sub-image from the entire image, and the final result is displayed in the right image of Figure 3-4.

Figure 3-4 one image containing multiple images (left) and multiple images mixed on a lawn surface (right)

Because the grassland layer value is 1 and the cliff Image Layer value is 0.5, xNa knows that the grass should be drawn first, and then the cliff.

Make sure that the spritesortmode is set to backtofront in the spritebatch. Begin method, so that xNa can know that they need to be sorted by layer before being drawn:

 
Spritebatch. Begin (spriteblendmode. alphablend, spritesortmode. backtofront, savestatemode. None );
 

Alpha hybrid

The pixel transparency value does not have to be "all or none ". You can also set the transparent value. For example, set it to 70%. For example, when a car passes through the lawn, you can set the gray window to 70% transparent. In this way, when you draw a car, the final color of the window will be 30% gray, 70% lawn color. For more information, see alphablending in tutorial 2-13.

Spriteblendmodes

By default, Alpha mixing is enabled when the spritebatch class is used for painting. However, you can disable Alpha mixing (try to see what's different !) Or set the mode to additive blending.

In the latter case, each color you draw in the pixel is added to the existing color of the pixel. So in this mode, when you draw a blue pixel on a red pixel, the result is a purple pixel. If a green rectangle is drawn on this purple pixel, the result is a green rectangle containing white pixels. This mode is used in effects such as flame or explosion. These effects are composed of many sprites and are appended and mixed together, as shown in tutorial 3-12.

XNa can set the spritebatch mixed mode as a parameter in the spritebatch. Begin method. You can specify one of spriteblendmode:

• Spriteblendmode. None disable blending and ignore any transparent information to draw the image onto the screen. This will overwrite any image at the upper layer of the screen with a larger depth.
• Spriteblendmode. alphablend uses some existing colors and colors contained in some new images, which correspond to the specified Alpha value in the image. This corresponds to the example of the window just mentioned.
• Spriteblendmode. Additive adds the color of the new image to an existing color in the frame buffer.

Code

All the code in the draw method has been written before.