Joystick -Test-

[Operator]

Here is my Joystick -Test- code..., feel free
to re-use, optimize, comment, ...,enjoy

Code: Select all

REM Joystick 
REM sB 5.3 / iPhone4 / iOS 6.1 / by Operator
REM
REM joystick initialization js_ini()
REM joystick js() availabe values:
REM js.dmax: max distance of stick
REM js.amp: amplitude of stick: 0..1
REM js.DX: distance x of stick from js-center
REM js.Dy: distance y of stick from js-center
REM js.angle: angle of stick: -pi..pi

'test the joystick
'move something around (a circle as sprite)

'create circle sprite
OPTION SPRITE POS CENTRAL
GRAPHICS
REFRESH OFF
GRAPHICS CLEAR
scw = SCREEN_WIDTH()
sch = SCREEN_HEIGHT()
FILL COLOR 0,0,1
cir_x = 150
cir_y = 150
cir_r = 15
cir_speed_cal = 0.05
FILL CIRCLE cir_x,cir_y SIZE cir_r
SPRITE "cir" SCAN (cir_x-cir_r)-2, (cir_y-cir_r)-2, 2*cir_r+4, 2*cir_r+4
SPRITE "cir" AT 150,150
SPRITE "cir" SHOW

js_ini() 'initialize the joystick
GRAPHICS CLEAR 0,0,0
REFRESH ON

LOOP:
js() 'update joystick positions
cir_speed = js.AMPLI*cir_speed_cal
cir_dx = js.DX*cir_speed
cir_dy = js.DY*cir_speed
cir_x = cir_x + cir_dx
cir_y = cir_y + cir_dy
SPRITE "cir" AT cir_x,cir_y
FIELD "debug" TEXT "Speed: "&INT(100*cir_speed)&" Angle: "&INT(180*js.ANGLE/3.14156)
GOTO LOOP


DEF js_ini()
'joystick initialize
'recenter, resize if req
cx = 70   'joystick centre-x
cy = 370  'joystick centre-y
icr = 30  'joystick inner circle radius
ocr = 50  'joystick outer circle radius
sc = 1.2  'joystick scale
dxy_max = (ocr-icr)*sc

'draw joystick and save it as a sprite
'joystick made out of outer and inner circle
'joystick outer circle 
FILL COLOR 1,1,1
FILL ALPHA 0.2
FILL CIRCLE cx,cy SIZE sc*ocr
SPRITE "js_oc" SCAN cx-(sc*ocr)-1,cy-(sc*ocr)-1, (sc*2*ocr)+2,(sc*2*ocr)+2
GRAPHICS CLEAR

'inner circle
FILL COLOR 1,1,1
FILL ALPHA 0.2
FILL CIRCLE cx,cy SIZE sc*icr
SPRITE "js_ic" SCAN cx-(sc*icr)-1,cy-(sc*icr)-1, sc*(2*icr)+2,sc*(2*icr)+2
GRAPHICS CLEAR

'show joystick
OPTION SPRITE POS CENTRAL
SPRITE "js_oc" AT cx,cy
SPRITE "js_ic" AT cx,cy
SPRITE "js_ic" SHOW
SPRITE "js_oc" SHOW

FIELD "debug" TEXT "" AT 0,0 SIZE 200,40 RO
FIELD "debug" BACK COLOR 0,0,0
FIELD "debug" FONT COLOR 1,1,2
FIELD "debug" BACK ALPHA 0
END DEF

DEF js()
dxy_max = js_ini.dxy_max 'max travel of joys.
ANGLE = 0
GET TOUCH 0 AS tx,ty
IF SPRITE_HIT ("js_oc", tx,ty) THEN
  DX = tx - js_ini.cx
  DY = ty - js_ini.cy
  DXY = SQR(DX^2 + DY^2)
  IF DXY > dxy_max THEN DXY = dxy_max
  AMPLI = DXY/dxy_max
  ANGLE = ATAN2(DY,DX)
  last_ANGLE = ANGLE
  js_ic_x = DXY*COS(ANGLE) + js_ini.cx
  js_ic_y = DXY*SIN(ANGLE) + js_ini.cy
  SPRITE "js_ic" AT js_ic_x, js_ic_y
