Hi all
I’m making a game and I want to resize the canvas according to the web browser window.
I followed the HelloWorld code and managed to change the size, but when I wanted to apply the same solution to a project build with cocosbuilder it does not work.
here is the code used to resize the canvas (it is the same as in the HelloWorld demo)
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);
}
now this works if I have a scene with a layer I created manually.
in a cocosbuilder projects I tried to add this code to CCBMainScene and I get an error in this line:
cc.renderContext.translate(0, cc.canvas.height);
I get the following error:
Uncaught TypeError: Object # has no method ‘translate’
in the working project (with out cocosbuilder) the rendering context is CanvasRenderingContext2D and not WebGLRenderingContext.
Am I doing something wrong or is the render context when working with cocosbuilder does not enable me to use this solution?
thanks for any help
so I have found that the render context is my main problem.
I can’t use this code to resize my screen if the render context is WebGLRenderingContext, but I can sure use it if it is CanvasRenderingContext2D.
I used safari to open the same project and it worked well, I was using Chrome first.
so this raises another question and problem.
is there an equivalent to these lines:
cc.renderContext.translate(0, cc.canvas.height);
cc.renderContext.scale(xScale, xScale);
that will work with webGL? if so I can check what is the context and that’s a good solution.
can I force the code to use CanvasRenderingContext2D?
if I do this the game won’t work if the browser does not support CanvasRenderingContext2D, is that allot of users to lose?
I know Chrome can use CanvasRenderingContext2D because when I checked the renderContext in another code on chrome and it was CanvasRenderingContext2D. the main difference between those 2 project that I’m using the short engine (cocos2d.min.js) in the one where Chrome is using WebGl and the engine directory in the project where Chrome uses CanvasRenderingContext2D.
ok so I’m talking to my self here but I did find a solution and I’m posting for others with the same problem.
in the said resizing code (the one that appears in hello world example) I changed
cc.renderContext.translate(0, cc.canvas.height);
cc.renderContext.scale(xScale, xScale);
to
if (cc.renderContextType0) {
cc.renderContext.translate(0, cc.canvas.height);
cc.renderContext.scale(xScale, xScale);
}else if (cc.renderContextType1){
cc.renderContext.viewport(0, 0, cc.renderContext.canvas.width, cc.renderContext.canvas.height);
}
this check the current render context. 0 stands for canvas2d and 1 stands for webGl. with webGl I found setting viewport to be the equivalent of translate and scale of canvas2d.
note this only allows scaling up of the canvas.
hope some one will find this helpful
Thanks Ben, I was looking for this.
I still have a problem when using it with 2.1.3 (actually, I use the latest version in development, June 6th 2013): even if all my design are scaled, I loose the touches on my cc.MenuItem elements… they don’t seem to be scaled. Do you have the same problem?
Anyways, thanks for sharing.
PS: I often feel like I am talking to myself when I post here… the community is not very active 
when I tried to use this method to scale down I lost touches. for now I’m good with scaling up only, it would be nice though to be able to do that as well.
when scaling up all seems fine for me.
and about the community I promise to be as involved as I can, but I find I have more questions then answers at the time…. I’m happy I could help you though 
