Need Some help with joystick

When i use my joystick i get stick in the corners on the joystick. Does anyone have a solution to this problem? It would also be nice if someone could give me a good/simple solution to make the character stay inside the bounds of the screen.


 -- 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 = 10 -- 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(89, 89, 99, 100)
    rectMode(CENTER)
    ellipse(self.c.x,self.c.y,200)
    fill(103, 111, 119, 255)
    ellipse(self.circle.x,self.circle.y,50)
    popStyle()
  end

  function Joystick:touched(touch)
    t = vec2(touch.x,touch.y)

    if t:dist(self.circle)<30 then
        self.circle = vec2(t.x,t.y)
    end
    if self.circle.x>self.c.x+100 then
        self.circle.x=self.c.x+100
    end
    if self.circle.x<self.c.x-100 then
        self.circle.x=self.c.x-100
    end
    if self.circle.y>self.c.y+50 then
        self.circle.y=self.c.y+50
    end
    if self.circle.y<self.c.y-50 then
        self.circle.y=self.c.y-50
    end
    if touch.state==ENDED then
        self.circle = self.initial
    end
  end

  --# Main
  -- Joystick
  displayMode(FULLSCREEN)

  function setup()
    spritePos = vec2(WIDTH/2,HEIGHT/2)
    jstick = Joystick(150,150)

  end

  function draw()
    background(40, 40, 50)
    jstick:draw()
    

    sprite("Planet Cute:Character Boy",spritePos.x,spritePos.y)
   end


  function touched(touch)
    jstick:touched(touch)
  end

The joystick doesn’t get stuck in the corner for me.

And if you look in the draw function of the code you borrowed for the joystick class, you’ll see how to keep your character on screen.

Okej Thanks :slight_smile: @Ignatz if you try to drag the joystick to the corner and if you drag your joystick directly from the corner to some of the sides besides the corner it will often get stuck, do you understand the problem? If you do, do you have any solution for it? Because you can only move the joystick In a rectangle but I want it to move in a circle so it don’t get stuck in the rectangle corners.

@llEmill - Use this code for your touched function

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

Thank you very much! @Ignatz

@Ignatz one last question, sorry for bothering you. How do I do if I only want to move the character when I drag my finger inside the joystick circle? Because now
the character move where ever I tusch on the screen and move at that direction, I will only move him when I have the finger inside the joystick ring. Thanks for your help so far

@Ignatz do you know how to do, to make so the character only move when I tuch inside the joystick and not anywhere on the screen? I need this so I can make more buttons on the screen. It would be very nice if you could help me :slight_smile:

change this line

if d<75 then self.circle=t

to this

if d<75 then self.circle=t elseif d>100 then return

Thank you for your time :slight_smile:

@llEmill - It’s important you try to learn how these things are done, so have a look at this, where I used this example to explain how the solution works - and i made it a bit simpler as well.

Yes I know, I look at the code right now to learn how all work and I start to get it now