END IF

'return joystick to the center
IF tx = -1 AND DXY > 0 THEN
  DXY = DXY - 1
  IF DXY < 0.1 THEN
    DXY = 0
    DX = 0
    DY =0
    AMPLI = DXY/dxy_max
  END IF
  js_ic_x = DXY*COS(last_ANGLE) + js_ini.cx
  js_ic_y = DXY*SIN(last_ANGLE) + js_ini.cy
  SPRITE "js_ic" AT js_ic_x, js_ic_y
END IF
END DEF

[rbytes]

I don't have a joystick for my iPad or iPhone, and didn't even know they were available. Can you tell me more about how it connects and how sB is able to read it?

[Operator]

Guess the post title is misleading ...
It's rather a virtual/thumb joystick for
touch devices (iPhone 4 in my case)

You can control the direction and speed
of the blue circle by using the virtual joystick.
Touch and move/slide the grey inner circle...

[rbytes]

Works great!

[Dutchman]

Great idea, nice coding
Thanks.
I added limits for the position of the blue circle. It remains now in the visible area.
Furthermore I wanted to position the joystick in lower-right corner on my iPad.
Therefore I added cx-cy parameters in the js_ini-function.
It seems difficult however to position it there, with the sch, scw and js_ini.ocr variables.
Probably due to the scaling parameter js_ini.sc.
So I positioned it in the center, for the time being.
Could you help?

Code: Select all

REM Joystick 
REM sB 5.3 / iPhone4 / iOS 6.1 / by Operator
REM version 1.1. Added x-y parameters in js_ini()
REM
REM joystick initialization js_ini(xpos,ypos)
REM joystick js() availabe values:
REM js.dmax: max distance of stick
REM js.amp: amplitude of stick: 0..1
REM js.DX: distance x of stick from js-center
REM js.Dy: distance y of stick from js-center
REM js.angle: angle of stick: -pi..pi

'test the joystick
'move something around (a circle as sprite)

'create circle sprite
OPTION SPRITE POS CENTRAL
GRAPHICS
REFRESH OFF
GRAPHICS CLEAR
scw = SCREEN_WIDTH()
sch = SCREEN_HEIGHT()
FILL COLOR 0,0,1
cir_x = 150
cir_y = 150
cir_r = 15
cir_speed_cal = 0.05
FILL CIRCLE cir_x,cir_y SIZE cir_r
SPRITE "cir" SCAN (cir_x-cir_r)-2, (cir_y-cir_r)-2, 2*cir_r+4, 2*cir_r+4
SPRITE "cir" AT 150,150
SPRITE "cir" SHOW

js_ini(scw/2,sch/2) 'initialize the joystick
GRAPHICS CLEAR 0,0,0
REFRESH ON

LOOP:
js() 'update joystick positions
cir_speed = js.AMPLI*cir_speed_cal
cir_dx = js.DX*cir_speed
cir_dy = js.DY*cir_speed
cir_x = cir_x + cir_dx
cir_y = cir_y + cir_dy
cir_x=MAX(cir_r,cir_x) ! cir_x=MIN(scw-cir_r,cir_x)'limit within borders
cir_y=MAX(cir_r,cir_y) ! cir_y=MIN(sch-cir_r,cir_y)
SPRITE "cir" AT cir_x,cir_y
FIELD "debug" TEXT "Speed: "&INT(100*cir_speed)&" Angle: "&INT(180*js.ANGLE/3.14156)
GOTO LOOP


DEF js_ini(cx,cy)
'joystick initialize
'recenter, resize if req
'cx = 70   'joystick centre-x
'cy = 370  'joystick centre-y
icr = 30  'joystick inner circle radius
ocr = 50  'joystick outer circle radius
sc = 1.0  'joystick scale
dxy_max = (ocr-icr)*sc

