Virtual joystick plugin for Phaser and Typescript

[Sylvain76]

Hi guys, 

I am trying to create a Game with Ionic 2 (=> Typescript) and Phaser and so far it was fine... until that I tried to add the plugin Virtual Joystick. 

The line this.pad = this.game.plugins.add(Phaser.Plugin.VirtualJoystick); return an error about undefined "game" 
But the comment above this line works fine ... 

It's maybe that I don't use the correct syntax to call a plugin ... Please Help me  

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';

import { Platform,AlertController } from 'ionic-angular';
import { Storage } from '@ionic/storage';

import { HomePage } from '../home/home';
/*
  Generated class for the Play page.

  See http://ionicframework.com/docs/v2/components/#navigation for more info on
  Ionic pages and navigation.
*/
///<reference path="js/phaser-virtual-joystick.min.js"/>
@Component({
  selector: 'page-play',
  templateUrl: 'play.html' 
})
export class PlayPage { 

  score: any;
  scoreObj: Number;

  game: Phaser.Game;
  map: Phaser.Tilemap;
  balloon: Phaser.Sprite;
  bg: Phaser.TilemapLayer;
  start: Phaser.TilemapLayer;
  hit: Phaser.TilemapLayer;
  cursors: Phaser.CursorKeys;

  pad;
  stick;

  test;

  constructor(public navCtrl: NavController, public navParams: NavParams,platform: Platform,public storage:Storage,public alertCtrl: AlertController) {
    platform.ready().then(() => { 
        storage.get('scores');
        storage.get('level');
    });
  }
    
  ionViewDidEnter(){
    this.score = 0;
    this.scoreObj = 100;

    var innerWidth  = window.innerWidth;
    var innerHeight = window.innerHeight;

    this.game = new Phaser.Game(innerWidth, innerHeight, Phaser.AUTO, 'myGame', {create: this.create, preload: this.preload,update:this.update, render: this.render}, true);
  }

  preload(){
    this.game.load.spritesheet('balloon', 'img/balloon-01.png',112,150);
    this.game.load.image('lest','img/sac.png');
    this.game.load.image('target','img/hole.png');

    this.game.load.tilemap('level1', 'img/bg-test.json', null, Phaser.Tilemap.TILED_JSON);
    this.game.load.image('bg-test', 'img/bg-test.png');

    this.game.load.atlas('arcade', 'img/arcade-joystick.png', 'img/arcade-joystick.json');
  }

  update = () =>{
    this.game.physics.arcade.collide(this.balloon, this.hit,() => {
        this.balloon.kill();
        this.score = this.score + 3;
        console.log("hit");
    });

    this.game.physics.arcade.collide(this.balloon, this.start);

    this.game.physics.arcade.collide(this.balloon, this.bg,() => {
        this.balloon.kill();
        console.log("bg");
        this.score = this.score - 1;
    });

    this.game.input.update();

      if (this.cursors.left.isDown)
      {
          this.balloon.position.x -= 5;
      }
      else if (this.cursors.right.isDown)
      {
          this.balloon.position.x += 5;
      }
  }

  render = () =>{
    this.game.debug.body(this.balloon);
  }

  create = () =>{

      /*var plugins = new Phaser.PluginManager(this.game);
      console.log(plugins);*/

      this.pad = this.game.plugins.add(Phaser.Plugin.VirtualJoystick);
      
      this.game.physics.startSystem(Phaser.Physics.ARCADE);
      this.cursors = this.game.input.keyboard.createCursorKeys();

      this.game.world.setBounds(0, 0, 9600,800);
      //MAP
 
      var map = this.game.add.tilemap('level1',9600,800,9600,800);
      map.addTilesetImage('bg-test'); 

      this.hit = map.createLayer('hit'); 
      this.start = map.createLayer('start');
      this.bg = map.createLayer('bg');

      //BALLOON

      this.balloon = new Phaser.Sprite(this.game, 192, 490, 'balloon');

      this.balloon.debug = true;
      this.game.world.addAt(this.balloon, 3);

      this.game.physics.enable(this.balloon, Phaser.Physics.ARCADE);

      this.balloon.body.gravity.y = 15;
      this.balloon.body.collideWorldBounds = true;

      this.balloon.inputEnabled = true;

      this.game.camera.follow(this.balloon, Phaser.Camera.FOLLOW_LOCKON, 0.1, 0.1);

      this.balloon.animations.add('fly', [ 0, 1, 2, 3, 4, 5], 20, true);

      this.balloon.body.velocity.y = 10;

      // GAME
      
      map.setCollision([1,2,4,5],true,this.bg.index,true);
      map.setCollision([6],true,this.hit.index,true);
      map.setCollision([3],true,this.start.index,true);
  }
}

 

[Adalberto]

Hi, I'm having the same problem, can anyone solve it? You can share?
Thank you

[nickbyfleet]

I've been banging my head against the wall all day trying to get the virtual joystick plugin to play nice with a Phaser/Typescript project... after 3 or 4 disastrous approaches, I've finally got it working. It's not ideal, but solution is to host the plugin externally and then use the game.load.script() approach while casting the Phaser.VirtualJoystick object as any:

// In preload()
if (!this.game.device.desktop || this.forceMobile) {
    // Preload the joystickPlugin plugin
    this.game.load.script('joystick', 'https://s3-ap-southeast-2.amazonaws.com/url-obscured-to-prevent-abuse');
    this.load.atlas(Assets.Atlases.ArcadeJoystick.getName(), Assets.Atlases.ArcadeJoystick.getPNG(), Assets.Atlases.ArcadeJoystick.getJSONArray());
}

// In create()
if (!this.game.device.desktop || this.forceMobile) {
    // Load the joystick and buttons

    this.joystickPlugin = this.game.plugins.add(Phaser.VirtualJoystick as any);
    this._stick = this.joystickPlugin.addStick(0, 0, 200, Assets.Atlases.ArcadeJoystick.getName());
    this._stick.alignBottomLeft(100);

    this.buttonP = this.joystickPlugin.addButton(this.game.width - 330, this.game.height - 150, Assets.Atlases.ArcadeJoystick.getName(), 'button2-up', 'button2-down');
    this.buttonS = this.joystickPlugin.addButton(this.game.width - 215, this.game.height - 220, Assets.Atlases.ArcadeJoystick.getName(), 'button1-up', 'button1-down');
    this.buttonK = this.joystickPlugin.addButton(this.game.width - 100, this.game.height - 150, Assets.Atlases.ArcadeJoystick.getName(), 'button3-down', 'button3-up');
}

I signed up to post this snippet in the hope this saves someone else a headache.

[SerSaday]

help me
virtual joystick plugins ionic 3 Added to phaser-ce directory.And how to add home.ts     sorry for the bad english:(