View source for Touch controls/en

<languages/>
Touch controls are available in the DDNet client since version 18.8, which also marks the first recent release of the client for Android. The previous version for Android is DDNet 9.3.1 for which a [[Special:MyLanguage/Android Tutorial for DDNet 9.3.1|separate tutorial]] exists. In the following we will only consider the touch controls as of versions 18.8 and newer.

The user interface can be used with touch controls as follows:

* Touch anywhere to move the cursor and perform a left click.
* Touch and hold for at least 0.5 seconds on roughly the same position to perform a right click.
* Use two fingers to scroll up and down in scrollable lists like the server browser and in the console.
* On Android: Use the (virtual) Back button like the Escape key to close menus etc.

The ingame touch controls can be enabled/disabled with the config variable <code>cl_touch_controls</code>, which defaults to <code>1</code> on Android and <code>0</code> on other platforms. Touch controls should also work on other platforms that support touch devices, but this guide has primarily been tested on Android.

The ingame touch controls consist of various on-screen touch buttons. The different buttons are only shown when they are usable depending on the context, e.g. buttons for movement are only shown when ingame.

== Default touch button configuration ==

[[File:Touch Controls Default.png|thumb|Screenshot of the default touch controls ingame.]]

Movement buttons for left, right and jump actions are arranged in a <code>⊥</code>-pattern similar to WASD controls.

For the fire and hook action, two modes are implemented:

# Direct touch input: the mouse is moved exactly where the player touches on the screen.
# Virtual joystick: a button is used to emulate a joystick, which moves the mouse relative to the center of the screen.

In either mode, a button is used to switch between the active actions (fire and hook). While the virtual joystick is being held down, this button uses the other action directly instead of switching it.

The direct touch input mode can be adjusted separately for ingame/spectating, to prevent accidental direct touch input when using a joystick.

When spectating, direct touch input is used to allow panning the map directly like in an image/map viewer. Virtual joysticks can also be used to pan the map while spectating.

Two separate buttons are shown to switch to the previous and next weapons.

[[File:Touch Controls Default All.png|thumb|Screenshot of the default touch controls ingame with all buttons being previewed.]]

A hamburger menu button <code>☰</code> is used to toggle the visibility of lesser used touch buttons. This includes buttons for showing the scoreboard, showing the emoticon selector, showing the spectator menu, opening team and team chat, voting yes/no, and zooming. Long pressing the hamburger menu button will open the ingame menu.

When the dummy is connected, a button for swapping between main and dummy is shown.

The emoticon selector and spectator menu are activated with the respective touch buttons and can be deactivated by touching outside of them or by using the back-button, as toggling them while the ingame touch button is pressed down is currently not feasible and also inconvenient at least for using the spectator menu.

== Touch button configuration format ==

The default button layout described above is loaded from the file <code>touch_controls.json</code> in the <code>data</code> directory which should not be modified. This layout can be overridden by creating a file <code>touch_controls.json</code> in the config directory.

The touch button configuration is a text file in JSON format. It is recommended to first learn the basics of the JSON format to understand the following guide. The configuration must be a valid JSON file. Guides and validation tools for the JSON format are available on the internet. The structure of the JSON file is described in the following.

The root element in the JSON file must be an object. The attribute <code>&quot;touch-buttons&quot;</code> of the root object specifies an array of touch button objects. Each touch button object has the following adjustable properties:

