Slideshow: Scrolling Using Button triggers (lerp)

Howdy!

I want to create an interactive slide show using buttons to trigger a 'scroll to' behavior.

I bounced around the forums learning about some great methods of how to scroll to position to position using lerp & delta time.

I'm almost there but came across a problem when I implement more than one button. When I press Square 1 the camera scrolls to square 2 (visa/versa) but when I then press Square 3 it does not scroll all the way to Square 4. I really don't know why it falls short? :(

Demo

Capx

Any help would be appreciated, thanks!

-Alex

If you start and press 3 it does go all the way to 4, bu then won't go all the way to 2 if you press 1.

So that means you need to disable the scroll to 1 when scrolling to 4, and disable the scroll to 3 when scrolling to 2.

I think you should turn off the lerp of the button 1-2 when you go to button 3-4, and vice versa. If I'm not mistaken about what you're trying to do, the lerp of button 1-2 conflicts with the button 3-4 because you did not set the boolean to false.

Thanks Paradox & Lunarray! :DX

lunarray

Thanks :D This is exactly what I wanted to achieve

Do you think this method is efficient to use if I where to create 5 or more pairs of buttons? Like this example

I aim to illustrate my music info-graphic<img src="http://acgregore.files.wordpress.com/2010/06/a2-rnr.jpg" border="0">

(but designed to be simpler )

Thanks you guys!!!

-AleX

NECROKRIEG

How about something like this?

ScrollTo capx

You only need to put more clickspot at the 'map' and set their respective targetx and targety to anywhere you want.

lunarray

You are pure genius, your code is so much simpler! I repeated the lerp code for each button, what a complicated newbie error! Thanks for introducing me to 'clamp' & 'progress' functions. I'm going to go deeper into this now!

I'm also going to try out a waypoint system so the camera scrolls from point-A to point-B to point-C on a single button press. Eg. On button pressed the camera scrolls down once > scrolls left once > scrolls down once. (as if it's following a path) I guess I can use a path finding behavior too. Time to experiment! :D

-AleX

Hiya lunarray

I tried to figure out how to Adjust the scroll speed

I understand that 2*dt adjusts the scroll speed between X and Y positions:

" Scroll to lerp(scrollx, player.X, 2*dt) , lerp(scrolly, player.Y, 2*dt) "

But I can't seem to make the dt value work with your adjusted code. I first thought that the variable at the end would adjust the speed. ie:

" Set progress to clamp(progress + dt, 0, 5) "

Then I thought to place Dt variables at the end of:

On touched Clickspot > scrollToX to Clickspot.TargetX, 2*dt ...

...but I get an expression error. I think I need to learn more about how to combine different expressions, do you recommend a particular tutorial?

Thanks again!

You have to understand how the lerp works here.

lerp(a,b,x)

0 <= x <= 1

returns the point between a and b, proportionally to x. So you have to play on x and how fast it goes up to 1, to change the speed.

Let's say you have a global variable called "speed", being a float between 0 and Infinite, Infinite being max speed, 0 being not movable. The total animation will have a duration of 1/speed seconds.

In your last .capx, just change the line where you set progress to clamp(progress + dt, 0, 1) to clamp(progress + dt*speed, 0, 1)

You will then keep the frame independancy, and will be able to set the speed as you like.

Thanks Guizmus

I thought I could use the 'progress' global variable as a float instead of making a Speed global Variable.

" clamp(progress + dt*speed, 0, 1) " makes sense. You added the dt speed to 'progress' but I could only get it to speed up. I don't think it can go below the default speed: I inputted " 0.5, 1 " at the end of the code, ie . . .

. . .clamp(progress + dt*speed, 0.5, 1

Capx

NECROKRIEG

You didn't understand the goal of clamp. clampx(val,min,max) is a function that will return :

val if min<val<mx

min if val < min,

max if val > max

By changing like you did, you set the minimum progress to 0.5, so the movement was half done from the start.

I modified your last capx to include a textbox for you to change the speed on the go, and see how it works. On my computer, you could clearly see the difference between 0.1 and 10 for example.

Capx

Cheers Guizmus I think I get this now. . .

The 'Speed' Global Variable adjusts the movement speed between 0 and 1.

(I didn't type in a decimal number like 0.1)

Set progress to clamp(progress + dt*Speed, 0, 1 <--Breakdown

1. Clamp regulates movement between, under or over the minimum & maximum (0 & 1)

The value will return to a position if X-Value is lower than the minimum, hence being able to scroll back if you press a button for the 2nd time.

2. 0 and 1 represents non-movement & movement. When I added 0.5,1 at the end of "dt*Speed" it seemed faster because the scroll began in mid-movement (0.5)

3. I'm not sure what the 'Progress' variable does. I initially thought it was the Speed Global Variable. I then thought 'Progress' meant movement or non-movement, like a toggle switch. 0=false. 1=True

I really appreciate your example, I'm enjoying learning how to solve these logic puzzles. I hope I understand the concept of Clamp now, I read the manual.

AleX