Guía del diseñador para crear controles táctiles

​

Tabla de contenido

1. Información general
   1. Ventajas de agregar controles táctiles a los juegos de consola XBOX
2. Procedimientos recomendados
   1. Juegue primero a otros juegos compatibles con controles táctiles
   2. Use controles táctiles para jugar a su juego sin modificar
   3. Empiece desde una plantilla y manténgase minimalista
   4. Siga las directrices de colocación de controles
      1. Rueda izquierda
      2. Rueda derecha
      3. Superior
      4. Inferior
   5. Siga las sugerencias para tipos de controles específicos y escenarios avanzados
      1. Crucetas de 4 y 8 direcciones
      2. Apuntado con giroscopio y sugerencias para juegos de disparos
      3. Control de acciones complejas y combinadas
   6. Use el Editor del kit de adaptación táctil
   7. Cambie los controles táctiles para que coincidan con el escenario actual del juego
   8. Use un diseño cinematográfico para mantener la inmersión durante películas y escenas de corte
   9. Use la entrada táctil nativa para personalizar por completo las interacciones táctiles
   10. Use recursos personalizados para que coincidan con el estilo artístico del juego
   11. Cambie la interfaz de usuario del juego, las sugerencias y la reasignación de controles para los controles táctiles
   12. Compruebe los problemas comunes de los controles táctiles y XBOX Game Streaming
       1. Desconexión durante el juego
       2. Compatibilidad con varios tipos de dispositivos

​

Información general

​

Ventajas de agregar controles táctiles a los juegos de consola XBOX

​

Procedimientos recomendados

​

Juegue primero a otros juegos compatibles con controles táctiles

​

Use controles táctiles para jugar a su juego sin modificar

​

Empiece desde una plantilla y manténgase minimalista

​

Siga las directrices de colocación de controles

​

Rueda izquierda

Interior

Sugerencias

1. Use un joystick izquierdo no relativo (absoluto) en juegos controlados por personajes. El término relativo se refiere a cómo responde un joystick al movimiento táctil con respecto a dónde comenzó el toque. Para obtener más información, consulte Joystick.
2. Use en su lugar un joystick izquierdo relativo si un juego tiene un sistema para cambiar la velocidad, como pasar de caminar a correr según la cantidad de entrada del joystick izquierdo. El joystick no relativo no funciona bien en la situación en la que un jugador necesita cambiar gradualmente la entrada para cambiar la velocidad.
3. En juegos 2D que pueden usar una cruceta o el joystick izquierdo para controlar la locomoción del personaje, use un control de cruceta direccional en lugar de un control de joystick. Hágalo a menos que el joystick izquierdo proporcione funcionalidad que una cruceta no ofrece (por ejemplo, velocidad o dirección de ángulo fino). Cuando use un joystick en lugar de una cruceta, use preferiblemente un joystick no relativo para la locomoción de personajes en 2D.
4. Para diseños específicos que solo navegan por menús, use un control de cruceta cuando sea posible. Si no se puede usar una cruceta, use un joystick no relativo.
5. Use un joystick relativo para diseños simples. Los joysticks relativos son más familiares para los jugadores acostumbrados a un mando. Sin embargo, un joystick no relativo puede ofrecer un techo de habilidad más alto al permitir a los jugadores aplicar más rápidamente la entrada deseada sin necesidad de arrastrar siempre el toque. Pruebe ambos tipos de joystick para hacerse una buena idea de cuál es más agradable.

Exterior

Sugerencias

1. Cree un clúster de controles del anillo exterior para las acciones secundarias y terciarias. Esto proporciona un área de impacto más grande para esta acción. Cuando use solo un control en un clúster, considere usar una sintaxis de clúster de [<your secondary action control>, null] o [null, <your secondary action control>] para crear un clúster de dos controles con un espacio en blanco que coloque el control único ligeramente más hacia dentro o hacia fuera del anillo en comparación con [<your secondary action control>].
2. Coloque la acción secundaria fuera de la parte superior izquierda del anillo interior, en las ranuras 7 y 8. Esto proporciona un acceso fácil sin necesidad de estirarse más hacia el centro de la pantalla. No divida la ranura secundaria (clúster de controles) hasta que todas las demás ranuras de la rueda estén llenas y se necesite espacio.
3. Coloque la acción terciaria directamente debajo del anillo interior, en las ranuras 4 y 5. Esta es una posición cómoda para mover rápidamente el pulgar desde la acción principal. No divida la ranura terciaria (clúster de controles) hasta que todas las demás ranuras de la rueda estén llenas y se necesite espacio.

