> For the complete documentation index, see [llms.txt](https://distubredone322.gitbook.io/custom-vehicle-controller/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://distubredone322.gitbook.io/custom-vehicle-controller/guides/vehicle-controller-input-provider/mobile-input.md).

# Mobile Input

{% hint style="info" %}
To easily configure mobile inputs, make sure [InputSystem package is installed](https://distubredone322.gitbook.io/custom-vehicle-controller/guides/vehicle-controller-input-provider/pages/vjLNxGz5TBtVlAkKFBM7#id-1.-install-input-system-package)
{% endhint %}

### 1. Using the exemplary prefab

Locate the mobile UI controls prefab in "CustomVehicleController/Demo/Prefabs/UI".

<div align="left"><figure><img src="https://3780384024-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVPyvySfaC85jUgVcDPRJ%2Fuploads%2Fxe8v5qNlMVjIcaG4Hp2c%2Fimage.png?alt=media&amp;token=a80d64f8-d7d9-4487-957c-47e791e41793" alt="" width="338"><figcaption></figcaption></figure></div>

Drag and drop it into the canvas in the scene.

<div align="left"><figure><img src="https://3780384024-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVPyvySfaC85jUgVcDPRJ%2Fuploads%2FVz4nkVahZVEvhG7cUORQ%2Fimage.png?alt=media&amp;token=c34d989a-299b-4259-a135-51387d942768" alt="" width="563"><figcaption></figcaption></figure></div>

Delete the  "YouCanDeleteThis" game object. It has buttons that make calls to the DemoManager to swap presets and change drivetrain as well as set the "LeftStick" and "SteerButtons" active/inactive.

If you want to change the image of the buttons, locate the needed game object and change the sprite.

<div align="left"><figure><img src="https://3780384024-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVPyvySfaC85jUgVcDPRJ%2Fuploads%2FsPbUACUkgLrrWGkN6EO7%2Fimage.png?alt=media&amp;token=212b3958-bd35-4824-a54b-c8f1222714e0" alt="" width="563"><figcaption></figcaption></figure></div>

Make sure the image you want to assign is imported as a Sprite.

<div align="left"><figure><img src="https://3780384024-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVPyvySfaC85jUgVcDPRJ%2Fuploads%2FyBjfozILiosXl0jE8kzw%2Fimage.png?alt=media&amp;token=0519ef19-7ce1-403b-8854-2894feba440c" alt="" width="438"><figcaption></figcaption></figure></div>

### 2. Adding you own controls

First of all, add a component that extends IVehicleControllerInputProvider and uses the new InputSystem to the the same gameobject where the CustomVehicleController is attached. You can use the "VehicleInputProviderDemo" component that comes with this package, or [make your own script](/custom-vehicle-controller/guides/vehicle-controller-input-provider/input-system-example.md).

<div align="left"><figure><img src="https://3780384024-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVPyvySfaC85jUgVcDPRJ%2Fuploads%2FUf0PtaWfFTFcxt8zwkva%2Fimage.png?alt=media&amp;token=08c115fb-f4c1-44c5-b285-ad4779bfa519" alt="" width="448"><figcaption></figcaption></figure></div>

Then, locate the input action asset and open it. If you are using the "VehicleInputProviderDemo", open the input actions asset the asset at "CustomVehicleController/VehicleController/Scripts/Input". If your custom script doesn't use this asset, find you own one.

<div align="left"><figure><img src="https://3780384024-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVPyvySfaC85jUgVcDPRJ%2Fuploads%2Fhi5hr8m0ElstsygCrXPI%2Fimage.png?alt=media&amp;token=487062c6-9bb7-453c-9c7c-cd983336e496" alt="" width="440"><figcaption></figcaption></figure></div>

Find the action that you are interested in and remember path.

<div align="left"><figure><img src="https://3780384024-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVPyvySfaC85jUgVcDPRJ%2Fuploads%2Fg4VkY8x2TuUS7Vo6BgwT%2Fimage.png?alt=media&amp;token=7b00ddaa-cc32-4831-8388-ce3200c1c854" alt="" width="563"><figcaption></figcaption></figure></div>

Add new Image to the Canvas.

<div align="left"><figure><img src="https://3780384024-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVPyvySfaC85jUgVcDPRJ%2Fuploads%2FdiBvCpwsqk1USpvQWBy9%2Fimage.png?alt=media&amp;token=0eb6ce84-d61a-4b47-b293-ce7d3cbfbb9a" alt="" width="513"><figcaption></figcaption></figure></div>

Add the "On-Screen Button" or "On-Screen Stick" component.

<div align="left"><figure><img src="https://3780384024-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVPyvySfaC85jUgVcDPRJ%2Fuploads%2FgLdGJKGqr9UQhwQzXlO6%2Fimage.png?alt=media&amp;token=cf722a1b-0410-4f7f-bf0f-49210e08baf6" alt="" width="430"><figcaption></figcaption></figure></div>

In the "Control Path" select the path for the action.

<div align="left"><figure><img src="https://3780384024-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVPyvySfaC85jUgVcDPRJ%2Fuploads%2F0TeARU84QIYFduV4R3pN%2Fimage.png?alt=media&amp;token=28e85c6f-c025-41b9-835a-f8b1bdb11208" alt="" width="437"><figcaption></figcaption></figure></div>
