↓
iaen.es Diario de desarrollo Read in English

Gotic · 9 min de lectura

30 filtros de pantalla en Godot 4 para elegir el estilo de arte de mi juego

Pixel art, óleo, vidriera, cámara térmica, VHS… 30 shaders que cambian el aspecto de toda la isla de Gotic sin tocar un modelo. Compáralos en la granja de día y en la fiesta de noche.

#shaders#arte#godot#mods#herramientas

30 filtros de pantalla en Godot 4 para elegir el estilo de arte de mi juego

Todo el arte de Gotic se genera por código: casas, árboles, personas y animales salen de unas pocas formas geométricas con colores planos. Funciona, pero un día quise saber si el juego podía parecer otra cosa sin rehacer un solo modelo. Así nació el mod filtros, un estudio de estilos con 30 filtros de pantalla.

Sin filtroÓleoSin filtroÓleo

Cómo funciona

Cada estilo es un shader de tipo canvas_item que lee la imagen ya dibujada (hint_screen_texture) y devuelve otra. Va en un ColorRect dentro de una CanvasLayer con capa −1, por debajo del HUD (que va en la 1). Así se filtra el mundo 3D y los textos, botones y ventanas se quedan igual.

layer = CanvasLayer.new()
layer.layer = -1          # el HUD va en la 1 y las ventanas en la 2
rect = ColorRect.new()
rect.set_anchors_preset(Control.PRESET_FULL_RECT)
rect.mouse_filter = Control.MOUSE_FILTER_IGNORE
rect.material = ShaderMaterial.new()

El truco tiene un límite: un canvas_item solo ve colores, sin profundidad ni normales. Los contornos del cómic o del neón salen de los cambios de color. Y los tamaños se miden en fracciones del alto de la pantalla, porque el móvil tiene más píxeles que el PC y un trazo de 3 px no se vería igual.

En el juego: K o el botón ESTILO abren la lista, F3 y F4 pasan al anterior y al siguiente, se puede mezclar al 100, 70 o 40 % con la imagen original y al final hay un pase automático que los enseña todos, uno cada 5 segundos.

Lo que salió mal (y se rehízo)

Ninguno salió bien a la primera. Al mirar las capturas a tamaño real:

  • El pixel art pintaba la hierba de gris. La paleta PICO-8 no tiene verdes amarillentos. Se cambió a Sweetie 16, con una distancia de color que pesa más el tono.
  • La tele de tubo llenó la pantalla de arcos. La rejilla de fósforo, calculada sobre el cristal curvo y con un periodo de 1,33 píxeles, hacía muaré. Ahora va en coordenadas de pantalla, con un píxel entero por color.
  • Las pinceladas del óleo salían como pelo de 1 px. Girar las coordenadas con un ángulo que cambia por la pantalla las retuerce lejos del origen. Cada trazo se gira alrededor de su propio centro.
  • De noche, seis estilos se quedaban en negro (Game Boy, ASCII, cine negro, tinta, pop art, grabado), porque usaban umbrales fijos. Se arregló con una exposición automática: la luz media de nueve puntos fijos de la pantalla, que de día no cambia nada.
  • La cámara térmica ponía la hierba caliente, y el caleidoscopio repetía hierba hasta que su cuña pasó a mirar al personaje.
  • Óleo, puntillismo y punto de cruz no convencían nada y se rehicieron enteros.

Lo que todavía no sé

Las 1148 comprobaciones de la suite pasan, y entre ellas hay una que compila los 30 shaders (Godot sin ventana los compila). Pero no hay FPS medidos en el móvil: se instaló y el teléfono estaba bloqueado. Sobre el papel, los más caros son el óleo (mira 25 trazos por píxel), el puntillismo, la vidriera, la VHS y los que buscan bordes. Los animados (VHS, glitch, psicodelia, caleidoscopio, tele de tubo, película antigua) aquí se ven congelados en un fotograma.

Es una herramienta de desarrollo: antes de publicar el juego se apaga o se quita su carpeta. Pero alguno de estos 30 puede acabar siendo el estilo de Gotic.

Los 30 estilos

Pulsa una captura para verla en grande y usa las flechas para pasar de una a otra. Cambia entre la granja a las 8:00 y la fiesta de Brumacosta a las 22:00.

Más de Gotic →