Multiple resolutions - solid example

Hi folks!

*** The solution proposed on this topic is already obsolete, due to the improvements made over the last two years! There's still some stuff to work on in order to have your UI working flawlessly on different devices, though... ***

I'm working on a skeleton project so I don't have to start things from scratch everytime I'm working on a project.

Today I came up with a nice solution for multiple resolutions, avoiding those annoying black bars no matter how stretched your screen is.

It is also ready to be used no matter the orientation: You just have to change the layout sizes to a portrait orientation (say, 640x960).

Hope it helps! I still have a lot of things to add on the skeleton (level selector, sound options, facebook integration), but this is was a nice start, so I wanted to share it with you.

See ya!

Link is a 404!

Whoops forgot to enable Dropbox Sync!

Done!

UP

Did anyone even see this? <img src="smileys/smiley36.gif" border="0" align="middle" />

I've tested over different iOS and Android devices, and it is working very well!

I hadn't seen this. Thanks for the bump.

It sounds like exactly what I need. Will download. Thanks.

Nice demo, that's how it's meant to be done :)

This should be sticky, I wish I'd seen it before..

Why are you setting this: "(LayoutHeight * scaleRatio - WindowHeight) / 2 / scaleRatio" technically the result would always be 0? Or am I missing something?

EDIT: Also how is it that the element in your canvas stay magically centered?

EDIT2: Disregard that I'm stupid, I didn't see the unbounded scrolling

Yes, unbounded scrolling must be on so this can work :)

I've made this example but hadn't used it since, so let me know if you find any bugs or weird behaviors.

Thanks for the info gammabeam

Ashley

I'm still running into the same problem with scale. Maybe this will explain.

FullScreenTest.capx

Thunder, aren't you just missing the layer parameter for the Touch.X/Y expressions?

Both mouse and touch take an optional layer parameter, e.g. Touch.X("Layer 1"). If that's not provided, the returned value does not take in to account any layer's scale.

Ashley

I had tried it awhile back and didn't get it working. I actually thought that the LayoutScale would be used by default. But since you mentioned it I ran some more tests to see what was going on.

Locks up the preview in both Windows and on iPad

Touch.Y(1)

-or this-

Touch.Y("Main") ---> Main is the name of Layer 1 in the example

• - -

Works correctly in Windows

Mouse.Y(1)

-or this-

Mouse.Y("Main") ---> Main is the name of Layer 1 in the example

• - -

Edit:

I wasn't for sure if you had seen this updated post or not so I submitted a bug report.

http://www.scirra.com/forum/touchy0_topic51222.html

I'm going to bump this to ask some questions.

Is this still the best method for multiple devices? Are there any drawbacks?

My main concern is about the resolution, I've read most of the tutorials and threads in the forums about resolution but it's still not enough.

Since nowadays most tablets/phones seem to use HD resolutions like 1280x800 or more, if I design the game on a 960x640 layout won't it look blurred/bad on a high definition screen? Wouldn't it be better to use a high definition layout like 1920x1080 to make sure your sprites and art look nice on every device?

Thanks.

Hi Xavier

Hmmm I don't think so. It does a good job tiling the background object so you don't get black borders, but I made this example long before we had letterbox fullscreen (and some other features I forget). Still works well on menus, I guess.

If I were to make this now, I'd add a div in the exported html to add a light background, just so people don't get the black bars - but they'll get a bar, anyway! <img src="smileys/smiley17.gif" border="0" align="middle" />

As for the blurry matter: Yes, if you have people using higher resolution, things may start to look blurry. C2 has a retina feature, but I'm afraid I never used it, so I can't comment on that. Maybe the help page can help ya. But anyway, I wouldn't worry that much right now - things like these can stop your motivation, so keep working! Just make sure you draw your art on a large scale, so you don't have to draw it again if you decide to release a "HD" version. <img src="smileys/smiley4.gif" border="0" align="middle" />

Thanks gamma. Motivation is still withing good levels, I'm just trying to figure this out now before starting doing levels on the game so I don't have to go back and redo things.

Example capx looks good.. thank you :)

I'm trying to use this for a game layout of 2048, 1536.

1. Wondering of the "Every tick -> set position -> set size" done for menu_tile_bg in the example needs to be done for "every" object in my game?

Cos that'll be a lot of objects even for a single layout.

2. I dont see a on_click event for start_button, how is it working on browser when I click :)