Full HD app playing on all devices. Please post your Tips.

Solar2D General Questions/Discussion
#1

Hello,

It’s been about 1,5 week I’m using Corona, and I think that maybe I’m not using it the correct way trying to reach my goals. What are these?:

  • I want to make an HD app.
  • I want my app to look the SAME across all Armv7 (and up) devices.
  • I want to have the lowest loading times, and texture memory load possible.
  • I want my graphics, like Images and Sprites, to look crystal clear in ALL devices.

So, having in mind the above goals, I set up my files like this:

config.lua:

-- config.lua for project: zxc -- Managed with http://CoronaProjectManager.com -- Copyright 2013 . All Rights Reserved. application = { content = { width = 320, height = 480, scale = "zoomStretch" }, license = { google = { key = "Your key here" }, }, }

build.lua:

-- build.settings for project: BioLab -- Managed with http://CoronaProjectManager.com -- Copyright 2013 . All Rights Reserved. settings = { orientation = { default = "landscapeRight", }, iphone = { plist= { UIStatusBarHidden=true, }, }, android = { --usesExpansionFile = true, usesPermissions = { "android.permission.INTERNET", "com.android.vending.CHECK\_LICENSE", "android.permission.WRITE\_EXTERNAL\_STORAGE" }, }, }

Note that I  have commented “usesExpansionFile”. I will need it for Android, but not yet, so I have commented it for future use.

And now how I load my HD images in my storyboard files. For example:

local background = display.newImageRect(main\_menu, "images/menu/main\_menu/background.png", 480, 320) background.x=240 background.y=160

The background.png in my example, is finely nested inside my folders.

It is 1920x1080 with a resolution of 300dpi.

All other images and sprites are high definition as well. Smaller grafics are not 1920x1080 in image size of course, but they are still full HD (their image size is a percentage of an 1920x1080 file, depending of the part of the screen I want them to cover).

AM I OVERDOING IT?

Is 1920x1080 too much? Is 300dpi needed? Remember I want to support all devices with crystal clear graphics. There are Full HD devices like Galaxy s4 and HTC One, getting a big share in the market. Are, in my config.lua, my content width and height settings wrong or right?

The problem is the loading time (which is veeeery long) and Texture Memory usage, which is veeery big.

Please post your TIPS and BEST PRACTICES, fitting my goals.

Thank you.

#2

You should provide different resolution files and target those files to appropriate devices. See: http://www.developer.coronalabs.com/blog/2012/12/04/the-ultimate-config-lua-file/

Regarding your DPI question. It only applies to print, it tells the printer how to print the image. You can change that value all day and the file size stays the same :slight_smile: See: http://www.webdesignerdepot.com/2010/02/the-myth-of-dpi/

#3

I guess it makes sense to target the largest images to iPad retina. But even then I would not put them in full resolution, rather have them maybe 2/3 of the size and scale them up. Test multiple compressions until you are happy with the result: load time vs quality. This is a trial and error process if you want to be thorough. 

Then there are the dangers of the lower end Android devices with large resolutions. In the past I have put conditions that if it is an Android device I load lower grade images. If you want to be really detailed you can use the function that checks maximum texture memory and target according to that. But even those devices might have a low grade CPU and loading takes forever.

Just one reason why Android development can be hard!

Depends on the app how much you toil over this imo. I have worked on catalog apps in the past where image quality is everything, spending days testing on at least a dozen devices. My current app its just an after thought.

#4

There are too many different android resolutions. Do I have to provide a version for each one?

#5

I don’t want to scare you with that rant above. So I would say in few easy steps:

  1. Target the largest images like your backgrounds to ipad retina, compromise as much as you can in compression and name them @4x.

  2. Scale them down half and quarter, name them @2x and just background respectively.

With smaller images, like icons that should be crystal clear, have exact sizes:

When you do: local image = display.newImageRect( “image.png”, 100, 100 )

Make your sizes like this:

image.png is 100x100

image@2x.png is 200x200

image@4x.png is 400x400

Android will choose images from above as it sees fit.

#6

