Display error if resolution of device less than the canvas size.

cocos2d-x JavaScript
#1

Hie,

How to throw an alert message if user tries to access the game which is having larger resolution than the canvas defined?
My game canvas size is 1024*768 .if a user tries to access in device less than the size how should i throw the message your device does not support for this game.

#2

You can show a message to user, like this: alert(“bla bla”);
or redirect to the other page which shows error message.

I suggest the game supports multiple resolution to adapt user’s device.
It is more user-friendly.

#3

Hie Dingping,

Can you please be more clear on this?
or
Can you post me the link to example code for the same as i am a newbie?
I have one doubt when loading the html file itself we are defining our canvas size but how does we load the canvas of lower resolution according to user device dynamically.Any help on this is greatly helpful to me as i need to meet my deadlines.?

#4

Look at the “template” project in v2.2.2 (or latest from github). The canvas automatically resizes to the browser size, but the width and height that you define don’t change.

Here’s a lenghtier and propper explanation on the subject:
http://www.cocos2d-x.org/wiki/Understand_the_Resolution_Policy_in_Cocos2d-html5_222

#5

Hie seb,

My canvas size is 1024*768 for now.I i want the game to run on mobiles as well.My game has the drag and drop events.I have hardcoded the location values according to the convenience in the game file.IF the canvas resizes then my location values goes for a toss right.Should i define all my location values in terms of size.width and size.height of the window for the game to work on all devices.

#6

I want the game to be only in landscape mode can i restrict the user to play only in landscape mode .I mean if user changes the orientation the the screen should remain in landscape only

#7

abhiram talluri wrote:

Hie seb,

My canvas size is 1024*768 for now.I i want the game to run on mobiles as well.My game has the drag and drop events.I have hardcoded the location values according to the convenience in the game file.IF the canvas resizes then my location values goes for a toss right.Should i define all my location values in terms of size.width and size.height of the window for the game to work on all devices.

Would you mind sharing some code? I don’t really understand why you are having that problem.

Your see, the thing is, you can define a “desgin resolution”, let’s say you choose 1024768 for this, and you work relative to these values. If your actual canvas size in a browser is 320240 and a user clicks at the point 160120 of the screen, your game code, on a onMouseDown(e) event handler for example, will get 512384 as the clicked position on e.getLocation(). This way, you can work your game logic without worrying about what size the game will actually be played at.

The canvas size you define on “index.html” is actually meaningless if you use a design resolution and let the canvas be resized automatically by cocos2d to the browser size. Check the example located at the “template” folder of your cocos2d download (make sure to be using v2.2.2 or the latest github repo).

abhiram talluri wrote:

I want the game to be only in landscape mode can i restrict the user to play only in landscape mode .I mean if user changes the orientation the the screen should remain in landscape only

Well, this one I’ve been wondering myself, but I haven’t had the time to investigate it. I’ll update if I find a way to disable screen rotation.

#8

Check the code file.That file is the main screen of the game.If i load it in my browser it works perfectly and when i resize the browser to test the responsiveness its not working good.

#9

That is not the file that I expected…

If you look at the folder in which the “index.html” and “cocos2d.js” in your project, there should be a “main.js” file in that folder, and in there the design resolution policy is set. Check the “template” folder in your cocos2d-html5 install for reference.

It’s important that in that “main.js” file I mention the following lines are present (changing (800, 500) for your resolution, of course):

var designSize = cc.size(800, 450);
cc.EGLView.getInstance().setDesignResolutionSize(designSize.width, designSize.height, cc.RESOLUTION_POLICY.SHOW_ALL);
cc.EGLView.getInstance().resizeWithBrowserSize(true);

BTW: in thes file you’ve uploaded before, note how you define var size = cc.Director.getInstance().getWinSize();, this will always return your design resolution regardless of the size of the actual canvas, and that’s the intended behaviour, the game will scale automatically without worries.