Custom storyboard effect

Solar2D Composer
#1

Hi to everyone,

I’m currently learning corona and lua by setting myself a new game project, the theme of which I’ve decided to be underwater.

Anyway, while searching the forums, I didn’t seem to find any examples of custom effects, so I’m sharing my own discovery to see what people think. You’ll also need the bubble.png texture.

bubble.png (download)

[lua]— bubble wipe transition

local storyboard = require(“storyboard”)
– Load our bubble textures
local bubble_sheet = graphics.newImageSheet(“bubble.png”, {width = 64, height = 64, numFrames = 5, })
– Add a new effect to storyboard (copy of the slideUp transition, with modifications)
storyboard.effectList.bubbles = {
concurrent = true,
to = {
xEnd = 0, xStart = 0,
yEnd = 0, yStart = 384,

– Modified transition
transition = function(t, tMax, start, delta)
local percent = t / tMax

if percent <= 0.5 then
– Add a bubble every tick
local _sprite = display.newSprite(bubble_sheet, {
{name = “float”, start = 1, count = 5, time = 500, loopCount = 0, loopDirection = “bounce”, }
})
_sprite.x = math.random(-63, 543)
_sprite.y = 384
_sprite:play()

– Float the bubble up and destroy it
transition.to(_sprite, {time = math.random(tMax / 2, tMax), y = -64, onComplete = function(obj)
obj:removeSelf()
end, })
end

if percent <= 0.25 then
return start
elseif percent >= 0.75 then
return start + delta
else
– Return normal transitions in a shorter period
return easing.inOutExpo(percent * 2 - 0.5, 1, start, delta)
end
end,
},
from = {
xEnd = 0, xStart = 0,
yEnd = -384, yStart = 0,
transition = function(t, tMax, start, delta)
local percent = t / tMax

if percent <= 0.25 then
return start
elseif percent >= 0.75 then
return start + delta
else
– Return normal transitions in a shorter period
return easing.inOutExpo(percent * 2 - 0.5, 1, start, delta)
end
end,
},
}[/lua] [import]uid: 154787 topic_id: 28368 reply_id: 328368[/import]

#2

Great example.

I understand your transition function was based on the original slideUp - How did you get the slideUp transition source code?

Cheers, [import]uid: 189054 topic_id: 28368 reply_id: 130012[/import]

#3

Great example.

I understand your transition function was based on the original slideUp - How did you get the slideUp transition source code?

Cheers, [import]uid: 189054 topic_id: 28368 reply_id: 130012[/import]

#4

With lua_export functions :slight_smile:

I’m a little rusty after having a break from corona for uni. I actually wrote var_dump, var_export and lua_export functions to help work out the variable structures in corona. Here’s the source:

[lua]— var_dump for lua
– Written By: BigDan256
– Last Updated: 13-Aug-2012
– Filename: var_dump.lua
– Notes: Also includes var_export and lua_export functions

local references

– … Removed this bit to shorten the post …
– … It’s just definitions of var_dump and var_export, they do the same thing …

local function _lua_export(var, prepend)
for k,v in pairs(references) do
if v == var then
io.write “nil”
return
end
end

