HELP!: Black borders in all Nook Devices

lwg-prynce · April 18, 2013, 11:20pm

I have used the ultimate config.lua but when we have tested my app on a Nook device black borders appeared on the right and left side of the screen.

Here’s my config.lua

if ( string.sub( system.getInfo("model"), 1, 4 ) == "iPad" ) then application = { content = { width = 360, height = 480, scale = "letterBox", xAlign = "center", yAlign = "center", imageSuffix = { ["@2x"] = 1.5, ["@4x"] = 3.0, }, }, } elseif ( string.sub( system.getInfo("model"), 1, 2 ) == "iP" and display.pixelHeight \> 960 ) then application = { content = { width = 320, height = 568, scale = "letterBox", xAlign = "center", yAlign = "center", imageSuffix = { ["@2x"] = 1.5, ["@4x"] = 3.0, }, }, } elseif ( string.sub( system.getInfo("model"), 1, 2 ) == "iP" ) then application = { content = { width = 320, height = 480, scale = "letterBox", xAlign = "center", yAlign = "center", imageSuffix = { ["@2x"] = 1.5, ["@4x"] = 3.0, }, }, } elseif ( display.pixelHeight / display.pixelWidth \> 1.72 ) then application = { content = { width = 320, height = 570, scale = "letterBox", xAlign = "center", yAlign = "center", imageSuffix = { ["@2x"] = 1.5, ["@4x"] = 3.0, }, }, } else application = { content = { width = 320, height = 512, scale = "letterBox", xAlign = "center", yAlign = "center", imageSuffix = { ["@2x"] = 1.5, ["@4x"] = 3.0, }, }, } end

Anyone who encountered this and got a solution?

Thanks in advance!

Naomi · April 19, 2013, 12:13am

Hey, @Iwg-prynce, I think the problem you are having is essentially the same problem described here:

http://forums.coronalabs.com/topic/33877-my-app-fits-perfectly-on-all-devices-except-the-ipad/

Your problem should go away by using a background image that covers the area you refer to as “black borders”. On some device, the bleeding/padding/expanded area of the background image (which is meant to cover the black borders) will never appear, but at least this way, you can ensure that the black borders won’t show up on devices that don’t quite conform to the basic aspect ratio you are going for.

Make sure to use the correct width and height for the background when adding it via display.netImageRect (i.e., the properly pixel value that include the padding, and not the smaller pixel value from the pre-padded image.)

Naomi

lwg-prynce · April 19, 2013, 1:37am

Thanks Naomi =D.

This gave me an Idea how to fix the black borders and worked!

Naomi · April 19, 2013, 3:44am

Glad to hear you sorted your issue.

Cheers,

Naomi

lwg-prynce · April 19, 2013, 6:07am

Woah! I thought the problem was solved because the black borders was removed when I have tested it on simulator BUT when I passed the nook version of my app to my boss and tested it on a Nook HD+ device black borders still appeared on the sides.

HD+ should probably use 4x image right? My 4x Image is 1440 x 2280.

because Nook gave me a hard time figuring out what causes this, I have tried to specify _H and _W variables manually. This is how I have done it.

if display.pixelHeight == 1024 then "Color and Tablet" \_H = 1024 \_W = 600 elseif display.pixelHeight == 1440 then "HD" \_H = 1440 \_W = 900 elseif display.pixelHeight == 1920 then "HD+" \_H = 1920 \_W = 1280 end

In this way I am sure the background image would fit perfectly.

and This is how I did the backgroundImage:

local backgroundImage = display.newImageRect("images/titlebg.png", \_W, \_H) backgroundImage:setReferencePoint(display.CenterReferencePoint) backgroundImage.x = display.contentCenterX backgroundImage.y = display.contentCenterY view:insert(backgroundImage)

And this is the output of those codes.

Just click this link please: http://prntscr.com/117hye

Thanks

Naomi · April 19, 2013, 3:36pm

I haven’t looked at Nook recently, so I don’t remember the screen dimensions of Nook devices. But just looking at the screen capture, I can tell you are not giving a proper width and height to the titlebg.png – the titlebg.png must cover bigger area than the device’s screen area, and it looks like you didn’t give enough width for it. Try increasing the value of the width you use for newImageRect. You can compute what minimum width it needs so long as you know the aspect ratio of the Nook device. You need your artwork to be displayed at the same aspect ratio at the very minimum.

Naomi

Naomi · April 19, 2013, 4:24pm

Ah, it occurred to me that Nook HDs might have the same screen dimensions as the Kindle HDs. You might want to confirm if they are the same, and if they are, you may want to view your project with Kindle HD skins as you work on resolving this. (And, sorry if I’m mistaken.)

Naomi

lwg-prynce · April 24, 2013, 12:45am

