Touch Controls in PlayCanvas?

Help & Support
1

I’ve been trying to get touch controls for a game. I tried to use ‘touchstart’ & ‘touchend’ events & buttons, but it isn’t working. Here’s my code:

var Redleft = pc.createScript('redleft');

//Attributes
Redleft.attributes.add("player", { type: 'entity', title: 'Player' });

//Variables
var speed = 600;

// initialize code called once per entity
Redleft.prototype.initialize = function() {
    this.entity.element.on('touchstart', this.onPress, this);
    this.entity.element.on('touchend', this.onRelease, this);
    this.app.keyboard.on(pc.EVENT_KEYDOWN, this.onKeyDown, this);
};

// update code called every frame
Redleft.prototype.update = function(dt) {
    
};

Redleft.prototype.onPress = function(event, dt) {
    this.player.rigidbody.applyForce(-speed * dt, 0, 0);
};

// swap method called for script hot-reloading
// inherit your script state here
// Redleft.prototype.swap = function(old) { };

// to learn more about script anatomy, please read:
// http://developer.playcanvas.com/en/user-manual/scripting/

Here’s the link to the editor: https://playcanvas.com/editor/scene/798695

Does anyone know how I can use buttons & touch controls to move entities that have rigidbodies?

1 Like
2

What browser are you using?

3

Chrome

4

@yaustar, @will, @DevilZ. Do you guys have any ideas on how to fix my code or how to get it to work?

5

@DevilZ I’m using chrome.

6

OK. I forked your project and once I understood what you were doing better it became obvious that you had one clear problem, you never identified “this.player”

So I added a findByName and defined “this.player” as “Square01”.

That’s all you need to get the touch function to affect the sprite. The problem is that the sprite disappears immediately when the red “L” is clicked. And since I don’t understand how “dt” factors into things, I just eliminated it to see if I have the touch function working - and I do. I’m leaving it to you to figure out how “dt” factors into things. I did show that was undefined in your onPress function. So I just copied dt from your update function to a deltaTime variable. That works, but seems to have 1/10th of the effect on movement as you get when using the arrow keys. But like I said, I’m leaving that issue for you and others to figure out. Here’s the script as modified:

var Redleft = pc.createScript('redleft');

//Attributes
Redleft.attributes.add("player", { type: 'entity', title: 'Player' });

//Variables
var speed = 6000;
var deltaTime = 0;


// initialize code called once per entity
Redleft.prototype.initialize = function() {
    this.entity.element.on('touchstart', this.onPress, this);
    this.entity.element.on('touchend', this.onRelease, this);
    this.app.keyboard.on(pc.EVENT_KEYDOWN, this.onKeyDown, this);
    this.player = this.app.root.findByName('Square01');   
};

// update code called every frame
Redleft.prototype.update = function(dt) {
    this.deltaTime = dt;
    
};

Redleft.prototype.onPress = function(event, dt) {
    //console.log('touch worked!');
    console.log('dt value is:', this.deltaTime);
    this.player.rigidbody.applyForce(-speed * this.deltaTime, 0, 0);
    //this.entity.rigidbody.applyForce(-this.walkSpeed * dt, 0, 0);
};

// swap method called for script hot-reloading
// inherit your script state here
// Redleft.prototype.swap = function(old) { };

// to learn more about script anatomy, please read:
// http://developer.playcanvas.com/en/user-manual/scripting/
1 Like
7

Thanks! I’ll implement this code tomorrow.