if type(var) == “nil” then
io.write(“nil”)
elseif type(var) == “boolean” then
if (var) then
io.write(“true”)
else
io.write(“false”)
end
elseif type(var) == “number” then
io.write(var)
elseif type(var) == “string” then
io.write(""" … var … “”")
elseif type(var) == “function” then
io.write(""*FUNCTION*"")
elseif type(var) == “userdata” then
io.write(""*USERDATA*"")
elseif type(var) == “table” then
references[table.maxn(references) + 1] = var
print("{")
for k,v in pairs(var) do
io.write(prepend … “\t”)
_lua_export(k, prepend … “\t”)
io.write(" = “)
_lua_export(v, prepend … “\t”)
print(”,")
end
io.write(prepend … “}”)
else
io.write(""*" … type(var):upper() … “*”")
end
end

— Outputs a parsable string representation of a variable
– lua_export() gets structured information about the given variable. It is
– similar to var_dump() with one exception: the returned representation is
– valid LUA code.
function lua_export(var)
references = {}
_lua_export(var, “”)
end[/lua]

I then just ran the lua_export function on storyboard where I found the effectList variable:
[lua]require(“var_dump”)
local storyboard = require(“storyboard”)
lua_export(storyboard);[/lua]

From there you can see the expected layout for an effect, and can guess that the transition functions are likely to be the same as the easing functions. So my from.transition and to.transition functions are just modified easing functions. [import]uid: 154787 topic_id: 28368 reply_id: 131855[/import]

#5

For reference, you should see this somewhere in your console log when you run it:
[lua] “slideUp” = {
“concurrent” = true,
“to” = {
“yStart” = 320,
“xStart” = 0,
“xEnd” = 0,
“transition” = “*FUNCTION*”,
“yEnd” = 0,
},
“from” = {
“yStart” = 0,
“xStart” = 0,
“xEnd” = 0,
“transition” = “*FUNCTION*”,
“yEnd” = -320,
},
},[/lua] [import]uid: 154787 topic_id: 28368 reply_id: 131856[/import]

#6

With lua_export functions :slight_smile:

I’m a little rusty after having a break from corona for uni. I actually wrote var_dump, var_export and lua_export functions to help work out the variable structures in corona. Here’s the source:

[lua]— var_dump for lua
– Written By: BigDan256
– Last Updated: 13-Aug-2012
– Filename: var_dump.lua
– Notes: Also includes var_export and lua_export functions

local references

– … Removed this bit to shorten the post …
– … It’s just definitions of var_dump and var_export, they do the same thing …

local function _lua_export(var, prepend)
for k,v in pairs(references) do
if v == var then
io.write “nil”
return
end
end

if type(var) == “nil” then
io.write(“nil”)
elseif type(var) == “boolean” then
if (var) then
io.write(“true”)
else
io.write(“false”)
end
elseif type(var) == “number” then
io.write(var)
elseif type(var) == “string” then
io.write(""" … var … “”")
elseif type(var) == “function” then
io.write(""*FUNCTION*"")
elseif type(var) == “userdata” then
io.write(""*USERDATA*"")
elseif type(var) == “table” then
references[table.maxn(references) + 1] = var
print("{")
for k,v in pairs(var) do
io.write(prepend … “\t”)
_lua_export(k, prepend … “\t”)
io.write(" = “)
_lua_export(v, prepend … “\t”)
print(”,")
end
io.write(prepend … “}”)
else
io.write(""*" … type(var):upper() … “*”")
end
end

— Outputs a parsable string representation of a variable
– lua_export() gets structured information about the given variable. It is
– similar to var_dump() with one exception: the returned representation is
– valid LUA code.
function lua_export(var)
references = {}
_lua_export(var, “”)
end[/lua]

I then just ran the lua_export function on storyboard where I found the effectList variable:
[lua]require(“var_dump”)
local storyboard = require(“storyboard”)
lua_export(storyboard);[/lua]

From there you can see the expected layout for an effect, and can guess that the transition functions are likely to be the same as the easing functions. So my from.transition and to.transition functions are just modified easing functions. [import]uid: 154787 topic_id: 28368 reply_id: 131855[/import]

#7

For reference, you should see this somewhere in your console log when you run it:
[lua] “slideUp” = {
“concurrent” = true,
“to” = {
“yStart” = 320,
“xStart” = 0,
“xEnd” = 0,
“transition” = “*FUNCTION*”,
“yEnd” = 0,
},
“from” = {
“yStart” = 0,
“xStart” = 0,
“xEnd” = 0,
“transition” = “*FUNCTION*”,
“yEnd” = -320,
},
},[/lua] [import]uid: 154787 topic_id: 28368 reply_id: 131856[/import]

#8

Hi BigDan. Thanks for the example.

Is your bubble.png file still in that link?

I would like to create a custom effect that would be a mix of fromLeft and fromRIght. It would be like the new scene would come from both of the side and would get together in the middle of the screen (so, left half of the new scene comes from the left, and the right half of the new scene comes from the right). Do you know if it is possible?

thanks

rsc [import]uid: 181011 topic_id: 28368 reply_id: 132860[/import]

#9

Hi BigDan. Thanks for the example.

Is your bubble.png file still in that link?

I would like to create a custom effect that would be a mix of fromLeft and fromRIght. It would be like the new scene would come from both of the side and would get together in the middle of the screen (so, left half of the new scene comes from the left, and the right half of the new scene comes from the right). Do you know if it is possible?

thanks

rsc [import]uid: 181011 topic_id: 28368 reply_id: 132860[/import]

#10

Yep, the image is still there, it’s transparent with white, so it may look invisible in your browser.

I don’t believe corona has the tools you need to make a generic effect like that. You would most like have to cut your scene manually in half, but then you could make a specific effect to slide your two halves in.

I guess you would just have to modify the transition function to look for the second half of your scene, and position it somewhere (relative to where the left side would be) like:
[lua]function(t, tMax, start, delta)
local percent = t / tMax

if second_half then
– The right side starts at (1.5*screen width,0) and moves to (0.5*screen width,0)
second_half.x = 960 - 640 * percent

– The left size starts at (-0.5*screen width,0) and moves to (0,0)
– ie. the transition distance is halved, so we scale the function to match
return percent * 0.5 + 0.5
end

return percent
end,[/lua] [import]uid: 154787 topic_id: 28368 reply_id: 134437[/import]

#11

Thanks BigDan256, I will try that. [import]uid: 181011 topic_id: 28368 reply_id: 134452[/import]

#12

that’s awesome, BigDan256! please add this to the code sharing section! [import]uid: 70635 topic_id: 28368 reply_id: 134473[/import]

#13

yes its cool. I didn’t know this was possible. I always thought the scene transitions in storyboard were so limited. Thanks. [import]uid: 13632 topic_id: 28368 reply_id: 134474[/import]

#14

I just see a bunch of {,{,},} and not your output in the console. Perhaps Corona have disabled this kinda output??

[import]uid: 13560 topic_id: 28368 reply_id: 134480[/import]

#15

Yep, the image is still there, it’s transparent with white, so it may look invisible in your browser.

I don’t believe corona has the tools you need to make a generic effect like that. You would most like have to cut your scene manually in half, but then you could make a specific effect to slide your two halves in.

I guess you would just have to modify the transition function to look for the second half of your scene, and position it somewhere (relative to where the left side would be) like:
[lua]function(t, tMax, start, delta)
local percent = t / tMax

if second_half then
– The right side starts at (1.5*screen width,0) and moves to (0.5*screen width,0)
second_half.x = 960 - 640 * percent

– The left size starts at (-0.5*screen width,0) and moves to (0,0)
– ie. the transition distance is halved, so we scale the function to match
return percent * 0.5 + 0.5
end

return percent
end,[/lua] [import]uid: 154787 topic_id: 28368 reply_id: 134437[/import]

#16

Thanks BigDan256, I will try that. [import]uid: 181011 topic_id: 28368 reply_id: 134452[/import]

#17

that’s awesome, BigDan256! please add this to the code sharing section! [import]uid: 70635 topic_id: 28368 reply_id: 134473[/import]

#18

yes its cool. I didn’t know this was possible. I always thought the scene transitions in storyboard were so limited. Thanks. [import]uid: 13632 topic_id: 28368 reply_id: 134474[/import]

#19

I just see a bunch of {,{,},} and not your output in the console. Perhaps Corona have disabled this kinda output??

[import]uid: 13560 topic_id: 28368 reply_id: 134480[/import]