The following files have been attached to this tutorial:
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.
---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.
Various components that your game will or may need.
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.
Used as for 0x0 position to determine angle and provide visual cue.
Used for to determine input and moves based on finger position.
A large sprite for dynamic positioning for floating based control. Also optional based on the control design.
instructions unclear accidentally made an call of duty game.
How can i make so it be only 4-Way direction? aka Left, Right, Up, Down
The walk-thru directions doesn't work with mobile and the downloadable file can't be built in C3 - unless there is a hidden way add a function as an object, but I can't find it.
Will there be a C3 version of the download?
I made a simpler version for C3 using only a few lines. You can also touch the joystick everywhere, just like in this example. It also only requires event blocks. Check out my post here: construct.net/en/forum/construct-3/your-construct-creations-9/virtual-joystick-touch-mobile-173339
very useful, saves me a lot of time. :)
This is great, thank you!
Need to specify that this is great for pixel art, for anything else people need to something other than "Letterbox integer scale" and disable Pixel rounding.