Touch Inputs to emulate mouse input

Help & Support
1

Hi, I have my firstpersonlook script setup fine for mouse controls however it does not respond to touch input. How do i do this?

I thought that just sticking the same code that is in my mouse move function:

FirstPersonLook.prototype._onMouseMove

into a Touch move function ie(FirstPersonLook.prototype._onTouchMove)

…would give the same result, but sadly when I touch the screen my camera seems to be teleported out of the world.

Whats the best way to do a simple first person look around that supports touch?

2

Hi @Grimmy,

Check this example project here, it features a first person camera controller that supports both mouse and touch input for camera movement:

https://developer.playcanvas.com/en/tutorials/first-person-shooter-starter-kit/

3

Thanks but that seems incredibly complicated and seems to combine joysticks with touch inputs and all kinds of other different control mechanics.

I’m just looking for something as simple like this (This works for mouse move for not for touch):

FirstPersonLook.prototype.onTouchMove = function (e) {
    this.eulers.x +=  e.dx/100;
    this.eulers.y -= e.dy/100;
};

Any idea? Thanks

4

Makes sense, here I’ve updated the default first person movement example to allow for touch based input on mobile (movement is still keyboard only):

https://playcanvas.com/editor/scene/1717295

These are the methods I’ve added:

FirstPersonMovement.prototype.onTouchStart = function (event) {
    // We only care about the first touch. As the user touches the screen, 
    // we stored the current touch position
    const touch = event.touches[0];
    this.lastTouchPosition.set(touch.x, touch.y);
};

FirstPersonMovement.prototype.onTouchMove = function (event) {
    // We only care about the first touch. Work out the difference moved since the last event
    // and use that to update the camera target position 
    const touch = event.touches[0];

    const touchSensitivity = 0.15;
    this.eulers.x -= (touch.x - this.lastTouchPosition.x) * touchSensitivity;
    this.eulers.y -= (touch.y - this.lastTouchPosition.y) * touchSensitivity;

    this.lastTouchPosition.set(touch.x, touch.y);
};

The important bit is onTouchMove doesn’t receive delta x/y, but you need to get that manually. Store the touch start position onTouchStart and calculate deltas on your own.

1 Like
5

This looks like it could be potentially beautiful, but I just tried it and I’m getting the followingerror:

FirstPersonLook.js?id=125043923&branchId=3116b19a-a25b-4811-b013-22f2ebbcef0a:273 Uncaught TypeError: Cannot read properties of undefined (reading ‘set’)

Maybe there is something Im doing wrong although I’ve simply pasted the code as is.
Cheers

6

Ah, forgot to initialize the var:

this.lastTouchPosition = new pc.Vec2();

This all works great! Thanks!

1 Like