problems with Virtual Joystick plugin

[Jendrik]

Hi!

after getting sick by implementing the Virtual Joystick  plugin, I´ve tried one of the examples from the zip-file.

I´m getting the same error like in my own game, so I think there is something generally wrong (maybe me...)

 

The error:

Uncaught TypeError: undefined is not a functionPhaser.VirtualJoystick.init       @ phaser-virtual-joystick.min.js:2b.PluginManager.add               @ phaser.js:14435PhaserGame.create                 @ dpad.html:62b.StateManager.loadComplete       @ phaser.js:13058b.SignalBinding.execute           @ phaser.js:13922b.Signal.dispatch                 @ phaser.js:13803b.Signal.dispatch                 @ phaser.js:13399b.Loader.nextFile                 @ phaser.js:40856b.Loader.fileComplete             @ phaser.js:40551b.Loader.loadFile.a.data.onload   @ phaser.js:40010

Is there anybody who could help me?

[rich]

You'll need to show some code, can't debug the above sorry, too generic.

[Jendrik]

Thats from the example of the zip file:

var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example');var PhaserGame = function () {    this.sprite;    this.pad;    this.stick;    this.buttonA;    this.buttonB;    this.buttonC;};PhaserGame.prototype = {    init: function () {        this.game.renderer.renderSession.roundPixels = true;        this.physics.startSystem(Phaser.Physics.ARCADE);    },    preload: function () {        this.load.atlas('arcade', 'assets/virtualjoystick/skins/arcade-joystick.png', 'assets/virtualjoystick/skins/arcade-joystick.json');        this.load.image('ball', 'assets/virtualjoystick/beball1.png');        this.load.image('bg', 'assets/virtualjoystick/space1.png');    },    create: function () {        this.add.image(0, 0, 'bg');        this.sprite = this.add.sprite(400, 200, 'ball');        this.physics.arcade.enable(this.sprite);        this.pad = this.game.plugins.add(Phaser.VirtualJoystick);        this.stick = this.pad.addStick(0, 0, 200, 'arcade');        this.stick.alignBottomLeft();        this.buttonA = this.pad.addButton(500, 520, 'arcade', 'button1-up', 'button1-down');        this.buttonA.onDown.add(this.pressButtonA, this);        this.buttonB = this.pad.addButton(615, 450, 'arcade', 'button2-up', 'button2-down');        this.buttonB.onDown.add(this.pressButtonB, this);        this.buttonC = this.pad.addButton(730, 520, 'arcade', 'button3-up', 'button3-down');        this.buttonC.onDown.add(this.pressButtonC, this);    },    pressButtonA: function () {        this.sprite.tint = Math.random() * 0xFFFFFF;    },    pressButtonB: function () {        this.sprite.scale.set(Math.random() * 4);    },    pressButtonC: function () {        this.sprite.scale.set(1);        this.sprite.tint = 0xFFFFFF;    },    update: function () {        var maxSpeed = 400;        if (this.stick.isDown)        {            this.physics.arcade.velocityFromRotation(this.stick.rotation, this.stick.force * maxSpeed, this.sprite.body.velocity);        }        else        {            this.sprite.body.velocity.set(0);        }    }};game.state.add('Game', PhaserGame, true);

On my own game I replaced the phaser.js with the new plugin-included js file. I could post that code also, but it is really much. Do you need that too? 

[rich]

That isn't really what I meant - I have the example code from the zip file because I wrote it all! What I was asking is what you'd changed in it, because the examples run fine as included in the zip, as long as they're loaded through a web server and are using the correct version of the plugin. The scrambled one (the one used on the Phaser.io site for example) is site locked, so it won't run locally and will instead throw errors. The one found in the dist folder is the "unlocked" one that should be used with your game.

[Jendrik]

oh dear, that was amazing stupid from me...

yeah, I had to put the .\ as main directory in my webserver... now the example works ^^

 

here is my code. I replaced the phaser.js with the new one out of the zip-file. 

var SBP = SBP || {}; SBP.GameTOUCH = function(){}; SBP.GameTOUCH.prototype = {   preload: function() {  ...  this.pad = this.game.plugins.add(Phaser.VirtualJoystick);  this.stick = this.pad.addDPad(0, 0, 200, 'dpad');

this.buttonA = this.pad.addButton(500, 520, 'dpad', 'button1-up', 'button1-down');

  this.buttonA.onDown.add(this.pressButtonA, this);

 

  this.buttonB = this.pad.addButton(615, 450, 'dpad', 'button2-up', 'button2-down');

  this.buttonB.onDown.add(this.pressButtonB, this);

}, pressButtonA: function () {

     this.player.body.velocity.y = -400;

this.jump.play();

    },

 

 pressButtonB: function () {

     this.fireBean();

    },

... },

update: function(){ ...var maxSpeed = 250;if (this.stick.isDown){  this.player.body.velocity.set = 0;if (this.stick.direction === Phaser.LEFT){//  Move to the left  this.player.body.velocity.x = -this.maxSpeed;  this.player.animations.play('left');  if(!this.walk.isPlaying && this.player.body.onFloor())     this.walk.play();  }else if (this.stick.direction === Phaser.RIGHT){//  Move to the right  this.player.body.velocity.x = +this.maxSpeed;  this.player.animations.play('right');  if(!this.walk.isPlaying && this.player.body.onFloor())    this.walk.play();}//Sprungelse if (this.stick.direction === Phaser.UP && this.player.body.onFloor()){  this.player.body.velocity.y = -400;  this.jump.play();}...}  

[rich]

Does the above work or error somewhere? If it errors what line is it on? (because I'd suspect if it errors it no longer does so the same as before). If it works, then cool.

[Jendrik]

unfortunaly yes, there are errors

 

 

 

phaser.min.js:7 Uncaught TypeError: Cannot set property 'game' of undefined

GameTOUCH.js:250 Uncaught TypeError: Cannot read property 'isDown' of undefined

 

250 is 

if (this.stick.isDown){ ...

[Jendrik]

I bet I've done something wrong with the positions oft the JS files...

[Jendrik]

Ok, got it!

I replaced my phaser.min.js with that from the zip file. Now everything works fine.

Thank you so much!!

[lexfrost]

I'm getting this error:
TypeError: Cannot set property 'game' of undefined

With this TS code:
this.game.plugins.add(Phaser.Plugin.VirtualJoystick)

NB. This worked with JS:
this.pad = this.game.plugins.add(Phaser.VirtualJoystick);

Please help!

[rich]

As there are no TS defs for the plugin would it not be safer to do it via JS anyway? (or un-typed rather).