Touch Stick Controllers

9

Index

Attached Files

The following files have been attached to this tutorial:

.capx

touchsticktut.capx

Download now 202.33 KB

Stats

18,131 visits, 49,132 views

Tools

License

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.

Published on 17 Oct, 2012. Last updated 19 Feb, 2019

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

  • 8 Comments

  • Order by
Want to leave a comment? Login or Register an account!
  • 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.

  • instructions unclear accidentally made an call of duty game.

  • This is what I was looking for, you can update the functions to built-in functions by right clicking them.

  • Thanks a bunch man, so many years later still the best one out there.

  • How can i make so it be only 4-Way direction? aka Left, Right, Up, Down

  • Load more comments (3 replies)