Visualizar layouts de adaptação por toque

Este artigo fornece uma visão geral da visualização de layouts de adaptação por toque usando o Editor TAK, bem como das várias opções disponíveis para personalizar a visualização.

Pré-requisitos

O Editor TAK está instalado e configurado.
Pelo menos um pacote com um layout existe na(s) pasta(s) de workspace aberta(s).

Visualizar layouts

Visualizar um layout é tão simples quanto abrir o arquivo de layout no editor por meio do Explorador do VS Code. Basta clicar em um arquivo de layout no diretório layouts de um pacote para que o conteúdo JSON do layout seja exibido em uma guia e uma visualização dinâmica do layout apareça automaticamente em uma guia ao lado.

Se houver erros no arquivo de layout, eles serão exibidos no Painel de Problemas do VS Code. A visualização não será atualizada até que os erros sejam resolvidos. Isso é explorado com mais detalhes na seção Status, erros e avisos.

A visualização é interativa, o que significa que você pode interagir com os controles por toque usando o mouse (ou entrada por toque, se estiver usando um dispositivo com recurso de toque). A visualização responderá à sua entrada como se estivesse sendo renderizada em um stream de jogo real. As alterações feitas no arquivo JSON do layout serão refletidas na visualização ao salvar o arquivo. Isso permite um processo de design rápido e iterativo, no qual você pode fazer alterações no layout e ver os resultados imediatamente.

Captura de tela da visualização de layout do Editor TAK

Se a guia de visualização for fechada, ela poderá ser reaberta de uma das duas maneiras:

Clicando no botão “Open Preview” no canto superior direito do arquivo de layout:
Executando o comando “Touch Adaptation Kit: Open preview to the side” por meio da Paleta de Comandos.

Observe que tanto o comando quanto o botão só estarão disponíveis quando (1) um arquivo de layout estiver aberto e (2) a visualização ainda não estiver aberta.

Status, erros e avisos

Status de verificação

À medida que modificações são feitas nos layouts, ativos e outros arquivos de um pacote, a extensão verifica continuamente a validade do conteúdo do pacote em relação a um conjunto predefinido de regras às quais todos os pacotes devem obedecer. Isso é feito em segundo plano e reavaliado sempre que um arquivo aninhado em um pacote é salvo ou alterado de qualquer outra forma (por exemplo, renomeado). O status dessa verificação é informado por meio de um item da barra de status localizado na borda inferior direita da janela.

Esse item da barra de status só aparecerá quando pelo menos um arquivo de layout estiver aberto no editor. Ele exibe o nome do pacote ativo e o número de problemas (erros e avisos) encontrados no pacote. Clicar no item da barra de status abrirá o Painel de Problemas do VS Code com uma lista de todos os problemas encontrados no pacote.

Status de sincronização

O painel de visualização tem uma conexão ativa de sideload de pacote com a TAK CLI. Você pode ler mais sobre como isso funciona na documentação da TAK CLI. O status dessa conexão é informado por meio de um item da barra de status localizado na borda inferior direita da janela, ao lado do item da barra de status de verificação. Esse status só aparecerá quando o painel de visualização estiver aberto.

A captura de tela acima mostra o item da barra de status quando a conexão está ativa e a visualização está sincronizada. Esse é o caso quando não há erros no pacote (avisos são permitidos e mantêm o estado como “sincronizado”). Se houver erros, o status mudará para “Out of sync”. Ao passar o mouse sobre esse item da barra de status, uma dica de ferramenta será exibida com detalhes sobre o servidor de sideload hospedado pela TAK CLI. Esse endereço pode ser usado para conectar outro cliente de streaming de jogos à visualização, como o Content Test App.

Erros e avisos

O Painel de Problemas do VS Code exibirá uma lista de todos os problemas encontrados no pacote. Isso inclui todos os problemas encontrados durante o processo de verificação. Quando houver um problema, clicar em qualquer um dos itens da barra de status de verificação ou sincronização abrirá o Painel de Problemas e exibirá a lista de problemas. Cada problema terá uma descrição e um local no pacote onde o problema foi encontrado. Por exemplo, na captura de tela a seguir, existe um erro no pacote em que o arquivo de layout platformer-advanced.json faz referência a um ativo (run.png) que não existe no pacote:

Captura de tela do Painel de Problemas com um erro no pacote

O estado da visualização agora é “Out of sync” até que a referência seja alterada para um ativo que exista no pacote ou que o ativo seja adicionado ao pacote.

Próxima etapa

[!div class=“nextstepaction”] Personalização da visualização

Porting

Build Paths

Pré-requisitos

Visualizar layouts