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

Sprites de coches y naves en todos los ángulos

Un coche en un juego de carreras cenital o una nave en un shooter al estilo Asteroids gira hacia cualquier rumbo. Rotar un sprite en el motor rompe sus píxeles; dibujar 32 ángulos a mano lleva días. Desde un modelo 3D, cada ángulo es un render.

Una nave espacial de la biblioteca gratuita, renderizada con Pixor
Un coche de carreras de la biblioteca gratuita
Una nave espacial de pixel art vista desde arriba girando por 32 rumbos
32 rumbos, cenital

Por qué los vehículos necesitan tantos ángulos

Un personaje de un RPG cenital camina en cuatro u ocho direcciones, así que necesita cuatro u ocho lados. Un vehículo es distinto: se dirige. Un coche que toma una curva o una nave que gira bajo el stick pasa por todos los rumbos intermedios, y si el sprite solo puede mostrar ocho, salta de uno al siguiente en pasos visibles de 45 grados.

Los juegos lo resuelven de una de tres maneras:

  1. Rotar un sprite en el motor. Es barato, pero rotar pixel art lo remuestrea. En cualquier ángulo que no sea múltiplo de 90 grados, las líneas se rompen, los píxeles sueltos se duplican o desaparecen, y con el suavizado activado los bordes se ablandan. Deja de parecer pixel art.
  2. Dibujar cada ángulo a mano. Se ve bien, y es mucho trabajo: 32 ángulos de un coche, más su versión dañada, más cada color de equipo. Cada cambio en el diseño obliga a redibujarlos todos.
  3. Renderizar cada ángulo desde un modelo 3D. Esto es lo que hacían los juegos de carreras y shooters de los años 90 con sprites prerrenderizados, y lo que hace Pixor con un anillo de cámaras.

Cuántos ángulos

Ángulos Paso Bueno para
8 45° Tanques y unidades que giran despacio, juegos de estrategia
16 22.5° La mayoría de juegos de carreras y shooters cenitales, torretas
32 11.25° Dirección suave, naves que giran libremente
64 5.6° Sprites de vehículos grandes, giros lentos y precisos

Cuanto más grande es el sprite, más ángulos necesita: una nave de 16 píxeles apenas cambia entre dos rumbos cercanos, un coche de 64 píxeles salta de forma visible.

Cenital, desde arriba

Para una nave o un coche vistos desde arriba, renderiza con la vista cenital y un anillo de lados:

pxr render race-car.glb --preset selout --view top-down --size 40 --ring 16 \
  --clip none --export png,json -o car.png

Un coche de carreras rojo visto desde justo arriba en 16 ángulos, dos filas de ocho

--ring 16 pone 16 cámaras alrededor del modelo, en sentido antihorario desde el frente, una por lado, todas con un mismo tamaño y una misma escala de píxeles por metro, así que el coche tiene el mismo tamaño en cada rumbo y gira sobre un único pivote fijo. La hoja tiene una fila por lado; el JSON nombra cada uno, para que el juego elija el fotograma según el rumbo. --ring va de 1 a 64; --sides 0,10,20,... toma en su lugar tu propia lista de ángulos.

En la app, añade una cámara con + en el Esquema, elige Una cámara para… › Shooter cenital (justo desde arriba, 16 lados, 32 px), o fija Vista en la cámara Sur y usa Anillo alrededor del modelo para 4, 8, 16 o 32 lados.

La vista de carreras

Los juegos de carreras cenitales de la era arcade solían mirar desde arriba en diagonal, de modo que cada ángulo mostraba también el costado del coche. La cámara Carreras lo hace: 12° hacia abajo, 16 lados, 64 px.

pxr render race-car.glb --preset selout --camera racing --clip none -o car-racing.png

Un coche de carreras rojo en 16 ángulos desde una cámara baja e inclinada

Una luz que se queda quieta, o que gira con el coche

Por defecto la luz principal sigue a la cámara: está en el mismo lado en todas las vistas. En un juego cenital suele ser lo que quieres, porque todos los rumbos se iluminan igual y un sprite se ve igual hacia donde apunte.

Si la luz debe quedarse fija en el mundo, de modo que un coche de espaldas al sol tenga su lado en sombra hacia el jugador, desactiva Sigue a la cámara en la luz principal (--light-space world). La animación de arriba usa una tercera vía: --turntable 32 gira el propio modelo una vez bajo una sola cámara, como una acción de 32 fotogramas, de modo que la luz se desliza por el casco mientras gira.

Animado en todos los ángulos

Un vehículo a menudo se mueve mientras gira: las ruedas giran, un motor parpadea, una torreta apunta. Dale un clip y cada lado recibe cada fotograma:

pxr render spaceship.glb --preset selout --view top-down --size 48 --ring 32 \
  --clip all --export png,json,godot

Las hojas crecen rápido con 32 lados; --max-height 4096 divide una hoja alta en páginas, con clips enteros en una página, y --dedupe guarda una sola vez los fotogramas idénticos. nave espacial, coche de carreras y coche de policía de la biblioteca son modelos CC0 gratuitos para probarlo.

Variantes gratis

Como cada ángulo sale de un solo modelo, las variantes no cuestan nada de dibujar. --variant hit-flash escribe una versión con destello para el daño; --team con --variant team:blue recolorea un color de equipo; --material-colour da al coche una pintura nueva. La sección de variantes de paleta del manual las lista todas. Para naves que vuelan hacia arriba de la pantalla en lugar de girar, consulta los sprites de shmup.

Preguntas

¿Cuántas rotaciones necesita el sprite de un coche cenital?

16 es el mínimo habitual para una dirección suave; 32 se ve suave a casi todas las velocidades, y 64 sirve para sprites grandes o giros lentos y precisos. Las naves de los juegos al estilo Asteroids suelen tener 16 o 32. Con menos de 16 se ve a saltos.

¿Por qué no rotar un sprite en el motor?

Rotar pixel art en cualquier ángulo que no sea múltiplo de 90 grados lo remuestrea: las líneas se rompen, los píxeles sueltos se duplican o desaparecen, y con filtrado los bordes se difuminan. Un render en cada ángulo mantiene líneas limpias de un píxel en cada rumbo.

¿Puede el vehículo tener también una animación en cada ángulo?

Sí. Con un clip, cada lado recibe cada fotograma: el parpadeo del propulsor de una nave o las ruedas giratorias de un coche en 16 rumbos es una sola hoja con una fila por lado.

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