Composer transition bug? (slideDown & slideUp)

Solar2D General Questions/Discussion
#1

Hey guys,

I’m trying to make an application which needs a lot of animations between scenes. I’d like to use slideDown now, but for some odd reason, it’s not giving me the desired result. A weird white stroke is dividing the two scenes when the slide down transition is happening. It only happens when I use “slideDown” and “slideUp”, “slideLeft” for example works perfectly fine. All my elements are added to the scenegroup, so I don’t think that is an issue. Anyone else having the same issue?

A screenshot of this issue is attached to this topic!

Kind regards

Bram

#2

Please give us (those who are reading and may be able to help) a micro project with: build.settings, config.lua, main.lua, and two scenes so we can see this actually happening and help debug it.

I’m asking for this for three reasons:

  1. I want to help, but I don’t want to write a sample to debug it.

  2. You may find the cause of this simply by making a basic example to demonstrate the issue, thus self-solving.

  3. If this ends up being a bug, you’ll need to provide the same sample anyways to get it fixed.

Cheers,

Ed

#3

Hi RoamingGamer,

Thanks for the fast reply! Here is the code for a first scene:

-------------------------------------------------------------------------------- -- -- signupSkillsAddition.lua -- -------------------------------------------------------------------------------- local composer = require( "composer" ) local scene = composer.newScene() -- Global file variables local background local nextTxt local nextArrow -------------------------------------------------------------------------------- -- Global file functions local function backgroundHandler(event) native.setKeyboardFocus(nil) end local function handleAddition(event) end local function nextStepHandler(event) composer.gotoScene("successfulSignUp", "slideDown", 300) end -------------------------------------------------------------------------------- -- create() function scene:create( event ) local sceneGroup = self.view background = display.newRect(centerX, centerY, actualW, actualH) background.fill.effect = "generator.radialGradient" background.fill.effect.color1 = {239/255, 239/255, 239/255} background.fill.effect.color2 = {153/255, 153/255, 153/255} background.fill.effect.center\_and\_radiuses = { 0.5, 0.4, 0.15, 0.75 } background.fill.effect.aspectRatio = 0.8 background:addEventListener("tap", backgroundHandler) sceneGroup:insert(background) nextArrow = display.newImage("Assets/Navigation/ArrowDown.png", centerX, centerY \* 1.95) nextArrow:scale(0.05, 0.05) nextArrow:addEventListener("tap", nextStepHandler) nextTxt = display.newText("Next Step", centerX, actualH \* 0.875, fonts.FireSansThin, 20) sceneGroup:insert(nextArrow) sceneGroup:insert(nextTxt) end -- show() function scene:show( event ) local sceneGroup = self.view local phase = event.phase if ( phase == "will" ) then elseif ( phase == "did" ) then -- Code here runs when the scene is entirely on screen end end -- hide() function scene:hide( event ) local sceneGroup = self.view local phase = event.phase if ( phase == "will" ) then elseif ( phase == "did" ) then -- Code here runs immediately after the scene goes entirely off screen end end -- destroy() function scene:destroy( event ) local sceneGroup = self.view -- Code here runs prior to the removal of scene's view end -- ----------------------------------------------------------------------------- -- Scene event function listeners -- ----------------------------------------------------------------------------- scene:addEventListener( "create", scene ) scene:addEventListener( "show", scene ) scene:addEventListener( "hide", scene ) scene:addEventListener( "destroy", scene ) -- ----------------------------------------------------------------------------- return scene

And here is the code for the scene I want to transition to:

-------------------------------------------------------------------------------- -- -- successfulSignup.lua -- -------------------------------------------------------------------------------- local composer = require( "composer" ) local scene = composer.newScene() -- Global file variables local background -------------------------------------------------------------------------------- -- Global file functions local function signUpHandler(event) if (event.phase == "ended") then composer.gotoScene("signUpForm", "slideLeft", 250) end end -------------------------------------------------------------------------------- -- create() function scene:create( event ) local sceneGroup = self.view background = display.newRect(centerX, centerY, actualW, actualH) background.fill.effect = "generator.radialGradient" background.fill.effect.color1 = {247/255, 194/255, 38/255} background.fill.effect.color2 = {240/255, 152/255, 35/255} background.fill.effect.center\_and\_radiuses = { 0.5, 0.4, 0.15, 0.75 } background.fill.effect.aspectRatio = 0.4 sceneGroup:insert(background) end -- show() function scene:show( event ) local sceneGroup = self.view local phase = event.phase if ( phase == "will" ) then -- Code here runs when the scene is still off screen (but is about to come on screen) elseif ( phase == "did" ) then -- Code here runs when the scene is entirely on screen transition.to(check, {time = 700, xScale = 0.1, yScale = 0.1, transition = easing.outBack}) end end -- hide() function scene:hide( event ) local sceneGroup = self.view local phase = event.phase if ( phase == "will" ) then -- Code here runs when the scene is on screen (but is about to go off screen) elseif ( phase == "did" ) then -- Code here runs immediately after the scene goes entirely off screen end end -- destroy() function scene:destroy( event ) local sceneGroup = self.view -- Code here runs prior to the removal of scene's view end -- ----------------------------------------------------------------------------- -- Scene event function listeners -- ----------------------------------------------------------------------------- scene:addEventListener( "create", scene ) scene:addEventListener( "show", scene ) scene:addEventListener( "hide", scene ) scene:addEventListener( "destroy", scene ) -- ----------------------------------------------------------------------------- return scene

