Objects Turn See-Through During Storyboard Transition: Any Workarounds?

Solar2D General Questions/Discussion
#1

Hi, I’m making a simple cut-scene with an animated flag and panning clouds, and using the storyboard api to transition to the next scene. The only problem is, during this transition, a fade in this case, the flag and clouds slowly become transparent and you can see the background clear as day behind them. This looks really bad, but I can’t for the life of me think of a possible solution. Maybe I should just make a video and play it instead of using programming to make this cut-scene? Regardless, here is the code for my first scene written using the template from the storyboard api.  I’m not much of a coder, so any help or advice would be greatly appreciated, but in this case, I don’t know if code alone can provide a solution.

Thanks in advance,

Steven

-- -- scene1.lua -- ---------------------------------------------------------------------------------- local storyboard = require( "storyboard" ) local scene = storyboard.newScene() -- require spriteloq (sprite sheet making program) loqsprite = require('loq.loq\_sprite'); loqbutton = require("loq.loq\_ui\_button"); --------------------------------------------------------------------------------- -- BEGINNING OF YOUR IMPLEMENTATION --------------------------------------------------------------------------------- -- Called when the scene's view does not exist: function scene:createScene( event ) local group = self.view --Create new display group local o = display.newGroup() group:insert( o ) --Sky Background local Bg = display.newImageRect( o,"images/SkyBG.png",750,500) Bg:translate( \_G.W/2,300 ) -- Mask local mask = graphics.newMask( "images/MaskStory.png"); o:setMask( mask ) -- Center the mask over the Display Group o:setReferencePoint( display.CenterReferencePoint ) o.maskX = o.x o.maskY = o.y -- create sprite factory local elementFactory = loqsprite.newFactory('shOpeningStory') local mountains = elementFactory:newSpriteGroup() local cloud1 = elementFactory:newSpriteGroup() local cloud2 = elementFactory:newSpriteGroup() local map = elementFactory:newSpriteGroup() local flagPole = elementFactory:newSpriteGroup() local flag = elementFactory:newSpriteGroup() --scale elements mountains:scale( 1.4,1.4 ) cloud1:scale( 1.3,1.3 ) cloud2:scale( 1.2,1.2 ) flag:scale( 1.4, 1.4 ) --reposition elements mountains.x,mountains.y = 10,420 cloud1.x,cloud1.y = 200,150 cloud2.x,cloud2.y = 800,200 map.x,map.y = 550,300 flagPole.x, flagPole.y = 108,309 flag.x, flag.y = 300,300 --play elements mountains:play('Mountains Pan') cloud1:play('Cloud 1') cloud2:play('Cloud 1') map:play('Vietnam Shape') flagPole:play('Flag Pole') flag:play('Waving Flag') --add elements to display group o:insert( mountains ) o:insert( cloud1 ) o:insert(cloud2) o:insert(map) o:insert(flagPole) o:insert(flag) --transition elements local function removeObject( object ) object:removeSelf() --nil out original reference cloud1 = nil cloud2 = nil end transition.to( cloud1, { time=6000, alpha=1, x=cloud1.x-100, y=cloud1.y, onComplete=removeObject } ) transition.to( cloud2, { time=6000, alpha=1, x=cloud2.x-100, y=cloud2.y, onComplete=removeObject } ) ----------------------------------------------------------------------------- end -- Called immediately after scene has moved onscreen: function scene:enterScene( event ) local fadeToScene2 = function() storyboard.gotoScene( "scene2", "fade", 1000 ) end local sceneTimer = timer.performWithDelay( 3000, fadeToScene2, 1 ) ----------------------------------------------------------------------------- end -- Called when scene is about to move offscreen: function scene:exitScene( event ) ----------------------------------------------------------------------------- -- INSERT code here (e.g. stop timers, remove listeners, unload sounds, etc.) ----------------------------------------------------------------------------- end -- Called prior to the removal of scene's "view" (display group) function scene:destroyScene( event ) end --------------------------------------------------------------------------------- -- END OF YOUR IMPLEMENTATION --------------------------------------------------------------------------------- -- "createScene" event is dispatched if scene's view does not exist scene:addEventListener( "createScene", scene ) -- "enterScene" event is dispatched whenever scene transition has finished scene:addEventListener( "enterScene", scene ) -- "exitScene" event is dispatched before next scene's transition begins scene:addEventListener( "exitScene", scene ) -- "destroyScene" event is dispatched before view is unloaded, which can be -- automatically unloaded in low memory situations, or explicitly via a call to -- storyboard.purgeScene() or storyboard.removeScene(). scene:addEventListener( "destroyScene", scene ) --------------------------------------------------------------------------------- return scene
#2

