[Resolved] Fit to Screen AND Centering

cocos2d-x JavaScript
#1

I want game container to fit to screen and position to center of the screen.
Please see an image below, is it possible?

Thanks.

#2

I’m sorry to say that your image is broken.
please try again to upload your image.

thanks!

#3

Oops thanks for the claim, how is this.

#4

It’s another small bug. They forgot to set display to inline-block for the Cocos2dGameContainer div.

In CCApplication.js, in cc.setup:

cc.setup = function (el, width, height) {
    var element = cc.$(el) || cc.$('#' + el);
    if (element.tagName == "CANVAS") {
        //it is already a canvas, we wrap it around with a div
        cc.container = cc.$new("DIV");
        cc.canvas = element;
        cc.canvas.parentNode.insertBefore(cc.container, cc.canvas);
        cc.canvas.appendTo(cc.container);
        cc.container.style.width = (width || cc.canvas.width || 480) + "px";
        cc.container.style.height = (height || cc.canvas.height || 320) + "px";
        cc.container.style.display = "inline-block"; ///////////////////////////// ADD THIS        
        cc.container.setAttribute('id', 'Cocos2dGameContainer');
    }

Add that line and you should be good to go.

Also, should you want to change the positioning after that, in your HTML file, you can set the main DIV’s text-align CSS property.

#5

@Brian
Thank you! That’s what I wanted.

#6

I am stuck at the same problem but in C++ not JS.

Game content keeps to be aligned at left-bot corner and not centerized while using ResolutionPolicy::FIXED_HEIGHT and FIXED_WIDTH (nearly like this topic owner described)

So how to do this in cocos2dx c++? Many thanks for reading this :smile: