[RESOLVED] How do draw a rectangle that would cover the all screen?

Solar2D General Questions/Discussion
#1

Hello guys.

This maybe a stupid question but I am having issue with it so I am asking it. How do draw a rectangle that would cover the all screen no matter what iOS device? (ie: iPhone 3/4/4s/5 and ipad1/2/3)

Here my config.lua which works great on all the devices (if that makes a difference to rectangle issue)

[lua]application =
{
content =
{
width = 320,
height = 480,
scale = “letterbox”,
antialias = false,

audioPlayFrequency = 44100,
fps = 30,
imageSuffix =
{

["@2x"] = 2, – for iPhone, iPod touch, iPad1, and iPad2
["@4x"] = 4, – for iPad 3

},
},
}[/lua]

I tried this:
local myRectangle = display.newRect(0, 0,display.contentWidth,display.contentHeight)
but it does not seems to cover the all screen with devices like iPad or iPhone 5. I am afraid it has to do with content scaling but not sure what to use a parameters which could cover the all screen for all devices. I really would to keep my config.lua as it is above since it seems to work great on all devices in term of the positioning of the different display objects on the screen.

My guess I could also simply use numerical value of the ipad3 to set my rectangle width and height. That could cover all known devices. I just think it will be overkill.

Any suggestions?

Thanks!

Mo
[import]uid: 100814 topic_id: 32752 reply_id: 332752[/import]

#2

Given that you want to keep that config.lua, then you can’t use display.contentWidth and display.contentHeight since they are going to return 320 and 480.

What I would do is this:

  
background = display.newRect(0,0,570,360)  
background.x = display.contentWidth / 2  
background.y = display.contentHeighth / 2

The 570 is wide enough to cover the 16:9 devices (when scaled 320px high) and on the narrow devices like the iPad and the 480px is made to fit in the box, you need the 360px to fill the other edges. [import]uid: 19626 topic_id: 32752 reply_id: 130246[/import]

#3

WOW! Rob, you are a genius! It works beautifully on all devices (at least on the simulator) So that is exactly what I was looking for and spend so much time trying to figure out why my way did not work. Now I need to take time to figure why your way works so well?!

THANKS Rob!

Mo [import]uid: 100814 topic_id: 32752 reply_id: 130249[/import]

#4

Given that you want to keep that config.lua, then you can’t use display.contentWidth and display.contentHeight since they are going to return 320 and 480.

What I would do is this:

  
background = display.newRect(0,0,570,360)  
background.x = display.contentWidth / 2  
background.y = display.contentHeighth / 2

The 570 is wide enough to cover the 16:9 devices (when scaled 320px high) and on the narrow devices like the iPad and the 480px is made to fit in the box, you need the 360px to fill the other edges. [import]uid: 19626 topic_id: 32752 reply_id: 130246[/import]

#5

WOW! Rob, you are a genius! It works beautifully on all devices (at least on the simulator) So that is exactly what I was looking for and spend so much time trying to figure out why my way did not work. Now I need to take time to figure why your way works so well?!

THANKS Rob!

Mo [import]uid: 100814 topic_id: 32752 reply_id: 130249[/import]

#6

If you are just filling that background rectangle with a color, you could also do this:
[lua]background = display.newRect(0,0,display.pixelWidth,display.pixelHeight)[/lua]

display.pixelWidth and display.pixelHeight were introduced in a daily build when the iPhone 5 was announced so that you could easily get the dimensions of the device screen and fill it. [import]uid: 17827 topic_id: 32752 reply_id: 130252[/import]

#7

Hello,

I am fairly new to Corona and would like to add related question. I am trying to load pictures from Web and display as images in the Corona app on iPhone simulator. Logic is fairly standard, to just display image of the right size to cover entire screen, or at least to have pic width to match screen width. I am downloading pictures that say 320 x 480, but when I run my app with them, it takes up 20-30% of the screen. I tried to load bigger pictures, but they display as small images. What am I doing incorrectly - I would appreciate some guidance from experts.

Thanks
Leonard [import]uid: 190416 topic_id: 32752 reply_id: 130253[/import]

#8

