Jump to content

Virtual joystick plugin for Phaser and Typescript


Sylvain76
 Share

Recommended Posts

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);
  }
}

 

Link to comment
Share on other sites

  • 3 months later...
  • 2 weeks later...

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.

Link to comment
Share on other sites

  • 4 weeks later...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...