Touch Stick Controllers

  • 90 favourites


Attached Files

The following files have been attached to this tutorial:



Download now 202.33 KB


14,872 visits, 43,390 views



This tutorial is licensed under CC BY 4.0. Please refer to the license text if you wish to reuse, share or remix the content contained within this tutorial.

Analog Arcade Stick

Analog best situation use when needing a range of degree and reliable distance rather than an angle or no angle based input. Fidelity allows for the difference of walking, jogging or dashing. Along with the fidelity of the input the controller also provides angle. The draw back is that the analog joystick is more complex requiring more sprites, events and actions.

What you will need

* Pad sprite which will not move and represents the 0x0 point of the controller.

* Stick sprite which represents the relative distance and angle compared to the Pad sprite.


* radius is group which required value to determine the visual distance the stick can travel and is used to determine the fidelity of input.

* dist(ance) in group convenient variable to hold the distance between the pad and the thumb stick location.

*cangle in group is a convenience variable to hold the current angle the pad is in relation to the touch.

* conAngle(controller angle)

* XP horizontal percentage of input ranging from -99.x to 99.x.

* YP vertical percentage of input ranging from -99.x to 99.x.

Event Sheet

How it works

Here we delve into the meat of the touch analog controller. While this input model only has a few events there are a larger number of actions.

*Event One

Capture where the touch event occurs and store the touch ID. The touch ID is vital for any long term touch control. This allows for quick tapping for games if they wanted to offer burst(dodge, dash...) for movement.

*Event Two

A lot more happens in Event two. Here as above the angle is followed, however input follows the graphical stick while the event is updated with the touch using the TouchForID. This is important as a finger that slides off the controller will lose control. This can be ok, but can lead lost control with intense games or just be annoying if the controls aren't the right size. The event continues to follow while the specific ID is in touch. This is important as the Thumb Stick is used to calculate input.

a. Store the distance and angle of the touch location into a convenient variables for math calculations.

b. Calculate the position of the graphical Thumb Stick in relation to the pad. The Thumb Stick is used for the measurement of input. What happens is that the position is determined by angle between the touch event and the pad. The distance is using an inline if statement to determine if the Drag Box is beyond the bounds of the pad radius variable. This allows for control to continue even if the thumb slides off the touchpad.

Code to set position X

    (cos(cangle) [*] (dist < radius ? dist :  radius)) + sanaPad.X

Code to set position Y

    (sin(cangle) [*] (dist < radius ? dist : radius)) + sanaPad.Y

c. Lastly set usable input values determined by the stick position to radius.

The following line retrieves the X percentage of the analog control

    ((sanaStick.X - sanaPad.X)  / radius) * 100

The following line retrieves the Y percentage of the analog control

    ((sanaStick.Y - sanaPad.Y)  / radius) * 100

*Event Three

Similar to Event Two there is more work in ending the input. Center the Thumb Stick and proceed to zero out the input data.


  • Order by
Want to leave a comment? Login or Register an account!