Android Game Development: Building a game framework (3)

5. Image module (graphics)

The last module is the image operation module, which is used to draw images to the screen. However, to draw images with high performance, you have to understand some basic image programming knowledge. Let's start with drawing a 2D image. The first question we need to know is: how is an image drawn to the screen? The answer is quite complex and we don't need to know all the details.

Grating, pixel, and frame buffering(Framebuffers)

The current displays are all based on the grating. The grating is a two-dimensional grid, that is, a Pixel Grid. The length and width of the grating lattice are generally expressed in pixels. If you carefully observe the Monitor (or use a magnifier), we can find that there is a grid on the display, which is a pixel grid or a light grid. The position of each pixel can be represented by coordinates, so a two-dimensional coordinate system is introduced, which also means that the coordinate value is an integer. The monitor continuously receives image streams from the graphics processor, decoding the color of each pixel (ProgramOr operating system settings), and then draw to the screen. The display is refreshed multiple times per second. The refresh frequency is measured in Hz. For example, the mainstream fl rate of the LCD display is 85Hz.

The graphic processor needs to obtain pixel information from a special storage area to display on the display. This area is called the video memory area or VRAM. This region is generally called a frame buffer ). Therefore, a complete screen image is called a frame. For pixels in each display grid, there is a corresponding memory address in the frame buffer zone. When we need to change the screen display content, we only need to simply change the content in the frame buffer.

Is a simple display grid and Frame Buffer:

Vertical synchronization and double buffering

When the object to be drawn is too complex, especially when a bitmap is contained, the screen displays slowly, it will give people the feeling of being stuck, and sometimes it will cause the screen to flash. So we adopt the dual Buffer technology (using two framebuffer ). The principle of double buffering can be understood as follows: the computer screen is regarded as a blackboard. First, we create a "virtual" blackboard in the memory environment, and then draw complex graphics on this blackboard. When all the graphics are finished, copy the image drawn in the memory to another blackboard (screen) at one time. This method can increase the drawing speed and greatly improve the drawing effect. The following is a schematic diagram:

To know what vertical synchronization is, you must first understand the working principle of the white monitor. All the images on the monitor are scanned on the first line. Whether it is a line-by-line scan or line-by-line scan, the monitor has two kinds of synchronization parameters: horizontal synchronization and vertical synchronization. The horizontal synchronous signal determines the time for the CRT to draw a horizontal screen line. The vertical synchronous signal determines the time when the CRT draws from the top of the screen to the bottom, and then returns the original position, vertical synchronization exactly represents the refreshing rate level of the CRT display!

Disable vertical synchronization: Normally, the screen update rate of the operating system is usually up or down at 85hz. At this time, the video card sends a vertical synchronization signal every time according to the frequency of 85hz, the interval between a signal and a signal is the time at which an image is written at a resolution of 85.

Enable vertical synchronization: In the game, a strong video card may quickly draw a screen image, but the video card cannot draw the next screen without the arrival of the Vertical synchronization signal, only 85 units of signals can be drawn. In this way, FPS is naturally restricted by the operating system's update rate. That is to say,Of course, if the FPs of your game screen can reach or exceed the refresh rate of your display, then the FPs of your game screen will be limited to the refresh rate of your display.If the image fails to reach the threshold, different degrees of frame skipping may occur. The larger the gap between FPS and the refresh rate, the more severe the frame skipping. We recommend that you punch in a high-performance video card. The game screen will be better!After opening, the game screen can be prevented from being torn apart during high-speed movement, such as live football.

If you disable vertical synchronization, you can complete a screen in the game. You do not need to wait for the Vertical synchronization signal to draw the next screen. Naturally, you can make full use of the strength of the video card.

However, do not forget that the existence of Vertical synchronization can synchronize the game process and display update rate, so that the screen is smooth and the screen is stable. If the Vertical Synchronous signal is canceled, the speed can be improved, but the performance is bound to be compromised in the aspect of image continuity. This is also the theoretical reason why the image is not continuous after the vertical synchronization is disabled!

Image Format

Two popular image formats are JPEG and PNG. JPEG is a lossy compression format, while PNG is a lossless compression format. Therefore, PNG can reproduce the original image. Lossy compression usually occupies less disk space. The total compression format we use depends on our disk space. Like audio, when we load it into the memory, we need to completely extract an image. Therefore, even if your compressed image is only 20 k on the disk, you still need the storage space of width x height x color depth in Ram.

Image superposition

Suppose there is a frame buffer that we can render, and there are several images loaded into RAM at the same time. We need to put the images in Ram into the frame buffer one by one, for example, a background image and a foreground image:

This process is called the synthesis and superposition of images. We need to combine different images into a final display image. This option is very important because the image above will always overwrite the image below.

