Selout: contorni selettivi

Il selout sostituisce un contorno nero netto con uno che prende il colore dalla forma che racchiude. Lo sprite resta leggibile ma appare più morbido e illuminato.

Un goblin che cammina, renderizzato da Pixor
Cavaliere con un contorno scuro tutto attorno
Contorno scuro
Cavaliere con un contorno selettivo
Selout
Cavaliere nel preset selout di Pixor
Preset selout

Cos’è

Selout è l’abbreviazione di selective outlining, contorno selettivo. Invece di disegnare la stessa linea scura attorno a tutto lo sprite, ogni pixel del contorno prende un colore dalla forma accanto, di solito una tonalità più scura della rampa di quella forma. Dove batte la luce, il contorno si schiarisce o sparisce. Dove la forma gira verso l’ombra, il contorno si scurisce.

Un mantello rosso riceve un contorno rosso scuro. Un elmo grigio ne riceve uno grigio scuro. La sommità della testa, rivolta verso la luce, può non avere alcun contorno.

Perché gli artisti lo fanno

Un contorno nero puro è forte e chiaro, ma appiattisce uno sprite. Ogni forma è recintata dalla stessa linea pesante, e la linea compete con l'ombreggiatura per l'attenzione. Il selout mantiene definito il bordo lasciando che la luce sembri avvolgere la forma. Aiuta anche gli sprite a integrarsi in una scena invece di risaltare come adesivi.

È una scelta di stile, non una regola. Molti giochi amatissimi usano contorni neri ovunque.

Errori comuni

  • Usare un solo colore per tutto il contorno. Quello è solo un contorno colorato. Il senso del selout è che il colore cambia con la forma e con la luce.
  • Rendere il contorno troppo chiaro. Se i pixel del contorno sono vicini al colore di riempimento, il bordo sparisce e la sagoma si ammorbidisce, soprattutto su sfondi simili.
  • Togliere il contorno sul lato in ombra. Mantieni il contorno più scuro dove lo sprite è in ombra; è quel lato a fare gran parte del lavoro nel definire la forma.
  • Raddoppiare. Un contorno spesso due pixel in alcuni punti, o con angoli a gradino a “L”, appare pesante. Tienilo a un solo pixel pulito.

Come farlo a mano

  1. Disegna prima lo sprite con un semplice contorno scuro, così la silhouette è piena.
  2. Scegli una direzione della luce.
  3. Percorri il contorno. Per ogni tratto di pixel, sostituisci il colore scuro con la tonalità più scura della rampa della forma che tocca.
  4. Sul lato illuminato, porta il contorno una o due tonalità più chiaro, o toglilo dove la forma è chiaramente luminosa.
  5. Controlla lo sprite su uno sfondo scuro e uno chiaro, e con zoom 1×.

La stessa idea funziona per le linee interne tra le parti, come il bordo dove una manica incontra un guanto.

Come lo fa Pixor

Pixor tratta separatamente i tipi di contorno: la silhouette, le linee interne tra le parti e le pieghe dove una superficie si piega. Ogni tipo può essere omesso, disegnato scuro, o disegnato come contorno selettivo colorato dalla superficie accanto. Le linee sono larghe un pixel senza angoli a L. Il preset selout è un look di partenza con i contorni selettivi attivi; come ogni fase, le impostazioni delle linee sono nodi nel grafo di Stile, e un look che ti piace si può salvare come kit.

Cavaliere con una linea interna selettiva

Domande

Il selout è meglio di un contorno nero?

Nessuno dei due è migliore. I contorni neri si leggono bene su sfondi movimentati e si addicono a uno stile deciso; il selout appare più morbido e dipinto. Scegline uno e usalo in tutto il gioco.

Il selout funziona su sprite molto piccoli?

Sì, ma mantieni la parte più scura del contorno dove lo sprite incontra lo sfondo in ombra, o può confondersi con la scena.

Leggi anche

Provalo sul tuo modello, gratis nel browser, o prendi la versione completa.

Prova nel browser Ottieni Pixor