'draw joystick and save it as a sprite
'joystick made out of outer and inner circle
'joystick outer circle 
FILL COLOR 1,1,1
FILL ALPHA 0.2
FILL CIRCLE cx,cy SIZE sc*ocr
SPRITE "js_oc" SCAN cx-(sc*ocr)-1,cy-(sc*ocr)-1, (sc*2*ocr)+2,(sc*2*ocr)+2
GRAPHICS CLEAR

'inner circle
FILL COLOR 1,1,1
FILL ALPHA 0.2
FILL CIRCLE cx,cy SIZE sc*icr
SPRITE "js_ic" SCAN cx-(sc*icr)-1,cy-(sc*icr)-1, sc*(2*icr)+2,sc*(2*icr)+2
GRAPHICS CLEAR

'show joystick
OPTION SPRITE POS CENTRAL
SPRITE "js_oc" AT cx,cy
SPRITE "js_ic" AT cx,cy
SPRITE "js_ic" SHOW
SPRITE "js_oc" SHOW

FIELD "debug" TEXT "" AT 0,0 SIZE 200,40 RO
FIELD "debug" BACK COLOR 0,0,0
FIELD "debug" FONT COLOR 1,1,2
FIELD "debug" BACK ALPHA 0
END DEF

DEF js()
dxy_max = js_ini.dxy_max 'max travel of joys.
ANGLE = 0
GET TOUCH 0 AS tx,ty
IF SPRITE_HIT ("js_oc", tx,ty) THEN
 DX = tx - js_ini.cx
 DY = ty - js_ini.cy
 DXY = SQR(DX^2 + DY^2)
 IF DXY > dxy_max THEN DXY = dxy_max
 AMPLI = DXY/dxy_max
 ANGLE = ATAN2(DY,DX)
 last_ANGLE = ANGLE
 js_ic_x = DXY*COS(ANGLE) + js_ini.cx
 js_ic_y = DXY*SIN(ANGLE) + js_ini.cy
 SPRITE "js_ic" AT js_ic_x, js_ic_y
END IF

'return joystick to the center
IF tx = -1 AND DXY > 0 THEN
 DXY = DXY - 1
 IF DXY < 0.1 THEN
   DXY = 0
   DX = 0
   DY =0
   AMPLI = DXY/dxy_max
 END IF
 js_ic_x = DXY*COS(last_ANGLE) + js_ini.cx
 js_ic_y = DXY*SIN(last_ANGLE) + js_ini.cy
 SPRITE "js_ic" AT js_ic_x, js_ic_y
END IF
END DEF

[Dutchman]

Modification for free positioning was rather simple.
I removed the scale operator 'sc' and added a size-parameter.
Positioning it in the lower right corner, independent of screen-size, is rather easy now.

Code: Select all

REM Joystick 
REM sB 5.3 / iPhone4 / iOS 6.1 / by Operator
REM version 1.1. Added x-y parameters in js_ini()
REM version 1.2. Added size parameter in js_ini()
REM
REM joystick initialization js_ini(size,xpos,ypos)
REM joystick js() availabe values:
REM js.dmax: max distance of stick
REM js.amp: amplitude of stick: 0..1
REM js.DX: distance x of stick from js-center
REM js.Dy: distance y of stick from js-center
REM js.angle: angle of stick: -pi..pi

'test the joystick
'move something around (a circle as sprite)

'create circle sprite
OPTION SPRITE POS CENTRAL
GRAPHICS
REFRESH OFF
GRAPHICS CLEAR
scw = SCREEN_WIDTH()
sch = SCREEN_HEIGHT()
FILL COLOR 0,0,1
cir_x = 150
cir_y = 150
cir_r = 15
cir_speed_cal = 0.05
FILL CIRCLE cir_x,cir_y SIZE cir_r
SPRITE "cir" SCAN (cir_x-cir_r)-2, (cir_y-cir_r)-2, 2*cir_r+4, 2*cir_r+4
SPRITE "cir" AT 150,150
SPRITE "cir" SHOW

