Best solution for a portrait game on PC/Mac browsers (landscape) adding black bars?

[Fabrizio]

Hello,
I’m developing a portrait game that should work on iOS/Android native/browsers AND also on PC/Mac browsers.
I would like to center the game on PC/Mac browsers adding black bars with some limits/restrictions.
Let’s assume my design resolution is 720x1280 (aspect 16:9), I need to support up to 960x1280 (4:3 aspect ratio). If screen is wider than 4:3, I would like to add black bars left and right (to support PC/Mac browsers, that are in landscape).
Obviously my buttons should attach to screen borders, ignoring black bars. For example, I have a QUIT button on the bottom right corner that should get a 50 pixels margin (bottom and right).
On the other hand, if device is 20:9, I don’t want to add any black bars but I need to manage buttons correctly, as 4:3.

Which is the best solution for that, by using Cocos Creator 2.4.3?

[yufang.wu]

@Fabrizio maybe you can refer to this document: https://docs.cocos.com/creator/manual/en/ui/multi-resolution.html

[Fabrizio]

Thanks, I already checked it but it cannot support what I need.
I need my design resolution to range from 540x1280 to 960x1280 and then add black bars if lower or higher, height always fixed to 1280.
I think there could be a solution by modifying something on the fly when I intercept changes (cc.view.setResizeCallback). I’m working on it …

[knox]

You can try listening to cc.view.on(‘design-resolution-changed’, callback); or cc.view.on(‘canvas-resize’, callback);

[Fabrizio]

Thanks, I think I solved in this way:

1. Intercept:
   cc.view.on(‘canvas-resize’, this.onResized, this);

2. Forcing canvas resolution to:
   onResized()
   {
   var obj = this.canvas;
   var size = cc.view.getVisibleSize();
   obj.node.setContentSize( new cc.Size( Math.min( obj.node.getContentSize().height * 0.75, size.width ), obj.node.getContentSize().height ) );
   }

3. You also need to add Widget components and set then to ALWAYS, I set Canvas Widget component to ONCE.

Anybody can find a better solution?