Storyboard Overlap Bug

With Storyboard using the slide effect to go to the next scene overlaps the previous scene by about 10-20 pixels or so during the transition and then slides off. I mentioned this bug a long time ago (forum link below), but i haven’t heard anything about it since and it is still happening. Any updates on when this may be fixed?

http://developer.coronalabs.com/forum/2012/09/27/storyboard-slide-effect-has-flicker-between-scenes#comment-127359

Hi Joshua,

Could you assemble a simple test case (project) for this and submit it to the bug tracking system? Mentioning bugs in the forum is fine, but to get them in front of the engineers, a bug report is much more valid as it will allow the team to track it and see your code exhibiting the issue.

http://developer.coronalabs.com/content/bug-submission

Thanks,

Brent Sorrentino

Submitted the bug.

Hi Joshua,

Could you assemble a simple test case (project) for this and submit it to the bug tracking system? Mentioning bugs in the forum is fine, but to get them in front of the engineers, a bug report is much more valid as it will allow the team to track it and see your code exhibiting the issue.

http://developer.coronalabs.com/content/bug-submission

Thanks,

Brent Sorrentino

Submitted the bug.

Hello,

I am exeperiencing the same. Has this thing being solved???

The sliding transition is key to my project since I finger-swipe across scenes…

Thank you…

Hi @akak,

The original post is quite old. Can you describe your current issue in detail, and whether you’re using Storyboard or Composer, what your content scaling is set to, and any other info that may be relevant?

Thanks,

Brent

Hi Brent,

basically if I slide to another scene, the objects in the scene i’m leaving squeeze a bit against the border of the screen (/scene) being left and the whole background (including a text field I have there) overlaps a bit over the entering scene.

It’s weird, with three scenes in my project the further to the right relative to the ‘between scenes navigation system’ is being overlapped by the center one and the center one by the left one. Imagine it as three cards laying on a table the one to the left overlaps with its right edge on the center one and the same the center one does with the one on the right (only when transitioning between scenes of course…)

That’s the best I can explain it…

  • I’m using composer

  • the width of the backgounds I’m using it’s not pixel perfect but to fit 570

  • this is my config:

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,
            },
        },
        notification =
        {
            iphone = {
                types = {
                    “badge”, “sound”, “alert”
                }
            }
        }
    }

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,
            },
        },
        notification =
        {
            iphone = {
                types = {
                    “badge”, “sound”, “alert”
                }
            }
        }
    }

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,
            },
        },
        notification =
        {
            iphone = {
                types = {
                    “badge”, “sound”, “alert”
                }
            }
        }
    }
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,
            },
        },
        notification =
        {
            iphone = {
                types = {
                    “badge”, “sound”, “alert”
                }
            }
        }
    }
end
 

let me know…

Thanks for the attention!

To make it more clear, since it’s not very easy to perceive the mechanics of the phenomenon, it somehow seems as the scene which is being left is slower to move offscreen than the entering scene is to move on-screen.

And this prevent from having a smooth and seamless transition as seen on most apps…

The bug was never fixed properly for Storyboard either. Still an issue on both.

Omg, so I have to redesign the whole app? a lot of it was based on that transition effect, can anyone take care of the bug soon???

Hi @akak,

Let me consider this for a bit before you start making widespread code changes. There may be a simple workaround that solves this in the meantime…

Thanks,

Brent

Thanks Brent,

I hope you come up with something 'cause I think I’d have to discharge my project if this transition doesn’t work. And this is my first project to be published… :frowning:

I’ve spent the last little bit looking at @JosuhaNovak919’s filed bug report and looking at the composer code.  If I modify the code from the bug report to slow the transitions down to 1800ms to see things better and changing the backgrounds to be colored (its hard to just watch the white over the arrow issue).   At 800ms, it does look like it’s overlapping. When I slow it down to 1800 the arrow never gets overlaid. 

Also the default transition easing for a slideLeft (that the bug report is using) is an easing.outQuad.  I think this is adding to the issue as well.

You can change the easing using something like this:

composer.effectList.slideLeft.to.transition = easing.linear
composer.effectList.slideLeft.from.transition = easing.linear

And see if that helps.  Since storyboard has been open sourced, that bug report isn’t going to apply to composer.  I would recommend a new bug report be made for Composer.  Though honestly, looking through the composer code, I don’t see anything obvious.  The transitions start at the same time.

Rob

If this can be of any help to anyone who wants to try work this around, @ingemar has offered a very nice piece of code to give the transiton an ios7+  like effect:

http://forums.coronalabs.com/topic/50598-ios-7-style-scene-transitions/

if tweaked properly I get a slideLeft/slidedRight transition with minimum overlapping.

It might also be interesting to use as a tool  to understand what’s not working with the native effect maybe. As a matter of fact, using ingemar’s solution, if I turn down the transition speed the overlapping doesn’t occur at all. Also if I set ‘concurrent’ to false I manage to watch the two scenes move separately and notice that the background of the one leaving goes totally off screen but for a 10/20 pixel vertical strip. May be clues??

I hope this get fixed anyway cause is fundamental for my project to have a perfect sliding transition…

Hello,

I am exeperiencing the same. Has this thing being solved???

The sliding transition is key to my project since I finger-swipe across scenes…

Thank you…

Hi @akak,

The original post is quite old. Can you describe your current issue in detail, and whether you’re using Storyboard or Composer, what your content scaling is set to, and any other info that may be relevant?

Thanks,

Brent

Hi Brent,

basically if I slide to another scene, the objects in the scene i’m leaving squeeze a bit against the border of the screen (/scene) being left and the whole background (including a text field I have there) overlaps a bit over the entering scene.

It’s weird, with three scenes in my project the further to the right relative to the ‘between scenes navigation system’ is being overlapped by the center one and the center one by the left one. Imagine it as three cards laying on a table the one to the left overlaps with its right edge on the center one and the same the center one does with the one on the right (only when transitioning between scenes of course…)

That’s the best I can explain it…

  • I’m using composer

  • the width of the backgounds I’m using it’s not pixel perfect but to fit 570

  • this is my config:

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,
            },
        },
        notification =
        {
            iphone = {
                types = {
                    “badge”, “sound”, “alert”
                }
            }
        }
    }

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,
            },
        },
        notification =
        {
            iphone = {
                types = {
                    “badge”, “sound”, “alert”
                }
            }
        }
    }

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,
            },
        },
        notification =
        {
            iphone = {
                types = {
                    “badge”, “sound”, “alert”
                }
            }
        }
    }
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,
            },
        },
        notification =
        {
            iphone = {
                types = {
                    “badge”, “sound”, “alert”
                }
            }
        }
    }
end
 

let me know…

Thanks for the attention!

To make it more clear, since it’s not very easy to perceive the mechanics of the phenomenon, it somehow seems as the scene which is being left is slower to move offscreen than the entering scene is to move on-screen.

And this prevent from having a smooth and seamless transition as seen on most apps…

The bug was never fixed properly for Storyboard either. Still an issue on both.