sticksize=INT(scw/15)
js_ini(sticksize,scw-sticksize,sch-sticksize) 'initialize the joystick
GRAPHICS CLEAR 0,0,0
REFRESH ON

LOOP:
js() 'update joystick positions
cir_speed = js.AMPLI*cir_speed_cal
cir_dx = js.DX*cir_speed
cir_dy = js.DY*cir_speed
cir_x = cir_x + cir_dx
cir_y = cir_y + cir_dy
cir_x=MAX(cir_r,cir_x) ! cir_x=MIN(scw-cir_r,cir_x)'limit within borders
cir_y=MAX(cir_r,cir_y) ! cir_y=MIN(sch-cir_r,cir_y)
SPRITE "cir" AT cir_x,cir_y
FIELD "debug" TEXT "Speed: "&INT(100*cir_speed)&" Angle: "&INT(180*js.ANGLE/3.14156)
GOTO LOOP


DEF js_ini(size,cx,cy)
'joystick initialize
'cx, cy are position coordinates
ocr = size  'joystick outer circle radius
icr = INT(0.6*size)  'joystick inner circle radius
dxy_max = (ocr-icr)

'draw joystick and save it as a sprite
'joystick made out of outer and inner circle
'joystick outer circle 
FILL COLOR 1,1,1
FILL ALPHA 0.2
FILL CIRCLE cx,cy SIZE ocr
SPRITE "js_oc" SCAN cx-ocr-1,cy-ocr-1, 2*ocr+2,2*ocr+2
GRAPHICS CLEAR

'inner circle
FILL COLOR 1,1,1
FILL ALPHA 0.2
FILL CIRCLE cx,cy SIZE icr
SPRITE "js_ic" SCAN cx-icr-1,cy-icr-1, 2*icr+2,2*icr+2
GRAPHICS CLEAR

'show joystick
OPTION SPRITE POS CENTRAL
SPRITE "js_oc" AT cx,cy
SPRITE "js_ic" AT cx,cy
SPRITE "js_ic" SHOW
SPRITE "js_oc" SHOW

FIELD "debug" TEXT "" AT 0,0 SIZE 200,40 RO
FIELD "debug" BACK COLOR 0,0,0
FIELD "debug" FONT COLOR 1,1,2
FIELD "debug" BACK ALPHA 0
END DEF

DEF js()
dxy_max = js_ini.dxy_max 'max travel of joys.
ANGLE = 0
GET TOUCH 0 AS tx,ty
IF SPRITE_HIT ("js_oc", tx,ty) THEN
 DX = tx - js_ini.cx
 DY = ty - js_ini.cy
 DXY = SQR(DX^2 + DY^2)
 IF DXY > dxy_max THEN DXY = dxy_max
 AMPLI = DXY/dxy_max
 ANGLE = ATAN2(DY,DX)
 last_ANGLE = ANGLE
 js_ic_x = DXY*COS(ANGLE) + js_ini.cx
 js_ic_y = DXY*SIN(ANGLE) + js_ini.cy
 SPRITE "js_ic" AT js_ic_x, js_ic_y
END IF

'return joystick to the center
IF tx = -1 AND DXY > 0 THEN
 DXY = DXY - 1
 IF DXY < 0.1 THEN
   DXY = 0
   DX = 0
   DY =0
   AMPLI = DXY/dxy_max
 END IF
 js_ic_x = DXY*COS(last_ANGLE) + js_ini.cx
 js_ic_y = DXY*SIN(last_ANGLE) + js_ini.cy
 SPRITE "js_ic" AT js_ic_x, js_ic_y
END IF
END DEF

[Operator]

You already found the answer and by
the way made it more usable/portable...

The original code allowed free positioning
of the joystick-centre...by just changing
cx and cy in js_ini()...see attached screenshots.