Touch Stick Controllers

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

---Note(30 December 2013) Please note for the time being a new CAPX and test page links in the back are updated. Prior comments of the tutorial not working were made. The tutorial only covered the principles. I have edited the tutorial CAPX to take into account practical use on mobile devices. The written tutorial will be updated in the future with images. Then this note will be removed. ---

The variety and needs of games change; having the right tools for the job makes developers and gamers appreciative. The tutorial covers the basic tools and principles so that you as a developer can offer the best experiences for your players. This tutorial is aimed to assist in creating touch based virtual thumb sticks. The tutorial will cover analog and angle based input; while also cover how to create floating positions. For now be familiar with basics of touch screen controls by reading up on on Scirra's tutorial first as this tutorial assumes that the basic's are already covered.

Angle vs Analog
The angle controls provide a no distance factor for control. The thumb stick can be dragged anywhere on the screen. The controller type best offers only angular control as a touch screen DPI is unreliable. The angle stick is also the easier to implement with the fewest Events and Actions.

Analog is used to measure a fidelity of input range. Using a reliable range of degree between Left/Right and Up/Down. The thumb stick it self is best limited to reflect this range of input and often looks like an arcade based joystick. An angle based controller requires more Events and Actions.

Static vs Floating position
Keeping the controls in a single position offers the user a reliable location for the control. This often leads the gamer to be come accustomed to the position.

Floating based positions however doesn't require the gamer to become familiar with the controls position. This allows for small and large hands to play the game the same from the beginning, immediate input for users where ever they press, no muscle conditioning required.

Touch Screen and DPI
The basics of touch screens is a simple point oriented input. However, the diversity of touch screens are rather broad. Ranging from 3.5 to 10 inches for any practical gaming device. This leads to screen resolutions that range from low to retina displays. The DPI is very broad among the large and still growing number of devices. When designing the input touch controls relying on distance becomes unreliable. Keep this in mind when designing controls so that your games can provide the best experience for your gamers.

Components used in this tutorial

Various components that your game will or may need.

Touch Plugin
As this is required for all touch(doesn't really need mentioning)

Drag and Drop Behaviour
Required for accurate control on multi input touch devices.

Pad Sprite
Used as for 0x0 position to determine angle and provide visual cue.

Stick Sprite
Used for to determine input and moves based on finger position.

Area Sprite
A large sprite for dynamic positioning for floating based control. Also optional based on the control design.


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,673 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.