About cocos2d-x screen adaptation

About cocos2d-x screen adaptation
I have read a lot of articles on screen adaptation, but it is still hard to understand. The actual cocos2d-x source code has been very clear description of various situations.

I. Prerequisites:
Screen Resolution: determines how much information is displayed on the screen, measured in horizontal and vertical pixels. There are many online options for reference.
Design resolution: during development, the size of the reference, such as the common 480*800, should be set at the beginning, and the art and program should arrange the layout of objects according to this standard. The major reason is that there are too many resolutions on the physical screen, so you can only design a reference size.

Ii. Purpose
Map the design resolution projection to the screen resolution.

Iii. Ideas:
First, use the screen resolution and design resolution to find the x-and y-axis scaling factors. Then, modify the scaling factor according to various scaling policies. Finally, calculate the viewPort size (which can be understood as the display window size, or window resolution). If the window is larger than the screen size, cropping may occur, and some may not be displayed. If the window is smaller than the screen size, black borders may occur.

Let's take a look at the code.

Iv. Code Analysis

 
 

  
  

  
  
During development, this function is often used outside. In the new version, he calls updateDesignResolutionSize to set the resolution.
  
  
Void GLView: setDesignResolutionSize (float width, float height, ResolutionPolicy resolutionPolicy)

  
  
{

  
  
CCASSERT (resolutionPolicy! = ResolutionPolicy: UNKNOWN, "shocould set resolutionPolicy ");

  
  


  
  
If (width = 0.0f | height = 0.0f)

  
  
{

  
  
Return;

  
  
}

  
  


  
  
_ DesignResolutionSize. setSize (width, height );

  
  
_ ResolutionPolicy = resolutionPolicy;

  
  


  
  
UpdateDesignResolutionSize ();

  
  
}
  
  

  
  

  
  


  
  
Void GLView: updateDesignResolutionSize ()

  
  
{

  
  
If (_ screenSize. width> 0 & _ screenSize. height> 0

  
  
& _ DesignResolutionSize. width> 0 & _ designResolutionSize. height> 0)

  
  
{

  
  
// Use screen resolution and design resolution to obtain the x-axis and Y-axis scaling factors.
  
  
_ ScaleX = (float) _ screenSize. width/_ designResolutionSize. width;

  
  
_ ScaleY = (float) _ screenSize. height/_ designResolutionSize. height;

  
  


  
  
// In NO_BORDER mode, the maximum scaling factor is used. Obviously, this type of situation causes the small (narrow) side to exceed the actual size, which may cause cropping.
  
  
If (_ resolutionPolicy = ResolutionPolicy: NO_BORDER)

  
  
{

  
  
_ ScaleX = _ scaleY = MAX (_ scaleX, _ scaleY );

  
  
}

  
  


  
  
// SHOW_ALL mode. The minimum factor is used. Obviously, the window is smaller than the screen, so there is a black edge.
  
  
Else if (_ resolutionPolicy = ResolutionPolicy: SHOW_ALL)

  
  
{

  
  
_ ScaleX = _ scaleY = MIN (_ scaleX, _ scaleY );

  
  
}

  
  
// Fixed height, which means to uniformly use the y-axis scaling factor. Obviously, the X axis will be affected. The X axis is actually scaled according to the y Factor,

  
  
// Modify the design resolution based on the actual physical screen resolution to keep the size of the window consistent with that of the physical screen.
  
  
// In this case, the screen is fully covered, but the X axis is also cropped or black. This is mainly because the X axis of the resolution is designed based on the actual size of the physical screen.
  
  
// Changes dynamically. In the application, if the object location of the layout is greater than the x-axis of the design resolution, it will be cropped; if there is no X-axis direction, the part is not drawn,
  
  
// Black edges, such as when the X axis is scaled too large.
  
  
// In summary, if the matching is perfect, we need to use relative coordinates for width (X axis direction) in the program, rather than absolute coordinates,
  
  
// GetVisualeSize is often required.
  
  
Else if (_ resolutionPolicy = ResolutionPolicy: FIXED_HEIGHT ){
  
  
_ ScaleX = _ scaleY;

  
  
_ DesignResolutionSize. width = ceilf (_ screenSize. width/_ scaleX );

  
  
}

  
  
// Analysis is the same as above

  
  
Else if (_ resolutionPolicy = ResolutionPolicy: FIXED_WIDTH ){

  
  
_ ScaleY = _ scaleX;

  
  
_ DesignResolutionSize. height = ceilf (_ screenSize. height/_ scaleY );

  
  
}

  
  


  
  
// The default value is EXACT_FIT, which scales by x and y respectively. The window size is the same as that of the screen, but the screen size is stretched. It is not recommended.

  
  

  
  
// Calculate the rect of viewport. Calculate the window size.

  
  
Float viewPortW = _ designResolutionSize. width * _ scaleX;

  
  
Float viewPortH = _ designResolutionSize. height * _ scaleY;

  
  


  
  
_ ViewPortRect. setRect (_ screenSize. width-viewPortW)/2, (_ screenSize. height-viewPortH)/2, viewPortW, viewPortH );

  
  


  
  
// Reset director's member variables to fit visible rect

  
  
Auto director = Director: getInstance ();

  
  
Director-> _ winSizeInPoints = getDesignResolutionSize ();

  
  
Director-> createStatsLabel ();

  
  
Director-> setgldefavaluvalues ();

  
  
}

  
  
}