letterbox bug?

[km_kennethmundt]

Hi guys,

I’m new with Corona and trying to create my first game. A 2d scroller. However, I’m experiencing something weird with scale set to letterbox.

If I set the scale to letterbox in the config file, the left part of the screen will glitch ( .5 centimeters of the screen goes black for a split-second) everytime the scrolling image resets its position. This happens when the app is tested on a real device. The simulator will show the intended result. I have tested on three different android devices.

If the scale is set to zoomEven, the app works just fine in both simulator and on a real device.

Config file looks like this atm.:

application =

{

    content =

    {

        width = 320,

        height = 480,

        scale = “zoomEven”, (letterbox will mess it up)

        fps = 30,

        antialias = false,

        xAlign = “center”,

        yAlign = “center”,

        imageSuffix = 

        {

            ["@2"] = 2

        }

    }

}

Am I missing something important or is this a bug or???

Regards

Kenneth

P.s. I use 2 images to create the scrolling effect.

[bjsorrentino]

Hi @km_kennethmundt,

I don’t see any issues in your config, so we’ll probably need to see how you’re creating these images and how you’re cycling them on positional reset. Remember to please surround your code with “lua” tags for formatting clarity:

[lua] ... [/lua]

Thanks,

Brent

[km_kennethmundt]

Hi Brent,

I have used the code from the Corona JungleScene example project.

The function to cycle photos

[lua]

local tPrevious = system.getTimer()

local function levelScroller(event)

local tDelta = event.time - tPrevious

tPrevious = event.time

local xOffset = ( 0.2 * tDelta )

mountains.x = mountains.x - xOffset

mountains2.x = mountains2.x - xOffset

if (mountains.x + mountains.contentWidth) < 0 then

    mountains:translate( 889 * 2, 0)

end

    if (mountains2.x + mountains2.contentWidth) < 0 then

        mountains2:translate( 889 * 2, 0)

    end

end

[/lua]

Images are created like this:

[lua]

local mountains = display.newImage( “images/mountains_small.png” )

mountains.anchorX = 0

mountains.x = 0

mountains.y = centerY

local mountains2 = display.newImage( “images/mountains_small.png” )

mountains2.anchorX = 0

mountains2.x = 889

mountains2.y = centerY

[/lua]

And a runtime listener.

[lua]

Runtime:addEventListener( “enterFrame”, levelScroller )

[/lua]

I have also played around with creating the images as imageRects. Same result.

Using both the example code and the code to cycle images from the flappy bat tutorial, I can replicate the error, simply by changing the scale in the config file from zoomEven to letterbox.

If I can upload videos, I will be happy to do so. 

/Kenneth

[bjsorrentino]

Hi Kenneth,

Which device are you testing this on? And yes, can you please upload a video showing what’s going on? This would help me understand the issue better.

Thanks,

Brent

[km_kennethmundt]

I have tested on a Samsung Galaxy S2, a brand new LG G3 and a Sony Xperia Z2.

All devices show the exact same result.

I will make video or other visual presentation. Please give me a day or two.

Thank you very much for your help.

/Kenneth

[km_kennethmundt]

Okay Brent,

I’ve made two videos.

1. Corona sample project: JungleScene. Only modification I have made is changing scale in the config file from “zoomEven” to “letterbox”.

2. My super awesome sample mountain graphics using the exact same method to scroll images endlessly as the corona sample project (Please note that I have also tested this with another way of scrolling endlessly - Flappy bat tutorial).

Both videos show the unintended “blink” when the image resets its position.

If you build the jungleScene sample code for Android on one of your own test devices, there’s no doubt in my mind that you can replicate the error.

[km_kennethmundt]

Hmm… 1.95MB total is not enough to upload both videos.

Once you’ve replied and seen the first video, I can upload the next.

/Kenneth

[bjsorrentino]

Hi Kenneth,

After looking at the video, this simply appears to be the one object being swapped and repositioned, and in that one time step, it appears to “flicker” but this is just because the image has been moved back to the right side. You can still use “letterbox” but the best solution would be to make the swap occur 20-40 pixels later, so when the swap occurs, the entire image is off the screen and the user won’t notice it being swapped. At the same time, it should be repositioned 20-40 pixels further to the right, so that when it gets put in its new position, the user doesn’t notice it happening.

