How to constantly move player with touchStart and end it on touchEnd?

Help & Support
1

HI Guys I need help, I almost done with my player’s controller but i’m missing the touches .

On the touch event I’m trying to make the player move when touching the screen and stop when the user end’s the touch.

all its working with the keyboard; but when I define the touches on the initialize function, the touch event function doesn’t fire.

//Player.prototype.onTouchStart() it’s no firing but if i put it on the update function it does work.

please find this message at the bottom " I HAVE TO DEFINE THE EVENT HERE TO MAKE IT WORK ???"

And after is pressed it only moves the player once, it is no constantly moving if I hold the touchStart function any idea why ??_

 var Player = pc.createScript('player');

 // initialize code called once per entity
       Player.prototype.initialize = function() {

  // :cry: COMMENT CODE 
  //  if ( app.touch) {
  //         app.touch.on("touchstart", this.onTouchStart, this);
  //     // app.touch.on("onTouchMove", this.onTouchStart, this);
  //     }else {
  //         console.log("No touch input available");
  //     }
};

// update code called every frame
Player.prototype.update = function(dt) {
var app = this.app;   
  
// I HAVE TO DEFINE THE EVENT HERE TO MAKE IT WORK !!!    
app.touch.on("touchstart", this.onTouchStart, this);


this.direction = new pc.Vec3();
var MOVE_SCALE = 40;
var camera = this.app.root.findByName('Camera');

if (app.keyboard.wasPressed(pc.KEY_R)) {
    this.reset();
} else if (app.keyboard.isPressed(pc.KEY_W)) {
    // pc.math.vec3.copy(this.entity.forwards, this.direction);
    this.direction.copy(camera.forward);
} else if (app.keyboard.isPressed(pc.KEY_S)) {
    // pc.math.vec3.copy(this.entity.forwards, this.direction);
    // pc.math.vec3.scale(this.direction, -1, this.direction);
    this.direction.copy(camera.forward).scale(-1);
} else if (app.keyboard.isPressed(pc.KEY_D)) {
    // pc.math.vec3.copy(this.entity.right, this.direction);
    this.direction.copy(camera.right);
} else if (app.keyboard.isPressed(pc.KEY_A)) {
    // pc.math.vec3.copy(this.entity.right, this.direction);
    // pc.math.vec3.scale(this.direction, -1, this.direction);
    this.direction.copy(camera.right).scale(-1);
} else {
    this.direction.x = this.direction.z = 0;
}

this.direction.y = 0; // No up/down movement for player

// Scale the direction to the size of the impulse required to move the player
this.direction.scale(MOVE_SCALE);

// Apply impulse to player Entity
if (this.entity.rigidbody) {
    this.entity.rigidbody.applyImpulse(this.direction);
}

};


Player.prototype.onTouchStart = function(e) {
var app = this.app;
this.direction = new pc.Vec3();
var MOVE_SCALE =1; 
var camera = this.app.root.findByName('Camera');
 
this.direction.copy(camera.forward);

this.direction.y = 0; // No up/down movement for player

// Scale the direction to the size of the impulse required to move the player
this.direction.scale(MOVE_SCALE);

// Apply impulse to player Entity
if (this.entity.rigidbody) {
    this.entity.rigidbody.applyImpulse(this.direction);
}      

e.event.preventDefault();    

};


Player.prototype.reset = function() {
 this.entity.rigidbody.teleport(0, 2, 0);
 this.entity.rigidbody.linearVelocity = pc.Vec3.ZERO;
 this.entity.rigidbody.angularVelocity = pc.Vec3.ZERO;
 };

