transition2: A customizable extension to the transition library

Audio and Graphics
#97

Added an onValue  callback function that can be used with any transitions. May come in handy if context or target object needs to be updated depending on transition state.

Example use with the color transition:

transition.color(displayObject, { startColor = {0, 0, 0, 1}, endColor = {1, 1, 1, 1}, time = 500, reverse = true, iterations = 0, onValue = function(target, value) local R,G,B = value[1], value[2], value[3] if (R \> 0.8 and G \> 0.8 and B \> 0.8) then print("This color is pretty bright!") end end, })

Also made use of the onValue function in zRotate by implementing a convenience param hideBackside.Setting this to true will hide the target object when rotated away from the display. This makes it easy to combine two separate objects and make them appear as a single two-sided object while rotating. Like this example with a coin from Ice Trap:

local coinFront = display.newImageRect("coin-front.png", 29, 29) local coinBack = display.newImageRect("coin-back.png", 29, 29) coinBack.isVisible = false params = { degrees = -540, iterations = 0, time = 2000, horizontal = true, transition = easing.inOutSine, reverse = true, transitionReverse = easing.inOutQuad, shading = true, shadingDarknessIntensity = 0.75, shadingBrightnessIntensity = 0.25, hideBackside = true, } transition.zRotate(coinFront, params) -- Use the same params, but start with the backside rotated away from the display params.startDegrees = 180 transition.zRotate(coinBack, params)

p7HumsR.gif

#98

Only just stumbling on to this. In one of your earlier comments you mentioned having to do absolute paths in your require() calls. In case this makes life easier, this is what I do to use relative paths:

require ((…):match("(.-)[^%.]+$") … “foobah”)

Assuming foobah.lua exists in the same location as the calling file.

#99

Hi, I’m having difficulty getting my head round a concept that I’m trying to implement and was wondering if anyone could help.

I have an object that I want to move backwards and forwards across the screen.

Say the object starts at x=20 and moves to a point somewhere to the right, once it gets there I would like it to move back to a random point on the left followed by a random point to the right etc.

I knowhow to set a new destination using the onRepeat and recalculateOnIteration functions but can’t figure out how to make sure the new destination is in the correct direction.

​Then, just when it was complicated enough, I’d like the object to be moving at a constant speed which I guess could be calculated using the following function that I found on the forums from a few years back…

local function distanceBetween( point1, point2 ) local xfactor = point2.x-point1.x local yfactor = point2.y-point1.y local distanceBetween = math.sqrt((xfactor\*xfactor) + (yfactor\*yfactor)) return distanceBetween end local speed = 0.1 times = 1 \* distanceBetween(A,B) / speed transition.to(A, {time=times,x=B.x, y=B.y})

I hope all of this makes some kind of sense :slight_smile:

#100

If I understand your question correctly, I believe that you can solve this a lot easier easier without using iterations, with a single transition function calling itself onComplete. Using recalculateOnIteration in combination with for example onRepeat should work for changing direction and target position. But, because you need the object to move at constant speed this solution won’t work since it’s not possible to change the transition time between iterations.

Here’s an example with a single transition function calling itself and setting a property on the target object to keep track of which direction it is currently moving. Just dry coding from memory here without test running anything, but hopefully you’ll get the picture.  :slight_smile:

-- Declare the move variable before initializing it to be able to reference it from onComplete local move move = function(target) -- Store direction on target object, and alternate between left/right target.direction = (target.direction == "right") and "left" or "right" -- Then calculate new target position... local newTargetX = calculateNewTargetX(target.x, target.direction) -- ...and also calculate time for new transition now that you know the distance the object will travel at a constant speed. local timeMs = calculateTimeForConstantSpeed(target.x, newTargetX) transition.to(target, { x = newTargetX, time = timeMs, onComplete = move }) end move(yourObject) 
#101

That looks excellent. Many thanks for your detailed reply.
I’m off out to the cinema shortly to see Ready Player One so I’ll try that out when I get back :slight_smile:

#102

Markus, I’ve just been re-reading this topic and spotted that you’ve added the “hideBackside” param to the zRotate transition. In my current project I’d already hacked together similar functionality.

It would be great if the transition could automatically handle which side should be shown, based on the current “z rotate” value. I was just wondering, how difficult do you think it would be to add a second display object representing the back of the object as an additional param?    

So instead of this:

local coinFront = display.newImageRect("coin-front.png", 29, 29) local coinBack = display.newImageRect("coin-back.png", 29, 29) coinBack.isVisible = false params = { degrees = -540, iterations = 0, time = 2000, horizontal = true, transition = easing.inOutSine, reverse = true, transitionReverse = easing.inOutQuad, shading = true, shadingDarknessIntensity = 0.75, shadingBrightnessIntensity = 0.25, hideBackside = true, } transition.zRotate(coinFront, params) -- Use the same params, but start with the backside rotated away from the display params.startDegrees = 180 transition.zRotate(coinBack, params)