Ok, some last questions cause I don’t get clearly from the blog.

How to I name my image files, do I name them “background@2x”  for example? And where do I put them? If my folder is named “images” do I put all the different versions inside that folder? And lastly, how do I call them from newImageRect? Just “background”, and corona will choose the appropriate?

#7

I changed my last reply to make it more clear. Please check that. 

Yes name them like that. @4x are your biggest version, @2x half sized and 3rd version, the quarter sized are only named background.jpg (with no @ thing). Just put them all in same folder. 

Yes just use ‘background.jpg’ with newImageRect and device will pick correctly.

#8

Ok, I tested it in some different Android devices, and it looks pretty decent. The loading time is halved, and the same for texture memory. So, thank you for your guidelines!

But one last thing: Is there anyway to keep track of which imageSuffix version it has loaded? For debugging purposes. Maybe put a notification in a temporary text field. Or if an IDE can give you that debugging information (I’m using Outlaw Lite and it doesn’t give me much debugging feedback, maybe there is another free IDE out there that can cover this up).

#9

Yup, the display.imageSuffix property will tell you which one was loaded: http://docs.coronalabs.com/api/library/display/imageSuffix.html.

  • Andrew
#10

You should provide different resolution files and target those files to appropriate devices. See: http://www.developer.coronalabs.com/blog/2012/12/04/the-ultimate-config-lua-file/

Regarding your DPI question. It only applies to print, it tells the printer how to print the image. You can change that value all day and the file size stays the same :slight_smile: See: http://www.webdesignerdepot.com/2010/02/the-myth-of-dpi/

#11

I guess it makes sense to target the largest images to iPad retina. But even then I would not put them in full resolution, rather have them maybe 2/3 of the size and scale them up. Test multiple compressions until you are happy with the result: load time vs quality. This is a trial and error process if you want to be thorough. 

Then there are the dangers of the lower end Android devices with large resolutions. In the past I have put conditions that if it is an Android device I load lower grade images. If you want to be really detailed you can use the function that checks maximum texture memory and target according to that. But even those devices might have a low grade CPU and loading takes forever.

Just one reason why Android development can be hard!

Depends on the app how much you toil over this imo. I have worked on catalog apps in the past where image quality is everything, spending days testing on at least a dozen devices. My current app its just an after thought.

#12

There are too many different android resolutions. Do I have to provide a version for each one?

#13

I don’t want to scare you with that rant above. So I would say in few easy steps:

  1. Target the largest images like your backgrounds to ipad retina, compromise as much as you can in compression and name them @4x.

  2. Scale them down half and quarter, name them @2x and just background respectively.

With smaller images, like icons that should be crystal clear, have exact sizes:

When you do: local image = display.newImageRect( “image.png”, 100, 100 )

Make your sizes like this:

image.png is 100x100

image@2x.png is 200x200

image@4x.png is 400x400

Android will choose images from above as it sees fit.

#14

Ok, some last questions cause I don’t get clearly from the blog.

How to I name my image files, do I name them “background@2x”  for example? And where do I put them? If my folder is named “images” do I put all the different versions inside that folder? And lastly, how do I call them from newImageRect? Just “background”, and corona will choose the appropriate?

#15

I changed my last reply to make it more clear. Please check that. 

Yes name them like that. @4x are your biggest version, @2x half sized and 3rd version, the quarter sized are only named background.jpg (with no @ thing). Just put them all in same folder. 

Yes just use ‘background.jpg’ with newImageRect and device will pick correctly.

#16

Ok, I tested it in some different Android devices, and it looks pretty decent. The loading time is halved, and the same for texture memory. So, thank you for your guidelines!

But one last thing: Is there anyway to keep track of which imageSuffix version it has loaded? For debugging purposes. Maybe put a notification in a temporary text field. Or if an IDE can give you that debugging information (I’m using Outlaw Lite and it doesn’t give me much debugging feedback, maybe there is another free IDE out there that can cover this up).

#17

Yup, the display.imageSuffix property will tell you which one was loaded: http://docs.coronalabs.com/api/library/display/imageSuffix.html.

  • Andrew