## Hump & transition image effects

Questions about the LÖVE API, installing LÖVE and other support related questions go here.
Forum rules
Before you make a thread asking for help, read this.
Pangit
Party member
Posts: 148
Joined: Thu Jun 16, 2016 9:20 am

### Hump & transition image effects

Hi,

What I would like to do is make a set of functions that handle transitions between states in my program. I got the hump library working ok I ran some of the examples but others seemed to be incomplete and error. There was this one snippet of code that was commented as being useful for splash screens but seems that its not a complete example.

One of the reasons why I gave up trying to use the hump.gamestates library was the documentation examples were all fragments and not many of the examples actually were functional. All very interesting but in the end I just wanted an example that worked. Its not like its a book where you have trees to worry about with the extra space that a full working example might take up. (not being too salty I hope. Appreciate the work that was put into the library - but perhaps you could relate to my frustration at the state of the documentation for a guy that is new to love2d and lua.)

So at the moment I have a bunch of files that represent different program states (splash screen, main menu, load game, new game ect..)
https://www.love2d.org/forums/download/ ... w&id=13347

The following youtube clip shows what I mean better than words I guess - this is from the game Etrian Odyssey on the DS. (Wanted to avoid using copyrighted sprites on the forum.) The transition I want to replicate is the following one. Notice how the sprites are tweened across the screen before a fade to the dungeon combat state.

What I am trying to do is figure out a way to use hump to replicate this kind of behavor.

[youtube]https://youtu.be/XclkYTwINDU[/youtube]
(starts at 1m48)
https://youtu.be/XclkYTwINDU?t=1m48s

Code: Select all

-- useful for splash screens
Timer.script(function(wait)
Timer.tween(0.5, splash.pos, {x = 300}, 'in-out-quad')
wait(5) -- show the splash for 5 seconds
Timer.tween(0.5, slpash.pos, {x = 800}, 'in-out-quad')
end)

So what is splash.pos? Further more what is the function splash its not explained in the example.

Questions:

I would like to use the hump.Timer to tween between one image into another in the same way as in the examples they transition from one color to another.

Code: Select all

function love.load()
color = {0, 0, 0}
Timer.tween(10, color, {255, 255, 255}, 'in-out-quad')
end

function love.update(dt)
Timer.update(dt)
end

function love.draw()
love.graphics.setBackgroundColor(color)
end

I am guessing its going to take love.graphics.draw am I on the right track?

is it also possible to mess with functions like love.graphics.setBlendMode - say transition between one blend mode to another after a period of time with the hump.Timer?

I have a series of effects images that I want to use with love.graphics.setBlendMode that will come in on a timer and transition to another image.

Then use the tween to load the effect image in love.graphics.setBlendMode - display the composite screen then transition to the final image.
https://www.love2d.org/forums/download/ ... w&id=13341

What I was planning on doing was have a library of transition effects that I could call from the main program ex..

transitionEffect("pixel1" image1, image2, delay)
Attachments
Diagram1.png (25.88 KiB) Viewed 2247 times
SYS_mosaic.png (84.89 KiB) Viewed 2280 times
Last edited by Pangit on Thu Jul 07, 2016 4:27 am, edited 1 time in total.

Pangit
Party member
Posts: 148
Joined: Thu Jun 16, 2016 9:20 am

### Re: Hump & transition image effects

I finally got the hump libraries loaded. (several chickens sacrificed and probably a few screwups on my part solved later.) But honestly I still don't know why the libraries were not working before so its not really a success...

I am trying to get a simple colour transition effect working to start off.

This works fine with the Timer library. however one thing I wanted to do was break out the code from love.load() and pop it in its own function that I can call any time I want to do a fade to white.

This only works once however. I think because the timer is taking a time from the start of the running of the program. What I want to do is set it so that whenever the function is called the timer sets the timer to the offset of when the function was called not the start of the program.

Code: Select all

function fadeinout()
color = {0, 0, 0}
Timer.tween(3, color, {255, 255, 255}, 'in-out-quad')
Timer.after(3, function() Timer.tween(3, color, {0,0,0}, 'in-out-quad') end)
Timer.after(6, function() color = {0, 0, 0} end)
end

I figure make it a general function that can be passed two sets of RGB values would make this quite useful. Assuming I could get it to work at any point in the program. This is also how I would load the transition alpha effects (think instead of colours I use a alpha map instead..) So eventually it will become a set of functions to handle the transitions.

Update:

Code: Select all

function fadeinout(tweentype)
color = {0, 0, 0}
Timer.tween(3, color, {255, 255, 255}, tweentype)
Timer.after(3, function() Timer.tween(3, color, {0,0,0}, tweentype) end)
Timer.after(6, function() color = {0, 0, 0} end)
end

This enables you to pass whatever tween you want to the function, Its nice to test the various tweeting methods. Its nice to see the subtle differences between each method. I found it useful anyway.. But really it would be more useful to apply the transition to a vector transition to see just how much a tween can affect the animation. When I get more time I will do a demo of the various effects and how they differ. The preset tweens alone give you a lot of tools to work with but its possible to roll your own.

vrld
Party member
Posts: 917
Joined: Sun Apr 04, 2010 9:14 pm
Location: Germany
Contact:

### Re: Hump & transition image effects

