I am a green hand. I just set up the Cocos2d-HTML5 development environment.But I found no matter samples or template.The game screen size are the same size. I want to change it.I tried to change the code
template>>>main.js
var resourceSize = cc.size(480, 800);
var designSize = cc.size(480, 800);
but it doesn’t work……
help help help……
Hi,
You can select HelloHTML5World as the temple, and modify main.js like this:
main.js:
Delete these codes, it closes the multiple resolution adapt.
cc.EGLView.getInstance()._resizeWithBrowserSize(true); cc.EGLView.getInstance().setDesignResolutionSize(800, 450, cc.RESOLUTION_POLICY.SHOW_ALL);
index.html:
modify canvas size
thanks……
but the game scene’s position is not in the center of screen
If you want to open the multiple resolution adapt.
please reference the samples/tests
and you can modify canvas size in index.html.
Here is some documents about multiple resolution adapt:
http://www.cocos2d-x.org/wiki/Multi_resolution_support
http://www.cocos2d-x.org/wiki/Upgrade_Guide_from_Cocos2d-html5_v22_to_v221
thanks……
the next time I ask questions,may I use Chinese???
Hi,
i am facing the same issues too. Also a greenhorn in cocos2d development but I had my fair share in front end web dev.
I’ve perused the multi resolution adaptation documents but found the documentation to be a tad confusing.
Is the canvas the equivalent of the viewport on a mobile device?
How is the canvas size related to the method call “setDesignResolutionSize”? I’ve set the design resolution with the following parameters:
~~width: 640
~~height:960
-resolution policy: “show_all”.
However, the width and height that Director returns is at 450 and 800 respectively.
Could the tutorial be written from the perspective of the developer’s intent to roll out an app on web browsers, iPhones and popular Android devices?
Cheers!
Hi, Decki Kwok
About the multi resolution support, you can refer to this topic on our wiki: http://www.cocos2d-x.org/wiki/Multi_resolution_support, It is written for coco2d-x version, but for cocos2d-html5, it’s pretty the same thing.
In some way, yes, the viewport meta on mobile browser let you define the size in pixel to be scaled to fit the screen. The canvas we use in cocos2d-html5 let you scale your designed resolution to fit the canvas size.
setDesignResolutionSize let you decide which size you want to use in your game, e.g. you use 640 * 960 to design your game and all graphic assets for your game, in the code, you will always position your element in a space of 640 * 960. In the same time, the real size of the canvas is automatically scaled for you to fit the browser window. So the real size of your game can be smaller or bigger than 640 * 960, the benefit is obvious, you don’t need to take care of the resize issue for different size of device.
However, the cc.Director’s getWinSize function should return the design resolution you initially set with setDesignResolutionSize, can you verify it and show us how is that happened?
Huabin
yeap, I’ve referred to the wiki and found it hard to comprehend. However, based on the tips you’ve offered, I reckoned that programmers only need to code with reference to their desired on-screen resolutions during the developmental process while cocos2d handles the scaling of game screen on devices based on the user-selected display policies.
I was having issues initially because I was learning to code with the sample test template that exhibited the capabilities of cocos2D. The problem was resolved once I’ve switched over to the MoonWarrior’s source codes and everything seems clearer. Great job on the well-written, concise codes. Maybe Zheng Jie should use this source code for learning too.
@Decki Kwok
Great job! I’m writing a wiki about the new Resolution Policy design in the next version which should be released in couple of days, I will try my best to explain things clearly.
Finally, hope you enjoy coding with cocos2d-html5.
Huabin