When I say “20-40” that is not a strict rule, but rather an approximate width (in pixels) of the letterbox bars which are created by using letterbox mode. These values may be lower, and may be higher. You can determine the actual width of the letterbox bars with the following calculation and test on various skins in the Simulator. When you figure out a good maximum letterbox width (again, this could vary depending on the device aspect ratio), I suggest you still go 5-10 pixels more than that, so that you can be 100% certain the entire image is fully off the screen before any swapping occurs.

[lua]

print( math.abs(display.screenOriginX), math.abs(display.screenOriginY) )

[/lua]

Hope this helps,

Brent

[bjsorrentino]

Hi @km_kennethmundt,

I don’t see any issues in your config, so we’ll probably need to see how you’re creating these images and how you’re cycling them on positional reset. Remember to please surround your code with “lua” tags for formatting clarity:

[lua] ... [/lua]

Thanks,

Brent

[km_kennethmundt]

Hi Brent,

I have used the code from the Corona JungleScene example project.

The function to cycle photos

[lua]

local tPrevious = system.getTimer()

local function levelScroller(event)

local tDelta = event.time - tPrevious

tPrevious = event.time

local xOffset = ( 0.2 * tDelta )

mountains.x = mountains.x - xOffset

mountains2.x = mountains2.x - xOffset

if (mountains.x + mountains.contentWidth) < 0 then

    mountains:translate( 889 * 2, 0)

end

    if (mountains2.x + mountains2.contentWidth) < 0 then

        mountains2:translate( 889 * 2, 0)

    end

end

[/lua]

Images are created like this:

[lua]

local mountains = display.newImage( “images/mountains_small.png” )

mountains.anchorX = 0

mountains.x = 0

mountains.y = centerY

local mountains2 = display.newImage( “images/mountains_small.png” )

mountains2.anchorX = 0

mountains2.x = 889

mountains2.y = centerY

[/lua]

And a runtime listener.

[lua]

Runtime:addEventListener( “enterFrame”, levelScroller )

[/lua]

I have also played around with creating the images as imageRects. Same result.

Using both the example code and the code to cycle images from the flappy bat tutorial, I can replicate the error, simply by changing the scale in the config file from zoomEven to letterbox.

If I can upload videos, I will be happy to do so. 

/Kenneth

[bjsorrentino]

Hi Kenneth,

Which device are you testing this on? And yes, can you please upload a video showing what’s going on? This would help me understand the issue better.

Thanks,

Brent

[km_kennethmundt]

I have tested on a Samsung Galaxy S2, a brand new LG G3 and a Sony Xperia Z2.

All devices show the exact same result.

I will make video or other visual presentation. Please give me a day or two.

Thank you very much for your help.

/Kenneth

[km_kennethmundt]

Okay Brent,

I’ve made two videos.

1. Corona sample project: JungleScene. Only modification I have made is changing scale in the config file from “zoomEven” to “letterbox”.

2. My super awesome sample mountain graphics using the exact same method to scroll images endlessly as the corona sample project (Please note that I have also tested this with another way of scrolling endlessly - Flappy bat tutorial).

Both videos show the unintended “blink” when the image resets its position.

If you build the jungleScene sample code for Android on one of your own test devices, there’s no doubt in my mind that you can replicate the error.

[km_kennethmundt]

Hmm… 1.95MB total is not enough to upload both videos.

Once you’ve replied and seen the first video, I can upload the next.

/Kenneth

[bjsorrentino]

Hi Kenneth,

After looking at the video, this simply appears to be the one object being swapped and repositioned, and in that one time step, it appears to “flicker” but this is just because the image has been moved back to the right side. You can still use “letterbox” but the best solution would be to make the swap occur 20-40 pixels later, so when the swap occurs, the entire image is off the screen and the user won’t notice it being swapped. At the same time, it should be repositioned 20-40 pixels further to the right, so that when it gets put in its new position, the user doesn’t notice it happening.

When I say “20-40” that is not a strict rule, but rather an approximate width (in pixels) of the letterbox bars which are created by using letterbox mode. These values may be lower, and may be higher. You can determine the actual width of the letterbox bars with the following calculation and test on various skins in the Simulator. When you figure out a good maximum letterbox width (again, this could vary depending on the device aspect ratio), I suggest you still go 5-10 pixels more than that, so that you can be 100% certain the entire image is fully off the screen before any swapping occurs.

[lua]

print( math.abs(display.screenOriginX), math.abs(display.screenOriginY) )

[/lua]

Hope this helps,

Brent