* Position and size (attributes <code>&quot;x&quot;</code>, <code>&quot;y&quot;</code>, <code>&quot;w&quot;</code>, <code>&quot;h&quot;</code>): the X/Y position and width/height are integers on a 1,000,000² grid. These ''unit grid'' values are converted to ''screen grid'' values at runtime in relation to the size and aspect ratio of the screen. This means buttons may appear stretched if the resolution is changed, but it allows us to provide a reasonable default for slightly different aspect ratios.
* Shape (attribute <code>&quot;shape&quot;</code>): determines the shape of the button being rendered.
** <code>&quot;rect&quot;</code>: rectangle shape.
** <code>&quot;circle&quot;</code>: circle shape. The button size will automatically be adjusted so that width and height are identical.
* Visibility (attribute <code>&quot;visibilities&quot;</code>): an array of predefined visibility classes can be selected and the button is only shown if all conditions are satisfied. An empty array means that the button is always shown. The following visibility classes are defined:
** <code>&quot;ingame&quot;</code>: player is ingame, i.e. not spectating.
** <code>&quot;extra-menu&quot;</code>, <code>&quot;extra-menu-2&quot;</code>, <code>&quot;extra-menu-3&quot;</code>, <code>&quot;extra-menu-4&quot;</code>, <code>&quot;extra-menu-5&quot;</code>: the extra menu with the given number is activated.
** <code>&quot;zoom-allowed&quot;</code>: zoom is allowed on this server.
** <code>&quot;vote-active&quot;</code>: a vote is currently active.
** <code>&quot;dummy-allowed&quot;</code>: dummy is allowed on this server.
** <code>&quot;dummy-connected&quot;</code>: dummy is currently connected.
** <code>&quot;rcon-authed&quot;</code>: player is currently authed in rcon.
** <code>&quot;demo-player&quot;</code>: demo player is currently active.
** All visibility classes can be inverted by prefixing them with <code>-</code>, e.g. <code>&quot;-ingame&quot;</code> is satisfied when the player is not ingame, i.e. spectating.
* Behavior (attribute <code>&quot;behavior&quot;</code>): an object which describes the behavior of this touch button when it is activated/deactivated as well as its label. The attribute <code>&quot;type&quot;</code> is used to differentiate which type of behavior is used. The behavior is either predefined (hard-coded) or based on generic console commands (like binds). Predefined behavior is only used where necessary, all other buttons are represented as generic binds.
** Predefined behavior (attribute <code>&quot;type&quot;</code> set to <code>&quot;predefined&quot;</code>): The attribute <code>&quot;id&quot;</code> is set to a fixed string value which determines the specific predefined behavior. The following predefined behaviors can be used:
*** <code>&quot;ingame-menu&quot;</code>: Opens the ingame menu immediately when released.
*** <code>&quot;extra-menu&quot;</code>: The extra menu button which toggles visibility of buttons with <code>&quot;extra-menu&quot;</code>, <code>&quot;extra-menu-2&quot;</code>, <code>&quot;extra-menu-3&quot;</code>, <code>&quot;extra-menu-4&quot;</code> and <code>&quot;extra-menu-5&quot;</code> visibilities. Also opens the ingame menu on long press.
**** The attribute <code>&quot;number&quot;</code> specifies an integer between 1 and 5 to associate this button with the respective visibilities <code>&quot;extra-menu&quot;</code>, <code>&quot;extra-menu-2&quot;</code>, <code>&quot;extra-menu-3&quot;</code>, <code>&quot;extra-menu-4&quot;</code>, <code>&quot;extra-menu-5&quot;</code>.
*** <code>&quot;emoticon&quot;</code>: Opens the emoticon selector (this does not work with binds).
*** <code>&quot;spectate&quot;</code>: Opens the spectator menu (this does not work with binds).
*** <code>&quot;swap-action&quot;</code>: Swaps the active action (fire and hook) for direct touch input and virtual joysticks.
*** <code>&quot;use-action&quot;</code>: Uses the active action with the current aiming position.
*** <code>&quot;joystick-action&quot;</code>: Virtual joystick which uses the active action.
*** <code>&quot;joystick-aim&quot;</code>: Virtual joystick which only aims without using an action.
*** <code>&quot;joystick-fire&quot;</code>: Virtual joystick which always uses fire.
*** <code>&quot;joystick-hook&quot;</code>: Virtual joystick which always uses hook.
** Bind behavior (attribute <code>&quot;type&quot;</code> set to <code>&quot;bind&quot;</code>). Buttons with this behavior execute console commands like regular key binds.
*** The attribute <code>&quot;label&quot;</code> specifies as a string the label of the button.
*** The attribute <code>&quot;label-type&quot;</code> specifies as a string the type of the label of the button, i.e. how the attribute <code>&quot;label&quot;</code> is interpreted:
**** <code>&quot;plain&quot;</code>: Label is used as is.
**** <code>&quot;localized&quot;</code>: Label is localized. Only usable for the default buttons for which there are translations available.
**** <code>&quot;icon&quot;</code>: Icon font is used for the label. Icons must be encoded in UTF-16 using <code>\uXXXX</code>, e.g. <code>\uf3ce</code> for the mobile phone icon which has unicode <code>f3ce</code>. Note that the icon must be available in the icon font that comes with DDNet, [https://fontawesome.com/search?o=r&m=free Font Awesome Free].
*** The attribute <code>&quot;command&quot;</code> specifies as a string the command to execute in the console like a bind when this button is used, e.g. <code>&quot;+fire&quot;</code> for a button that uses the fire action.
** Bind toggle behavior (attribute <code>type</code> set to <code>&quot;bind-toggle&quot;</code>). Buttons with this behavior cycle between executing one of two or more specified commands.
*** The attribute <code>&quot;commands&quot;</code> specifies an array of two or more commands in the order in which they are shown and executed. Each command is an object with the attributes <code>&quot;label&quot;</code>, <code>&quot;label-type&quot;</code> and <code>&quot;command&quot;</code> which are defined the same as for the bind behavior described above. At least two command objects must be specified in the array.

The root object additionally has the following attributes:

* <code>&quot;direct-touch-ingame&quot;</code>: specifies the mode of direct touch input while ingame. Possible values:
** <code>&quot;disabled&quot;</code>: Direct touch input is not used while ingame. This means a virtual joystick is necessary.
** <code>&quot;action&quot;</code>: Direct touch input uses the active action (see above).
** <code>&quot;aim&quot;</code>: Direct touch input only changes the aiming position without using an action. This means separate buttons for using the actions are necessary.
** <code>&quot;fire&quot;</code>: Direct touch input always uses fire.
** <code>&quot;hook&quot;</code>: Direct touch input always uses hook.
* <code>&quot;direct-touch-spectate&quot;</code>: specifies the mode of direct touch input while spectating. Possible values:
** <code>&quot;disabled&quot;</code>: Direct touch input is not used while spectating. This means a virtual joystick is necessary.
** <code>&quot;aim&quot;</code>: Direct touch input is used for spectating.

== Ingame menu buttons ==

[[File:Touch Controls Menu Bar.png|thumb|Screenshot of the additional buttons in the ingame menu when touch controls are enabled.]]

In addition to the separate on-screen touch controls, a second row is added to the main page of the ingame menu when <code>cl_touch_controls</code> is enabled for less frequently used functions which are otherwise not usable without a keyboard:

* Buttons to open the local and remote consoles. Opening the local console without the touch controls is useful because error messages would be shown there if the touch controls configuration could not be loaded.
* Button to close the menu, which is more convenient than using the virtual back button if it's not always shown.
* Checkbox for toggling the touch controls editor UI (see below).

== Ingame touch controls editor ==

[[File:Touch Controls Menu Editor.png|thumb|Screenshot of the ingame touch controls editor user interface.]]

The user interface to adjust the touch controls is rendered over the main screen of the ingame menu when enabled. For now, the touch controls editor is limited to basic configuration management functions.

* Saving the configuration to the <code>touch_controls.json</code> file in the config directory.
* Discarding the current changes by reloading the <code>touch_controls.json</code> file from the config directory.
* Restoring the default configuration by reloading the <code>touch_controls.json</code> file from the data directory.
* Displaying whether there are unsaved changes.
* Importing and exporting the configuration from and to the clipboard. This is the only way to edit the configuration on newer Android versions, as editing files within apps' storage is not possible anymore.

Furthermore, the global touch controls settings can be adjusted in this UI:

* The direct touch input modes while ingame and spectating (see Touch button configuration format) can be adjusted using dropdown menus.

While the touch controls editor is active, all touch buttons are shown regardless of their visibilities, to better support arranging the buttons.

=== Adjusting the controls ===

# Export the touch configuration to the clipboard.
# Save the clipboard to a file so you can more easily edit it. You should also do this to have a backup of your configuration!
# Edit the configuration (see above for details about the format).
# Copy the edited configuration to the clipboard and import it in the client again. If the configuration could not be loaded successfully, check the local console for error messages containing <code>touch_controls</code> and fix the configuration accordingly. Use online tools for JSON validation and formatting.
# Save the changes in the client when you are done. You can also discard your changes or revert to the default if you messed up.

A more convenient user interface to edit the touch controls directly in the client is planned.

Note: You can also edit the file <code>touch_controls.json</code> in the config directory directly instead of exporting/importing to/from the clipboard, but this is not supported on Android.

<span id="examples"></span>

== Examples ==

Example for the overall structure of the touch configuration:

<syntaxhighlight lang="json">{
    "direct-touch-ingame": "action",
    "direct-touch-spectate": "aim",
    "touch-buttons": [
        ...
    ]
}</syntaxhighlight>

Example button with <code>&quot;bind&quot;</code> behavior that echos a message in chat:

<syntaxhighlight lang="json">{
    "x": 500000,
    "y": 500000,
    "w": 100000,
    "h": 100000,
    "shape": "rect",
    "visibilities": [
    ],
    "behavior": {
        "type": "bind",
        "label": "Example",
        "label-type": "plain",
        "command": "echo Hello world!"
    }
}</syntaxhighlight>

Example button with <code>&quot;predefined&quot;</code> behavior for a virtual joystick that uses the active action:

<syntaxhighlight lang="json">{
    "x": 755000,
    "y": 580000,
    "w": 225000,
    "h": 400000,
    "shape": "circle",
    "visibilities": [
        "ingame"
    ],
    "behavior": {
        "type": "predefined",
        "id": "joystick-action"
    }
}</syntaxhighlight>

Example button with <code>&quot;bind-toggle&quot;</code> behavior that switches between echoing three different messages in chat:

<syntaxhighlight lang="json">{
    "x": 600000,
    "y": 200000,
    "w": 100000,
    "h": 100000,
    "shape": "rect",
    "visibilities": [
    ],
    "behavior": {
        "type": "bind-toggle",
        "commands": [
            {
                "label": "Echo 1",
                "label-type": "plain",
                "command": "echo 1"
            },
            {
                "label": "Echo 2",
                "label-type": "plain",
                "command": "echo 2"
            },
            {
                "label": "Echo 3",
                "label-type": "plain",
                "command": "echo 3"
            }
        ]
    }
}</syntaxhighlight>

== Known issues ==

* '''Problem on Android''': Pressing down 3 or more fingers at the same times causes all fingers to be released immediately.
** '''Solution''': This is caused by features of your phone that handle global gestures with multiple fingers. Open the Settings app and disable gesture features that involve 3 or more fingers (search for &quot;3 fingers&quot;). In particular, disable the &quot;Swipe down with 3 fingers to take screenshot&quot;, &quot;Touch and hold with 3 fingers to take screenshot&quot; and &quot;Swipe up with 3 fingers to enter Split View&quot; features.
* '''Problem on Android''': Rarely, touching in the top around 15% of the screen does not work at all or very inconsistently.
** '''Solution''': It is unclear what causes this. It should be fixed by restarting the app. Going back to the home screen may also fix it.

== Implementation details ==

These are details about the implementation of the touch controls intended for developers.

The ingame touch controls are implemented in a separate client component <code>CTouchControls</code> in the files <code>src/game/client/components/touch_controls.cpp</code> and <code>src/game/client/components/touch_controls.h</code>. Whenever possible, binds are used directly as button behavior instead of using predefined behavior to reduce complexity.

When adding your own button behavior in a forked client it is recommended to prefix names of new shape, visibility, behavior etc. with the name of your fork, e.g. <code>myfork.octagon</code> if you add a new shape for octogonal buttons, to prevent conflicts in future versions.

To add touch support for other ingame client components like the emoticon wheel and spectator menu, use the <code>CUi::UpdateTouchState</code> function like for the emoticon wheel and spectator menu. Ensure that your component handles <code>KEY_ESCAPE</code> to close itself, which also corresponds to the Back-button on Android. Note that only one component may use the touch state in each frame, so it is not possible to hold an ingame touch button and use another component like the emoticon wheel at the same time with other fingers. Instead, the respective predefined touch button behavior (e.g. <code>CSpectateTouchButtonBehavior</code>) only activates the ingame component (e.g. the spectator menu) in its <code>OnDeactivate</code> function but does not deactivate it again. Activating the component in the <code>OnActivate</code> function already would cause the finger that activated the button to also affect the activated component.

== References ==

* Default touch button configuration: https://github.com/ddnet/ddnet/blob/84b1c3c49c8d97a6911da34424d2023879ccdaf8/data/touch_controls.json
* Pull Request adding Touch controls to engine and UI: https://github.com/ddnet/ddnet/pull/8621
* Pull Request adding Ingame touch controls: https://github.com/ddnet/ddnet/pull/8632
* Pull Request adding Emoticon and Spectate touch controls: https://github.com/ddnet/ddnet/pull/8801