newTabBar, are @2x versions of icons enough?

Getting Started Newbie Questions
#1

Just wondering if manual export of 32x32px versions of tab bar icons are necessary, or if changing the icon names in the code to @2x will cause the 64x64px icons to shrink correctly on f.ex. Iphone 3GS or some low res Android phone.

I guess the question applies to other graphics in the app as well, such as images and thumbnails in lists.

Just trying to avoid time/cost for the company and the clients.

So is there a way to just make the @2x graphics and use that on low-res phones? The reason I ask is that I come from XCode and Iphone, and apart from the app icon, @2x graphics scale fine and I don’t have to make low-res versions.

Attached are all 16 icons for the 4 tabs, and my code goes like this: (didn’t find a code formatting button??)

local tabButtons = {
    { label=“Beräkna”, up=“icon1@2x.png”, down=“icon1_down@2x.png”, width = 32, height = 32, onPress=onFirstView, selected=true },
    { label=“Information”, up=“icon2@2x.png”, down=“icon2_down@2x.png”, width = 32, height = 32, onPress=onSecondView },
    { label=“Hitta Medlem”, up=“icon3@2x.png”, down=“icon3_down@2x.png”, width = 32, height = 32, onPress=onThirdView },
    { label=“Kontakt”, up=“icon4@2x.png”, down=“icon4_down@2x.png”, width = 32, height = 32, onPress=onFourthView },
}

– create the actual tabBar widget
local tabBar = widget.newTabBar{
    top = display.contentHeight - 50,    – 50 is default height for tabBar widget
    buttons = tabButtons
}

#2

Hi @henrik5,

The @2x images should scale down fine. But in your code, which guide/tutorial did you gather the “up” and “down” parameters from? Those parameters do not seem correct by the current documentation:

http://docs.coronalabs.com/api/library/widget/newTabBar.html

Best regards,

Brent

#3

File > New Project… > App

  • replaced by _ instead of renaming the files and only referencing existing file names.

Thanks Brent, are you saying it should say “icon1.png”, even though there’s no such file? (The whole point is to remove the icon1.png and only have the icon1@2x.png.)

Just trying to find how the automagical stuff works.

On the same note, I’d like to know if the default resolution of 320x480 is correct and if I place stuff dynamically within this 320x480 rectangle, say a label with refpoint CenterRightReferencePoint and placed at display width/2+10, the “+10” will scale up to +20 on an Iphone 4?

Just a link to the standard way of solving such things would be enough - I’m brand spanking new at this.

#4

Hi @henrik5,

Yes, that’s essentially correct. In the code, you specify “icon1.png”, not “icon1@2x.png”. The suffixes like “@2x” or “@4x” are controlled by the “config.lua” file and scale setup… if done correctly, Corona will auto-swap the proper assets depending on the screen size. Also, in terms of positioning of objects and scale of vector objects/text, that is also scaled. So if you place a rectangle in the corner of the screen, it will scale up to a larger proportional rectangle at the same ratio, based on the scaling setup.

This guide explains it all in more detail:

http://docs.coronalabs.com/guide/basics/configSettings/index.html

Hope this helps,

Brent

#5

Hi @henrik5,

The @2x images should scale down fine. But in your code, which guide/tutorial did you gather the “up” and “down” parameters from? Those parameters do not seem correct by the current documentation:

http://docs.coronalabs.com/api/library/widget/newTabBar.html

Best regards,

Brent

#6

File > New Project… > App

  • replaced by _ instead of renaming the files and only referencing existing file names.

Thanks Brent, are you saying it should say “icon1.png”, even though there’s no such file? (The whole point is to remove the icon1.png and only have the icon1@2x.png.)

Just trying to find how the automagical stuff works.

On the same note, I’d like to know if the default resolution of 320x480 is correct and if I place stuff dynamically within this 320x480 rectangle, say a label with refpoint CenterRightReferencePoint and placed at display width/2+10, the “+10” will scale up to +20 on an Iphone 4?

Just a link to the standard way of solving such things would be enough - I’m brand spanking new at this.

#7

Hi @henrik5,

Yes, that’s essentially correct. In the code, you specify “icon1.png”, not “icon1@2x.png”. The suffixes like “@2x” or “@4x” are controlled by the “config.lua” file and scale setup… if done correctly, Corona will auto-swap the proper assets depending on the screen size. Also, in terms of positioning of objects and scale of vector objects/text, that is also scaled. So if you place a rectangle in the corner of the screen, it will scale up to a larger proportional rectangle at the same ratio, based on the scaling setup.

This guide explains it all in more detail:

http://docs.coronalabs.com/guide/basics/configSettings/index.html

Hope this helps,

Brent