Layout size to fit SmartPhones

Hi there!!

I tried putting a site online for my band, and I want to be able to check it from a iPhone or a Nexus S or a Galaxy S, I know they probably have different screen resolution, 480x800 or 640x960, or else.. I dunno.

Whats the correct Layout resolution I should use to make the game fullscreen on most smartphone ?

I tried a layout of 480x800 and it filled only about 60% of the screen on a Nexus S.

Thanks!

AFAIK, different phones can have significantly different resolutions, so I'm not sure what to tell you. :/

Here's a question for the devs - is there any way the html5 game could find out the browser window size and adjust itself accordingly like how can be done with CC?

I just tried a 1024x1536 canvas on a Galaxy who's supposed to have a 480x800 pixel screen and it didn't fill the screen. I think I had to use 1280x1920 to make it fullscreen. Exactly 4 times the mobile's display.

I guess webpage are kinda zoomed out automatically on mobile or something.

Well thanks cow!!! _trix

Seriously, someone should really create a search engine that checks for synonym as well... I really searched for Resizing layout for mobile phone and things like that and it never found that awesome "Scaling C2 apps for mobile screens".

Shame on the search engine!! And on me..

Release 41 now has a fullscreen in browser option that takes care of this for you!

Could anybody with a smartphone try please ?

chambre2.host22.com

Its supposed to be fullscreen (layout is 480x800) green and white clouds background with a red border and a square that you can place anywhere by touching the background.

If you try it please specify which phone you have

Thank yoooouuuuuu!

iPhone 4 user here. After saving it to my homescreen to get the fullscreen going, it loaded up fine, but the bottom portion of the red border was cut off. The red box appeared just fine whenever I tapped the screen.

I dont know much about the iPhone, you mean that you had to save the link as a shortcut on the homescreen to be able to see it fullscreen ?

When in fullscreen mode, do you still have a bar at the top of the screen ? Like an address bar or something. If not, I know iPhone resolution are more like 640x920.

So I guess to support both 480x800 (most android powered phone) and iPhone, we would have to make to version with a script that links to the proper build depending on the running OS.

Thanks a lot iRoNgHosT!

Djordhan, if you position and scale everything in the layout depending on the WindowWidth and WindowHeight expressions, it should fit any device screen. Then, you can also test it works in your browser window on a desktop, just by adjusting the window size.

It seems to work fine.

Tips: Don't forget to set the objects' position to windowWidth / 2 and windowHeight / 2 otherwise sprites will stretch outside the screen.

It solves most problems but I don't think the same game would look good on iPhone 3 at 320x480 and on iPhone4 at 640x920, everything will look quite stretched, specially if you have pixel art.

The best thing to do is probably draw everything for the higher resolution (640x920), and scale it down for smaller displays. That always looks better than up-scaling low resolution graphics.

That is so logic I didn't even think about that.

Fact is that it's always gonna be a problem when doing html5 games for mobiles when you want to support iPhone and iPad, and the future iTable and iWall.. C2 or not. I'm gonna dig a little on other html5 developer forum and keep you posted

Hi Djordhan

Did you ever find a solution for the different mobilescreens ???

pls let me know

I stucked with my project, but would maybe do the ugly one..

having a script to detect screensize and the redirect

The bad thing is that I have to design more versions in C2

Cheers

flemming

You can try playing with the WindowWidth and WindowHeight expressions (which returns the width and height of the current device's display), and the Set Layer Scale action (which allows you to zoom an entire layout in and out).