4. Considere qué acciones deben mantenerse pulsadas junto con la locomoción del jugador (como mantener pulsado para agacharse o esprintar). Cree un control de joystick con una asignación action para permitir que ambas acciones ocurran juntas y dejar el pulgar derecho libre para otras acciones importantes. Para ver un ejemplo, consulte Un joystick que cambia de caminar a esprintar cuando se supera un umbral.

​

Rueda derecha

Interior

Sugerencias

1. Para acciones usadas con frecuencia que puedan requerir mantener pulsada otra acción, por ejemplo apuntar con la mira, considere usar un control de botón con una pullAction para permitir que un solo toque active tanto apuntar como disparar.

Exterior

Sugerencias

1. Cree un clúster de controles del anillo exterior para las acciones secundarias y terciarias con el fin de proporcionar un área de impacto más grande para esta acción. Cuando use solo un control en un clúster, considere usar una sintaxis de clúster de [<your secondary action control>, null] o [null, <your secondary action control>] para crear un clúster de dos controles con un espacio en blanco que coloque el control único ligeramente más hacia dentro o hacia fuera del anillo en comparación con [<your secondary action control>]. No agregue controles adicionales al clúster secundario hasta que todas las demás ranuras de la rueda estén llenas y se necesite más espacio.
2. Coloque la acción secundaria fuera de la parte superior derecha de la acción principal, en las ranuras 1 y 2. Esto permite un acceso fácil sin necesidad de estirarse más hacia el centro de la pantalla. No divida la ranura secundaria (clúster de controles) hasta que todas las demás ranuras de la rueda estén llenas y se necesite espacio.
3. Coloque la acción terciaria directamente debajo del anillo interior, en las ranuras 4 y 5. Esta es una posición cómoda para mover rápidamente el pulgar desde la acción principal. No divida la ranura terciaria (clúster de controles) hasta que todas las demás ranuras de la rueda estén llenas y se necesite espacio.

4. Use acciones de tipo salto en la ranura terciaria.

5. Dependiendo de lo cerca que otras acciones deban estar de una acción de tipo salto, considere colocarlas en la ranura secundaria (un clúster entre las ranuras 1 y 2) o en la ranura 6. Desde ahí, la agrupación entre las ranuras 5 y 6 coloca otra acción cerca del salto.

6. Siempre que sea posible, use el control de sensor de giroscopio para controlar la cámara. Esto libera el pulgar derecho para otra acción en todo momento. Como último recurso, use un joystick derecho relativo para controlar la cámara.

​

Superior

Sugerencias

1. En las secciones cinematográficas del juego, la zona superior puede usarse para una acción de omitir. La esquina superior derecha es un lugar común para las acciones de navegación y probablemente estará en una banda horizontal o vertical (letterbox o pillarbox).
2. La esquina superior izquierda está reservada para los botones del sistema. Los jugadores esperan acciones similares que puedan pausar o navegar por el juego en la fila superior. Considere colocar elementos como el mapa, el inventario y el menú en esta área.

​

Inferior

Sugerencias

1. Aunque es posible colocar controles en blanco en la zona inferior para ajustar la posición de los controles, recuerde que los distintos factores de forma de los dispositivos pueden permitir que se vean menos controles. No intente colocar controles en las esquinas inferiores agregando muchos controles en blanco. A menudo se superponen con las ruedas de control. Los jugadores mueven con frecuencia sus ruedas ligeramente más abajo para lograr una posición de juego cómoda.

​

Siga las sugerencias para tipos de controles específicos y escenarios avanzados

​

Crucetas de 4 y 8 direcciones

Sugerencias

1. Use una cruceta de 8 direcciones cuando un juego 2D permita que un personaje se mueva en ocho direcciones, incluidas las diagonales.
2. Use una cruceta de 4 direcciones cuando un juego 2D permita que un personaje se mueva solo en cuatro direcciones: izquierda, derecha, arriba y abajo.
3. Use una cruceta de 4 direcciones para controlar menús.

​

Apuntado con giroscopio y sugerencias para juegos de disparos

Sugerencias

