Five screen adaptation modes of cocos2dx3.0, and use of FIXED_WIDTH and FIXED_HEIGHT

Adaptation mode

(1) EXACT_FIT: stretch and deform to fill the screen. Image stretching will occur

The ratio of the screen width to the design width is used as the scaling factor in the X direction, and the ratio of the screen height to the design height is used as the scaling factor in the Y direction.

The design area is guaranteed to completely fill the screen, but image stretching may occur.

(2) NO_BORDER: Proportional scaling, full screen display without leaving black borders. will exceed the screen area

The screen width and height are calculated by the design resolution width and height respectively, and the larger (larger) is used as the width and height scaling factor.

It is guaranteed that the design area can always cover the screen in one direction, while the other direction generally exceeds the screen area.

In the case of ResolutionPolicy::NO_BORDER, the design resolution is not the visible area (VisibleSize), and our layout wizard needs to make judgments based on VisibleOrigin and VisibleSize.

(3) SHOW_ALL: Proportional scaling, all displayed without cropping. There may be black borders.

Calculate the scaling factor according to the width and height of the screen and the width and height of the design resolution.

Take the smaller (smaller) as the scaling factor of width and height. It is guaranteed that the design area is fully displayed on the screen, but there may be black borders.

(4) FIXED_WIDTH: Scale proportionally, the width covers the screen.

Keep the height of the incoming design resolution unchanged, and modify the width of the design resolution according to the screen resolution.

(5) FIXED_HEIGHT: Scale proportionally, the height fills the screen.

Keep the width of the incoming design resolution unchanged, and modify the height of the design resolution according to the screen resolution.

With FIXED_WIDTH and FIXED_HEIGHT, it is possible to have one direction out of the screen:

bool AppDelegate::applicationDidFinishLaunching() {
    // initialize director
    auto director = Director::getInstance();
    auto glview = director->getOpenGLView();
    if(!glview) {
        glview = GLViewImpl::createWithRect("My Game", Rect(0, 0, 960, 500), 0.7f);
        director->setOpenGLView(glview);
    }
    auto winSize = Size(480, 320);//设计分辨率
    auto screenSize = glview->getFrameSize();//屏幕分辨率,
    // turn on display FPS
    director->setDisplayStats(true);

    // set FPS. the default value is 1.0/60 if you don't call this
    director->setAnimationInterval(1.0 / 60);

    register_all_packages();

    float widthRate = screenSize.width / winSize.width;
    float heightRate = screenSize.height / winSize.height;
    
    if (widthRate < heightRate)
    {
        //Indicates that the design resolution width is too large
        //At this time, we adapt the height and cut the width Lose. That is, the width of the picture will exceed the off-screen
        //Set the design resolution and adaptation mode, go in and see the source code of the two methods setDesignResolutionSize and updateDesignResolutionSize to know:
        //After the following code is completed, the height of the design resolution It is set to 480, but the width is not 800, but scaled. The following comments describe in detail
        director->getOpenGLView()->setDesignResolutionSize(winSize.width, winSize.height, ResolutionPolicy::FIXED_HEIGHT);

    }
    else
    {
        //Indicates that the design resolution and height are too large
        //At this time, we make the width fit and the height is cropped. That is, the height of the picture will exceed the off-screen
        director->getOpenGLView()->setDesignResolutionSize(winSize.width, winSize.height, ResolutionPolicy::FIXED_WIDTH);
    }
    /* The
    source code of the updateDesignResolutionSize function:
    _scaleX = (float)_screenSize.width / _designResolutionSize .width;
    _scaleY = (float)_screenSize.height / _designResolutionSize.height;
    if ( _resolutionPolicy == ResolutionPolicy::FIXED_HEIGHT)
    {
        _scaleX = _scaleY;
        //In order to make _screenSize.width / _designResolutionSize.width = _screenSize.height / _designResolutionSize. height,
        //Reassign _designResolutionSize.width
        _designResolutionSize.width = ceilf(_screenSize.width/_scaleY);
    }
    */
    auto scene = HelloWorld::createScene();
    director->runWithScene(scene);

    return true;
}

 

void GLView::setDesignResolutionSize(float width, float height, ResolutionPolicy resolutionPolicy)
{
    CCASSERT(resolutionPolicy != ResolutionPolicy::UNKNOWN, "should set resolutionPolicy");
    
    if (width == 0.0f || height == 0.0f)
    {
        return;
    }

    _designResolutionSize.setSize(width, height);
    _resolutionPolicy = resolutionPolicy;
    
    updateDesignResolutionSize();
 }

Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=325823643&siteId=291194637
Recommended