If you are just filling that background rectangle with a color, you could also do this:
[lua]background = display.newRect(0,0,display.pixelWidth,display.pixelHeight)[/lua]

display.pixelWidth and display.pixelHeight were introduced in a daily build when the iPhone 5 was announced so that you could easily get the dimensions of the device screen and fill it. [import]uid: 17827 topic_id: 32752 reply_id: 130252[/import]

#9

Hello,

I am fairly new to Corona and would like to add related question. I am trying to load pictures from Web and display as images in the Corona app on iPhone simulator. Logic is fairly standard, to just display image of the right size to cover entire screen, or at least to have pic width to match screen width. I am downloading pictures that say 320 x 480, but when I run my app with them, it takes up 20-30% of the screen. I tried to load bigger pictures, but they display as small images. What am I doing incorrectly - I would appreciate some guidance from experts.

Thanks
Leonard [import]uid: 190416 topic_id: 32752 reply_id: 130253[/import]

#10

@thegDog: Fantastic! That’s worked too. Thanks a lot

@Voland: you may have more luck setting up a new thread since your issue maybe related to the way you are loading the image from the web. Not sure it is has to do with the config.lua file like my issue but I could wrong.

Mo [import]uid: 100814 topic_id: 32752 reply_id: 130258[/import]

#11

@thegDog: Fantastic! That’s worked too. Thanks a lot

@Voland: you may have more luck setting up a new thread since your issue maybe related to the way you are loading the image from the web. Not sure it is has to do with the config.lua file like my issue but I could wrong.

Mo [import]uid: 100814 topic_id: 32752 reply_id: 130258[/import]

#12

@Voland, we would need to see your config.lua file and a chunk of your code where you’re loading the image.

I could very easily explain why my trick works (not really my trick, google “corona magic recipe”) if I had you in a room with me and had a marker board. It would take hours upon hours to put together screen shots and draw everything out.

@thedog’s example is really good if you just want a solid full screen rectangle, but what if you want an image in the background that will cover all your bases? Then you have to use a “bleed” technique to make this happen. I’ll try to explain this with words.

First lets assume that your config.lua is just 320x480 and letterBox, a very common format. On an iPhone and iPod - pre iPhone5/tall iPod, this fits perfectly and nothing else is needed. Lets go to the iPhone 5 or any 16:9 Android device. When using a 320x480 scale, the iPhone 5’s screen becomes 320x568. We have 88 more pixels in width to work with. Draw your background at 320x480 and you end up with black letterbox bars on either side that are 44 px wide. To cover that area, you need an image that is 568 px wide. Those 44px on each side are outside the defined width and height. In other words if you draw something at 0,0 it will be 44 px right of the left edge of the screen (assuming landscape here). If you draw something at display.contentWidth, it will be 44 px short of the right side. This is why Corona Labs recommends adding a conditional check in your config.lua to make it 320x568 for those devices.

Okay, introduce an iPad. At this scale and with letterboxing, Corona is going to make sure the 480px wide fits into the screen which will make black bars appear at the top and bottom. Because at 480px wide, the screen’s vertical space is 360px high (480 / 1.33333 … the aspect ratio of the screen) = 360px. Now since you’re only using 320px in your config.lua, you will have letterbox bars at the top and bottom of 40 total pixels (360-320) or 20 at the top and 20 at the bottom.

If you load an image that is 568x360 (or 1136x720 etc.) like:

bg = display.newImageRect("bgimage.jpg",568,360)

On the iPad, it will fill vertically (remember this is a Landscape example) but 88 pix on the sides are going to “bleed” off screen. That is 44px on the left and 44px on the right will be off screen. Switch to an iPhone 5 and you get the full width but some of the top and bottom are going to be off screen. In regular iPhone mode, you’re going to loose some off screen both directions.

This is okay as long as you don’t put anything critical in the background in these bleed areas.

Why 570 and not 568? First 570 is easier to remember, but it has to do with Android devices. 16:9 is like 1.777777778 to one. If you multiple 320 by that, you get 568.88889 or realistically 569. Many android devices are a touch bigger some are smaller but 570 seems to be the safe size to get everything. [import]uid: 19626 topic_id: 32752 reply_id: 130301[/import]

#13

@Voland, we would need to see your config.lua file and a chunk of your code where you’re loading the image.

