NativeScript-JoyStick

An Android and iOS UI component for NativeScript that provides Virtual JoyStick

Native Source

Android

This component is based on JoyStick component from AndroidArsenal created by erz05

iOS

This component is based on JoyStick component from cocoapods created by Cole Dunsby And then modified to work better with Objective C, into JoyStick another cocoapod by tzraikov

Installation

From your command prompt/termial go to your app's root folder and execute: tns plugin add nativescript-joystick

Usage

XML:

<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded"
  xmlns:js="nativescript-joystick">
  <StackLayout>
    <Label text="JoyStick"/>
    
    <Label text="{{'Angle:' + angle}}" textWrap="true" />
    <Label text="{{'Power:' + power}}" textWrap="true" />
    <Label text="{{'Horizontal:' + horizontal}}" textWrap="true" />
    <Label text="{{'Vertical:' + vertical}}" textWrap="true" />

    <js:JoyStick
      padColor="green"
      buttonColor="pink"
      width="50%"
      angle="{{angle}}"
      power="{{power}}"
      horizontal="{{horizontal}}"
      vertical="{{vertical}}">
    </js:JoyStick>
  </StackLayout>
</Page>

Attributes

padColor - (color string) - optional

Attribute to specify the pad color to use.

buttonColor - (color string) - optional

Attribute to specify the button color to use.

angle - (number) - optional

Attribute (read only) to bind the button angle. Values range -180 to 180. Where 0: Left, 90: Up, 180 and -180: Right, -90: Down

power - (number) - optional

Attribute (read only) to bind the button power or how far it is from the centre. Values range 0 to 1. Where 0: centre, 1: at the edge.

horizontal - (number) - optional

Attribute (read only) to bind the horizontal position of the button. Values range -1 to 1. Where 0: centre, -1: left, 1: right.

vertical - (number) - optional

Attribute (read only) to bind the vertical position of the button. Values range -1 to 1. Where 0: centre, -1: down, 1: up.

Methods

• getPower() - returns current Power value directly from the native component
• getAngle() - returns current Angle value directly from the native component