> ## 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.

# Personalización de la vista previa de controles táctiles

> Personalización de la vista previa de controles táctiles

Este artículo proporciona una visión general de las distintas opciones disponibles para personalizar la vista previa de los diseños de adaptación táctil mediante el TAK Editor. La vista previa se puede personalizar para simular diferentes escenas del juego y para probar cómo se verán los controles táctiles en distintos contextos. Esto se puede hacer asignando un color o una imagen de fondo a la vista previa.

## Fondo

La personalización del fondo con un color o una imagen se puede realizar de dos maneras: mediante la configuración de la vista previa o ejecutando un comando en la paleta de comandos.

### Mediante la configuración de la vista previa

1. Abra un archivo de diseño de un paquete en el editor para iniciar la vista previa.
2. Haga clic en "Open Settings" en la esquina superior derecha del panel de vista previa:

   <img src="https://mintcdn.com/microsoft-4404708b/CwRBzaXvHw9zaPoe/images/gdk/features/common/tak-editor-preview-settings-button.png?fit=max&auto=format&n=CwRBzaXvHw9zaPoe&q=85&s=76434d8ea25185eb1c00727b8be29a8b" alt="Captura de pantalla del botón Open Settings en la vista previa del diseño" width="519" height="275" data-path="images/gdk/features/common/tak-editor-preview-settings-button.png" />
3. Aparecerá un cuadro de diálogo modal con opciones para personalizar el fondo. Se puede asignar un color o una imagen:
   1. **Color:** haga clic en el selector de color para elegir un color. También puede escribir un color en el campo de entrada. El color se puede especificar en cualquiera de los formatos admitidos por CSS (por ejemplo, `#0000ffff`, `rgba(0, 0, 255, 1)`, `hsl(240, 100%, 50%)` o `blue`).

      <img src="https://mintcdn.com/microsoft-4404708b/CwRBzaXvHw9zaPoe/images/gdk/features/common/tak-editor-preview-settings-color.png?fit=max&auto=format&n=CwRBzaXvHw9zaPoe&q=85&s=816f42e6a66afdf5702d12b1a439b6df" alt="Captura de pantalla que muestra el selector de color en el cuadro de diálogo modal de configuración de la vista previa" width="647" height="555" data-path="images/gdk/features/common/tak-editor-preview-settings-color.png" />
   2. **Imagen:** haga clic en "Choose an image" para abrir un selector de archivos. Navegue hasta la ubicación de la imagen y selecciónela. También puede escribir la URL de una imagen en el campo de entrada.

      <img src="https://mintcdn.com/microsoft-4404708b/CwRBzaXvHw9zaPoe/images/gdk/features/common/tak-editor-preview-settings-image.png?fit=max&auto=format&n=CwRBzaXvHw9zaPoe&q=85&s=a45cefa495628cb18cd14e9f181120c6" alt="Captura de pantalla de una imagen seleccionada en el cuadro de diálogo modal de configuración de la vista previa" width="842" height="602" data-path="images/gdk/features/common/tak-editor-preview-settings-image.png" />

### Mediante la paleta de comandos

1. Abra un archivo de diseño de un paquete en el editor para iniciar la vista previa. **Este comando solo está disponible cuando la vista previa está abierta.**
2. Inicie la paleta de comandos (`Ctrl+Shift+P` en Windows o `Cmd+Shift+P` en macOS).
3. Busque "Background" y seleccione "Touch Adaptation Kit: Set preview background":

   <img src="https://mintcdn.com/microsoft-4404708b/CwRBzaXvHw9zaPoe/images/gdk/features/common/tak-editor-set-preview-background-command.png?fit=max&auto=format&n=CwRBzaXvHw9zaPoe&q=85&s=7ec8253efa3ff9381ab19c969b72f268" alt="Captura de pantalla de la selección del comando Set preview background en la paleta de comandos" width="607" height="75" data-path="images/gdk/features/common/tak-editor-set-preview-background-command.png" />
4. Seleccione una de las opciones disponibles:

   <img src="https://mintcdn.com/microsoft-4404708b/CwRBzaXvHw9zaPoe/images/gdk/features/common/tak-editor-set-preview-background-options.png?fit=max&auto=format&n=CwRBzaXvHw9zaPoe&q=85&s=cc839e056a1cfb08b27cce54555e738f" alt="Captura de pantalla de las opciones disponibles para establecer el fondo de la vista previa" width="605" height="167" data-path="images/gdk/features/common/tak-editor-set-preview-background-options.png" />

   1. `Default`: restablece el fondo al patrón de tablero de ajedrez transparente predeterminado.
   2. `Color`: asigna un color al fondo. Debe escribirse como texto en el formato de un valor de color CSS.
   3. `Image`: asigna una imagen al fondo. Se abrirá un selector de archivos para elegir una imagen.
   4. `URL`: asigna una imagen al fondo mediante una URL. Aparecerá una entrada de texto para escribir la URL.

## Paso siguiente

> \[!div class="nextstepaction"]
> [Empaquetar paquetes para su envío a XBOX](/build/core-features/common/game-streaming/tak-editor/game-streaming-tak-editor-pack-bundles)


## Related topics

- [Touch Adaptation Kit (TAK) Editor para Visual Studio Code](/es/build/core-features/common/game-streaming/tak-editor/index.md)
- [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)
- [Vista previa de diseños de adaptación táctil](/es/build/core-features/common/game-streaming/tak-editor/game-streaming-tak-editor-preview-layouts.md)
- [Diseño de controles táctiles de conducción](/es/build/core-features/common/game-streaming/building-touch-layouts/samples/game-streaming-touch-tak-sample-driving.md)
- [Creación de un diseño de controles táctiles personalizados con GitHub Copilot](/es/build/core-features/common/game-streaming/building-touch-layouts/game-streaming-build-touch-layout-github-copilot.md)
