Mobile Joystick customisation

Is there a way to easily customise the Mobile Joysticks so they are two hidden squares (left to move, right to rotate the view) like in more current games. Joysticks are so ugly. I am developing towards iOS.

If I understand correctly, you want the normal function of the two sticks without any graphics? If so…

  1. Click on ‘View Options’ in the Content Browser

  2. Enable ‘Show Engine Content’

  3. Navigate to Engine Content > Mobile Resources > HUD

  4. Right-click and ‘Duplicate’ DefaultVirtualJoysticks. Rename to InvisibleJoysticks (or whatever you wish)

  5. Create a new content folder and move InvisibleJoysticks there. Double-click InvisibleJoysticks to open.

  6. In Photoshop (or whatever image editor you use) create 2 new images with transparent backgrounds.
    - make one 64x64 to put in the ‘thumb’ image slot
    - make the other 256x256 to put in the ‘background’ slot
    - import them into the folder you chose to save InvisibleJoysticks in (I saved my images as .psd)

  7. Click the arrow next to ‘Controls’ to open, then click the arrows next to elements 0 and 1 to open them

  8. Click the dropdown box to the right of each graphic element and replace them with your new images.

  9. Go to your ‘Project Settings’ and under Engine > Input > Mobile > Default Touch Interface choose InvisibleJoysticks

  10. Save and test

Worked for this guy. I’m playing the First Person Template on my Galaxy S3 right now and it’s working fine.
Definitely best to keep ‘Prevent Recenter’ turned off imo.

35312-invisiblejoysticks01.jpg