Html; cocos2d-x; variable html canvas size but fixed size within cocos2d?

cocos2d-x JavaScript
#1

Hi there,

I’ve pretty much ported my game, but within my code I use 2 screen sizes 480x320 (iPhone size) and 1024x768 (iPad size).

Neither of which look ideal in web browsers.

When I played with cocos2d on OSX there was the possibility to keep coordinate system within program at one of the above
sizes but when you resized the window, the opengl layer did the magic of the mapping. So you could have any size window but
inside the app I still just used 480x320 or 1024x768.

Is there something similar with the html framework? Any tutorials on this? Any advice?

thanks again

LB

#2

I’m not a cocos2d-html5 expert, but if you look in the HelloWorld example file you’ll see that there is code to scale the cc.canvas to match the window size (see below).

One thing I have noticed however, is that if you use large graphics e.g. 1024 x 768 and the canvas is scaled to suit the iPhone, the frame rate is very slow.

I suppose the solution to this is to detect the window size and use different graphics as well as scaling the window e.g. if iPhone use iPhone graphics, and then leave it to the adjustSizeForWindow to scale up if necessary for Retina iPhone.

@ window.addEventListener(“resize”, function (event) {
selfPointer.adjustSizeForWindow();
});@

AND

@ adjustSizeForWindow:function () {
var margin = document.documentElement.clientWidth - document.body.clientWidth;
if (document.documentElement.clientWidth < cc.originalCanvasSize.width) {
cc.canvas.width = cc.originalCanvasSize.width;
} else {
cc.canvas.width = document.documentElement.clientWidth - margin;
}
if (document.documentElement.clientHeight < cc.originalCanvasSize.height) {
cc.canvas.height = cc.originalCanvasSize.height;
} else {
cc.canvas.height = document.documentElement.clientHeight - margin;
}
var xScale = cc.canvas.width / cc.originalCanvasSize.width;
var yScale = cc.canvas.height / cc.originalCanvasSize.height;
if (xScale > yScale) {
xScale = yScale;
}
cc.canvas.width = cc.originalCanvasSize.width * xScale;
cc.canvas.height = cc.originalCanvasSize.height * xScale;
var parentDiv = document.getElementById(“Cocos2dGameContainer”);
if (parentDiv) {
parentDiv.style.width = cc.canvas.width + “px”;
parentDiv.style.height = cc.canvas.height + “px”;
}
cc.renderContext.translate(0, cc.canvas.height);
cc.renderContext.scale(xScale, xScale);
cc.Director.getInstance().setContentScaleFactor(xScale);@
},

#3

Thanks for this.

Works a treat. Silly me for not looking at the hello world example.

Thanks again!

LB

#4

I hope my reply 8 months later will be noticed.

I’m having trouble with this. My game scales nicely, and certain things work fine, but a lot of my UI elements’ hit areas don’t match their visual representation anymore. Does anyone have any insight?

#5

Hi, Christopher

Are you using the NO_BORDER policy?