Canvas element was not resizing properly

cocos2d-x
#1

Hey,

I’m trying to attach the cocos HTML into my website using the iframe when I resizing the iFrame the canvas element was not resizing properly.

I have set the design resolution policy as

cc.view.setDesignResolutionSize(cc.winSize.width, cc.winSize.height, cc.ResolutionPolicy.SHOW_ALL);

Is any other thing to make it resizable?

Thanks!

#2

I use the following code:

function init_common_ui() {
    var update_design_resolution = function() {
        var win_size = cc.view.getFrameSize();
    
        g_scale_x = win_size.width / res.design_resolution.width;
        g_scale_y = win_size.height / res.design_resolution.height;
    
        g_scale = Math.min(g_scale_x, g_scale_y);
    
        cc.view.setDesignResolutionSize(win_size.width, win_size.height, cc.ResolutionPolicy.SHOW_ALL);
    
        g_offset = cc.p(
            (win_size.width  - res.design_resolution.width * g_scale) / 2,
            (win_size.height - res.design_resolution.height * g_scale) / 2);
    
        if (g_cur_scene) {
            g_cur_scene.updateRootNodeParameters();
            g_cur_scene.updateBg();
        }
    };
    
    update_design_resolution();
    
    if (!cc.sys.isNative) {
        // for web
        cc.view.setResizeCallback(update_design_resolution);
    }
}

Also check if you have cc.view.resizeWithBrowserSize(true); in main.js

#3

Tq bro @dimon4eg , I’ve found a simple solution.
Create a custom resolution policy with

var customPolicy = new cc.ResolutionPolicy( cc.ContainerStrategy.PROPORTION_TO_FRAME, cc.ContentStrategy.EXACT_FIT);

Then aplly it as

cc.view.setDesignResolutionSize(cc.winSize.width, cc.winSize.height, customPolicy);

Refer here for the custom resolution policy

#4

Nice, but your solution only for web?
My is cross-platform.