Sylvain76

Members
  • Content count

    1
  • Joined

  • Last visited

  1. 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 [email protected]/core'; import { NavController, NavParams } from 'ionic-angular'; import { Platform,AlertController } from 'ionic-angular'; import { Storage } from [email protected]/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); } }