Multiple Screen Size - Image size optimisation

Dear Community!

I've read the official tutorial about multi screen size:http://www.scirra.com/tutorials/73/supporting-multiple-screen-sizes/page-1

I use the 'Fullscreen in browser' - 'On (scale mode)' and have great results in the targeted 320x240 to 640x480 sizes. Additionally my game's layout is great in desktops too: in 1024x768 to 1920x1080.

My only problem with larger screens that in full screen it have big pixels - cause of the upscaling. To solve that I may use larger picture files, and resize my game's default screen size something popular size.

I collected all the possible screen sizes:

------------------------------------------

Anroid LQ: 320x240

iPhone 3, Android small: 480x320

Android normal: 800x480, 854x480

iPhone 4, Anroid EHD: 960x640

Android 7":1024x600

iPad 2: 1024x768

Android 10": 1280x720, 1280x800

Android 10" HD: 1536x1152, 1920x1152, 1920x1200

iPad 3, HD Android tablets: 2048x1536, 2560x1536, 2560x1600

Scirra Arcade: 800x Unlimited (but no fullscreen)

Chrome Webstore: all destops from 800x600 to 1920x1080

------------------------------------------

I would like to ask for your help in find a good way to support all (or at least 480x320 to 1920x1080) screens and:

• solve the big pixel problem in 1920x1080
• avoid too much performance decrease in mobiles
• have only one source to develope

Do you have any experience in it, or have a tested solution?

Just increase the size of your image files?

Thank you sqiddster! :)

Well, as I would like to target mobile platforms, and I predict 50%+ of users in mobile, the simply increase of image sizes could drastically decrease the performance.

Since the topic open I found a theoretical solution:

---------------------------------------------------

• add HQ image versions to sprites as a serarated "HQ" animation
• on start of layout check the window size
• if it larger than the original go trought all image sprites, and set them active animation from Default to HQ
• if it is smaller or equal to the original do nothing

I can imagine an LQ version of images too for small mobiles with 480x320px screen.

I'm sure, that someone here have experiance in what size could be used as the default.

An another question is that what could be the HQ resolution? Do I need to make images for an 1920x1080 or 2560x1600 screen?

Another solution

-------------------------

As an example I found that non-C2 tutorial, where the developer started from 1024x768 and targeted 480x320 to 1280x800px.

The logic behind this is:

Have a Container, what is a Fullscreen and the default size is 1024x768, and have a Vignette Area inside it what is 768 ? 512 in default.

1. At 1024x768 the default layout shown.

2. Screen Height < 512: The Vignette Area is scaled to have 100% of Screen Height, and depending of the ScreenWidth the Container is invisible or visible only in the left and right.

2. Screen Height > 768: The Vignette Area keeps it's original size, but the Container is more visible, it has more space to fill.

This tutorial is 1 year old, and its a long time in App/HTML5... so I'm not shure that its actual now.

Start from small or large?

---------------------------

I used to learn in fluid website layout developement, that we can start from small screen size and if the screen is larger enhance the layout and can start from the biggest and if the screen is smaller de-enhance the layout.

As ranma wrote in the mobile performance tutorial "AVOID sprite resizing and rotation". According to this the perfect way could be to:

• Default screen size is 480x320
• Have prepared image sizes for all sizes: 800x480, 1024x768... 1920x1080.
• Dimanically load/set the image version according to size.

Do you have any tested solution/logic to this?

Well, as I would like to target mobile platforms, and I predict 50%+ of users in mobile, the simply increase of image sizes could drastically decrease the performance.

Well, that's easy to test: do it, and see if your framerate drops. I would be surprised if there was a big difference. Mobile GPUs are weaker than desktop but GPUs are specially designed to do things like scale images. I'd imagine it would be fine.

So draw images big, scale them down.

If you're having serious problems, you could export two different versions of the project -- one with larger images for PC, and the other with smaller, more mobile friendly versions. You should definitely test whether or not this is an actual concern before taking such a course of action though, as this is exactly the kind of manual work and micro-optimization you should aim to avoid except as a last resort; especially as Construct does not yet provide for different project configurations that could help to automate the process.

Ok, Ashley I'll try to start from the max resolution, and scale the images down.

Yes, jbadams I also thought about that, and found the Configurations dialog in C2... I hope that this will be what you are talking about:

http://www.scirra.com/manual/50/add-configuration?utm_source=Add_Configuration_Dialog&utm_medium=SoftwareLink&utm_campaign=SoftwareHelpLink

Nice proposition Epox <img src="smileys/smiley1.gif" border="0" align="middle" /> , but what about the text? and the arrangement of all sprites? The biggest probleme is not images I suppose, but, when we play a game on his mobile phone, me can't put lots of detail on the screen, and all the texts should be bigger, or you can't recognize them::

I've been thought about it all these days

nothing1969 - using a fullscreen scale mode also scales text appropriately.

nothing1969 - the fullscreen scale mode is working very well. Even the support for multiple aspect ratios could be completed with it with an extra care about the layout areas.

As an update for the topic:

Currently I do nothing with this kind of optimisation. I've got some trouble in Chrome Web Store publish with larger sprite image than 1024px, so I use it as a maximum.

Used to make some tests in Android phones with PhoneGap (with that 1024px max sprite size). I've got great results in my simple memory game with Sony Ericcson Live and Alcastel OT-995. Altrought in any phones, have not got some kind of Graphic accellator, the game were not rendered correctly or were unusable. :)

I think it's much more wiser now to take time for developement for Desktop (Chrome Webstore) and the game/app seems to be successful, that go on the bumpy road to make in mabile ready...

I'm sorry that I haven't make it clear: There is basicly 2 aspects:

The first is specially about CocoonJS. I find that it is excellent, but the Scale of letter and the fullscreen mode doesn't.

When I find your post here, it comes to me a solution. As all screens have differents proportion of Width and Height. Why not do it like this

1, use the Behavier Anchor, to fix the elements, whose positions are supposed to be fixed to the bord.

2, use a background a little bit bigger than the windows

3, Then chose Fullscreen scale.

like this:

10.14.182.39/yfang/image/fullscreen mode.bmp

As we know, the cocoon use a mixe mode of scale and crop, so it is a excellent solution:

We will have a reel Full screen mode in all device

The second questions is about text:

1. the cocoonJS doesn't support jet the scale of text, hope it works later in the near future

2. Even it works, I mean, with the same scale proportion with the text. It is not wise to use the same size for the PC and Mobile. Because normally, the screen is too small to recgnize the text which is clear for the PC.

nothing1969 it's great to know that you testing fullscreen solutions for CocoonJS! I used to use exactly the same logic for real fullscreen:

Archor with laft/right for specific elements, wider background for wide (16:9) devices and fullscreen scale.

For others who did not tested this logic yet, it's only trick is that the middle area is "fluid" by this. It means if you have some left and some right elements, you have for example a center space of 60% of the with in 4:3 screens and about 75% in 16:9. In my memory game it calcualtes this center space's width and height, and layouts the cards according this sizes.

For now I'll use this logic, so hope that this will works very well with cocoon.

Hi...

Im new on this. I need some help with screen resolutions.

My game its originally for 800 x 480 screen size... So, whitch configuration must I set in construct 2 to see my game correctly in iPad 2...

Sorry about my basic english...