1. Use un giroscopio para controlar la cámara de visión del jugador. Para los jugadores tiene un sentido intuitivo poder inclinar un dispositivo de izquierda a derecha y de adelante hacia atrás para controlar la cámara con precisión.
2. Usar un giroscopio con entrada de mouse (especifique "output": "relativeMouse") es muy superior para apuntar en los juegos frente a usar un joystick (especifique "output": "relativeJoystick"), especialmente en juegos en primera y tercera persona.
3. Una rotación de 90 grados de un teléfono en el espacio físico suele girar al personaje del juego 120 grados. Esta funcionalidad facilita que los jugadores cambien entre juegos y que los controles les resulten más familiares.
4. Es preferible usar un giroscopio con un panel táctil. Los mejores jugadores querrán esta combinación para orientarse rápidamente: la mayor parte del apuntado fino proviene del giroscopio.
5. Considere combinar un joystick con un giroscopio para permitir más formas de jugar. Los controles del giroscopio pueden usarse para hacer pequeños ajustes además de lo que proporciona el joystick.
6. Un estilo de giroscopio “Always on” tiene el techo de habilidad más alto; sin embargo, este estilo no funciona bien para jugadores en vehículos en movimiento.
7. Cuando sea posible, use un diseño diferente sin controles de giroscopio para los menús y otras secciones de los juegos donde no sea necesario.
8. Cree la mayoría de los botones con paneles táctiles con "renderAsButton": true, dependiendo de su acción y de cómo el juego admita esas capacidades. Apuntar+Disparar es el ejemplo principal, pero esto puede aplicarse a cosas como bloquear y lanzar granadas. Este es un ejemplo de control de panel táctil de Apuntar (LT) + Disparar (RT).

{
    "type": "touchpad",
    "axis": [
        {
            "input": "axisX",
            "output": "relativeMouseX",
            "sensitivity": 5
        },
        {
            "input": "axisY",
            "output": "relativeMouseY",
            "sensitivity": 2.5
        }
    ],
    "renderAsButton": true,
    "action": [ "rightTrigger", "leftTrigger" ],
    "styles": {
        "default": {
            "faceImage": {
                "type": "icon",
                "value": "fire"
            },
        }
    }
}

9. Coloque siempre Apuntar+Disparar más hacia el centro de la pantalla, normalmente en la ranura 5 en el exterior de la rueda derecha. Si se coloca en el borde, donde el jugador no puede girar la cámara completamente hacia la derecha, se quedará sin espacio para deslizar.
10. Al crear un nuevo diseño táctil para juegos de disparos en primera o tercera persona, use la plantilla inicial de shooter en primera persona. Cada posición de acción ha sido bien analizada.

​

Control de acciones complejas y combinadas

Sugerencias

1. Se pueden asignar varias acciones a un solo control. Por ejemplo, agacharse se activa presionando simultáneamente el bumper izquierdo y el bumper derecho. La siguiente definición de botón permite a un jugador activar el agacharse con una sola pulsación.

{
    "type": "button",
    "action": [ "leftBumper", "rightBumper"],
    "styles": {
        "default": {
            "faceImage": {
                "type": "icon",
                "value": "crouch"
            }
        }
    }
}

2. Se puede asignar una pullAction a un control de botón. Ayuda a un jugador a usar un solo movimiento de tocar y arrastrar para activar dos acciones. Por ejemplo, apuntar se asigna a LT y disparar se asigna a RT. La siguiente definición de botón permite a un jugador apuntar mientras presiona el botón y, a continuación, disparar tirando hacia fuera.

{
    "type": "button",
    "action": "leftTrigger",
    "pullAction": "rightTrigger",
    "styles": {
        "default": {
            "faceImage": {
                "type": "icon",
                "value": "aim"
            }
        },
        "pulled": {
            "faceImage": {
                "type": "icon",
                "value": "fire"
            }
        }
    }
}

3. Un joystick con action y actionThreshold activa una acción asignada, además de su salida de eje, solo si se alcanza el valor de actionThreshold. Por ejemplo, solo se activa la entrada del joystick izquierdo. El sprint se activa presionando RT con la entrada del joystick izquierdo. La siguiente definición de joystick permite a un jugador activar el sprint al superar el valor de umbral de 2.5. Un jugador puede pasar de caminar a esprintar usando solo el joystick izquierdo.

{
    "type": "joystick",
    "action": "rightTrigger",
    "actionThreshold": 2.5,
    "axis": {
        "input": "axisXY",
        "output": "leftJoystick",
        "deadzone": {
            "threshold": 0.05,
            "radial": true
        }
    },
    "styles": {
        "default": {
            "knob": {
                "faceImage": {
                    "type": "icon",
                    "value": "walk"
                }
            }
        },
        "activated": {
            "knob": {
                "faceImage": {
                    "type": "icon",
                    "value": "sprint"
                }
            }
        }
    }
}

4. Un joystick con “action” puede activar una acción asignada mientras se usa el joystick. Por ejemplo, un menú radial se activa presionando el bumper izquierdo y se puede seleccionar moviendo el joystick derecho. La siguiente definición de joystick permite a un jugador mantener presionado el bumper izquierdo y seleccionar una acción de un menú radial mediante el joystick derecho.

