newImageRect and TopLeftReferencePoint

Solar2D General Questions/Discussion
#1

Hi All,

I have a simple Scene into a Storyboard and I load the image for background.
Inside createScene i have some code lines

background = display.newImageRect( group, “background.png”, display.contentWidth , display.contentHeight )
background:setReferencePoint( display.TopLeftReferencePoint )
background.x, background.y = 0,0

The image - background.png - has 1280x800 pixels resolution.
I define inside config .lua
application = {
content = {
width = 800,
height = 1280,
scale = “letterbox”,
fps = 30,

Nevertheless - when run app it appear 2 black bars ( surfaces) - in the left and in the right of background image - as if the background image is smaller then display resolution. In fact - the image it’s scaled, but i don’t understand why and how to remove that. If i use simple newImage instead of newImageRect and work with center reference points - all are ok.

What i’m doing wrong?

[import]uid: 157691 topic_id: 35212 reply_id: 335212[/import]

#2

Does it work if you do this?

[lua]background = display.newImageRect( “background.png”, 1280 , 800 )

…

group:insert( background )[/lua] [import]uid: 202223 topic_id: 35212 reply_id: 139989[/import]

#3

What device are you running as? Screens have different aspect ratios and since you are using letterBox scaling, Corona will honor the shape of the image (it’s aspect ratio).

1280/800 is a 1.6:1 ratio, which is the right shape for a Kindle Fire or so. If you’re using an iPhone5 or a Galaxy III or a Droid screen, those screen’s ratios are like 1.77:1 and your image will have black bars on either side.

You can try to change the scaling from letterBox to zoomStretch in your config.lua, but this will potentially stretch/compress circles into ovals and squares into rectangles.

The normal strategy that many people employee would be to use an image larger than your target dimensions. Consider making your background 1416x800 and having the screen “bleed” off the edges on devices closer to the 1280x800 size.
[import]uid: 199310 topic_id: 35212 reply_id: 140003[/import]

#4

I already tried, thank you. It behaves the same. [import]uid: 157691 topic_id: 35212 reply_id: 140040[/import]

#5

I tried first in Corona Simulator.
If “View As” is Galaxy Tab or Galaxy S3 - the black horizontal margins appear. If I set View As to iPad Retina or iPhone - the things are ok and the black border disappears.
I also tried on Samsung Galaxy Tab2 ( 1280 x 800 ) - and the behaviour is identical with Simulator ( black margins appear )
If I change scaling type to zoomStretch it works ok , no black margin - but clear it’s not a good workarround.
But…if tablet has 1280 x 800 resolution…if in config.lua I wrote the same resolution and finally - the image has the same resolution - why is not normally displayed in full screen?
I want to use a listview widget - and these black margins, especially left ones- show very ugly.
I test with a larger image and I set - for example
background.x, background.y = -50, -50
It looks ok visually, but it’s not very comfortable to enforce that.

Do you have other ideea / sugestions where maybe I made mistake?

PS: I tried with or without display.setStatusBar( display.HiddenStatusBar ) - It seems has no effect
[import]uid: 157691 topic_id: 35212 reply_id: 140042[/import]

#6

Anyone has any ideas / suggestions?
I can not believe that others did not kicked with this problem! [import]uid: 157691 topic_id: 35212 reply_id: 140116[/import]

#7

Read this blog post:

http://www.coronalabs.com/blog/2012/12/04/the-ultimate-config-lua-file/

You may not need to deal with the dynamic sizing, but it graphically explains the problem and talks about how to make your backgrounds “bleed” to fill space. Take some time to try and digest the post to understand how these ratios work.

[import]uid: 199310 topic_id: 35212 reply_id: 140126[/import]

#8

I ran across the same issue when I started, but I really studied the page Rob Miracle pointed out and this one http://www.coronalabs.com/blog/2010/11/20/content-scaling-made-easy/ – search for the The “magic recipe” on that page.

Though it would seem to make sense the way you have it, you’ll need to follow the Corona guidelines for all this scaling “magic” to work properly.

Good luck.

Cheers. [import]uid: 202223 topic_id: 35212 reply_id: 140140[/import]

#9

Hello again,

I read carefully both articles ( thank you for them) - especially that Rob recommended, because is more complex and not so “magician” style like that recommended by Develephant. I bookmarked it and when I will work with dynamic scaling I will use these information.

But…both of them refer to scaling, diferent devices dimension with different images loading etc.
This is not the problem I told you.

I have a fix resolution: 1280 x 800 defined in config.lua and real life in tablet, an image with 1280x800 pixels and I use display.newImageRect( group, “background.png”, 1280 , 800) !
Nothing scaling, nothing to resize - only show the image as background.

Of course - there are a lot of possible workarrounds - if it is a real bug!
I can define in config.lua not 1280 - but 1400 width - and i will have a full screen background.
Or i can use bigger image - multiplied for example with 1.18 - as in article send by Develephant - but i want to know if it’s a known bug - to save my time and energy ( and yours too :slight_smile:

Best regards
Radu [import]uid: 157691 topic_id: 35212 reply_id: 140203[/import]

#10

Does it work if you do this?

[lua]background = display.newImageRect( “background.png”, 1280 , 800 )

…

group:insert( background )[/lua] [import]uid: 202223 topic_id: 35212 reply_id: 139989[/import]

#11

What device are you running as? Screens have different aspect ratios and since you are using letterBox scaling, Corona will honor the shape of the image (it’s aspect ratio).

1280/800 is a 1.6:1 ratio, which is the right shape for a Kindle Fire or so. If you’re using an iPhone5 or a Galaxy III or a Droid screen, those screen’s ratios are like 1.77:1 and your image will have black bars on either side.

You can try to change the scaling from letterBox to zoomStretch in your config.lua, but this will potentially stretch/compress circles into ovals and squares into rectangles.

The normal strategy that many people employee would be to use an image larger than your target dimensions. Consider making your background 1416x800 and having the screen “bleed” off the edges on devices closer to the 1280x800 size.
[import]uid: 199310 topic_id: 35212 reply_id: 140003[/import]

#12

I already tried, thank you. It behaves the same. [import]uid: 157691 topic_id: 35212 reply_id: 140040[/import]

#13

I tried first in Corona Simulator.
If “View As” is Galaxy Tab or Galaxy S3 - the black horizontal margins appear. If I set View As to iPad Retina or iPhone - the things are ok and the black border disappears.
I also tried on Samsung Galaxy Tab2 ( 1280 x 800 ) - and the behaviour is identical with Simulator ( black margins appear )
If I change scaling type to zoomStretch it works ok , no black margin - but clear it’s not a good workarround.
But…if tablet has 1280 x 800 resolution…if in config.lua I wrote the same resolution and finally - the image has the same resolution - why is not normally displayed in full screen?
I want to use a listview widget - and these black margins, especially left ones- show very ugly.
I test with a larger image and I set - for example
background.x, background.y = -50, -50
It looks ok visually, but it’s not very comfortable to enforce that.

Do you have other ideea / sugestions where maybe I made mistake?

PS: I tried with or without display.setStatusBar( display.HiddenStatusBar ) - It seems has no effect
[import]uid: 157691 topic_id: 35212 reply_id: 140042[/import]

#14

Anyone has any ideas / suggestions?
I can not believe that others did not kicked with this problem! [import]uid: 157691 topic_id: 35212 reply_id: 140116[/import]

#15

Read this blog post:

http://www.coronalabs.com/blog/2012/12/04/the-ultimate-config-lua-file/

You may not need to deal with the dynamic sizing, but it graphically explains the problem and talks about how to make your backgrounds “bleed” to fill space. Take some time to try and digest the post to understand how these ratios work.

[import]uid: 199310 topic_id: 35212 reply_id: 140126[/import]

#16

I ran across the same issue when I started, but I really studied the page Rob Miracle pointed out and this one http://www.coronalabs.com/blog/2010/11/20/content-scaling-made-easy/ – search for the The “magic recipe” on that page.

Though it would seem to make sense the way you have it, you’ll need to follow the Corona guidelines for all this scaling “magic” to work properly.

Good luck.

Cheers. [import]uid: 202223 topic_id: 35212 reply_id: 140140[/import]

#17

Hello again,

I read carefully both articles ( thank you for them) - especially that Rob recommended, because is more complex and not so “magician” style like that recommended by Develephant. I bookmarked it and when I will work with dynamic scaling I will use these information.

But…both of them refer to scaling, diferent devices dimension with different images loading etc.
This is not the problem I told you.

I have a fix resolution: 1280 x 800 defined in config.lua and real life in tablet, an image with 1280x800 pixels and I use display.newImageRect( group, “background.png”, 1280 , 800) !
Nothing scaling, nothing to resize - only show the image as background.

Of course - there are a lot of possible workarrounds - if it is a real bug!
I can define in config.lua not 1280 - but 1400 width - and i will have a full screen background.
Or i can use bigger image - multiplied for example with 1.18 - as in article send by Develephant - but i want to know if it’s a known bug - to save my time and energy ( and yours too :slight_smile:

Best regards
Radu [import]uid: 157691 topic_id: 35212 reply_id: 140203[/import]

#18

Hi All,

Rob, Develephant - you was right - my misunderstanding came from the fact that I said no scalling, but in fact when i put"letterbox" in config.lua I scaled images.
Thanks for previous explanations

I have read several times articles about scaling dynamic, I understand better now and I will use them, but still have two additional questions

* If the main target are tablet devices with 1280x800 px - I have to use 1140 x720 basis, but I also want the application work fine with dynamic resolution to 800 x 480 and 2560 x 1600 for example.
When upload images is it correct to use newImageRect (“image” , 1280,800)?

* I am not yet very clear how to do if I have partial images - not all background.
If I have images created with different sizes, but not as full screen, how Corona will decide which resolution to choose? It is possible to fit in tablet screen resolution more element image resolutions.

Thank you very much,
Radu [import]uid: 157691 topic_id: 35212 reply_id: 141027[/import]

#19

This is where your config.lua comes into play. Most people will base their game scale based on the small image, like 800x400 and you would name your assets like:

background.jpg
avatar.png
zombie.png
playbutton.png

etc. Your background.jpg would be 800x400, but your playbutton.png might be 64x48. Then you would need to provide larger assets by putting a suffix on the filename. The normal “standard” is to use @2x and @4x, so you would provide:

background.jpg 800x480
background@2x.jpg 1280x800
background@4x.jpg 2560x1600

In your config.lua you would have a block of code that looks like:

 width = 480,  
 height = 800,  
 scale = "letterBox",  
 imageSuffix =   
 {  
 ["@2x"] = 1.5,  
 ["@4x"] = 3.0,  
 },

Any device that’s greater than 1.5x of your base, in this case 480 * 1.5 = 720. Your 1280x800 device is greater than 1.5x, but less than 3x, so Corona goes and grabs the @2x assets and scales them to the size of your device. If you’re on a big device with greater than 1440px wide, then it will grab your @4x assets.

But you want to scale your images to the middle sized devices, you have to approach your config.lua differently and do something like:

 width = 800,  
 height = 1280,  
 scale = "letterBox",  
 imageSuffix =   
 {  
 ["@0\_5x"] = 0.1,  
 ["@2x"] = 1.8,  
 },

You can make up your own suffix and could do @small and @large if that made better sense to you. In the example above, if the device is smaller than me use images with the @0_5x images. If it’s 1440 or larger (in this case, the math worked out to 1.8x) to load the larger assets.

[import]uid: 199310 topic_id: 35212 reply_id: 141127[/import]

#20

Thank you very much, Rob!
[import]uid: 157691 topic_id: 35212 reply_id: 141147[/import]