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

# Editor do Touch Adaptation Kit: personalizar a visualização

> Personalização da visualização dos controles por toque

Este artigo fornece uma visão geral das várias opções disponíveis para personalizar a visualização de layouts de adaptação por toque usando o Editor TAK. A visualização pode ser personalizada para simular diferentes cenas do jogo e testar a aparência dos controles por toque em diferentes contextos. Isso pode ser feito atribuindo uma cor ou imagem de fundo à visualização.

## Plano de fundo

A personalização do plano de fundo com uma cor ou imagem pode ser feita de duas maneiras: pelas configurações de visualização ou executando um comando na Paleta de Comandos.

### Pelas configurações de visualização

1. Abra um arquivo de layout de um pacote no editor para iniciar a visualização.
2. Clique em "Open Settings" no canto superior direito do painel de visualização:

   ![Captura de tela do botão Open Settings na visualização do layout](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)
3. Uma janela modal será exibida com opções para personalizar o plano de fundo. É possível atribuir uma cor ou uma imagem:
   1. **Cor:** clique no seletor de cores para selecionar uma cor. Como alternativa, uma cor pode ser inserida no campo de entrada. A cor pode ser especificada em qualquer um dos formatos compatíveis com CSS (por exemplo, `#0000ffff`, `rgba(0, 0, 255, 1)`, `hsl(240, 100%, 50%)` ou `blue`).

      ![Captura de tela demonstrando o seletor de cores na janela modal de configurações de visualização](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)
   2. **Imagem:** clique em "Choose an image" para abrir um seletor de arquivos. Navegue até o local da imagem e selecione-a. Como alternativa, a URL de uma imagem pode ser inserida no campo de entrada.

      ![Captura de tela de uma imagem selecionada na janela modal de configurações de visualização](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)

### Pela Paleta de Comandos

1. Abra um arquivo de layout de um pacote no editor para iniciar a visualização. **Este comando só está disponível quando a visualização está aberta.**
2. Abra a Paleta de Comandos (`Ctrl+Shift+P` no Windows ou `Cmd+Shift+P` no macOS).
3. Pesquise "Background" e selecione "Touch Adaptation Kit: Set preview background":

   ![Captura de tela da seleção do comando Set preview background na paleta de comandos](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)
4. Selecione uma das opções disponíveis:

   ![Captura de tela das opções disponíveis para definir o plano de fundo da visualização](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)

   1. `Default`: redefine o plano de fundo para o padrão xadrez transparente padrão.
   2. `Color`: atribui uma cor ao plano de fundo. Ela deve ser inserida como texto no formato de um valor de cor CSS.
   3. `Image`: atribui uma imagem ao plano de fundo. Um seletor de arquivos será aberto para selecionar uma imagem.
   4. `URL`: atribui uma imagem ao plano de fundo usando uma URL. Uma entrada de texto será exibida para inserir a URL.

## Próxima etapa

> \[!div class="nextstepaction"]
> [Empacotar pacotes para envio ao XBOX](https://docs.xbox.com/pt-BR/build/core-features/common/game-streaming/tak-editor/game-streaming-tak-editor-pack-bundles.md)


## Related topics

- [Editor do Touch Adaptation Kit: visualizar layouts](https://docs.xbox.com/pt-BR/build/core-features/common/game-streaming/tak-editor/game-streaming-tak-editor-preview-layouts.md)
- [Extensão do Editor do Touch Adaptation Kit para Visual Studio Code](https://docs.xbox.com/pt-BR/build/core-features/common/game-streaming/tak-editor/game-streaming-tak-editor.md)
- [Editor do Touch Adaptation Kit (TAK) para Visual Studio Code](https://docs.xbox.com/pt-BR/build/core-features/common/game-streaming/tak-editor/index.md)
- [Editor do Touch Adaptation Kit: solução de problemas e comentários](https://docs.xbox.com/pt-BR/build/core-features/common/game-streaming/tak-editor/game-streaming-tak-editor-troubleshooting.md)
- [Editor do Touch Adaptation Kit: configuração](https://docs.xbox.com/pt-BR/build/core-features/common/game-streaming/tak-editor/game-streaming-tak-editor-setup.md)