Oferta de Halloween: −40% Pixor cuesta $19.99 $11.99 hasta el 4 de noviembre en itch.io →

Un shader de pixel art 3D para Godot 4

Algunas cosas no se pueden hornear en una hoja de sprites: un nivel 3D entero, un vehículo que el jugador dirige a cualquier parte, un jefe con cien poses. Pixor escribe su aspecto como shaders de Godot 4, así que se dibujan en vivo con los mismos píxeles que tus personajes horneados.

El golem de cristal con el aspecto selout: bandas de luz, una paleta con desplazamiento de tono y contornos selectivos
Un aspecto en Pixor
Las normales del golem como colores, la información a partir de la cual ilumina un shader en tiempo real
De qué ilumina el shader: las normales

Dos formas de tener pixel art en un juego 3D

Hay dos formas habituales de que un juego de Godot parezca pixel art. La primera es hornear: renderizar cada personaje desde todos los lados en una hoja de sprites y reproducirla en un AnimatedSprite2D. La segunda es dibujar la propia escena 3D a baja resolución, con un shader que divide la luz en bandas, limita los colores y dibuja contornos, y luego ampliarla con filtrado nearest. Las búsquedas de “3D pixel art shader Godot” y “Godot 4 post processing pixel art” van de la segunda.

Cada una tiene su lugar. Las hojas horneadas te dan control artesanal y retoques, y no cuestan nada de dibujar. El tiempo real maneja lo que ninguna hoja puede contener: un nivel por el que se mueve la cámara, un coche que gira a cualquier ángulo, una escena donde todo se mueve a la vez. El problema es que las dos rara vez coinciden: los sprites salen de un pipeline, el nivel de un shader escrito aparte, y los contornos, los colores y la luz no concuerdan.

pxr shader lo resuelve escribiendo shaders de Godot a partir del mismo Estilo con el que se hornean los sprites.

Escribe los shaders

Apúntalo a un modelo y un aspecto, o a un proyecto, y a una carpeta dentro de tu proyecto de Godot:

pxr shader knight.glb --preset selout --size 64 -o my-game/pixor
pxr shader game.pixor -o my-game/pixor --res res://pixor

-o es la carpeta en disco; --res es la misma carpeta tal como la ve Godot, una ruta res://, cuando no es res:// seguido del nombre de la carpeta. La carpeta recibe cinco archivos:

Archivo Qué hace
pixor_look.gdshader El material. Cada píxel toma la rampa de su color, el escalón de su banda de luz y el brillo, como un sprite horneado, en los colores propios de la paleta. No tiene sombreado: el aspecto es la luz.
pixor_lines.gdshader Las líneas, un paso de pantalla: la silueta sobre los píxeles vacíos alrededor de un modelo, y líneas interiores donde una superficie está delante de otra, en los colores de línea del Estilo.
pixor_view.tscn La cuadrícula de píxeles: un viewport al tamaño del sprite, ampliado cuatro veces con filtrado nearest, con la cámara de Pixor y las líneas dentro.
pixor_look.gd PixorLook.apply($Level) da el aspecto a todas las mallas bajo un nodo, conservando el color y la textura de cada material.
pixor_shader.json El tamaño, la escala, la paleta y lo que del Estilo dejan fuera los shaders.

Ponlo en tu escena

  1. Copia la carpeta en el proyecto de Godot, o escríbela directamente allí con -o.
  2. Añade pixor_view.tscn a tu escena principal. Dibuja el mundo 3D en el que está a través de la cuadrícula de píxeles, con el paso de contornos.
  3. Dale el aspecto a tus mallas. Desde un script, PixorLook.apply($Level) pone el material en cada malla bajo el nodo. A mano, pon pixor_look.gdshader en el material de una malla.

No hay que ajustar nada más: las bandas de luz, las rampas, la paleta y los colores de línea están escritos en los shaders. Para cambiar el aspecto, cámbialo en Pixor y ejecuta pxr shader otra vez.

--view-scale fija en cuántos píxeles de pantalla se convierte cada píxel del arte (4 por defecto). Mantenlo como número entero, como en cualquier pixel art; la guía de tamaños de sprite explica por qué.

Lo que el tiempo real deja fuera

En tiempo real el fotograma se dibuja como uno horneado, con tres diferencias:

  • Sin sombras proyectadas. Las superficies se iluminan y se dividen en bandas, pero un objeto no hace sombra sobre otro.
  • Sin líneas entre partes sin un escalón de profundidad. Dos partes que se tocan, como una manga sobre un brazo, solo reciben una línea donde una está delante de la otra.
  • Sin pasos de fotograma completo. Los pasos que leen el fotograma entero o comparan fotogramas, como las limpiezas y los átomos dibujados a mano marcados así, solo se ejecutan al hornear.

Cada nodo de Estilo indica si se ejecuta en tiempo real: pxr nodes --graph style imprime “in real time: yes” o “not yet” bajo cada uno. Un Estilo cuyo grafo tiene un nodo que no puede ejecutarse en tiempo real se rechaza, y el error nombra el nodo. Añade --partial para escribir igualmente el shader de sus ajustes, sin ese nodo.

Usa ambos

La configuración más potente usa las dos mitades. Hornea en hojas los personajes, que necesitan retoques a mano, muchos fotogramas y siluetas exactas (Pixor para Godot cubre los SpriteFrames y la escena ya conectada). Dibuja el mundo, los vehículos y todo lo demasiado grande o libre para hornear con pxr shader. Como ambos salen de un mismo Estilo, comparten rampas, bandas y paleta, y el jugador ve un solo juego, no dos.

Para un sprite que deba reaccionar a la luz en una escena 2D, el kit de luz (--export light-kit) ilumina sprites horneados a partir de sus mapas de normales en Godot, Unity o GameMaker mientras cada píxel iluminado sigue en su propia rampa; consulta la iluminación fiel a la paleta. La sección del manual sobre los shaders en tiempo real tiene todas las opciones.

Preguntas

¿Hay una versión del shader en tiempo real para Unity o Unreal?

Todavía no: pxr shader solo escribe shaders de Godot 4. Para Unity y GameMaker, el kit de luz de Pixor ilumina sprites horneados en el motor con los escalones propios de la paleta, con un shader para cada uno.

¿El aspecto en tiempo real coincide exactamente con los sprites horneados?

Usa las mismas rampas, bandas de luz, brillo y paleta. Deja fuera las sombras proyectadas, las líneas entre partes que se tocan sin un escalón de profundidad y los pasos que leen el fotograma entero o comparan fotogramas, como las limpiezas.

¿Tengo que ajustar los parámetros del shader a mano?

No. El aspecto está horneado en los archivos del shader, la escena de vista contiene la cámara y el paso de líneas, y PixorLook.apply da el material a todas las mallas bajo un nodo, conservando el color y la textura de cada una.

Lee a continuación

Pruébalo con tu propio modelo, gratis en tu navegador, o consigue la versión completa.

Probar en el navegador Consigue Pixor