Joystick First Example

majied

Here is an Joystick I Made Which you can Map to make something happen/move tell me what you think?!

-- Joystick Example

-- Use this function to perform your initial setup
function setup()
    print("Welcome to the Joystick Example")
    print("Tap The Screen To Bring It Up")
    jt = 0
    js = 0
    jx = 100
    jy = 100
end

-- This function gets called once every frame
function draw()
    -- This sets a dark background color 
    background(40, 40, 50)
    strokeWidth(js)
    fill(0, 0, 0,jt)
    ellipse(100,100,140)
    fill(255, 255, 255, jt)
    ellipse(jx,jy,100)
    jy = 100
    jx = 100

    if CurrentTouch.y > 150 then
        jy = 120
    end
    if CurrentTouch.x > 100 then
        jx = 120
    end
    if CurrentTouch.x < 100 then
        jx = 80
    end
    if CurrentTouch.y < 100 then
        jy = 80
    end

end

function touched(t)
    if CurrentTouch.state == BEGAN then
        jt = 255
         js = 5
        print("Move Your Finger Around The Joystick And See What Happens")
        end
    if CurrentTouch.state == ENDED then
    jt = 0
        js = 0
    end

end

dave1707

@majied Your code might be more simple, but you're joystick doesn't have much resolution. It looks like there is only 6 points that the joystick goes to. One suggestion, try not to use CurrentTouch but learn how to use the touched function. Using CurrentTouch in the function touched() is wrong. It might work, but you're using the touched() function wrong.

Please don't post the same code in different discussions. I'm deleting the code in the other discussion.

majied

dave1707

@majied Don't be sad, you're here to learn and we're here to help you. Lookup CurrentTouch and the function touched(). CurrentTouch is OK, but the touched() function will allow you to do a lot more when you touch the screen.

majied

Btw you know I'm like 11yrs old
and do you know how to make a multiplayer game ? Do I need servers or anything? Thanks For The Tips

johnpoore

Nicely done, majied. Always nice to see younger people getting into programming and making stuff work.

dave1707

@majied Your age doesn't matter. What does matter is how much you want to learn and how much effort you put into learning. We're here to help you and we'll give you small examples or tell you what you should or shouldn't be doing. The rest is up to you.

Ignatz

@majied - here is something I wrote on multiplayer

https://coolcodea.wordpress.com/2015/04/21/211-making-multiplayer-games-part-1/

And something else on using the touched function

https://coolcodea.wordpress.com/2014/12/28/188-understanding-touch/

Don't be put off if you find it a bit difficult - programming is hard at first, but it's a lot of fun, and starting so young, you will get very good if you keep practising.

Ignatz

@majied - and here is a post I wrote about joysticks

https://coolcodea.wordpress.com/2015/08/27/229-lessons-from-a-simple-joystick-function/

The best way to learn is to read this, and then try to write your own code using anything you have learned.

majied

Thanks Guys

majied

Does it make a difference whether I use Codea Scratchpad And Normal Codea

dave1707

There are some things that the Scratchpad version doesn't support. What they are I don't know without searching.

majied

Thanks!Though!

dave1707

@majied See this link.

https://codea.io/talk/discussion/5978/codea-scratchpad

majied

Can you help me with importing game music here is the link I want to get it from here
https://www.dropbox.com/s/f78hov5luflar3e/GAME_MUSIC.wav?dl=0

majied

@Ignatz Thanks for the tutorials! I am trying to make it so you create a robot with recourses metal , wood , tyre , gun , grenade launchers and a saw. All unlimited . But I'm not sure how to do this. Can I put it in a table and do
multi-handler:send-data()
I thought maybe you could give me an example using things from your tilt 2.5D Driving game! Thanks

majied

Maybe you could use this! Basically what I got so far

function setup()
    tbs = 0
    tboc= "Hover Cursor Over Bar To Open The Toolbox."
end

function draw()
    background(255, 255, 255, 255)
    fill(0, 169, 255, 255)
    rect(-10,710,1100,100)
    fill(0, 0, 0, 255)
    font("GillSans")
    text(tboc,WIDTH/2,726)
    if tbs == 1 then
        sprite("Cargo Bot:Toolbox",130,600)
    end
    if CurrentTouch.y > 710 then
        tbs = 1
        tboc = "Shake left to right to close Toolbox."
    end
    if UserAcceleration.x > 1 then
        tbs = 0
        tboc = "Hover Cursor Over Bar To Open The Toolbox."
    end
    sprite("Documents:Cursor",CurrentTouch.x,CurrentTouch.y,20,30)
end

When closing the toolbar move your cursor

Monkeyman32123

I'm not sure if I'm too late; but I have a pretty simple joystick class that you could use. It has support for limiting the number of angles it will snap to, so you can do full range (0-360 degrees) all the way down to only up-down-left-right

interactivenyc

Monkeyman - I'd love to see your joystick class.

Ignatz

Here is mine, with some simple demo code

--# Main
-- Joy

