B4A Library JoystickView - a Joystick for Gamers

Something for the Gamers. It wraps this Github project. It allows control of the Angle, Power, and Direction. When the value of any one of the above changes it will raise an event in the B4A project and return the current angle, power, and direction to the B4A project (see sample project). Colors are fully customizable as well as some of the line widths. Take it for a test drive - sure you will figure out the returned values and how to use them (i.e angle, power, and direction). The dragable button will auto centre when not touched.

Posting the B4A project and the B4A library files.

Sample code:

#Region  Project Attributes
    #ApplicationLabel: JoystickView
    #VersionCode: 1
    #VersionName:
    'SupportedOrientations possible values: unspecified, landscape or portrait.
    #SupportedOrientations: unspecified
    #CanInstallToExternalStorage: False
#End Region

#Region  Activity Attributes
    #FullScreen: False
    #IncludeTitle: True
#End Region

Sub Process_Globals
    'These global variables will be declared once when the application starts.
    'These variables can be accessed from all modules.

End Sub

Sub Globals
    'These global variables will be redeclared each time the activity is created.
    'These variables can only be accessed from this module.

    Private jsv1 As JoystickView
    Private l4 As Label
    Private l5 As Label
    Private l6 As Label
End Sub

Sub Activity_Create(FirstTime As Boolean)
    'Do not forget to load the layout file created with the visual designer. For example:
    Activity.LoadLayout("main")
    jsv1.ButtonColor = Colors.Blue
    jsv1.MainCircleColor = Colors.Yellow
    jsv1.SecondaryCircleColor = Colors.Black
    jsv1.SecondaryCircleStrokeWidth = 3
    jsv1.HorizontalLineColor = Colors.Green
    jsv1.HorizontalLineStrokeWidth = 4
    jsv1.VerticalLineColor = Colors.Magenta
    jsv1.VerticalLineStrokeWidth = 8

End Sub

Sub Activity_Resume

End Sub

Sub Activity_Pause (UserClosed As Boolean)

End Sub

Sub jsv1_value_changed(angle As Int, powr As Int, direc As Int)
 
    l4.Text = angle
    l5.Text = powr
    l6.Text = direc
 

End Sub

Library:

JoystickView
Author: Github: AJ Alves, Wrapped by: Johan Schoeman
Version: 1

• JoystickView
  Events:
  • value_changed (angle As Int, power As Int, direction As Int)
  Fields:
  • ba As BA
  Methods:
  • BringToFront
  • DesignerCreateView (base As PanelWrapper, lw As LabelWrapper, props As Map)
  • Initialize (EventName As String)
  • Invalidate
  • Invalidate2 (arg0 As Rect)
  • Invalidate3 (arg0 As Int, arg1 As Int, arg2 As Int, arg3 As Int)
  • IsInitialized As Boolean
  • RemoveView
  • RequestFocus As Boolean
  • SendToBack
  • SetBackgroundImage (arg0 As Bitmap)
  • SetColorAnimated (arg0 As Int, arg1 As Int, arg2 As Int)
  • SetLayout (arg0 As Int, arg1 As Int, arg2 As Int, arg3 As Int)
  • SetLayoutAnimated (arg0 As Int, arg1 As Int, arg2 As Int, arg3 As Int, arg4 As Int)
  • SetVisibleAnimated (arg0 As Int, arg1 As Boolean)
  Properties:
  • Background As Drawable
  • ButtonColor As Int [write only]
  • Color As Int [write only]
  • Enabled As Boolean
  • Height As Int
  • HorizontalLineColor As Int [write only]
  • HorizontalLineStrokeWidth As Int [write only]
  • Left As Int
  • MainCircleColor As Int [write only]
  • SecondaryCircleColor As Int [write only]
  • SecondaryCircleStrokeWidth As Int [write only]
  • Tag As Object
  • Top As Int
  • VerticalLineColor As Int [write only]
  • VerticalLineStrokeWidth As Int [write only]
  • Visible As Boolean
  • Width As Int

See also this one:
https://www.b4x.com/android/forum/threads/joystick-another-joystick-library-for-gamers.63194/

 

[MarcoRome]

10+

 

[DavideV]

Hi Johan,
could i add 2 of these in a project and move them at the same time ( 2 joystick multitouch)?

 

[Johan Schoeman]

Hi Johan,
could i add 2 of these in a project and move them at the same time ( 2 joystick multitouch)?

Yes - just add another customview in the designer or via B4A code and then add the sub that will catch the event

Sub jsv2_value_changed(angle As Int, powr As Int, direc As Int)
l4.Text = angle
l5.Text = powr
l6.Text = direc

End Sub

 

[DavideV]

Yes - just add another customview in the designer or via B4A code and then add the sub that will catch the event

Sub jsv2_value_changed(angle As Int, powr As Int, direc As Int)
l4.Text = angle
l5.Text = powr
l6.Text = direc

End Sub

Cool !!! thanks

 

[wonder]

Well done! Does it have a transparency property?

 

[Johan Schoeman]

Well done! Does it have a transparency property?

Explain what you would like to see with the transparency property?

 

[wonder]

Lot of games use transparent controls, usually customizable on the user side.
Take the SNES emulator, for example: http://s24.postimg.org/bh68fw64l/Android_Emu_SNES.png

As a user, I like to be able to set the transparency, size (scale) and position of the on-screen controls.

 

[Johan Schoeman]

Lot of games use transparent controls, usually customizable on the user side.
Take the SNES emulator, for example: http://s24.postimg.org/bh68fw64l/Android_Emu_SNES.png

As a user, I like to be able to set the transparency, size (scale) and position of the on-screen controls.

Like this? If yes, then it is.... But then set the colors of the Joystick as transparent colors too.