Test it here (WebGL).

Or download APK and test it on your android device.

This asset will provide you with TPS controls for mobile devices that is very easy to setup and use.

How to use it?

Drag and drop “TPS Controls” prefab from “Prefabs” folder to your project hierarchy.

*Camera is attached to “TPS Controls” prefab, so remove any other cameras on your scene.

*When you do this step and click play button in unity editor, you will be able to fully use joystick controls like in example scene. But you may want to change capsule mesh into your custom player 3D model. To do that follow the next steps.

To change capsule mesh into your custom player 3D model delete “PlayerMesh” game object (that it a child object of “Player” game object that you drag and dropped to your project hierarchy in the first step) and place your custom character 3D model instead.

*After this step when you click play button in unity editor, you will be able to move your character but without animations. To set up your animations follow the next step.

To use your custom animation that will require a little bit of coding. Make a new script and use this static variable to detect in which direction player is moving:

JoystickLeft.positionX – If value of this variable is negative (from 0 to -1) player is moving in left direction. If value is positive (from 0 to 1) player is moving in right direction. Example:

if(JoystickLeft.positionX < 0) {
print("player is moving left at the speed: " + JoystickLeft.positionX);
}

if(JoystickLeft.positionX > 0) {
print("player is moving right at the speed: " + JoystickLeft.positionX);
}

JoystickLeft.positionY – If value of this variable is negative (from 0 to -1) player is backward. If value is positive (from 0 to 1) player is moving forward. Example:

if(JoystickLeft.positionY < 0) {
print("player is moving backward at the speed: " + JoystickLeft.positionY);
}

if(JoystickLeft.positionY > 0) {
print("player is moving forward at the speed: " + JoystickLeft.positionY);
}

To detect rotation changes when player drags finger on right side of the screen use JoystickRight.rotX and JoystickRight.rotY.

These variables will return value from 0-360. And use value from JoystickLeft.angle static variable if you are using “Use right area to rotate camera” option.
Using these variables you can make your custom logic for playing animation.

Additional Options

If “Sticky” option is checked joystick will be invisible and it appear on the position where you touch the screen. If this option is unchecked joystick will always stay on the same position.

“Stick Movement Threshold” will determine how much joystick can move from its central position.

“Move Joystick Base On Drag” – whether joystick base should move when you drag outside joysticks base area.

“Sensitivity” will determine how fast character will rotate when player drag the finger on the right side of the screen.

“Rotation Y Max Angle” will limit rotation on Y axis when player drag the finger on the right side of the screen.