Need help with My animation (I am new with animations)

Questions
1

Why is my moving animation so fast? How do I make it slow down so it look smooth? I would be really glad if someone could help me :slight_smile:


--# Main
function setup()
    func=battlearena
       spritePos = vec2(WIDTH/2,HEIGHT/2)
    jstick = Joystick(150,150)
    sprites={"Platformer Art:Monster Standing","Platformer Art:Monster Moving"}
    s=1
  end
 
 function draw()
   func()
  end

function touched(t)
         jstick:touched(t) 
        if spritePos.x+1500 and  spritePos.y+1500 then
        s=s+1 --rotate through sprites
        if s>#sprites then s=1 
end 
  end
    end

--# battlearena
 function battlearena()
    background(255, 255, 255, 255)
    jstick:draw()
       sprite(sprites[s],spritePos.x,spritePos.y,200)
   end

   --# Joystick
 Joystick = class()

function Joystick:init(x,y)
    self.initial = vec2(x,y)
    self.c = vec2(x,y)
    self.circle = vec2(x,y)
    self.sensitivity = 8-- sensitivity
    end

  function Joystick:draw()
    self.deltaX,self.deltaY = self.circle.x-self.initial.x,self.circle.y-self.initial.y
    spritePos.x = spritePos.x + self.deltaX/self.sensitivity
    spritePos.y = spritePos.y + self.deltaY/self.sensitivity

    pushStyle()
    fill(127, 127, 127, 50)
    rectMode(CENTER)
    ellipse(self.c.x,self.c.y,200)
    fill(0, 0, 0, 50)
    ellipse(self.circle.x,self.circle.y,50)
    popStyle()
  end

  --function Joystick:touched(t)
    if t.state==MOVING then
    t = vec2(t.x,t.y)
    local d=t:dist(self.c)
    if d<75 then self.circle=t elseif d>180 then return
    else self.circle=self.c+(t-self.c):normalize()*75 end
        end
    if t.state==ENDED then self.circle = self.initial end
  end
2

Try this. Increase the self.sensitivity value to slow the movement. I set it to 28 instead of 8.

--# Main
function setup()
    func=battlearena
    spritePos = vec2(WIDTH/2,HEIGHT/2)
    jstick = Joystick(150,150)
    sprites={"Platformer Art:Monster Standing","Platformer Art:Monster Moving"}
    s=1
    cnt=0
  end

function draw()
    background(255, 255, 255, 255)
    func()
  end

function touched(t)
    jstick:touched(t) 
    cnt=cnt+1
    if cnt>10 then
        cnt=0
        s=s+1
        if s>2 then
            s=1
        end
    end
end

--# battlearena
 function battlearena()    
    jstick:draw()
    sprite(sprites[s],spritePos.x,spritePos.y,200)
end

--# Joystick
Joystick = class()

function Joystick:init(x,y)
    self.initial = vec2(x,y)
    self.c = vec2(x,y)
    self.circle = vec2(x,y)
    self.sensitivity = 28-- sensitivity
end

function Joystick:draw()
    self.deltaX,self.deltaY = self.circle.x-self.initial.x,self.circle.y-self.initial.y
    spritePos.x = spritePos.x + self.deltaX/self.sensitivity
    spritePos.y = spritePos.y + self.deltaY/self.sensitivity
    pushStyle()
    fill(127, 127, 127, 50)
    rectMode(CENTER)
    ellipse(self.c.x,self.c.y,200)
    fill(0, 0, 0, 50)
    ellipse(self.circle.x,self.circle.y,50)
    popStyle()
end

function Joystick:touched(t)
    if t.state==MOVING then
        t = vec2(t.x,t.y)
        local d=t:dist(self.c)
        if d<75 then self.circle=t elseif d>180 then 
            return
        else 
            self.circle=self.c+(t-self.c):normalize()*75 
        end
    end
    if t.state==ENDED then 
        self.circle = self.initial 
    end
end
3

thanks @dave1707 It work better, but how do I do if I want it to Chang between the pictures when I walk like I did before but not so fast?

4

@IIEmiII I changed the code above. Does that work better.

5

Yes it work as I want now, thank you so much @dave1707 for your help :slight_smile:

6

@dave1707 What did you do to the code to make it work? :slight_smile:

7

I added cnt. In function touched I add 1 to cnt and when cnt is greater than 10 I set it to 0 and then add 1 to s. So basically I slowed it down using cnt. You can change the compare (10) with cnt to increase or decrease the switch between the sprite displays. You can also compare your code to mine to see everything that changed.

8

Okey, thanks!