{
    "type": "joystick", 
    "action": "leftBumper",
    "axis": {
        "input": "axisXY",
        "output": "rightJoystick",
        "deadzone": {
            "threshold": 0.05,
            "radial": true
        }
    },
    "styles": {
        "default": {
            "knob": {
                "faceImage": {
                    "type": "icon",
                    "value": "inventory"
                }
            }
        }
    }
} 

​

Use el Editor del kit de adaptación táctil

​

Cambie los controles táctiles para que coincidan con el escenario actual del juego

En Minecraft Dungeons, al adquirir un arma a distancia por primera vez, se agrega un control de ataque a distancia.

​

Use un diseño cinematográfico para mantener la inmersión durante películas y escenas de corte

Sugerencias

1. Cuando sea posible, muestre los controles táctiles solo cuando el jugador los necesite.
   1. Detectar la entrada táctil de un jugador es relativamente sencillo. Para obtener más información, consulte Creación de una interfaz táctil nativa para el juego con IGameInput y el ejemplo de juego completo SimpleCloudAwareSample.
   2. La entrada táctil se puede detectar incluso si se muestra un diseño del kit de adaptación táctil. Mediante las API táctiles nativas, un jugador puede tocar la pantalla para hacer que el juego muestre un diseño cinematográfico mínimo. El juego puede ocultar este diseño después de un tiempo sin que se detecte una entrada táctil.

2. Como alternativa, se puede lograr un efecto similar sin modificar el código del juego. Se puede usar una capa de diseño táctil de controles en la zona superior derecha en combinación con un control de botón mediante la propiedad toggle y una acción de capa.

​

Use la entrada táctil nativa para personalizar por completo las interacciones táctiles

• Gestión de inventario: La entrada táctil nativa puede hacer que sea más fácil y rápido seleccionar y equipar objetos al permitir que el jugador simplemente toque los objetos e incluso use técnicas como arrastrar. Esto puede suponer una mejora considerable de la calidad de vida en comparación con la gestión tradicional basada en mando.

• Menús: Manipular un menú es más intuitivo en una pantalla táctil. Basta con tocar el elemento deseado en lugar de usar una cruceta o un joystick para navegar hasta el elemento.
• Compatibilidad táctil nativa completa: Algunos juegos admiten la entrada táctil nativa completa, lo que elimina la necesidad de cualquier reasignación a un mando mediante el kit de adaptación táctil. Esto permite a los jugadores centrarse por completo en la experiencia de juego móvil. Estos juegos suelen tener ya una versión móvil o admitir una interfaz compatible con la entrada táctil, lo que hace que la compatibilidad táctil nativa sea relativamente fácil. Los juegos diseñados para jugarse principalmente con un mouse también tienden a admitir la entrada táctil nativa con mayor facilidad.

​

Use recursos personalizados para que coincidan con el estilo artístico del juego

​

Cambie la interfaz de usuario del juego, las sugerencias y la reasignación de controles para los controles táctiles

​

Compruebe los problemas comunes de los controles táctiles y XBOX Game Streaming

​

Desconexión durante el juego

Sugerencias

1. Asegúrese de que los controles táctiles se carguen y funcionen correctamente, incluidos el diseño, los recursos y el estado, cuando un juego regresa de un estado desconectado. Esto es especialmente importante cuando se usan API para controlar el estado de los controles táctiles.
2. Pause el juego cuando sea posible cuando un jugador se desconecte para evitar la pérdida de progreso o una situación de fin de juego. Esto se puede hacer buscando un evento de restricción o la desconexión de un cliente de streaming.

​

Compatibilidad con varios tipos de dispositivos

Sugerencias

1. Asegúrese de que todos los controles táctiles funcionen y sean fácilmente alcanzables en dispositivos con varios tamaños de pantalla.
2. Asegúrese de la disponibilidad de sensores en los dispositivos. Si no están disponibles, tenga otras opciones que no requieran sensores. Por ejemplo, su juego usa un giroscopio para apuntar. Si un giroscopio no está disponible en un dispositivo, use en su lugar un control de panel táctil.
3. Para probar fácilmente distintos tamaños de pantalla, es posible usar un equipo para cambiar el tamaño de la ventana de la aplicación de prueba de contenido para PC o del explorador web. Si no hay un equipo táctil disponible, la aplicación de prueba de contenido permite realizar pruebas básicas con una configuración para tratar los clics del mouse como eventos táctiles. Por último, use la vista de la ventana de vista previa de la extensión del Editor de TAK para ver fácilmente los controles táctiles en distintas dimensiones.