Saltar al contenido principal
Este artículo proporciona una visión general de la vista previa de los diseños de adaptación táctil mediante el TAK Editor, así como de las distintas opciones disponibles para personalizar la vista previa.

​
Requisitos previos

​
Vista previa de diseños

Obtener la vista previa de un diseño es tan sencillo como abrir el archivo de diseño en el editor, a través del Explorador de VS Code. Con solo hacer clic en un archivo de diseño dentro del directorio layouts de un paquete, el contenido JSON del diseño se mostrará en una pestaña, y una vista previa en vivo del diseño aparecerá automáticamente en una pestaña adyacente.
Si hay errores en el archivo de diseño, se mostrarán en el panel de problemas de VS Code. La vista previa no se actualizará hasta que se resuelvan los errores. Esto se explora con más detalle en la sección Estado, errores y advertencias.
La vista previa es interactiva, lo que significa que puede interactuar con los controles táctiles con el mouse (o con entrada táctil si usa un dispositivo táctil). La vista previa responderá a su entrada como si se estuviera representando en una transmisión de juego real. Los cambios realizados en el archivo JSON del diseño se reflejarán en la vista previa al guardar el archivo. Esto permite un proceso de diseño rápido e iterativo, en el que puede realizar cambios en el diseño y ver los resultados de inmediato. Captura de pantalla de la vista previa de diseño del TAK Editor Si la pestaña de vista previa está cerrada, se puede volver a abrir de dos maneras:
  1. Haciendo clic en el botón “Open Preview” en la esquina superior derecha del archivo de diseño: Captura de pantalla del botón Open Preview en el archivo de diseño
  2. Ejecutando el comando “Touch Adaptation Kit: Open preview to the side” mediante la paleta de comandos. Captura de pantalla de la paleta de comandos con el comando de apertura de la vista previa seleccionado
Tenga en cuenta que tanto el comando como el botón solo estarán disponibles cuando (1) haya un archivo de diseño abierto y (2) la vista previa no esté ya abierta.

​
Estado, errores y advertencias

​
Estado de verificación

A medida que se realizan modificaciones en los diseños, los recursos y otros archivos dentro de un paquete, la extensión verificará continuamente la validez del contenido del paquete con respecto a un conjunto predefinido de reglas que todos los paquetes deben cumplir. Esto se realiza en segundo plano y se vuelve a evaluar cada vez que se guarda un archivo anidado dentro de un paquete o se cambia de cualquier otra forma (por ejemplo, si se cambia de nombre). El estado de esta verificación se notifica mediante un elemento de la barra de estado situado en el borde inferior derecho de la ventana. Captura de pantalla del elemento de la barra de estado de verificación que indica el estado OK Este elemento de la barra de estado solo aparecerá cuando haya al menos un archivo de diseño abierto en el editor. Muestra el nombre del paquete activo y el número de problemas (errores y advertencias) encontrados en el paquete. Al hacer clic en el elemento de la barra de estado se abrirá el panel de problemas de VS Code con una lista de todos los problemas encontrados en el paquete.

​
Estado de sincronización

El panel de vista previa tiene una conexión activa de instalación local (sideload) de paquetes con la CLI de TAK. Puede obtener más información sobre cómo funciona esto en la documentación de la CLI de TAK. El estado de esta conexión se notifica mediante un elemento de la barra de estado situado en el borde inferior derecho de la ventana, junto al elemento de la barra de estado de verificación. Este estado solo aparecerá cuando el panel de vista previa esté abierto. Captura de pantalla del elemento de la barra de estado de sincronización que indica el estado OK La captura de pantalla anterior muestra el elemento de la barra de estado cuando la conexión está activa y la vista previa está sincronizada. Este es el caso cuando no hay errores en el paquete (se permiten advertencias, que mantienen el estado como “synchronized”). Si hay errores, el estado cambiará a “Out of sync”. Al mantener el puntero sobre este elemento de la barra de estado, aparecerá una información sobre herramientas con detalles del servidor de instalación local hospedado por la CLI de TAK. Esta dirección se puede usar para conectar otro cliente de transmisión de juegos a la vista previa, como la Content Test App.

​
Errores y advertencias

El panel de problemas de VS Code mostrará una lista de todos los problemas encontrados en el paquete. Esto incluye todos los problemas que se detectan durante el proceso de verificación. Cuando existe un problema, al hacer clic en cualquiera de los elementos de la barra de estado de verificación o sincronización se abrirá el panel de problemas y se mostrará la lista de problemas. Cada problema tendrá una descripción y una ubicación dentro del paquete donde se encontró el problema. Por ejemplo, en la captura de pantalla siguiente, existe un error en el paquete en el que el archivo de diseño platformer-advanced.json hace referencia a un recurso (run.png) que no existe en el paquete: Captura de pantalla del panel de problemas con un error en el paquete El estado de la vista previa es ahora “Out of sync” hasta que la referencia se cambie a un recurso que exista en el paquete, o hasta que el recurso se agregue al paquete.

​
Paso siguiente

[!div class=“nextstepaction”] Personalización de la vista previa
Última modificación el 20 de octubre de 2026