Pangit wrote:The transition I want to replicate is the following one. Notice how the sprites are tweened across the screen before a fade to the dungeon combat state.
Here's how I implemented gamestate transitions in my ludum dare 34 entry. The splash screen from that game has a similar transition effect from what you are (probably) looking for.
Pangit wrote:I would like to use the hump.Timer to tween between one image into another in the same way as in the examples they transition from one color to another.
One way to do this:

Code: Select all

fade = {alpha = 255}
function love.load()
Timer.tween(10, fade, {alpha=0}, 'in-out-quad')
img1, img2 = ...
end
function love.update(dt) Timer.update(dt) end
function love.draw()
love.graphics.setColor(255,255,255,fade.alpha)
love.graphics.draw(img1,0,0)
love.graphics.setColor(255,255,255,255 - fade.alpha)
love.graphics.draw(img2,0,0)
end
Pangit wrote:is it also possible to mess with functions like love.graphics.setBlendMode - say transition between one blend mode to another after a period of time with the hump.Timer?
Yes
Pangit wrote: What I want to do is set it so that whenever the function is called the timer sets the timer to the offset of when the function was called not the start of the program.
[...]
But really it would be more useful to apply the transition to a vector transition to see just how much a tween can affect the animation.
I have trouble parsing that. Can you rephrase your questions?
Pangit wrote:the documentation examples were all fragments and not many of the examples actually were functional. All very interesting but in the end I just wanted an example that worked. Its not like its a book where you have trees to worry about with the extra space that a full working example might take up.
The examples in the documentation are not a tutorial, but show how you would use the documented function in your game.
The Timer.script examples show this, because--as you noticed--the code uses variables that are not defined. I understand that a tutorial will make it easier for newcomers, but frankly, I can't be arsed to write one myself. But hey, hump is free software! If you write a tutorial I am happy to include it in the documentation. Bonus points if you create a pull request.
I have come here to chew bubblegum and kick ass... and I'm all out of bubblegum.

hump | HC | SUIT | moonshine

Pangit
Party member
Posts: 148
Joined: Thu Jun 16, 2016 9:20 am

### Re: Hump & transition image effects

Hi, thanks for your reply. And thanks for writing the library! It covered many of my questions.

The rephrase question -

What I am trying to do is make the function work each time its called in the program, without needing to set the after funcions to the game time.

Code: Select all

 Timer.after(3, function() Timer.tween(3, color, {0,0,0}, 'in-out-quad') end)
Maby I misunderstood how this works, - Am I right in thinking that the number you are supplying to Timer.after is a value that reflects the time since the program started?

My problem was I wanted a way to make the function work at any time in the program and just use like gametime+effecttime to work. I wondered if there was a way to do this in the library already.

instead of this

Code: Select all

    Timer.tween(10, fade, {alpha=0}, 'in-out-quad')
Timer.after(10, function() Timer.tween(10, fade, {alpha=255}, 'in-out-quad') end)
What I want to be able to do is just stack tweens so the occur one after the other like they are chained. So I could split them into functions and just call them whenever I want in the program.

palmettos
Prole
Posts: 14
Joined: Sun May 29, 2016 7:00 pm

### Re: Hump & transition image effects

The number argument to Timer.after is the number of seconds Timer waits to call the function argument after Timer.after is called. At what time the entire love program starts is irrelevant.

Say you put Timer.after(3, function() print('hello') end) in the love.mousepressed callback. Anytime the user presses a mouse button, 'hello' will print to the console 3 seconds later.

vrld
Party member
Posts: 917
Joined: Sun Apr 04, 2010 9:14 pm
Location: Germany
Contact:

### Re: Hump & transition image effects

Pangit wrote:

Code: Select all

 Timer.after(3, function() Timer.tween(3, color, {0,0,0}, 'in-out-quad') end)
Maby I misunderstood how this works, - Am I right in thinking that the number you are supplying to Timer.after is a value that reflects the time since the program started?
You do misunderstand. I's the time in seconds after which the function will be called, counted from the call to Timer.after. The above code will start the tween three seconds after the call, not three seconds after the game has started. The error you are describing is most likely somewhere else in your code, but it's impossible to tell without having a look at it.
Pangit wrote:instead of this

Code: Select all

    Timer.tween(10, fade, {alpha=0}, 'in-out-quad')
Timer.after(10, function() Timer.tween(10, fade, {alpha=255}, 'in-out-quad') end)
What I want to be able to do is just stack tweens so the occur one after the other like they are chained.
Two methods, one uses the "after" argument to Timer.tween (see third example here), the other uses Timer.script (see third example here):

Code: Select all

-- first method
Timer.tween(10, fade, {alpha=0}, 'in-out-quad', function()
Timer.tween(10, fase, {alpha=255}, 'in-out-quad')
end)

-- second method
Timer.script(function(wait)
Timer.tween(10, fade, {alpha=0}, 'in-out-quad')
wait(10)
Timer.tween(10, fade, {alpha=255}, 'in-out-quad')
end)
I have come here to chew bubblegum and kick ass... and I'm all out of bubblegum.

hump | HC | SUIT | moonshine

Pangit
Party member
Posts: 148
Joined: Thu Jun 16, 2016 9:20 am

### Re: Hump & transition image effects

Hi Thank you for your replies guys, I guess its late so I will sleep on this and have another go tomorrow. Hopefully I can get the transitions working. Oh this is the code that I was trying to use the transition effects in.

https://www.love2d.org/forums/viewtopic ... 30#p200430

### Who is online

Users browsing this forum: Google [Bot], slime and 8 guests