movement tweening

BlitzMax Forums/BlitzMax Beginners Area/movement tweening

coffeedotbean

(Posted 2013) [#1]

Any one got some simple code or example that shows movement tweening.

I need to move an object from point A to point B and for that journey to take a fixed amount of seconds, lets say 2 seconds regardless of how far apart point A and B are.

I need a formula to work out how fast the object needs to travel, to maintain a 2 second travel time whether A and B are 100px apart or even 1000px apart.

I have googled tweening but cannot seem to find what I am looking for.

Ravl	(Posted 2013) [#2]

Well if:

100px ............ 2 seconds
X px ............... currentTimeSinceStart

you need to find X:

X = (100 px * currentTimeSinceStart) / 2

Basically if you know (and you know) when the sprite has start to move you can always know how many pixels he 'traveled'

Kryzon

(Posted 2013) [#3]

You want to know how much the object has to walk 'per frame'. This requires you to define a target frames-per-second. Let's say your target FPS is 60, the default in BMax.

60 frames for a single second. Two seconds will have (2 x 60) = 120 frames total.

So divide the distance, whatever it might be, by 120. You will get how much the object has to walk 'per frame', under a 60 FPS logic, to cover that distance in two seconds.

You can wrap this logic in a function which returns the per-frame distance:

Type Vector2D
	Field x:Float, y:Float
End Type

Function walkInTwoSeconds:Vector2D(A:Vector2D, B:Vector2D, FPS:Float = 60.0)
	'AB -> Vector that goes from A to B.
	
	'Get the vector components (horizontal and vertical).
	Local ABWidth:Float = B.x - A.x
	Local ABHeight:Float = B.y - A.y
	
	Local seconds:Float = 2.0
	Local perFrameVector:Vector2D = New Vector2D
	perFrameVector.x = ABWidth / (FPS*seconds)
	perFrameVector.y = ABHeight / (FPS*seconds)

	Return perFrameVector	
End Function

Usage:

Local walkVector:Vector2D = walkInTwoSeconds(A, B)

Local starTime:Int = Millisecs()

[...]

If (startTime + 2000) > Millisecs() Then
	myObject.position.x += walkVector.x
	myObject.position.y += walkVector.y
Else
	Print "Object reached its destination in two seconds."
	WaitKey()
	End
EndIf

TomToad

(Posted 2013) [#4]

One way is to use delta tweening. Just use the percentage of time passed and multiply to the distance needed to move. This way, the time is the same regardless of distance and framerate.

Edit: Just looked up the correct way to tween between two points. Even though my equation works, with the correct way, no need to calculate the distance, and you can also make modifications easier such as ease-in and ease-out.

My equation

SuperStrict
'this will tween an object across two points in two seconds regardless of distance between the points
'just mouseclick to set the origin and destination

Graphics 800,600

Const STATE_SETA:Int = 0
Const STATE_SETB:Int = 1
Const STATE_MOVE:Int = 2

Local State:Int = STATE_SETA 'current state of the program
Local XA:Int, YA:Int, XB:Int, YB:Int 'the coordinates of the 2 points
Local XD:Int, YD:Int 'The distance from origin to destination
Local Timer:Int 'timer
Local Delta:Float 'Delta for tweening

While Not KeyHit(KEY_ESCAPE) And Not AppTerminate()
	Cls
	'draw the two endpoints
	SetColor 255,0,0
	DrawOval XA-5,ya-5,10,10
	SetColor 0,255,0
	DrawOval XB-5,YB-5,10,10

	If State = STATE_MOVE 'if the object is moving
		Delta = (MilliSecs()-Timer)/2000.0 'Calculate the percentage of movement
		SetColor 0,0,255
		DrawOval (XA+XD*Delta)-20,(YA+YD*Delta)-20,40,40
		If MilliSecs() >= Timer+2000 Then State = STATE_SETA '2 seconds have passed
	Else
		If MouseHit(1)
			If State = STATE_SETA 'set the origin
				XA = MouseX()
				YA = MouseY()
				state = STATE_SETB
			Else 'set the destinbation
				XB = MouseX()
				YB = MouseY()
				XD = XB-XA 'calculate the distance from origin to destination
				YD = YB-YA
				State = STATE_MOVE
				Timer = MilliSecs() 'set the timer
			End If
		End If
	End If
	
	Flip
Wend

Correct equation

SuperStrict
'this will tween an object across two points in two seconds regardless of distance between the points
'just mouseclick to set the origin and destination

Graphics 800,600

Const STATE_SETA:Int = 0
Const STATE_SETB:Int = 1
Const STATE_MOVE:Int = 2

Local State:Int = STATE_SETA 'current state of the program
Local XA:Int, YA:Int, XB:Int, YB:Int 'the coordinates of the 2 points
Local Timer:Int 'timer
Local Delta:Float 'Delta for tweening

While Not KeyHit(KEY_ESCAPE) And Not AppTerminate()
	Cls
	'draw the two endpoints
	SetColor 255,0,0
	DrawOval XA-5,ya-5,10,10
	SetColor 0,255,0
	DrawOval XB-5,YB-5,10,10

	If State = STATE_MOVE 'if the object is moving
		Delta = (MilliSecs()-Timer)/2000.0 'Calculate the percentage of movement
		SetColor 0,0,255
		DrawOval ((XB*Delta)+(1-Delta)*XA)-20,((YB*Delta)+(1-Delta)*YA)-20,40,40
		If MilliSecs() >= Timer+2000 Then State = STATE_SETA '2 seconds have passed
	Else
		If MouseHit(1)
			If State = STATE_SETA 'set the origin
				XA = MouseX()
				YA = MouseY()
				state = STATE_SETB
			Else 'set the destinbation
				XB = MouseX()
				YB = MouseY()
				State = STATE_MOVE
				Timer = MilliSecs() 'set the timer
			End If
		End If
	End If
	
	Flip
Wend

coffeedotbean

(Posted 2013) [#5]

WOW thanks guys, more than I could have asked for,I have tried out all methods you suggested and got it working as I intended, just need to decide which on to stick with. Thanks.