-- Use this function to perform your initial setup
function setup()
    --simple version, accepts all default settings
    joy=JoyStick()
    --uncomment the next 2 lines to change some defaults, note the table layout
    --joySettings={centre=vec2(WIDTH-110,100),innerColor=color(255, 0, 229),outerColor=color(202, 144, 118)}
    --joy=JoyStick(joySettings)
    velocity=vec2(0,0)
    pos=vec2(WIDTH/2,HEIGHT/2)
end

function draw()
    background(138, 193, 202, 255)
    --update joystick and return vec2 with x,y values between -1 and +1
    delta=joy:update()
    velocity=velocity+delta/20 --adjust velocity by up to 1/20 pixels/sec in any direction
    pos=pos+velocity
    fill(255,255,0)
    ellipse(pos.x,pos.y,40)
    joy:draw()
end

function touched(t)
    --process touches on joystick
    joy:touched(t)
end

--# Joystick
--Controls

--contains Joystick controls 

JoyStick = class()

--Note all the options you can set below. Pass them through in a named table
function JoyStick:init(t)
    t = t or {}
    self.radius = t.radius or 100  --size of joystick on screen
    self.stick = t.stick or 30 --size of inner circle
    self.centre = t.centre or self.radius * vec2(1,1) + vec2(5,5)
    self.damp=t.damp or vec2(0.1,0.1)--dampens speed of return to centre of joystick when finger lifts
    self.lineColor=t.lineColor or color(0,0,0,25)
    self.outerColor=t.outerColor or color(188, 195, 219, 100)
    self.innerColor=t.innerColor or color(114, 133, 199, 125)
    self.position = vec2(0,0) --initial position of inner circle
    self.target = vec2(0,0) --current position of inner circle (used when we interpolate movement)
    self.value = vec2(0,0)
    self.delta = vec2(0,0)
    self.mspeed = 30
    self.moving = 0
    self.tick=1/60 --time between joystick updates
end

function JoyStick:draw()
    ortho()
    viewMatrix(matrix())
    pushStyle()
    fill(self.outerColor)
    stroke(self.lineColor)
    strokeWidth(3) 
    ellipse(self.centre.x,self.centre.y,2*self.radius)
    fill(self.innerColor)
    ellipse(self.centre.x+self.position.x, self.centre.y+self.position.y, self.stick*2)
    popStyle()
end

function JoyStick:touched(t)
    if t.state == BEGAN then
        local v = vec2(t.x,t.y)
        if v:dist(self.centre)<self.radius-self.stick then
            self.touch = t.id
        --else return false
        end
    end
    if t.id == self.touch then
        if t.state~=ENDED then
            local v = vec2(t.x,t.y)
            if v:dist(self.centre)>self.radius-self.stick then
                v = (v - self.centre):normalize()*(self.radius - self.stick) + self.centre
            end  --set x,y values for joy based on touch
            self.target=v - self.centre
        else --reset joystick to centre when touch ends
            self.target=vec2(0,0)
            self.touch = false
        end
    else return false
    end
    return true
end

function JoyStick:update()
    local p = self.target - self.position
    if p:len() < self.tick * self.mspeed then
        self.position = self.target
        if not self.touch then
            if self.moving ~= 0 then
                self.moving = self.moving - 1
            end
        else
            self.moving = 2
        end
    else
        self.position = self.position + p:normalize() * self.tick * self.mspeed
        self.moving = 2
    end
    local v=self.position/(self.radius - self.stick)
    return self:Dampen(v)
end

function JoyStick:Dampen(v)
    if not self.damp then return v end
    if v.x>0 then v.x=math.max(0,(v.x-self.damp.x)/(1-self.damp.x))
    else v.x=math.min(0,(v.x+self.damp.x)/(1-self.damp.x)) end
    if v.y>0 then v.y=math.max(0,(v.y-self.damp.y)/(1-self.damp.y))
    else v.y=math.min(0,(v.y+self.damp.y)/(1-self.damp.y)) end
    return v
end

function JoyStick:isMoving()
    return self.moving
end
 function JoyStick:isTouched()
    return self.touch
end

interactivenyc

Thanks Ignatz! I put your code into a new project to test it, and it's running like it's in slow motion - just thought I'd let you know. I'm on an iPad Pro, so it's the latest hardware. Can you test it and see how it runs for you?

Here's a video I took of it in action. I'm not moving my thumb slowly - it's as fast as the controller is going for me.

dave1707

@interactivenyc It's not your iPad. The joystick is slow on my iPad as well.

Ignatz

@interactivenyc - you'll see that the velocity is adjusted by 1/20 of the change in joystick position.

Make it bigger, eg 1/5, and you will see a big difference

It's up to you what you do with the value returned by the joystick class, which is between -1 and -+1

Ignatz

To clarify a little further, this joystick class doesn't change your object position. It simply gives you back the location of the joystick. Your main code then decides what to do with it.

In my example, I use the joystick not to directly move the circle, but to change its speed very gently. You can of course do something completely different with it.

interactivenyc

It's not that the circle moves too slowly, but the position of the joystick. Is there a way to speed that part up?

Ignatz

self.mspeed is set to 30. Make it large, eg 1000

interactivenyc

Much better!