I have tried using Kindle’s skin on the simulator but the problem was there were black bars appeared so I guess these black bars only appear on actual Nook device?

My titlebg.png has a size of 2280 x 1440

Nook HD+ has a size of 1920 x 1280 right?

My Image rect is:

local backgroundImage = display.newImageRect("images/titlebg.png", 360, 570) backgroundImage:setReferencePoint(display.CenterReferencePoint) backgroundImage.x = display.contentCenterX backgroundImage.y = display.contentCenterY view:insert(backgroundImage)

Now I am wondering how did that black bars appeared XD.

Naomi · April 24, 2013, 3:08am

Odd. I don’t know why you are seeing the black bars either. It sounds like you have large enough image to cover the screen area… Could it have anything to do with some sort of specific setting that you need to specify for Enterprise version? Other than that, I can’t think of any reason why it wouldn’t work for you.

Naomi

Naomi · April 19, 2013, 12:13am

Hey, @Iwg-prynce, I think the problem you are having is essentially the same problem described here:

http://forums.coronalabs.com/topic/33877-my-app-fits-perfectly-on-all-devices-except-the-ipad/

Your problem should go away by using a background image that covers the area you refer to as “black borders”. On some device, the bleeding/padding/expanded area of the background image (which is meant to cover the black borders) will never appear, but at least this way, you can ensure that the black borders won’t show up on devices that don’t quite conform to the basic aspect ratio you are going for.

Make sure to use the correct width and height for the background when adding it via display.netImageRect (i.e., the properly pixel value that include the padding, and not the smaller pixel value from the pre-padded image.)

Naomi

lwg-prynce · April 19, 2013, 1:37am

Thanks Naomi =D.

This gave me an Idea how to fix the black borders and worked!

Naomi · April 19, 2013, 3:44am

Glad to hear you sorted your issue.

Cheers,

Naomi

lwg-prynce · April 19, 2013, 6:07am

Woah! I thought the problem was solved because the black borders was removed when I have tested it on simulator BUT when I passed the nook version of my app to my boss and tested it on a Nook HD+ device black borders still appeared on the sides.

HD+ should probably use 4x image right? My 4x Image is 1440 x 2280.

because Nook gave me a hard time figuring out what causes this, I have tried to specify _H and _W variables manually. This is how I have done it.

if display.pixelHeight == 1024 then "Color and Tablet" \_H = 1024 \_W = 600 elseif display.pixelHeight == 1440 then "HD" \_H = 1440 \_W = 900 elseif display.pixelHeight == 1920 then "HD+" \_H = 1920 \_W = 1280 end

In this way I am sure the background image would fit perfectly.

and This is how I did the backgroundImage:

local backgroundImage = display.newImageRect("images/titlebg.png", \_W, \_H) backgroundImage:setReferencePoint(display.CenterReferencePoint) backgroundImage.x = display.contentCenterX backgroundImage.y = display.contentCenterY view:insert(backgroundImage)

And this is the output of those codes.

Just click this link please: http://prntscr.com/117hye

Thanks

Naomi · April 19, 2013, 3:36pm

I haven’t looked at Nook recently, so I don’t remember the screen dimensions of Nook devices. But just looking at the screen capture, I can tell you are not giving a proper width and height to the titlebg.png – the titlebg.png must cover bigger area than the device’s screen area, and it looks like you didn’t give enough width for it. Try increasing the value of the width you use for newImageRect. You can compute what minimum width it needs so long as you know the aspect ratio of the Nook device. You need your artwork to be displayed at the same aspect ratio at the very minimum.

Naomi

Naomi · April 19, 2013, 4:24pm

Ah, it occurred to me that Nook HDs might have the same screen dimensions as the Kindle HDs. You might want to confirm if they are the same, and if they are, you may want to view your project with Kindle HD skins as you work on resolving this. (And, sorry if I’m mistaken.)

Naomi

lwg-prynce · April 24, 2013, 12:45am

I have tried using Kindle’s skin on the simulator but the problem was there were black bars appeared so I guess these black bars only appear on actual Nook device?

My titlebg.png has a size of 2280 x 1440

Nook HD+ has a size of 1920 x 1280 right?

My Image rect is:

local backgroundImage = display.newImageRect("images/titlebg.png", 360, 570) backgroundImage:setReferencePoint(display.CenterReferencePoint) backgroundImage.x = display.contentCenterX backgroundImage.y = display.contentCenterY view:insert(backgroundImage)

Now I am wondering how did that black bars appeared XD.

Naomi · April 24, 2013, 3:08am

Odd. I don’t know why you are seeing the black bars either. It sounds like you have large enough image to cover the screen area… Could it have anything to do with some sort of specific setting that you need to specify for Enterprise version? Other than that, I can’t think of any reason why it wouldn’t work for you.

Naomi