Multiple Screen Size - Image size optimisation

Get help using Construct 2

Post » Fri May 18, 2012 9:23 am

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?
B
19
S
5
G
4
Posts: 109
Reputation: 4,195

Post » Fri May 18, 2012 11:38 am

Just increase the size of your image files?
B
90
S
30
G
24
Posts: 3,189
Reputation: 32,400

Post » Fri May 18, 2012 12:50 pm

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?
B
19
S
5
G
4
Posts: 109
Reputation: 4,195

Post » Fri May 18, 2012 1:01 pm

[QUOTE=Epox]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.[/QUOTE]
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.
Scirra Founder
B
359
S
214
G
72
Posts: 22,952
Reputation: 178,600

Post » Fri May 18, 2012 1:07 pm

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.
B
24
S
5
G
2
Posts: 104
Reputation: 3,136

Post » Sun May 20, 2012 5:57 pm

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
B
19
S
5
G
4
Posts: 109
Reputation: 4,195

Post » Tue Jul 10, 2012 9:07 am

Nice proposition @Epox , 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
B
11
S
2
Posts: 53
Reputation: 1,237

Post » Tue Jul 10, 2012 2:04 pm

@nothing1969 - using a fullscreen scale mode also scales text appropriately.
Scirra Founder
B
359
S
214
G
72
Posts: 22,952
Reputation: 178,600

Post » Tue Jul 10, 2012 3:51 pm

@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...
B
19
S
5
G
4
Posts: 109
Reputation: 4,195

Post » Wed Jul 11, 2012 1:15 pm

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.


B
11
S
2
Posts: 53
Reputation: 1,237

Next

Return to How do I....?

Who is online

Users browsing this forum: h1k3, ocmar and 23 guests