A problem occurs in the above image synthesis: the white background of the second image overwrites the first background image. How can we remove the white background of the second image? This requires alpha blending ). Alpha is a combination of the color value of the Source Vertex and the color value of the target vertex according to a certainAlgorithmTo achieve a transparent effect.

The following is the RGB value of the final synthetic image. The formula is as follows:

Red = SRC. red * SRC. alpha + DST. red * (1-Src. alpha) Blue = SRC. green * SRC. alpha + DST. green * (1-Src. alpha) Green = SRC. blue * SRC. alpha + DST. blue * (1-Src. alpha)
 

SRC and DST are the source and target images that we need to mix (the source image is equivalent to the character, and the target image is equivalent to the background ). The following is an example.

 
Src = (1, 0.5, 0.5), SRC. alpha = 0.5, DST = (0, 1, 0) Red = 1*0.5 + 0 * (1-0.5) = 0.5 Blue = 0.5*0.5 + 1 * (1-0.5) = 0.75 Red = 0.5*0.5 + 0 * (1-0.5) = 0.25
 

Shows the effect.

The above formula uses two multiplications, which consume a lot of time. In order to increase the computing speed, we can optimize it. For example

Red = (SRC. Red-dst. Red) * SRC. Alpha + DST. Red

Alpha is a floating point number. We can convert it to an integer. Because a color occupies 8 bits at most, the Alpha value is 256 at most, so we multiply the Alpha value by 256, then, divide the value by 256 to get the following formula:

Red = (SRC. Red-dst. Red) * SRC. Alpha/256 + DST. Red

Here, Alpha is a value ranging from 0 to 256.

In this example, we only need to set the Alpha value of the white pixel of the source file to 0. The final effect is as follows:

Image Module InterfaceCode

Through the above introduction, we can start to design the interface of our image module. You need to implement the following functions:

• Attach images from the disk to the memory to prepare for drawing the image to the screen.
• Clear framebuffer with a specific color
• Draws pixels at the specified position of framebuffer with the specified color.
• Draw lines and rectangles on framebuffer.
• Draw the image in the memory above to framebuffer, and draw the entire painting and partial painting, and draw the Alpha hybrid painting.
• Obtain the length and width of framebuffer.

Two interfaces are used for implementation: graphics and pixmap. The following is the graphics interface:

 Package Com. badlogic. androidgames. Framework;

 Public   Interface Graphics {

 Public  Static   Enum Pixmapformat {

Argb8888, argb4444, rgb565

}

 Public Pixmap newpixmap (string filename, pixmapformat format );

 Public   Void Clear ( Int Color );

 Public   Void Drawpixel ( Int X, Int Y, Int Color );

 Public   Void Drawline ( Int X, Int Y, Int X2, Int Y2, Int Color );

 Public   Void Drawrect ( Int X, Int Y,Int Width, Int Height, Int Color );

 Public   Void Drawpixmap (pixmap, Int X, Int Y, Int Srcx, Int Srcy, Int Srcwidth, Int Srcheight );

 Public  Void Drawpixmap (pixmap, Int X, Int Y );

 Public   Int Getwidth ();

 Public   Int Getheight ();

}

Enumerative pixmapformat stores the color values (including transparency) of the pixels supported by the game ). For example, argb8888, A indicates transparency, r indicates red, G indicates green, and B Indicates blue. If they are not represented by 8 bits, there are 256 states.Next, let's take a look at the interface method:

• The graphics. newpixmap () method loads images in the specified format.
• The graphics. Clear () method clears framebuffer with a specific color.
• The graphics. drawpixel () method draws pixels of a given color at a specified position in framebuffer.
• The graphics. drawline () and graphics. drawrect () Methods draw lines and rectangles in framebuffer.
• Graphics. drawpixmap () method to draw the image to framebuffer. (X, y) coordinates specify the starting position of framebuffer, and the parameters srcx and srcy specify the starting position of the part to be drawn. Srcwidth and srcheight define the width and height of the painting.
• The graphics. getwidth () and graphics. getheight () Methods return the width and height of framebuffer.

Next, let's take a look at the pixmap interface:

  //   pixmap interface   
  
  package  COM. badlogic. androidgames. framework; 
  Import  COM. badlogic. androidgames. framework. graphics. pixmapformat; 
  Public   interface  pixmap {
  Public   int  getwidth (); 
  Public   int  getheight (); 
  Public  pixmapformat getformat (); 
  Public   void  dispose (); 
 
}

• the pixmap. getwidth () and pixmap. getheight () Methods return the width and height of the image.
• pixmap. getformat () returns the image format.
• pixmap. Dispose () method. The pixmap instance uses memory resources and other potential system resources. If we don't need it, we need to recycle the resources. This method also applies.