Anyone have a link to tutorials on tween()

Questions
1

I’m having trouble grasping how tweens work and what they even are. I am currently moving sprites but changing x and y values on draw. I’m guessing I can use tween to do the same. Am I correct? How does it differer from incrementing x and y?

I’ve also tried googling it but I seem to only find the pop culture term tween. I appreciate a good link to read up on the subject.

Thanks all!

2

animation example project in codea is not enough? I think there are everything…

3 
-- tween testing

-- Use this function to perform your initial setup
function setup()
    
    -- since we need to tween objects or tables 
    -- let's create a table that will store our values to tween
    -- this object might be your own sprite class or animation class

    -- this contains our starting values
    tweenObject = {x = WIDTH/2,
                   y = HEIGHT/2,
                   rotation = 0}
    
    -- here we are actually creating the tween    
    -- the first value is the number of seconds the tween will take
    -- the second parameter is our tween object we just created.
    -- now we pass it a list of "ending values"
    -- we can also pass it our easing type and looping type as well as a 
    -- callback function which I'm not using

    -- the ending values
    tween(2,tweenObject, {x = WIDTH/4, 
                       y = HEIGHT/4, 
                       rotation = 360},
                       {easing = tween.easing.quintInOut,
                        loop = tween.loop.pingpong})
end

-- This function gets called once every frame
function draw()
    -- This sets a dark background color 
    background(40, 40, 50)

    -- This sets the line thickness
    strokeWidth(5)
    
    pushMatrix()
    
    -- here we are using our tween Object to control
    -- the translation and rotation
    -- during each call to draw our tween values are slowly updated from
    -- start values to end values 
    -- tween means "the in-between values"  
    translate(tweenObject.x,tweenObject.y)
    rotate(tweenObject.rotation)
    
    
    sprite("Platformer Art:Block Special")
    
    popMatrix()    
end
4

Hopefully that smaller example will help you see what’s happening.

5

Thank you Reyals, That made it much easier to understand.

6

One question. How does Codea know that the sprite at the bottom belongs to the tween object, eg if you had several of each, how would you link each sprite to its object?

7

It tweens the values of tweenObject, and not the sprite. So to create another animations, you need to create a tweenObject2 for example with start values, tween it and translate and rotate with tweenObject2 instead.

pushMatrix()
translate(tweenObject2.x, tweenObject2.y)
rotate(tweenObject2.rotation)
sprite("Platformer Art:Block Special")
popMatrix()

In the end of the draw function.

8

Yes, but ultimately, it is the sprite that moves on the screen, bound to the underlying tween object. From the code, I think the answer I’m really looking for is that everything between pushMatrix and popMatrix belongs together, so you use them like bookends, to define each distinct animation.

9

.@Ignatz the tween() function simply updates the values in a Lua table over time. The values inside the Lua table can then be used however you like at each frame.

In the case above, Codea doesn’t know that the sprite() call is bound to the tween object. What is happening is the following:

  • The tween() function updates a table called tweenObject over time
  • The values inside tweenObject are used to set the transformation matrix (translate/rotate) each frame
  • The sprite() call renders graphics according to the current transformation matrix

pushMatrix() and popMatrix() simply push a copy of the current transformation matrix onto the stack. This allows you to manipulate the current graphics transform in a non-destructive manner, and return to the previous transform. (These functions are analogous to pushStyle() and popStyle(), which do the same but for stroke, fill colours, font choices and so on.

10

Thank you, that’s clearer. I guess I keep forgetting that Sprite is actually a drawing command and not an object…

11

Great Info thanks, earlier I had figured out how to make it work but now I know why.

So I could decide not to use translate and just pass the sprite the x and y value from the tween correct?

Can a tween be used to set the x and y on a sprite sheet for animation?

12

You can use the sprite(name, x, y) as long as you don’t want to rotate the sprite.

13

Ok I understand all of this, but what if I wanted to change the size AND rotate, what would I Do?