I had a weird issue with fading and objecting becoming transparent.  It’s the nature of the beast when you start to change alphas on individual objects versus the entire image.

I ended up literally having to make a huge black rectangle on top of the whole image and fade the black in, then just switch to the next scene upon the transition’s end.

#3

You know, I just remembered that same technique that I used when making flash animation videos fading in characters with multiple body parts.  I think it’s really interesting how some tricks from one medium can translate to the next.  The only thing I have to contend with now is making cross-dissolves from scene to scene.  The only way to accomplish this using this trick-method that I can think of is to have all the scenes moved to one giant scene with a whole stack of display groups!  Wish me luck!  “sigh”

#4

Oh, and btw, much thanks Beyond!

#5

I had a weird issue with fading and objecting becoming transparent.  It’s the nature of the beast when you start to change alphas on individual objects versus the entire image.

I ended up literally having to make a huge black rectangle on top of the whole image and fade the black in, then just switch to the next scene upon the transition’s end.

#6

You know, I just remembered that same technique that I used when making flash animation videos fading in characters with multiple body parts.  I think it’s really interesting how some tricks from one medium can translate to the next.  The only thing I have to contend with now is making cross-dissolves from scene to scene.  The only way to accomplish this using this trick-method that I can think of is to have all the scenes moved to one giant scene with a whole stack of display groups!  Wish me luck!  “sigh”

#7

Oh, and btw, much thanks Beyond!

#8

I had the same issue - the problem appears to be the fade transition.  I think it just makes every display object in the scene’s “group” display fade individually… which really sucks.  I can’t imagine a situation where that would be the desired effect.  The way I fixed this is to remove the storyboard fade transition, and have a black rectangle (display.newRect()) the size of the screen over everything.  Everytime I’m going to switch scenes, I run a function which tells the rectangle to fade in (causes the screen to turn black), then once I’ve switched scenes, I tell the rectangle to fade out.

If this solution works for you, you could either put a rectangle in every scene, or create a script that sits outside the storyboard scenes, and use the same rectangle to fade in and out everytime.  Just make sure you use a timer or something to call “storyboard.goToScene” AFTER you are done fading your rectangle.

AAND I just read BeyondTheTech’s post…  What he said XD…

#9

I’m a bit confused.  If you tell storyboard to use “fade” in a transition, it’s going to take whatever is in the scene’s view (group) and fade it to an alpha of 0 with the next scene already constructed underneath.  In the OP, I didn’t see where he added his Background to the view, so storyboard was never managing that image, so only the things in group fade.

Are you wanting a fade to black and then fade back in from black?  Is that the goal?  I don’t believe that storyboard’s transitions were ever designed to be that complex.  I almost never use Fade, but use crossFade instead.

#10

I had the same issue - the problem appears to be the fade transition.  I think it just makes every display object in the scene’s “group” display fade individually… which really sucks.  I can’t imagine a situation where that would be the desired effect.  The way I fixed this is to remove the storyboard fade transition, and have a black rectangle (display.newRect()) the size of the screen over everything.  Everytime I’m going to switch scenes, I run a function which tells the rectangle to fade in (causes the screen to turn black), then once I’ve switched scenes, I tell the rectangle to fade out.

If this solution works for you, you could either put a rectangle in every scene, or create a script that sits outside the storyboard scenes, and use the same rectangle to fade in and out everytime.  Just make sure you use a timer or something to call “storyboard.goToScene” AFTER you are done fading your rectangle.

AAND I just read BeyondTheTech’s post…  What he said XD…

#11

I’m a bit confused.  If you tell storyboard to use “fade” in a transition, it’s going to take whatever is in the scene’s view (group) and fade it to an alpha of 0 with the next scene already constructed underneath.  In the OP, I didn’t see where he added his Background to the view, so storyboard was never managing that image, so only the things in group fade.

Are you wanting a fade to black and then fade back in from black?  Is that the goal?  I don’t believe that storyboard’s transitions were ever designed to be that complex.  I almost never use Fade, but use crossFade instead.