Touch Stick Controllers

Favourite 94 favourites
Tutorial written by jayderyuOriginally published on 17th, October 2012 - 14 revisions

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.
analog stick sprites
* 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.
analog stick variable
Event Sheet
analog 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.


jayderyu 15.2k rep

Oops, I thought this would go through a submission process first. I should have asked on the forums first :|. I am more than happy to update with any corrections due to any mistakes or improvements that are suggested.

Wednesday, October 17, 2012 at 9:13:19 PM
urbano 5,099 rep

Good TUTO..... ^_~x

Thursday, October 18, 2012 at 2:27:52 PM
Duke 3,365 rep

SPEECHLESS!!!! Buddy, this is really good!
Thank you so much for your help, is precious!

Thursday, October 18, 2012 at 3:37:30 PM
JarrydHuntley 8,484 rep

The link for the Live Demo is incorrect. Otherwise great walk-through! Thanks!!!

Friday, October 19, 2012 at 3:44:57 PM
UrbanKhalifah 3,877 rep

thanks a lot

Friday, October 19, 2012 at 3:46:30 PM
fathomeo 3,682 rep

Great tutorial!! thanks

Friday, October 19, 2012 at 8:35:29 PM
jayderyu 15.2k rep

ok, I think I fixed the link to the live demo. It's working after the edit. Thank your for the positive comments. They are very much appreciate.

Saturday, October 20, 2012 at 1:01:30 AM
vivekdx 2,703 rep

Nice one man......... Keep it up

Saturday, October 20, 2012 at 11:44:05 AM
zsangerous 12.9k rep

hi ^^ this looks like my analog example that i posted some days ago .. can you put the link of my topic so it would be more easier to find my example ^^

i really liked your tutorials :) but the difference from this and mine that mine is movable analog

Sunday, October 21, 2012 at 2:48:12 AM
jayderyu 15.2k rep

@zsangerous, more than happy to add your link. The graphics sample is an excellent touch :) I put in in the references in the bottom. If you want it else where just let me know.

You certainly beat me to the result that's for sure. I was planning on creating one, but didn't start mine until Oct 12'ish and even then I was only tinkering. It's a good analog touch. However, I didn't know about this example when I created my own nor knew about it when I wrote the tutorial.

I noticed that the stick(whatever you want to call it) has a delay to it. I'm unable to get access to the capx. Are you using somekind of movement command. I like the effect and it seems like a really good one for when using it in the sample you have. IE moving an object 1:1 based angle.

Sunday, October 21, 2012 at 5:21:36 AM
zsangerous 12.9k rep

thanks for the links ^^ , i have updated all the links in my topic and there is a mobile version you can try it in your mobile :)

and again thanks for the tutorial ^ _ ^

about last thing , in my analog i have 3 circle = 1 will show me the range , 1 for the middle of the range , 1 for the comparing between the middle and it...

so it will be like this : if the 3rd one is in the right of the middle one >>> the player go right

i hope you understand it ^^ if you didn't try to check the capx it has some comments on it.

also you can do it in a different way but it will be hard to others to understand it . (i mean with maths and stuffs..)

Sunday, October 21, 2012 at 11:59:49 AM
jayderyu 15.2k rep

I will be making some updates for practical application shortly. It works well for principle design, but in use with more complicated layers it has a few problem

Monday, October 22, 2012 at 4:19:00 AM
kenli 7,858 rep

wow, really helpful for touch screen input :)

Wednesday, October 24, 2012 at 3:17:44 PM
jayderyu 15.2k rep

Updated and fixed. Tested on ipad2(ios6), acer a500(android ICS), iPodTouch 4g(ios5), Chrome, FireFox and Opera.

I also included referenced angle based controller and two ways to have floating based position control.

please feel free to correct and comment. Up Votes are always awesome.

Saturday, December 01, 2012 at 12:04:58 PM
Iplaygames 3,036 rep

Very good tutorial, thanks jayderyu!

I'm having trouble getting to tap UP between 2 angles,using the "in between 2 values" condition to simulate jump. Any help is appreciated.

Thursday, January 10, 2013 at 6:08:59 PM

Leave a comment

Everyone is welcome to leave their thoughts! Register a new account or login.