> ## Documentation Index
> Fetch the complete documentation index at: https://devdocs.xbox.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Creación de un diseño de controles táctiles personalizados con GitHub Copilot

> Creación de un diseño de controles táctiles personalizados con GitHub Copilot

Descubra una forma más rápida e inteligente de crear controles táctiles personalizados. **¡Sin necesidad de tediosas ediciones de JSON!** Con GitHub Copilot y Visual Studio Code, puede crear y editar fácilmente diseños de controles táctiles personalizados simplemente dando instrucciones en lenguaje natural.

Esta guía proporciona pasos claros y prácticos: configurar las herramientas necesarias, diseñar y editar diseños táctiles con Copilot y, por último, crear y probar Touch Adaptation Bundles. Aprenda a dar instrucciones a Copilot de forma eficaz y descubra consejos para agilizar su flujo de trabajo, lo que facilita que incluso los usuarios primerizos comiencen con el desarrollo de controles táctiles. Para obtener información más detallada sobre el diseño de controles táctiles, consulte [Guía del diseñador para crear controles táctiles](/build/core-features/common/game-streaming/building-touch-layouts/game-streaming-tak-designers-guide).

**Figura 1.  Captura de pantalla de la generación de un diseño táctil mediante Copilot Chat en VS Code.**

<img src="https://mintcdn.com/microsoft-4404708b/nTPVBuko1tKGsd6P/images/gdk/features/common/github-copilot-generate-touch-layout.webp?fit=max&auto=format&n=nTPVBuko1tKGsd6P&q=85&s=6caeeb2b79dd47f63548fc0d32b3f2ef" alt="Captura de pantalla de la generación de un diseño táctil mediante Copilot Chat en VS Code." width="1920" height="1080" data-path="images/gdk/features/common/github-copilot-generate-touch-layout.webp" />

## Requisitos previos

