(Solved)How to active Virtual Joystick plugin on game??

[khleug35]

 Hello,Everyone, 

I download 'RPG' Game template on this link

https://www.panda2.io/templates

and would like to add Virtual Joystick plugin on this game

firstly, I add the Virtual Joystick plugin code on main.js and add the shoot button

the following is shoot button code:

 //player shoot button code 
 var player = this.player;
 this.shotbutton = new game.Graphics();
 this.shotbutton.drawCircle(50, 50, 50);
 this.shotbutton.x = 550;
 this.shotbutton.y = 850;
 this.shotbutton.alpha = 0.5
 this.shotbutton.addTo(this.stage);
 this.shotbutton.interactive=true;
 this.shotbutton.click=function(){
          player.shoot();
        };

this code is work!!! the player can shoot arrow

but I try to add the Virtual Joystick plugin , it seem not work.......

I add the following code on  game.createScene  'Main'  , init function 

 game.createScene('Main', {
    init: function() { 
   ...
   this.joystick = new game.Joystick(150, game.height - 150, 120, 'red');
   this.joystick.addTo(this.stage);

   ...
});
        

 

and add the following code on game.createClass('Player', 'Animation',   , update function 

 

game.createClass('Player', 'Animation', {
 
    walkSpeed: 200,
    health: 5,
    shield: false,    
   ...   
    update: function() {    
  
        this.body.velocity.x += joystick.axis.x * walkSpeed * game.delta;
        this.body.velocity.y += joystick.axis.y * walkSpeed * game.delta;
   ...
    }

});

 

but the player is not move.......,any idea or tip how to active the plugin ?? thank you very much

[enpu]

Try this in your Player class update function:

this.body.velocity.x += game.scene.joystick.axis.x * this.walkSpeed * game.delta;
this.body.velocity.y += game.scene.joystick.axis.y * this.walkSpeed * game.delta;

 

[khleug35]

On 9/25/2018 at 11:45 PM, enpu said:

Try this in your Player class update function:

this.body.velocity.x += game.scene.joystick.axis.x * this.walkSpeed * game.delta;
this.body.velocity.y += game.scene.joystick.axis.y * this.walkSpeed * game.delta;

 

Thx.  @enpu

I added it

but still not work,  

I try to add the following code

this.body.velocity.x += game.scene.joystick.axis.x * 200 * game.delta;
this.body.velocity.y += game.scene.joystick.axis.y * 200 * game.delta;

 

the player still not move ,  anyidea?

thanks

[enpu]

try game.scene.joystick

[khleug35]

I solved this, I modified Player class update function movement code, it worked?,

  thx @enpu

               
if (game.keyboard.down('LEFT') || joystick.axis.x < 0) {
this.body.velocity.x = -this.walkSpeed;
        }
else if (game.keyboard.down('RIGHT') || joystick.axis.x > 0) 
        {
this.body.velocity.x = this.walkSpeed;
        }
else{
this.body.velocity.x = 0;
        }
        

if (game.keyboard.down('UP') || joystick.axis.y < 0) 
        {
this.body.velocity.y = -this.walkSpeed;
        }
else if (game.keyboard.down('DOWN') || joystick.axis.y > 0) 
        {
this.body.velocity.y = this.walkSpeed;
        }
else {
this.body.velocity.y = 0;
        }