transition2: A customizable extension to the transition library

Audio and Graphics
#21

Added shading to zRotate(). Just set shading=true to apply default shading like this:

transition.zRotate(iceTrapIcon, { degrees = 360, iterations = 0, time = 2000, horizontal = false, transition = easing.inOutSine, reverse = true, transitionReverse = easing.inOutQuad, onRepeat = function(target, params) params.horizontal = not params.horizontal end, shading = true, })

Applied to my Ice Trap icon it looks like below. The weird tracks under the image are just a result of the GifCam recording.

o4czQzw.gif

If you want to adjust darkness/brightness of the shading you can do that too.

transition.zRotate(iceTrapIcon, { degrees = 360, iterations = 0, time = 2000, horizontal = false, transition = easing.inOutSine, reverse = true, transitionReverse = easing.inOutQuad, onRepeat = function(target, params) params.horizontal = not params.horizontal end, shading = true, shadingDarknessIntensity = 0.75, -- Value between 0-1. Default = 1. shadingBrightnessIntensity = 0.5, -- Value between 0-1. Default = 0. })

MC38qaW.gif

#22

All very cool but have you bench-marked it yet?  I had to remove transitions in my game because they were just too slow and pre-calculate everything and animate using enterFrame(). 

Oh and definitely add support for delta = true (I appreciate this won’t work for all transitions). 

#23

Nope, haven’t benchmarked anything yet and haven’t paid any attention to optimization either. Feel free to do it. :slight_smile:

I agree that transitions tend be too slow if you have many objects moving in your game, and just like you I don’t use transitions for everything in my game because of that. But I also think there are many occasions where you only need to animate a few objects and don’t really care that much about performance.

delta = true should already be implemented. Doesn’t it work for you?

EDIT:  Sorry, was a bit quick on the delta thing. It’s been implemented for to() and from(), but not for the other functions. Will review them to see where it makes sense to add delta support. Thanks.

#24

Thanks Markus!

#25

Wow, looks great!

#26

New convenience function fallingLeaf() just added. Example usage:

