Storyboard new feature: Unlimited Scene Transitions

Hi there!

Yeah, I know… “CoronaLabs is working on the awesome ‘composer’, why the heck are you extending the old storyboard?”

Because I want to

And because I also needed it

Jokes apart, I was working on my game and wanted to use a scene transition like “slideDown”, but not exactly that one. “slideDown” creates the new scene at the screen top and pushes down the previous one, but I wanted the previous scene sliding down and discovering the new one behind it. So what? Corona doesn’t provide it :confused:

Since CoronaLabs released the storyboard’s code, I took a look at the scene transitions and realised how simple they are. If it’s that simple, why Corona doesn’t allow us to create our own scene transitions? And so I did

I created a really simple script [transitionsLoader.lua] and a json [transitions.json], dowloaded the open source storyboard and made some improvements [newStoryboard.lua], and that’s what it does:

_ newStoryboard.lua _

local sceneFXs = require "transitionsLoader" storyboard.effectList = sceneFXs:load("transitions.json")

While original storyboard has a huge dictionary, this newStoryboard requires the transitionsLoader.lua. This module has a couple of public functions:

_ transitionsLoader.lua _

local transitionsLoader = {} function transitionsLoader:load(filename, baseDirectory) end function transitionsLoader:getSceneTransitions() end return transitionsLoader

The newStoryboard calls the “load” function passing the json path as a parameter [and the baseDirectory, if you want to use a downloaded json, etc]

And what’s inside of that json? Why is so simple to make my own transition? That’s why:

_ transitions.json _

{ "yourTransitionName": { "previous": { "xScaleStart": 2, "yScaleStart": 2, "xScaleEnd": 1, "yScaleEnd": 1, "xStart": 0.5, -- this is a display.contentWidth multiplier "yStart": 0.5, -- this is a display.contentHeight multiplier "xEnd": 0, -- this is a display.contentWidth multiplier "yEnd": 0, -- this is a display.contentHeight multiplier "rotationStart": -360, "rotationEnd": 0, "alphaStart": 0, "alphaEnd": 1, "transition": "outQuad", -- any esing function excepting "continuousLoop }, "new": { "xScaleStart": 2, "yScaleStart": 2, "xScaleEnd": 1, "yScaleEnd": 1, "xStart": 0.5, -- this is a display.contentWidth multiplier "yStart": 0.5, -- this is a display.contentHeight multiplier "xEnd": 0, -- this is a display.contentWidth multiplier "yEnd": 0, -- this is a display.contentHeight multiplier "rotationStart": -360, "rotationEnd": 0, "alphaStart": 0, "alphaEnd": 1, "transition": "outQuad", -- any esing function excepting "continuousLoop }, "hideOnOut": true -- should hide the previous scene when ends its transition? "concurrent": true -- do both scenes plays their transitions at the same time? "sceneAbove": true -- is the new scene over the previous one? } }

Notice there’s a “previous” and a “new” tables. You may wonder which scenes do they affect. And that’s all

Click here to download if you like it. Thought it would be useful, not just for me, so I share it with you!