I could very easily explain why my trick works (not really my trick, google “corona magic recipe”) if I had you in a room with me and had a marker board. It would take hours upon hours to put together screen shots and draw everything out.

@thedog’s example is really good if you just want a solid full screen rectangle, but what if you want an image in the background that will cover all your bases? Then you have to use a “bleed” technique to make this happen. I’ll try to explain this with words.

First lets assume that your config.lua is just 320x480 and letterBox, a very common format. On an iPhone and iPod - pre iPhone5/tall iPod, this fits perfectly and nothing else is needed. Lets go to the iPhone 5 or any 16:9 Android device. When using a 320x480 scale, the iPhone 5’s screen becomes 320x568. We have 88 more pixels in width to work with. Draw your background at 320x480 and you end up with black letterbox bars on either side that are 44 px wide. To cover that area, you need an image that is 568 px wide. Those 44px on each side are outside the defined width and height. In other words if you draw something at 0,0 it will be 44 px right of the left edge of the screen (assuming landscape here). If you draw something at display.contentWidth, it will be 44 px short of the right side. This is why Corona Labs recommends adding a conditional check in your config.lua to make it 320x568 for those devices.

Okay, introduce an iPad. At this scale and with letterboxing, Corona is going to make sure the 480px wide fits into the screen which will make black bars appear at the top and bottom. Because at 480px wide, the screen’s vertical space is 360px high (480 / 1.33333 … the aspect ratio of the screen) = 360px. Now since you’re only using 320px in your config.lua, you will have letterbox bars at the top and bottom of 40 total pixels (360-320) or 20 at the top and 20 at the bottom.

If you load an image that is 568x360 (or 1136x720 etc.) like:

bg = display.newImageRect("bgimage.jpg",568,360)

On the iPad, it will fill vertically (remember this is a Landscape example) but 88 pix on the sides are going to “bleed” off screen. That is 44px on the left and 44px on the right will be off screen. Switch to an iPhone 5 and you get the full width but some of the top and bottom are going to be off screen. In regular iPhone mode, you’re going to loose some off screen both directions.

This is okay as long as you don’t put anything critical in the background in these bleed areas.

Why 570 and not 568? First 570 is easier to remember, but it has to do with Android devices. 16:9 is like 1.777777778 to one. If you multiple 320 by that, you get 568.88889 or realistically 569. Many android devices are a touch bigger some are smaller but 570 seems to be the safe size to get everything. [import]uid: 19626 topic_id: 32752 reply_id: 130301[/import]

#14

Gentlemen,

Thanks for your insights. I worked on it some more and it seems to show correct size now. Config.lua was in fact incorrect - I had higher numbers than iPhone screen requires. I learn every day!

Thanks!!!
Voland [import]uid: 190416 topic_id: 32752 reply_id: 130377[/import]

#15

Gentlemen,

Thanks for your insights. I worked on it some more and it seems to show correct size now. Config.lua was in fact incorrect - I had higher numbers than iPhone screen requires. I learn every day!

Thanks!!!
Voland [import]uid: 190416 topic_id: 32752 reply_id: 130377[/import]

#16

+1 for Rob! Fantastic explanation!!!

THANKS.

Mo [import]uid: 100814 topic_id: 32752 reply_id: 130380[/import]

#17

+1 for Rob! Fantastic explanation!!!

THANKS.

Mo [import]uid: 100814 topic_id: 32752 reply_id: 130380[/import]

#18

@ LairdGames
if you dont need any interaction with the background object you could just do this

display.setDefault( “background”, r, g, b, alpha ) [import]uid: 7911 topic_id: 32752 reply_id: 130385[/import]

#19

@ LairdGames
if you dont need any interaction with the background object you could just do this

display.setDefault( “background”, r, g, b, alpha ) [import]uid: 7911 topic_id: 32752 reply_id: 130385[/import]

#20

Thanks jstrahan! That’s cool to know. Unfortuately the rectangle needs a touch event so I do have to interact with it.

In any event thank so much guys. You have been a great help.

I am going to mark this post a solved.

Thanks.

Mo [import]uid: 100814 topic_id: 32752 reply_id: 130407[/import]