Problem with multi resolution letterbox - safety area chopped off xcode 10 - cocos 2dx 3.16 - 3.17

Safety area based on 320, 480 design resolution getting chopped off under simulator (multiple devices) and on iphone 8.

Feels almost like the screen canvas is the wrong size. I have checked over this multiple times, and I cannot figure out why this is not working.

I use three sizes of this asset just to test and following code for multi res adaption :

cc.game.onStart = function () {

if (!cc.sys.isNative && document.getElementById("cocosLoading")) //If referenced loading.js, please remove it
    document.body.removeChild(document.getElementById("cocosLoading"));


cc.view.resizeWithBrowserSize(true);


cc.view.enableRetina(!!window && !!window.devicePixelRatio && window.devicePixelRatio > 1);

cc.view.adjustViewPort(true);

if (!cc.sys.isNative) {

    cc.view.setDesignResolutionSize(320, 480, cc.ResolutionPolicy.SHOW_ALL);
} else {
    cc.view.setDesignResolutionSize(320, 480, cc.ResolutionPolicy.NO_BORDER); //show all might be better for web
}


cc.director.getVisibleOrigin();
cc.director.getVisibleSize();


cc.director.setProjection(cc.Director.PROJECTION_2D);

var designResolutionSize = { width: 320, height: 480 };//web only


var smallResource = { size: { width: 320, height: 480 }, directory: "res/SD" };
var mediumResource = { size: { width: 640, height: 960 }, directory: "res/HD" };
var largeResource = { size: { width: 1280, height: 1920 }, directory: "res/HDR" };

var resDirectory = "";




if (cc.sys.isNative) {
    var searchPaths = jsb.fileUtils.getSearchPaths();
    searchPaths.push('script');
    if (cc.sys.os == cc.sys.OS_IOS || cc.sys.os == cc.sys.OS_OSX) {
        searchPaths.push("res");
        // searchPaths.push("res/HD/maps/night");
        searchPaths.push("src");
    }
    jsb.fileUtils.setSearchPaths(searchPaths);
}


var frameSize = cc.view.getFrameSize();

cc.log("frameSize.width " + frameSize.width + " frameSize.height " + frameSize.height);
if (cc.sys.isNative) {
    if (frameSize.height > mediumResource.size.height) {
        g_tmxScale = 1;
        g_resfolder = "HDR";

        cc.director.setContentScaleFactor(largeResource.size.height / designResolutionSize.height);
    }
    // if the frame's height is larger than the height of small resource size, select medium resource.
    else if (frameSize.height > smallResource.size.height) {
        g_resfolder = "HD";

        cc.director.setContentScaleFactor(mediumResource.size.height / designResolutionSize.height);
        // if the frame's height is smaller than the height of medium resource size, select small resource.
    }
    else {
        g_resfolder = "SD";
        cc.director.setContentScaleFactor(smallResource.size.height / designResolutionSize.height);//smallResource.size.width/designResolutionSize.width
    }
} else {
    g_resfolder = "HD";
    cc.director.setContentScaleFactor(mediumResource.size.height / designResolutionSize.height);

}

I don’t understand why the image is being chopped off it should also have some play around its bounds.

Any obvious reasons why a content scale factor of 4 is not tying up to the visible area on the screen?

ok i think i solved this.

I think the idea is that if you design a screen with a safety area

say the design of the screen is

360 * 570 - SD
720* 1140- HD
1440* 2280- HDR

with corresponding safety areas of

320 * 480- SD
640* 960- HD
1280* 1920- HDR

you set the design resolution to the the design of the screen i.e 360 * 570 - SD. (NOT the safety areas )

i.e var designResolutionSize = { width: 360 , height: 570 };

also in appDelegate.cpp set window size to a proportion that will fit the design including the safe areas in my case i used: GLViewImpl::createWithRect(“Game”, Rect(0,0,720,1140));

set the resource resolution size to:

var smallResource = { size: { width: 360, height: 570 }, directory: "res/SD" };
var mediumResource = { size: { width: 720, height: 1140 }, directory: "res/HD" };
 var largeResource = { size: { width: 1440, height: 2280 }, directory: "res/HDR" };

and then content scale factor as Below:

    if (frameSize.height > mediumResource.size.height) {
    g_tmxScale = 1;
    g_resfolder = "HDR";

    cc.director.setContentScaleFactor(largeResource.size.height / designResolutionSize.height);
}
// if the frame's height is larger than the height of small resource size, select medium resource.
else if (frameSize.height > smallResource.size.height) {
    g_resfolder = "HD";

    cc.director.setContentScaleFactor(mediumResource.size.height / designResolutionSize.height);
    // if the frame's height is smaller than the height of medium resource size, select small resource.
}
else {
    g_resfolder = "SD";
    cc.director.setContentScaleFactor(smallResource.size.height / 
designResolutionSize.height);//smallResource.size.width/designResolutionSize.width
}
} else {
g_resfolder = "HD";
cc.director.setContentScaleFactor(mediumResource.size.height / designResolutionSize.height);

}