Special camera controls with joystick

Also sorry to ask again sir but when increasing the sensitivity of the right joystick which controls the camera tapping on the screen to move it is fine but when you tap/hold and then move the camera moves too quickly.

Is there possible to remove the tap/hold/move behaviour? and just keep movement to taps? (i mean for the orbit camera)

I don’t understand what you mean?

If you want just taps, use buttons instead of a joystick or rather than reading the joystick axes values directly, with the joystick id and use the axis values only if the it ‘wasPressed’

1 Like


Yes I mean just taps instead of joystick. Is there a way to toggle off what happens in the video below?

Also I did not understand what you meant by wasPressed sorry.


Use button instead of a joystick would be the easiest method

Or you can do something like this perhaps (untested) which I was referring to earlier regarding using ‘wasPressed’ (see API: Touchscreen Joypad Controls | Learn PlayCanvas)

const buttons = window.touchJoypad.buttons;
const joystick = window.touchJoypad.sticks[this.joystickId];
if (buttons.wasPressed(this.joystickId)) {
    this.orbitCamera.pitch += joystick.y * this.orbitSensitivity * dt;
    this.orbitCamera.yaw -= joystick.x * this.orbitSensitivity * dt;

This will check if the joystick was ‘just pressed’ and then reads the joystick value

1 Like

I tried your solution with a button instead of joystick but the camera turned off and went grey

Chances are that one of the values was NaN. You will need to debug if the values used are what you expecting or where the NaN is coming from

The code I posted for the joystick works fine here in a test project: https://playcanvas.com/project/1019354/overview/f-camera-just-tapped-touch-scre

1 Like

Thanks I tested your version it is a bit buggy sometimes the taps do not register or if you tap left it goes right etc.

I have been trying to do it like buttons as you first suggested, the values are reading NaN always. Do I need to set up an x and y axis for the buttons for it to work? I also did that and then it was NaN again.

Buttons don’t have X and Y values. You would hard code the numbers to move the camera by whatever amount you want when the button is pressed.

I can’t see this issue from the video below

1 Like

I dont know I just tested again and the camera zaps from 1 position to another (I did 1000 sensitivity though) also I use move to first touch and drag so I can use a wider area of the canvas instead of just the joystick.

In your version I think just pressing the sides of the joystick moves it nicely however when you drag it a bit it happens like above. I want just taps but also drag but not like the video I posted above, in the video above when you move joystick and drag it a bit and leave your finger on the camera keeps moving. What I want to achieve is you can drag joystick to move camera but if you leave your finger on it I want it to stop but only move when you drag your finger.

Sorry for not explaining it better english is not my main language I am struggling but if you need videos I can post them and a sample project I am at school now sorry.

I think a video would be best here as what you are describing doesn’t sound like a good fit for joystick controls.

Here is what I want to happen with just tapping/dragging on the screen

Here is what happens when you tap/drag then stop dragging but keep your hand on the screen. I want to eliminate this from happening so it is just like the first video

Okay, thats a completely different control scheme to what you use a joystick for so you shouldn’t use it for this.

You will need to make your own controls for this like we’ve down in this Orbit Camera example Orbit camera | Learn PlayCanvas

Hello Yaustar

I had some time to do this today and managed to use the orbit camera you linked instead of the joystick. It is working well however when I move with the movement joystick the camera stops moving and is buggy. However when not interacting with the joystick the camera moves perfectly.

Do you know why this might happen? It is interfered with each other I think.


The issue is that the touch input for the orbit camera doesn’t track the touch id of what is controlling it so it get confused when there are 2 touches on the screen as you are finding out.

If we get rid of the zoom in/out pinch gesture, that will make this easier to handle.

The other issue is that when you move your joystick, the touch event is consumed by the joystick so that the world doesn’t get any input. This prevents the touch controls for the camera getting the event to update.

Your best bet here may actually to use an element like a touchpad instead.

I’ve done a very quick example here so you can see what I mean:

1 Like

Thank you yaustar, you really are the star! :star: :face_with_hand_over_mouth: