Jump to content

[TOPIC: topicViewTemplate]
[GLOBAL: userSmallPhoto]
Photo

Composer transition bug? (slideDown & slideUp)
Started by bramvbilsen Dec 25 2016 03:43 PM

- - - - -
23 replies to this topic

Best Answer davebollinger , 28 December 2016 - 07:13 AM

provide a full rgba quad for color

[TOPIC CONTROLS]
This topic has been archived. This means that you cannot reply to this topic.
[/TOPIC CONTROLS]
[modOptionsDropdown]
[/modOptionsDropdown]
[reputationFilter]
[TOPIC: post.html]
#1

bramvbilsen

[GLOBAL: userInfoPane.html]
bramvbilsen
  • Contributor

  • 243 posts
  • Corona SDK

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

Attached Thumbnails

  • Capture.PNG


[TOPIC: post.html]
#2

roaminggamer

[GLOBAL: userInfoPane.html]
roaminggamer
  • Corona Geek

  • 7,587 posts
  • Corona SDK

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

Edited by roaminggamer, 25 December 2016 - 05:22 PM.


[TOPIC: post.html]
#3

bramvbilsen

[GLOBAL: userInfoPane.html]
bramvbilsen
  • Contributor

  • 243 posts
  • Corona SDK

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 :)



[TOPIC: post.html]
#4

roaminggamer

[GLOBAL: userInfoPane.html]
roaminggamer
  • Corona Geek

  • 7,587 posts
  • Corona SDK

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

[TOPIC: post.html]
#5

bramvbilsen

[GLOBAL: userInfoPane.html]
bramvbilsen
  • Contributor

  • 243 posts
  • Corona SDK

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



[TOPIC: post.html]
#6

bramvbilsen

[GLOBAL: userInfoPane.html]
bramvbilsen
  • Contributor

  • 243 posts
  • Corona SDK

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!



[TOPIC: post.html]
#7

roaminggamer

[GLOBAL: userInfoPane.html]
roaminggamer
  • Corona Geek

  • 7,587 posts
  • Corona SDK

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



[TOPIC: post.html]
#8

bramvbilsen

[GLOBAL: userInfoPane.html]
bramvbilsen
  • Contributor

  • 243 posts
  • Corona SDK

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 :)
I need a lot of radial backgrounds for this project, so making them outside of Corona would only bump the app size :/

[TOPIC: post.html]
#9

nick_sherman

[GLOBAL: userInfoPane.html]
nick_sherman
  • Corona Geek

  • 1,811 posts
  • Corona SDK

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.

[TOPIC: post.html]
#10

bramvbilsen

[GLOBAL: userInfoPane.html]
bramvbilsen
  • Contributor

  • 243 posts
  • Corona SDK

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


[TOPIC: post.html]
#11

bramvbilsen

[GLOBAL: userInfoPane.html]
bramvbilsen
  • Contributor

  • 243 posts
  • Corona SDK

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


[TOPIC: post.html]
#12

nick_sherman

[GLOBAL: userInfoPane.html]
nick_sherman
  • Corona Geek

  • 1,811 posts
  • Corona SDK

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.



[TOPIC: post.html]
#13

bramvbilsen

[GLOBAL: userInfoPane.html]
bramvbilsen
  • Contributor

  • 243 posts
  • Corona SDK

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)...



[TOPIC: post.html]
#14

nick_sherman

[GLOBAL: userInfoPane.html]
nick_sherman
  • Corona Geek

  • 1,811 posts
  • Corona SDK

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.

[TOPIC: post.html]
#15

nick_sherman

[GLOBAL: userInfoPane.html]
nick_sherman
  • Corona Geek

  • 1,811 posts
  • Corona SDK

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.

[TOPIC: post.html]
#16

bramvbilsen

[GLOBAL: userInfoPane.html]
bramvbilsen
  • Contributor

  • 243 posts
  • Corona SDK

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 :(



[TOPIC: post.html]
#17

nick_sherman

[GLOBAL: userInfoPane.html]
nick_sherman
  • Corona Geek

  • 1,811 posts
  • Corona SDK

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....



[TOPIC: post.html]
#18

bramvbilsen

[GLOBAL: userInfoPane.html]
bramvbilsen
  • Contributor

  • 243 posts
  • Corona SDK

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



[TOPIC: post.html]
#19

nick_sherman

[GLOBAL: userInfoPane.html]
nick_sherman
  • Corona Geek

  • 1,811 posts
  • Corona SDK

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 :-/



[TOPIC: post.html]
#20

bramvbilsen

[GLOBAL: userInfoPane.html]
bramvbilsen
  • Contributor

  • 243 posts
  • Corona SDK

I tried it Nick, but no luck either :(

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 :D



[TOPIC: post.html]
#21

bramvbilsen

[GLOBAL: userInfoPane.html]
bramvbilsen
  • Contributor

  • 243 posts
  • Corona SDK

[TOPIC: post.html]
#22

davebollinger

[GLOBAL: userInfoPane.html]
davebollinger
  • Corona Geek

  • 1,348 posts
  • Enterprise

  Best Answer

provide a full rgba quad for color



[TOPIC: post.html]
#23

bramvbilsen

[GLOBAL: userInfoPane.html]
bramvbilsen
  • Contributor

  • 243 posts
  • Corona SDK

Thanks Dave, you are a true legend! I can't believe something simple like that could cause so much trouble...

Have a nice day,

Bram



[TOPIC: post.html]
#24

Rob Miracle

[GLOBAL: userInfoPane.html]
Rob Miracle
  • Moderator

  • 25,922 posts
  • Enterprise

Dave you do get the hero award for today!  Great find!

 

Rob




[topic_controls]
[/topic_controls]