Page 1 of 1

Joystick -Test-

Posted: Sat Mar 05, 2016 11:37 pm
by 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

Re: Joystick -Test-

Posted: Sun Mar 06, 2016 3:15 am
by 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?

Re: Joystick -Test-

Posted: Sun Mar 06, 2016 4:53 am
by 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...

Re: Joystick -Test-

Posted: Sun Mar 06, 2016 6:05 am
by rbytes
Works great!

Re: Joystick -Test-

Posted: Sun Mar 06, 2016 3:25 pm
by Dutchman
Great idea, nice coding :D
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

Re: Joystick -Test-

Posted: Sun Mar 06, 2016 6:31 pm
by 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

Re: Joystick -Test-

Posted: Sun Mar 06, 2016 6:59 pm
by Operator
:D 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.