for i = 1, 100 do local leaf = display.newImageRect("leaf-64px.png", 64, 64) leaf.x, leaf.y = math.random(0, display.contentWidth), -50 leaf.rotation = math.random(0, 360) local colors = { {1, 1, 0, 1}, {1, 0.6, 0, 1}, } leaf:setFillColor(unpack(colors[math.random(1,#colors)])) transition.fallingLeaf(leaf, { delay = math.random(0, 5000), speed = 0.35, verticalIntensity = 0.4, horizontalIntensity = 0.5, rotationIntensity = 0.25, horizontalDirection = "random", randomness = 0.75, zRotateParams = { shadingDarknessIntensity = 0.5, shadingBrightnessIntensity = 0.25, }, cancelWhen = function() return (not leaf.y) or (leaf.y \> display.contentHeight) end, onCancel = function(target) transition.fadeOut(target, { time = 1000, onComplete = function(target) target:removeSelf() end }) end, }) end

38kLNQ4.gif

2 Likes
#27

Looks so realistic…

#28

I made a small adjustment to zRotate which I think would be beneficial to add to the library. I wanted to be able to rotate an object 180 degrees, and then at some later point rotate back from 180 to 0 degrees. However the zRotate function always starts the rotation at 0. So I changed:

getStartValue = function(target, params) return 0 end

to this:

getStartValue = function(target, params) return params.startDegrees or 0 end

This way I can pass in an extra parameter specifying the rotation to start at, as well as the rotation to transition towards:

transition.zRotate(myObj, { startDegrees = 0, degrees = 180, iterations = 1, time = 1000, transition = easing.inOutSine, reverse = false, })

and then back again:

transition.zRotate(myObj, { startDegrees = 180, degrees = 0, iterations = 1, time = 1000, transition = easing.inOutSine, reverse = false, })

I realise that the transition already has a “reverse” parameter, but afaik that can only be triggered automatically after the initial rotation whereas by using the startDegrees param I can trigger it whenever I want.

#29

@Markus - Beautiful!  I’m excited to try this.

#30

Thanks a lot for your input! I’ve implemented your suggested param startDegrees in transition2 now, but with some modifications.

What I’ve done is:

  • Always save the current “zRotation” degrees on the target object being rotated, to be able to access it through target.zRotation just as with any other display object params.
  • params.degrees will always be considered a delta value instead of an absolute value. If the object being rotated already has a zRotation value, the rotation will start from that angle. If not, it will default to start rotating from a 0 value, just like it was hard-coded before.
  • The param startDegrees can be used to override the saved zRotation value.

So in your case, it should be possible to get the same result by skipping startDegrees completely and instead reversing the value of params.degrees to -180 when rotating back.

Like this:

transition.zRotate(myObj, { degrees = 180, iterations = 1, time = 1000, transition = easing.inOutSine, reverse = false, }) -- Some time later... transition.zRotate(myObj, { degrees = -180, iterations = 1, time = 1000, transition = easing.inOutSine, reverse = false, })

Just let me know if you see any problems with this and I’ll do my best to find another solution.

#31

@Markus

That’s great! I looked for the quickest workaround I could find, but this is even better.

#32

+1

#33

Hi Markus, I am currently getting this error when using your transition library:

Module 'transition2lib.transition2-main' not found: no field package.preload['transition2lib.transition2-main'] no file '/Users/0278046/Library/Application Support/Corona/Simulator/Plugins/transition2lib/transition2-main.lua' no file '/Users/0278046/Desktop/Corona SDK/Corona Projects/Space Shooter/transition2lib/transition2-main.lua' no file '/Users/0278046/Desktop/Corona SDK/Corona Simulator.app/Contents/Resources/transition2lib/transition2-main.lua' no file './transition2lib/transition2-main.lua' no file './transition2lib/transition2lib/transition2-main.lua' no file '/Users/0278046/Library/Application Support/Corona/Simulator/Plugins/transition2lib/transition2-main.dylib' no file './transition2lib/transition2-main.dylib' no file '/Users/0278046/Desktop/Corona SDK/Corona Simulator.app/Contents/Resources/transition2lib/transition2-main.dylib' no file '/Users/0278046/Library/Application Support/Corona/Simulator/Plugins/transition2lib.dylib' no file './transition2lib.dylib' no file '/Users/0278046/Dmodule 'transition2lib.transition2-main' not found

And the stack traceback points to this line:

local createTransition2 = require("transition2lib.transition2-main")

What should be my course of action?

#34

Never mind, got it working. Just a problem with the file path.

#35

It is unclear on how I missed this awesome library, but kudos to you.  This is a fine piece of work Markus.

I especially love the fact that you have made this standalone.

PS - Awe-Factor +10

#36

Good job! Will definitely have a look at this!

#37

Wow, just stumbled upon your library and it looks amazing. Thank you very much for not only putting all your efforts in, but also sharing it here. Will definitely remember transition2 the next time I consider transitioning an object :slight_smile:

#38

Hi Markus,

Again, thank you for a great lib. 

I ran into an issue while testing a few of the cool transitions you have, it might be just how it works or it might be an issue. :slight_smile:

When trying the waterBalloon transition I notice that if I start the transition at a point after the scene has started, it flickers just before it starts. Looking into the code I think I see why, the start value yScale is not equal to the original yScale

getStartValue = function(displayObject, params) return { xScale = params.originalXScale, yScale = params.originalYScale + (getValidIntensity(params.intensity) \* SCALE\_FACTOR \* params.originalYScale), } end,

Possible to fix? I assume that this also affect other transitions. 

#39

I fixed this locally. 

#40

Great. I’ll try to fix this in the github repo as soon as I have a little time. Do you mind sharing the code for your local fix?