# La vista Shader > Cómo encaja la vista Shader de Pyzed Design en el editor: la barra Shading, las pestañas Grafo, Vista previa y WGSL, su barra de herramientas y su barra de estado, y dónde aprender cada nodo. Source: https://albakore.github.io/pyzed/es/editor/shader-view/ El tercer tipo de documento de Pyzed Design es un **shader**: un efecto de GPU hecho conectando nodos y guardado como archivo `.pzshad`. Se abre en la **vista Shader**, un editor de nodos con el espíritu de los visual shaders de Godot y del editor de materiales de Unreal Engine. Esta página muestra cómo encaja la vista en el editor; la [sección Shading](https://albakore.github.io/pyzed/es/shading/) enseña los shaders en sí y lista cada nodo. ## Cómo cambia el editor con un shader | Zona | En la vista Shader | | --- | --- | | **Barra de título** | Una insignia **Shader** tras el nombre del archivo. **Ejecutar** abre el shader en una ventana que sigue tus cambios. | | **Dock izquierdo: Diseño** | La barra **Shading** (cada nodo por categoría, con buscador) y la **Estructura**: las **variables** del shader, sus **valores con nombre** y sus **nodos**. | | **Centro** | Tres pestañas: **Grafo**, **Vista previa** y **WGSL**, con la barra de herramientas propia del shader. | | **Dock derecho: Propiedades** | El nodo seleccionado (sus ajustes, entradas y salidas), la variable seleccionada, o el propio shader si no hay nada seleccionado. | | **Eventos** | Indica que los shaders no tienen eventos y cómo usar este: `pz.shader("fire.pzshad")` o un control Shader en un formulario. Sus variables son lo que cambia tu código. | | **Barra de estado** | La posición del puntero en el grafo, cuántos nodos y cables hay (o cuántos están seleccionados) y el zoom (clic para 100 %). | Las tres pestañas del centro: **Grafo:** Grafo: los nodos, cada uno con su vista previa en vivo, y la pequeña vista previa de la Salida en la esquina." /> **Vista previa:** Vista previa: el shader terminado, en grande, con un control por variable." /> **WGSL:** WGSL: el código en el que se compila el grafo, solo lectura." /> ## La barra de herramientas | Botón | Teclas | Hace | | --- | --- | --- | | **Nuevo shader**, **Abrir**, **Guardar** | Ctrl+O, Ctrl+S | Comandos de archivo. | | **Deshacer**, **Rehacer** | Ctrl+Z, Ctrl+Shift+Z | Cualquier cambio en el grafo. | | **Grafo**, **Vista previa**, **WGSL** | | Las tres pestañas de la vista. | | **Añadir un nodo** | Shift+A | Abre el buscador de nodos donde está el puntero. | | **Eliminar** | Supr | Quita los nodos seleccionados. | | **Ordenar nodos en columnas** | Ctrl+L | Ordena el grafo de las entradas (izquierda) a la Salida (derecha). | | **Encajar todo** | F | Ajusta el zoom para ver el grafo entero. | | **Detener el tiempo** / **Reanudar el tiempo** | | Congela todas las vistas previas en un instante, para estudiar un fotograma, y lo reanuda. | | **Vista previa pequeña** | | Muestra u oculta la vista previa de la Salida en la esquina del grafo. | | **Compila** / *N problemas* | | Pasa el ratón para leer los problemas; el nodo culpable se pone rojo. | | **Ejecutar** | F5 | El shader en su propia ventana. | ## Tres gestos rápidos - **Añadir un nodo:** doble clic en el lienzo y escribe su nombre, o arrástralo desde la barra Shading. - **Conectar:** arrastra desde una salida (lado derecho de un nodo) hasta una entrada (lado izquierdo). Suelta un cable en un espacio vacío para añadir un nodo ya conectado a él. - **Cambiar un valor:** una entrada sin cable muestra su valor en el nodo; escribe un número o elige un color ahí. Todos los gestos y atajos están en la [referencia de la vista Shader](https://albakore.github.io/pyzed/es/shading/shader-designer/). **Shaders en formularios:** El control **Shader** de las herramientas (en **Presentación**) dibuja un `.pzshad` en un formulario o un componente; ajusta su **archivo de shader** y sus **variables** en Propiedades. Un formulario en ejecución recarga el shader cuando lo guardas aquí.