Phaser 3 Matter Physics - touch controls

[lapamplamouse]

I am starting out with Phaser/ Phaser 3, so bear with me. I am trying to make a mobile game with viking ship going up a river. the ship will always be moving forward, I wish to have a virtual tiller which the user will touch and drag to angle the ship left and right. I.e Changing the angle which the tiller is displayed on the screen, the more severe the angle the faster the boat will turn. Currently I change direction with the arrow keys on the keyboard.

I tried adding it as a button, but got the error message add.button is not a function.

 

Can anyone suggest where to begin this process? i.e add the tiller  and allow it to tilt (I will be recording it's angle to determine how much to turn the boat). Attached is a image of the what I mean by tilting.

[mattstyles]

Sounds like a fun mechanic.

A button doesn't sound quite correct, its a control for sure, but a button implies binary state, on/off, or, just a single action, i..e press it and something happens. You want something a bit more interesting, depending on what you want a slider is probably the correct control.

What do you actually want though?

Do you want to mimic the current keyboard control? i.e. is it discrete? with the keyboard things are either on or off, so you only have those 3 states, left, right, nothing (i.e. straight). Do want to keep just the 3, or become more fluid such that users can 'slide' with their finger to choose between a range of points i.e. -45% > x > +45% ?

With the discrete case you can use just three buttons on screen, left, right, straight, and, in fact, you can simplify to 2 such that either left or right can be on, or neither can be on (or maybe both also) to signify going straight.

If you want users to swipe left and right then you can have the same discrete mechanism, i.e. swipe to the left side of device, go left, swipe to the right side, go right, swipe to the middle (or maybe up or down makes more sense) to go straight.

Or, with swiping, you can make it more fluid with the range of points. You then just map the amount of swipe, or, the position on screen of the final position of the touch swipe, to your range of values for your tiller, and draw something pretty to represent that value.

This is all a bog-standard slider control (i.e. one of these) does, and I _think_ that is actually what you're planning for users to do, you just want a different render for it.

[lapamplamouse]

Thanks for your reply, but I just got it working.

Yes, I want the slide type controls.

I added a sprite for the tiller, and created a touch rotate function for it using 'pointermove'. I then record the rotation of the tiller and translate that to the degree to which the boat turns.