The build settings and config files have not been changed yet except that the fps has been bumped from 30 to 60 :slight_smile:

#4

Sorry, I meant: Please create a project and post a link to it on dropbox (or other well known free download service). It should run out-of-the-box. That way I know I’m testing the same thing your are.

Thanks,
Ed

#5

Woops, sorry Ed. Misunderstood that. Here is the link to a simple project showcasing the bug: https://1drv.ms/u/s!Aj56XELpTvMNhL0Eh-GbpltFWEODzw

#6

I’ve noticed that the bug does not appear with regular “setFillColor” backgrounds. But things get kind off screwed up when adding fill effects like radial gradients to the background!

#7

I finally looked into this and you are right. This is a side-effect of the radial fill you’re using.  I don’t think it is actually a bug.

It is simply two features being used together that don’t combine well.

The problem seems to go away for solid fills. I would suggest using an image background instead and see if that works. i.e. Create an image with the radial fill in an art program and use it as your background.

Note: This also happens for left and right slides too.

I modified your code to demonstrate that solid fills don’t have this issue.

http://github.com/roaminggamer/RG_FreeStuff/raw/master/AskEd/2016/12/transitionBug.zip

#8

Hi Ed,
Is there really no way to fix this within Corona? I’d like to make as much of the assets as possible in Corona :slight_smile:
I need a lot of radial backgrounds for this project, so making them outside of Corona would only bump the app size :confused:

#9

You could create the background, save it as a snapshot, remove and then load it back in as an image. You should be able to do this fast enough that the user won’t notice the difference.

#10

Hi Nick,

I’m uncertain on how to do this. I tried doing this:

 background = display.newRect(centerX, centerY, actualW, actualH) background.fill.effect = "generator.radialGradient" background.fill.effect.color1 = {239/255, 239/255, 239/255} background.fill.effect.color2 = {153/255, 153/255, 153/255} background.fill.effect.center\_and\_radiuses = { 0.5, 0.4, 0.15, 0.75 } background.fill.effect.aspectRatio = 0.8 snapshotGroup:insert(background) snapshotGroup:addEventListener("tap", backgroundHandler) --display.remove(background) sceneGroup:insert(snapshot)

after declaring the snapshot and snapshot group, but the snapshot only seemed to capture the top right part of the screen for some reason?

This is how the snapshot is declared:

local snapshot = display.newSnapshot(actualW, actualH) local snapshotGroup = snapshot.group
#11

UPDATE:

so I tried to take a screenCap when the scene was shown and the background etc after it but that didn’t work either! Still the same white bar between transitions:

-- show() function scene:show( event ) local sceneGroup = self.view local phase = event.phase if ( phase == "will" ) then elseif ( phase == "did" ) then local screenCap = display.captureScreen() print("screenshotted") screenCap.x, screenCap.y = centerX, centerY sceneGroup:insert(screenCap) display.remove(background) display.remove(mainLogo) display.remove(leftTitleRect) display.remove(rightTitleRect) display.remove(titleTxt) display.remove(stepTxt) display.remove(addGroup) end end
#12

A couple of ideas - try making the background rect slightly larger than the screen, or you could try using display.save or display.captureScreen to save the background, and then load it back using newImageRect.

#13

Hi Nick, I tried making the background slightly bigger than the screen, but that just made the unwanted stroke bigger. I was also thinking about capturing the screen, but how would that work? Because if I capture my screen, everything will be captured. So also other elements than my background or am I wrong on this one (and please tell me I’m wrong)…

#14

display.save can save a display group. So create the background and insert into a special group and then use display.save.

Or you could display.captureScreen before anythong else has been drawn.

#15

display.save can save a display group. So create the background and insert into a special group and then use display.save.

Or you could display.captureScreen before anythong else has been drawn.

#16

The problem is still there when I use display.capture() (I used that to save it as an object instead of display.save). And I really can’t just transition the background alone, take a screencap and replace it afterwards with all the elements. That’d look to unprofessional for this project!

I’m really refusing to make something as easy as a radial background outside of Corona…

Please give me one more option, I’m desperate :frowning:

#17

Hmm, yes - I agree really we shouldn’t having be trying to work round this, it should just work…

You can create the background, save that display group, remove the background, load the saved picture all in one go. The user won’t see anything as the screen doesn’t update until all the code has run.

But I wonder if the white border is being saved in the captured image…

#18

Hi Nick, isn’t that what I just tried doing? Doesn’t display.capture save the display group? Or is there another way?

It’s weird because the white stroke only appears when I’m making the transition, it’s not there on creation :s

#19

display.capture saves the display group to an image in memory rather than disk. I’m thinking display.capture might be duplicating whatever weird thing is going on to cause the white stroke, while display.save might avoid that. Just an idea :-/

#20

I tried it Nick, but no luck either :frowning:

CORONA PLEASE FIX THIS! I can get the linear gradient to work but that is not the look I’m going for, so that’s not an option either. Thanks for all the help Nick! But has someone else another idea? Perhaps we can work something out if we put our brains together :smiley: