Touch-based steering wheel control - Wheel "snaps" to random angle upon Touch Start & Touch End

Post reply

❤Follow Topic(3)

0 favourites

2 posts

From the Asset Store

Surena Touch

$2.50 USD

A wrap from official Touch plugin to export touch/mouse input to other plugins.

surena

- Rhindon
- - Joined 8 Jan, 2013
  - 244 topics • 1,045 posts
- 1
- 1 Apr, 2025
- Quote
WHAT I AM TRYING TO DO

On the mobile screen, I want to have a steering wheel object that the Player will touch and then drag along the X-axis, which will, in turn (heh heh..."turn"...okay, I'll stop), the Wheel. As you can see in the screenshot, I'm using Lerp and Unlerp to accomplish this.

Regardless of where the initial Touch is at on the screen, dragging left or right from that point should rotate the Wheel accordingly. For the most part, this works...

THE PROBLEM

When I click on the Wheel, it "snaps" to an angle rather than remaining at the angle it was "at rest". Because I store the initial Touch.AbsoluteX value to an instance variable in the Wheel, and the rotation of the Wheel is based upon how far the Touch is dragged from that same initial X value, it doesn't make sense why the Wheel snaps to any other angle simply from an initial Touch.

This problem is repeated upon Touch End. The Wheel does not Tween/rotate to the desired angle when I release the Touch. Instead, it snaps to a different angle.

WHAT I NEED

I'm hoping that along with a possible solution, someone might help me to better understand the Touch behavior because I do not use it very often at all. There are particulars I'm definitely not familiar with concerning Touch devices (that seems obvious to me). Or maybe it's just the way Construct 3 handles these things. I don't know.

I will keep working at this and trying different things, but I would be grateful for some insight.

Thank you.
Try Construct 3

Develop games in your browser. Powerful, performant & highly capable.
Try Now Construct 3 users don't see these ads
- R0J0hound
- - Joined 15 Jun, 2009
  - 90 topics • 7,393 posts
- 2
- 1 Apr, 2025
- Quote
I guess the basic logic would be this. With no easing.
var startX=0 on touch 0 start -- set startX to touch.xat(0) has touch 0 -- sprite: set angle to touch.xat(0)-startX on touch end --sprite: set angle to 0

A simple way to add easing is to set a target variable which the actual angle is lerped to. Here i used curAngle as one more layer over the sprite's angle to handle the jump from 0 to 360 in a graceful way.

var startX=0 var curAng=0 var targetAng=0 on touch 0 start -- set startX to touch.xat(0) has touch 0 -- set targetAng to touch.xat(0)-startX on touch end --set targetAng to 0 every tick -- set curAng to lerp(curAng, targetAng, exp(-20*dt)) -- sprite: set angle to curAngle

If you wanted to limit the rotation of the wheel you could just clamp() curAng.

Now using lerp() in that way is ok for an ease out, but it will cause jumps if you change the target angle drastically.

Lately I've found a lot of use for damped springs to do stuff like this. Here it uses the x motion of touch to drive the spring. The result is pretty smooth and even some overshoot when turning back to the rest position (although that can be tuned by changing the numbers in the spring event).

dropbox.com/scl/fi/15r86pr9k1k6xvyjxul9y/steering_wheel_horz_touch.capx
Also it's trivial to do the rotation based on how the touch drags around the wheel instead of just x. It's a bit more intuitive imo.

dropbox.com/scl/fi/15r86pr9k1k6xvyjxul9y/steering_wheel_horz_touch.capx