* Instale la versión más reciente de [Visual Studio Code](https://code.visualstudio.com/download).
* Instale la [herramienta de línea de comandos del Touch Adaptation Kit (TAK CLI)](https://github.com/microsoft/xbox-game-streaming-tools?tab=readme-ov-file#touch-adaptation-kit-command-line-tool-tak-cli).
* Instale la [extensión Touch Adaptation Kit Editor para Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=xbox-tools.vscode-xbox-input-editor-extension) y complete la [configuración del TAK Editor](/build/core-features/common/game-streaming/tak-editor/game-streaming-tak-editor-setup).
* [Configure GitHub Copilot en Visual Studio Code](https://code.visualstudio.com/docs/copilot/setup).
* Descargue [copilot-instructions.md](https://github.com/microsoft/xbox-game-streaming-tools/tree/main/touch-adaptation-kit/copilot-instructions) en su PC.
  Este archivo actúa como un conjunto de instrucciones personalizadas para personalizar las respuestas de GitHub Copilot al crear diseños de controles táctiles personalizados. Para obtener más información, consulte [Acerca de la personalización de las respuestas de GitHub Copilot](https://docs.github.com/en/copilot/concepts/prompting/response-customization).

## Pasos

1. Inicie Visual Studio Code.

2. Siga la [configuración del TAK Editor para abrir el área de trabajo](/build/core-features/common/game-streaming/tak-editor/game-streaming-tak-editor-setup#open-a-folder-or-workspace) y [cree un nuevo paquete y diseño](/build/core-features/common/game-streaming/tak-editor/game-streaming-tak-editor-create-bundle).

3. Cree una carpeta `.github` en la raíz de la carpeta del área de trabajo donde se encuentra el paquete y coloque el archivo copilot-instructions.md en la carpeta `.github`. Colocar las instrucciones aquí garantiza que Copilot pueda hacer referencia a las reglas de diseño al editar el JSON del diseño.

   **Figura 2.  Captura de pantalla del árbol de directorios de la carpeta .github y el archivo copilot-instructions.md.**

   <img src="https://mintcdn.com/microsoft-4404708b/UZTRJSf0emX1fheE/images/gdk/features/common/github-folder-copilot-instructions.png?fit=max&auto=format&n=UZTRJSf0emX1fheE&q=85&s=4357244630aa6bf7a70d69961088522d" alt="Captura de pantalla del árbol de directorios de la carpeta .github y el archivo copilot-instructions.md." width="407" height="385" data-path="images/gdk/features/common/github-folder-copilot-instructions.png" />

4. [Abra la ventana de Copilot Chat](https://code.visualstudio.com/docs/copilot/chat/getting-started-chat) (método abreviado de teclado `Ctrl+Alt+I`).

5. En el explorador de Visual Studio Code, seleccione el archivo JSON del diseño que creó en la carpeta de diseños. Esta selección garantiza que Copilot Chat use el archivo como contexto para su sesión de edición.

   **Figura 3.  Captura de pantalla de la selección del archivo JSON de destino para agregarlo como contexto para Copilot.**

   <img src="https://mintcdn.com/microsoft-4404708b/UZTRJSf0emX1fheE/images/gdk/features/common/select-json-file-to-add-as-context.png?fit=max&auto=format&n=UZTRJSf0emX1fheE&q=85&s=07537d4f75db57712b310d13a1691892" alt="Captura de pantalla de la selección del archivo JSON de destino para agregarlo como contexto para Copilot." width="709" height="217" data-path="images/gdk/features/common/select-json-file-to-add-as-context.png" />

6. Asegúrese de tener seleccionado el modo `Agent` para que Copilot proporcione una explicación detallada del resultado de la edición y, a continuación, seleccione su [modelo de IA](https://code.visualstudio.com/docs/copilot/customization/language-models) preferido.

   **Figura 4.  Captura de pantalla de la comprobación de que el modo agente está seleccionado y de la selección del modelo de IA.**

   <img src="https://mintcdn.com/microsoft-4404708b/UZTRJSf0emX1fheE/images/gdk/features/common/select-agent-mode-and-ai-model.png?fit=max&auto=format&n=UZTRJSf0emX1fheE&q=85&s=f2373c7b7d031d952339d513e8141f8a" alt="Captura de pantalla de la comprobación de que el modo agente está seleccionado y de la selección del modelo de IA." width="540" height="173" data-path="images/gdk/features/common/select-agent-mode-and-ai-model.png" />

7. Se recomienda preparar la asignación de botones del mando para su título con el fin de garantizar una configuración y usabilidad óptimas.
   Por ejemplo:

```
   A button: Jump
   B button: Dodge
   X button: Punch
   Y button: Kick
   Directional Pad: Select items
   Left Stick: Move character
   Right Stick: Camera control
   Left Trigger: Throw granade
   Right Trigger: Fire weapon
   View button: Open map
   Menu button: Open menu
```

1. Pida a Copilot que edite el JSON del diseño de destino usando su asignación de botones del mando.
   Por ejemplo:

```
   Can you edit the touch layout JSON for a game scene that consists of the following controller button mapping?
   A button: Jump
   B button: Dodge
   X button: Punch
   Y button: Kick
   Directional Pad: Select items
   Left Stick: Move character
   Right Stick: Camera control
   Left Trigger: Throw granade
   Right Trigger: Fire weapon
   View button: Open map
   Menu button: Open menu
```

<Note>
  Asegúrese de que Copilot haga referencia a copilot-instructions.md después de indicarle que edite, para que pueda aplicar las reglas de diseño adecuadas a su diseño.

  **Figura 5.  Captura de pantalla de la confirmación del uso de las instrucciones de Copilot.**

  <img src="https://mintcdn.com/microsoft-4404708b/sIrPFR_ir_sNKVEv/images/gdk/features/common/confirm-copilot-instructions-usage.png?fit=max&auto=format&n=sIrPFR_ir_sNKVEv&q=85&s=30fbc0faf30b123df423f94cd6b0e943" alt="Captura de pantalla de la confirmación del uso de las instrucciones de Copilot." width="547" height="222" data-path="images/gdk/features/common/confirm-copilot-instructions-usage.png" />

  Asegúrese de permitir que Copilot recupere los recursos, el esquema y la guía del diseñador desde las URL de referencia cuando se le solicite en la ventana de chat. Esta acción garantiza respuestas precisas y ofrece los mejores resultados posibles para su solicitud.

  **Figura 6.  Captura de pantalla de la autorización a Copilot para recuperar recursos.**

  <img src="https://mintcdn.com/microsoft-4404708b/sIrPFR_ir_sNKVEv/images/gdk/features/common/copilot-allow-fetch-resources.png?fit=max&auto=format&n=sIrPFR_ir_sNKVEv&q=85&s=9c754ec8283b7b994c73f20b4510f88b" alt="Captura de pantalla de la autorización a Copilot para recuperar recursos." width="841" height="207" data-path="images/gdk/features/common/copilot-allow-fetch-resources.png" />
</Note>

9. Itere y pruebe hasta completar el diseño

Use Copilot Chat para refinar el archivo JSON del diseño hasta que cumpla sus requisitos de diseño. Cambie el nombre del archivo para reflejar el escenario de juego previsto (por ejemplo, `battle.json`, `menu.json`, `map.json`). Si se necesitan varios diseños, repita el mismo proceso para cada uno.

Después de cada edición, valide el diseño en su entorno de juego:

* Transmita su título mediante la [aplicación de prueba de contenido web (CTA)](/build/core-features/common/game-streaming/game-streaming-web-content-test-application).
* Sirva el diseño táctil con el [comando serve de TAK](/build/core-features/common/game-streaming/tak-command-line-tool/game-streaming-tak-command-line-serve-command).

Continúe iterando entre las ediciones dirigidas por Copilot y las pruebas en el juego hasta finalizar el diseño

**Figura 7.  Captura de pantalla de diseños de controles táctiles generados por Copilot.**

<img src="https://mintcdn.com/microsoft-4404708b/CwRBzaXvHw9zaPoe/images/gdk/features/common/touch-control-layouts-generated-by-copilot.png?fit=max&auto=format&n=CwRBzaXvHw9zaPoe&q=85&s=cc2f05aea2e65528cd16e684f30135d5" alt="Captura de pantalla de diseños de controles táctiles generados por Copilot." width="2560" height="1380" data-path="images/gdk/features/common/touch-control-layouts-generated-by-copilot.png" />

<Tip>
  **Use la terminología oficial para obtener mejores resultados**

  Use únicamente los términos de la [guía del diseñador](/build/core-features/common/game-streaming/building-touch-layouts/game-streaming-tak-designers-guide) para garantizar que Copilot pueda proporcionar mejores resultados:

  * "move A button to the right wheel inner."
  * "move B button to the left in the same right outer wheel."
  * "can you assign and interact icon to the A button?"
  * "exchange the position of the X button and Y button in the right outer wheel."
  * "remove R thumb from the layout."

  **Consejo profesional:** también puede editar el archivo `copilot-instructions.md` para adaptarlo a sus necesidades específicas. Al personalizar las instrucciones, puede ajustar el comportamiento de Copilot y recibir orientación que se alinee perfectamente con sus objetivos de diseño.
</Tip>


## Related topics

- [Guía del diseñador para crear controles táctiles](/es/build/core-features/common/game-streaming/building-touch-layouts/game-streaming-tak-designers-guide.md)
- [Compilación de diseños de controles táctiles para el streaming de juegos de XBOX](/es/build/core-features/common/game-streaming/building-touch-layouts/index.md)
- [Optimización de los flujos de trabajo de desarrollo de juegos con Visual Studio e IA](/es/build/core-features/graphics/overviews/presentations/xdd2024/gc-graphics-xdd-2024-gr12.md)
- [Compilación de diseños de controles táctiles](/es/build/core-features/common/game-streaming/building-touch-layouts/game-streaming-touch-building-touch-layout.md)
- [Ejecución de un script personalizado durante la creación de la VM (versión preliminar)](/es/services/playfab/multiplayer/servers/vmstartupscript.md)
