Slideshow: Scrolling Using Button triggers (lerp)

Get help using Construct 2

Post » Tue Jun 25, 2013 7:09 pm

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!
-AlexNECROKRIEG2013-06-25 19:33:34
B
15
S
6
G
3
Posts: 87
Reputation: 4,304

Post » Tue Jun 25, 2013 7:45 pm

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.
Paradox2013-06-25 19:48:57
B
230
S
62
G
33
Posts: 902
Reputation: 40,323

Post » Tue Jun 25, 2013 7:47 pm

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.lunarray2013-06-26 00:21:26
B
36
S
6
G
2
Posts: 190
Reputation: 4,223

Post » Tue Jun 25, 2013 11:35 pm

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

(but designed to be simpler )

Thanks you guys!!!
-AleXNECROKRIEG2013-06-25 23:42:51
B
15
S
6
G
3
Posts: 87
Reputation: 4,304

Post » Wed Jun 26, 2013 12:22 am

@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.
B
36
S
6
G
2
Posts: 190
Reputation: 4,223

Post » Wed Jun 26, 2013 11:52 am

@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
B
15
S
6
G
3
Posts: 87
Reputation: 4,304

Post » Thu Jun 27, 2013 12:52 pm

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!NECROKRIEG2013-06-27 12:59:44
B
15
S
6
G
3
Posts: 87
Reputation: 4,304

Post » Thu Jun 27, 2013 1:08 pm

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.Guizmus2013-06-27 13:10:07
B
17
S
8
G
4
Posts: 461
Reputation: 6,157

Post » Thu Jun 27, 2013 2:54 pm

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
B
15
S
6
G
3
Posts: 87
Reputation: 4,304

Post » Thu Jun 27, 2013 3:13 pm

@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
B
17
S
8
G
4
Posts: 461
Reputation: 6,157

Next

Return to How do I....?

Who is online

Users browsing this forum: No registered users and 8 guests