Rotating sprite or animation in direction that is is moving

General
1

Hi all

I’m messing around trying to get an animated sprite to face the direction that it is moving, but I’m hopelessly lost. I made a little example of an animated sprite that is moving diagonally across the screen, what I want to do is get the top of the head of the sprite to point in the direction that it is moving.

Is there some kind of translate and rotate trick I need to use?

I eventually want the sprite to follow where I am touching on screen, and the animation to face the direction that it’s moving.

Anyone able to give me some pointers?

Thanks in advance!


-- Animation Test
displayMode(FULLSCREEN)
-- Use this function to perform your initial setup
function setup()
    chop1=readImage("Planet Cute:Character Boy")
    chop2=readImage("Planet Cute:Character Cat Girl")
    chop3=readImage("Planet Cute:Character Horn Girl")
    chop4=readImage("Planet Cute:Character Pink Girl")
    chop5=readImage("Planet Cute:Character Princess Girl")
    anim={chop1,chop2,chop3,chop4,chop5}
    animNo=1
    animTimer=0
    animDelay=0.1
    charY=HEIGHT
    charX=0
    
end

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

    animTimer=animTimer+DeltaTime
    if animTimer>animDelay then
        animNo=animNo+1
        if animNo>#anim then
            animNo=1
        end
        animTimer=0
    end
    
    sprite(anim[animNo],charX,charY)
    
    charY=charY-3
    charX=charX+1.5
    
end
2

To rotate the sprite you’ll need an angleOfVector function which looks like this

function angleOfVector(vec)
 local ang = math.atan2(vec.y,vec.x)
 return ang-math.pi/2 --take away 90 degrees in to give correct angle
end

Next, instead of positioning your sprite using the x and y parameters of the sprite() function you’ll need to use translate(x,y). By using this you can correctly move and rotate your sprite like this

function draw()
 local a = angleOfVector(vec2(charX,charY)-touchpoint)
 pushMatrix()
  translate(charX,charY)
  rotate(math.degrees(a)) -- turn 'a' radians value in to degrees
  sprite(anim[animNo],0,0)
 popMatrix()
end

Assuming you have touchpoint as the vector of your touch position which can be made using the touched() function like this:

function touched(t)
 touchpoint = vec2(t.x,t.y)
end

That should work, I’ll test it now to make sure.
-Tested and fixed
Here is the code below:


-- Animation Test
displayMode(FULLSCREEN)
-- Use this function to perform your initial setup
function setup()
    chop1=readImage("Planet Cute:Character Boy")
    chop2=readImage("Planet Cute:Character Cat Girl")
    chop3=readImage("Planet Cute:Character Horn Girl")
    chop4=readImage("Planet Cute:Character Pink Girl")
    chop5=readImage("Planet Cute:Character Princess Girl")
    anim={chop1,chop2,chop3,chop4,chop5}
    animNo=1
    animTimer=0
    animDelay=0.1
    charY=HEIGHT
    charX=0
    touchpoint = vec2()
end

function angleOfVector(vec)
    local ang = math.atan2(vec.y,vec.x)
    return ang-math.pi/2
end

function touched(t)
    touchpoint = vec2(t.x,t.y)
end
-- This function gets called once every frame
function draw()
    -- This sets a dark background color 
    background(0, 0, 0, 255)

    animTimer=animTimer+DeltaTime
    if animTimer>animDelay then
        animNo=animNo+1
        if animNo>#anim then
            animNo=1
        end
        animTimer=0
    end
    local a = angleOfVector(vec2(charX,charY)-touchpoint)
    pushMatrix()
    translate(charX,charY)
    rotate(math.deg(a))
    sprite(anim[animNo],0,0)
    popMatrix()
    charY=charY+(touchpoint.y-charY)*0.05
    charX=charX+(touchpoint.x-charX)*0.05

end
3

Awesome! That was quick! Really appreciate the help, I had a feeling I would need to use trig but didn’t know how or where.

Thanks much!