@reazerdev/nativescript-virtual-joystick v1.0.2

NativeScript Virtual Joystick

The similar version of this plugin for the NativeScript 5 is available here

Disclaimer

This plugin is almost fully based on the source code of Victor Sossa Thank you guys for your hard work and contributions!

Screenshot

Installation

ns plugin add @reazerdev/nativescript-virtual-joystick

Usage

| Android Library
| ------------------------------------------------------------- | controlwear virtual-joystick-android

<Page class="page"
  navigatingTo="onNavigatingTo"
  xmlns="http://schemas.nativescript.org/tns.xsd"
  xmlns:jv="@reazerdev/nativescript-virtual-joystick">
  <ActionBar class="action-bar">
    <Label class="action-bar-title" text="Virtual Joystick"></Label>
  </ActionBar>

  <StackLayout>
    <Label text="{{ 'Angle: ' + angle }}" />
    <Label text="{{ 'Strength: ' + strength }}" />

    <Label text="{{ 'Left Horizontal: ' + lx }}" />
    <Label text="{{ 'Left Vertical: ' + ly }}" />

    <Label text="{{ 'Right Horizontal: ' + rx }}" />
    <Label text="{{ 'Right Vertical: ' + ry }}" />

    <StackLayout orientation="horizontal">
      <jv:VirtualJoystick
        move="onMove"
        angle="{{ angle }}"
        strength="{{ strength }}"
        xAxis="{{ lx }}"
        yAxis="{{ ly }}"
        jvColor="#AA0000"
        jvBackgroundColor="#0000AA"
        jvBorderColor="#00AA00"
        width="50%" />

      <jv:VirtualJoystick
        angle="{{ angle }}"
        strength="{{ strength }}"
        xAxis="{{ rx }}"
        yAxis="{{ ry }}"
        jvColor="#330000"
        jvBackgroundColor="#000033"
        jvBorderColor="#003300"
        buttonStickToBorder="true"
        width="50%" />
    </StackLayout>
  </StackLayout>
</Page>

import { NavigatedData, Page } from "@nativescript/core";
import { HomeViewModel } from "./home-view-model";
import { VirtualJoystickEventData } from '@reazerdev/nativescript-virtual-joystick';

export function onNavigatingTo(args: NavigatedData) {
  const page = <Page>args.object;

  page.bindingContext = new HomeViewModel();
}

export function onMove(data: VirtualJoystickEventData) {
  console.log(`Angle: ${data.angle}`);
  console.log(`Strength: ${data.strength}`);
  console.log(`Horizontal: ${data.xAxis}`);
  console.log(`Vertical: ${data.yAxis}`);
}

Usage within Angular Apps

Import an Angular Module

import { NativeScriptVirtualJoystickModule } from '@reazerdev/nativescript-virtual-joystick/angular';

@NgModule({
    [
       ...,
       NativeScriptVirtualJoystickModule
    ],
    ...
})
export class AppModule {}

Use custom element in your views

<StackLayout orientation="horizontal">
  <VirtualJoystick
    (move)="onMove($event)"
    angle="{{ angle }}"
    strength="{{ strength }}"
    xAxis="{{ lx }}"
    yAxis="{{ ly }}"
    jvColor="#AA0000"
    jvBackgroundColor="#0000AA"
    jvBorderColor="#00AA00"
    width="50%" />

  <VirtualJoystick
    angle="{{ angle }}"
    strength="{{ strength }}"
    xAxis="{{ rx }}"
    yAxis="{{ ry }}"
    jvColor="#330000"
    jvBackgroundColor="#000033"
    jvBorderColor="#003300"
    buttonStickToBorder="true"
    width="50%" />
</StackLayout>

import { Component } from '@angular/core';
import { VirtualJoystickEventData } from '@reazerdev/nativescript-virtual-joystick';

@Component({
  selector: 'ns-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent {
  public onMove(event: VirtualJoystickEventData) {
    console.log(event.angle);
    console.log(`Strength: ${data.strength}`);
    console.log(`Horizontal: ${data.xAxis}`);
    console.log(`Vertical: ${data.yAxis}`);
  }
}

API

License

Apache License Version 2.0