it would be like this:

local coinFront = display.newImageRect("coin-front.png", 29, 29) local coinBack = display.newImageRect("coin-back.png", 29, 29) params = { degrees = -540, iterations = 0, time = 2000, horizontal = true, transition = easing.inOutSine, reverse = true, transitionReverse = easing.inOutQuad, shading = true, shadingDarknessIntensity = 0.75, shadingBrightnessIntensity = 0.25, backObject = coinBack, } transition.zRotate(coinFront, params)

What actually made me think of this was the falling leaf transition, as at the moment both sides of the leaf will always be identical (afaik). I might try and hack something like this together soon, but wanted to see what you thought about it (maybe you’ve already tried and it was a real can of worms).

#103

Hi Alan, I actually haven’t tried that yet but it should be possible without opening a giant can of worms. :slight_smile:

Passing a second display object as param to the zRotate transition is probably not the best way though. The main transition algorithm assumes a single display object/group to work with and I’d prefer to not change that unless necessary.

Instead I’d likely go for an approach with a convenience function “zRotateWithBackside” which just encapsulates the code from my example with two separate zRotate transitions, one for each of the two sides. That way, I wouldn’t have to touch either the main algorithm nor the zRotate implementation. That’s the same idea as for the fallingLeaf() function, which is also basically just a sequence of different transitions grouped into the same convenience function.

I might try to add this if a can find a little time some time soon. Otherwise, feel free to hack it together by yourself. :slight_smile:

#104

Well done! It’s impressive

If I had your transition for my previous game, I had won many hour (I don’t know which time I need to use for this sentence…)

Do you include something to do transition on blur ? I had difficulties to make transition of blur on large image. I was forced to use 2 different images, one on full scale and the other one in the quarter of the size.

#105

Thank you!  :slight_smile:

Haven’t done anything at all with blur so far, so I’m afraid I can’t help you with that right now.

#106

This is amazing. Thanks so much! Using it as a slight animated hologram effect in my game :slight_smile:

#107

Only just stumbling on to this. In one of your earlier comments you mentioned having to do absolute paths in your require() calls. In case this makes life easier, this is what I do to use relative paths:

require ((…):match("(.-)[^%.]+$") … “foobah”)

Assuming foobah.lua exists in the same location as the calling file.

#108

I haven’t had the need to update transition2 in a long time, but today I made a small change to the bounce() function to allow for both horizontal and/or vertical bounce transitions.

Example:

transition.bounce(displayObject, { 
    height = 400, -- Bounces upwards. Set to negative value to bounce downwards.
    width = 200, -- Bounces to the right. Set to negative value to bounce left.
    time = 1000,        
    iterations = 0,
})

(For anyone who hasn’t already seen this library, you can get the source code from here: https://github.com/rannerboy/corona-transition2. You’re free to clone it, use it and modify it any way you like.)

2 Likes
#109

but how do I add it to my project?

#110

nevermind, found instructions on https://github.com/rannerboy/corona-transition2

1 Like
#111

quite old thread, but I started few days ago using Solar2D, I’m still experimenting, and today I found this thread and I have to say it’s really an amazing job! thanks for your work, I’m using it in my first “memory” game and I like the effects very much! :star_struck:

I just had to modify transition2-glow.lua , there was a “params.iterations = 0” that was keeping the animation running forever , ignoring the iterations passed, so, I simply commented it out and now it’s perfect

thanks

#112

Great to here that people still find and use transition2! :slight_smile:

Regarding the glow() transition, it was designed as a convenience function and is basically just a specific variation of the color() transition. So instead of changing the source code you should be able to just use color() instead. See https://github.com/rannerboy/corona-transition2

1 Like
#113

Thanks for your kind suggestion :ok_hand:

#114

Hi Markus,
I would like to create an interactive book using Solar2D, I would like to add an effect to the pages that simulate leafing through the book.
At the moment I’m using one of the composer scene transition effect, but I’m not very satisfied.

In your transition lib the only one that could help me somehow is the zRotate, but it’s not exactly what I need.
Maybe you can suggest me anything? maybe some other lib you created ? or something in internet that I’m not finding?

thanks

#116

Hi @Dado.

I made a plugin for that a few years back: https://ggcrunchy.github.io/corona-plugin-docs/DOCS/page_curl/api.html. It came out of this thread: https://forums.solar2d.com/t/page-curl-effect-using-graphics-2-0-and-shaders/335388.

Code is available here: https://github.com/ggcrunchy/solar2d-plugins/tree/master/pagecurl.

1 Like
#117

Hi @StarCrunch , thank you very much for your kind reply, I found it very nice and interesting but unfortunately too complex for my actual (novice) level.
I was looking for something more like a black box that I could use without too much code around (something like a composer transition effect).

I’ll study it and maybe in the future I’ll be able to realize something with it

thanks
bye