`

2

In the initialize method you should use this.app instead of app.

3

I see thanks for your help; I corrected and all work on my project but after deploy the W, S, A, D keys work fine but not the touch, I Simplified the code but still not working unless i define the touch event on the UPDATE function ,… below new code see this.app.touch.on(“touchstart”, this.onTouchStart, this); inside Update please see if you can see what I can and thank you.

PROJECT LINK Project

DEPLOY LINK deployed

  var Player = pc.createScript('player');

  // initialize code called once per entity
  Player.prototype.initialize = function() {
      if (this.app.touch) {
          this.app.touch.on("touchstart", this.onTouchStart, this);
          this.app.touch.on("touchEnd", this.touchEnd, this);
      } else {
          console.log("No touch input available");
      }

      this.app.mouse.disableContextMenu();
      this.camera = this.app.root.findByName('Camera');
      this.direction = new pc.Vec3();
      this.MOVE_SCALE = 40;
  };



  // update code called every frame
  Player.prototype.update = function(dt) {

      // THIS LINE ALLOW THE TOUCH TO WORK BUT ITS ALREADY DEFINE ON INITILIZED 
      // AND IGF I HOLD THE TOUCH PRESSED IT JUST MOVE ONCE IS NOT MOVING LIKE
      //  WHEN I PRESS W ON THE KEYBOARD
      this.app.touch.on("touchstart", this.onTouchStart, this);


      if (this.app.keyboard.wasPressed(pc.KEY_R)) {

          this.reset();

      } else if (this.app.keyboard.isPressed(pc.KEY_W)) {

          this.direction.copy(this.camera.forward);

      } else if (this.app.keyboard.isPressed(pc.KEY_S)) {

          this.direction.copy(this.camera.forward).scale(-1);

      } else if (this.app.keyboard.isPressed(pc.KEY_D)) {

          this.direction.copy(this.camera.right);

      } else if (this.app.keyboard.isPressed(pc.KEY_A)) {

          this.direction.copy(this.camera.right).scale(-1);

      } else {

          this.direction.x = this.direction.z = 0;

      }

      this.direction.y = 0;

      // Scale the direction to the size of the impulse required to move the player
      this.direction.scale(this.MOVE_SCALE);

      // Apply impulse to player Entity
      if (this.entity.rigidbody) {
          this.entity.rigidbody.applyImpulse(this.direction);
      }

  };




  Player.prototype.onTouchStart = function(e) {
      this.MOVE_SCALE = 1;
      this.direction.copy(this.camera.forward);
      this.direction.y = 0;          
      this.direction.scale(this.MOVE_SCALE);      
      if (this.entity.rigidbody) {
          this.entity.rigidbody.applyImpulse(this.direction);
      }
      e.event.preventDefault();
  };




  Player.prototype.touchEnd = function(e) {
      e.event.preventDefault();
  };




  Player.prototype.reset = function() {
      this.entity.rigidbody.teleport(0, 2, 0);
      this.entity.rigidbody.linearVelocity = pc.Vec3.ZERO;
      this.entity.rigidbody.angularVelocity = pc.Vec3.ZERO;
  };
4

When I run your Deployed version with Chrome Developer Tools open and Device Emulation turned on, the onTouchStart handler is called when I touch the canvas.

How are you testing this? Make sure if you are testing on a non-mobile device to click on the little device icon there on the top left of the console in Developer Tools:

And also select a proper mobile device to emulate this on like an iPad for example (that’s on the top of the browser window after you press the Devices icon):

Also after you enable device emulation you should refresh the tab so that this.app.touch gets initialized properly.

5

Yes you right it works on the browser; but when I touch the screen it losses it because of the VR camera, I get a blank screen but you can still fire the touch event ; anyways ; It does fire on the chrome browser but not on iphone 6 safari or chrome or at lease its no moving teh player. test it yourself on your phone… All I want to accomplish ts to move the player on the phone when the screen it’s being touch…
and for me works only if .

I put this line of code below inside the UPDATE function DEPLOYED WITH SCRIPT ON UPDATE this versionworks on the phone but I think puting the code below in update its wrong because its already at the initialized function

this.app.touch.on("touchstart", this.onTouchStart, this);

afterCLicked.JPG1629×958 185 KB

6

OK I think I got it working, below is the code I just add

     // NEW CODE 4 TOUCHES
      if (this.app.touch) {
          this.app.touch.on("touchstart", this.onTouchStart, this);
          this.app.touch.on("touchEnd", this.touchEnd, this);
      }

to the bottom of the update function so when a touch its fire then it fires the event… this is probably wrong so please advise otherwise.

thanks for your help folks!!!:grinning:

 var Player = pc.createScript('player');

  // initialize code called once per entity
  Player.prototype.initialize = function() {
      if (this.app.touch) {
          this.app.touch.on("touchstart", this.onTouchStart, this);
          this.app.touch.on("touchEnd", this.touchEnd, this);
      } else {
          console.log("No touch input available");
      }

      this.app.mouse.disableContextMenu();
      this.camera = this.app.root.findByName('Camera');
      this.direction = new pc.Vec3();
      this.MOVE_SCALE = 40;
  };

  // update code called every frame
  Player.prototype.update = function(dt) {
     
      if (this.app.keyboard.wasPressed(pc.KEY_R)) {

          this.reset();

      } else if (this.app.keyboard.isPressed(pc.KEY_W)) {

          this.direction.copy(this.camera.forward);

      } else if (this.app.keyboard.isPressed(pc.KEY_S)) {

          this.direction.copy(this.camera.forward).scale(-1);

      } else if (this.app.keyboard.isPressed(pc.KEY_D)) {

          this.direction.copy(this.camera.right);

      } else if (this.app.keyboard.isPressed(pc.KEY_A)) {

          this.direction.copy(this.camera.right).scale(-1);

      } else {
        
          this.direction.x = this.direction.z = 0;
      }

      this.direction.y = 0; // No up/down movement for player

      // Scale the direction to the size of the impulse required to move the player
      this.direction.scale(this.MOVE_SCALE);

      // Apply impulse to player Entity
      if (this.entity.rigidbody) {
          this.entity.rigidbody.applyImpulse(this.direction);
      }
      // NEW CODE 4 TOUCHES
      if (this.app.touch) {
          this.app.touch.on("touchstart", this.onTouchStart, this);
          this.app.touch.on("touchEnd", this.touchEnd, this);
      }

  };


  Player.prototype.onTouchStart = function(e) {
      this.MOVE_SCALE = 1;
      this.direction.copy(this.camera.forward);
      this.direction.y = 0; // No up/down movement for player
      // Scale the direction to the size of the impulse required to move the player
      this.direction.scale(this.MOVE_SCALE);
      // Apply impulse to player Entity
      if (this.entity.rigidbody) {
          this.entity.rigidbody.applyImpulse(this.direction);
      }
      e.event.preventDefault();
  };


  Player.prototype.touchEnd = function(e) {
      e.event.preventDefault();
  };

  Player.prototype.reset = function() {
      this.entity.rigidbody.teleport(0, 2, 0);
      this.entity.rigidbody.linearVelocity = pc.Vec3.ZERO;
      this.entity.rigidbody.angularVelocity = pc.Vec3.ZERO;
  };