Modo efficiente di disegnare contorni intorno agli sprite

Sto usando XNA per programmare un gioco e sto sperimentando vari modi per ottenere un effetto "selezionato" sui miei sprite. Il problema che sto riscontrando è che ogni clic cliccabile nello spritebatch viene disegnato usando più di un singolo sprite (ogni oggetto può essere composto da un massimo di 6 sprite).

Gradirei se qualcuno mi potesse consigliare su come potrei ottenere l'aggiunta di un contorno ai miei sprite di pixel X (quindi la larghezza del contorno può essere vari numeri di pixel interi).

Grazie in anticipo,

• Greg.

Di gran lunga il modo più semplice per farlo (quindi probabilmente il modo migliore, a meno che tu non sia davvero a corto di prestazioni) è avere due copie dei tuoi sprite.

• La versione normale
• Una versione "grassa" e incolore - fondamentalmente una versione bianca del tuo sprite X molti pixel "più grassi" rispetto all'originale.

Disegna l'intero oggetto usando la versione "fat", quindi disegna la versione normale sopra.

Rendendo la versione "grassa" bianca, è possibile utilizzare la colorazione integrata di SpriteBatch per modificare dinamicamente il colore di selezione.

Per generare la tua versione "grassa", ti consiglio di scrivere un'estensione della pipeline di contenuti in grado di prendere automaticamente i tuoi sprite originali, leggere il loro canale alfa, creare un nuovo canale alfa campionando il canale alfa massimo nell'immagine originale X-molti pixel attorno a ciascun pixel, e impostazione RGB = (1,1,1).

Dovrai assicurarti che tutti gli sprite abbiano un bordo trasparente sufficiente per aggiungere il contorno (puoi verificarlo nel processore dei contenuti e persino fare spazio se necessario).

Se hai solo alcuni sprite, puoi semplicemente usare un buon editor di immagini (GIMP, Photoshop) e farlo a mano: canale alfa per la selezione, espandi la selezione, selezione in alfa, riempi i canali di colore bianco.

Immagino che devi disegnare tutti i pezzi che ogni oggetto per primo in un singolo sprite. Quindi penso che dovresti scrivere uno shader per rilevare i bordi dello sprite e disegnare un pixel ovunque trovi un bordo. Mi aspetto che ci siano già degli shader là fuori per farlo, che potresti usare o port.

A seconda dei requisiti, ciò che potrebbe anche essere efficace è semplicemente la creazione di uno schema su richiesta per lo sprite. Suppongo che i tuoi sprite abbiano trasparenza e siano di forma irregolare anziché essere solo rettangoli (mentre per questo funzionerebbe bene, i rettangoli di contorno dovrebbero essere Trivial).

when selected:
   outline = new sprite canvas of appropriate size
   for sprite in object:
      # use larger numbers for thicker outlines
      for x in (-1, 0, 1) and y in (-1, 0, 1):
         render sprite mask into canvas at x,y with desired color

Nota che non è necessario farlo ogni volta che disegni (anche se suppongo che potresti), ma crea semplicemente il nuovo sprite di contorno quando cambi gli sprite.

L'approccio della forza bruta più semplice è quello di costruire due copie di ogni sprite, una normale e una evidenziata. Quindi scambiali quando evidenziati.

Se hai memoria da risparmiare, non è necessario complicarsi. Inoltre, gli artisti hanno il controllo completo sull'aspetto quando evidenziato, in modo da poter fare un contorno o qualsiasi altra cosa tu voglia.

Che ne dici di ogni sprite, hai anche un altro sprite che è un contorno dello sprite di base. Quando si disegna un oggetto delineato, disegnare gli sprite di base, quindi creare una maschera del rendering combinato, quindi disegnare gli sprite di contorno escludendo la maschera.

Alcune soluzioni diverse con diversi compromessi.

Più semplice: Rendi l'oggetto usando un colore piatto più volte e inclina la posizione (offset a sinistra, su, giù, a destra ecc.), Questo creerà una versione di contorno di tutto ciò che visualizzi sopra di esso, ma ha costi di prestazione e non lo farà consentire bordi grassi senza molti rendering extra. Un bordo di uno o due pixel può andare bene con 4x.

Il più veloce: preelaborare la trama e avere una copia che è già delimitata, o è solo il bordo, oppure è una maschera piatta in scala di grigi a 8 bit che è possibile colorare in uno shader. Questo sarà probabilmente veloce a costo della memoria.

Migliore: la mia opinione, ma generare una rappresentazione Signed Distance Field (SDF) del tuo oggetto sarebbe probabilmente la soluzione migliore. Queste trame possono essere molto più piccole della trama di origine e catturare comunque dati utili. In sostanza ogni pixel codifica quanto è lontano dall'oggetto utilizzato per generarlo. Con questi dati in mano, puoi scrivere tutti i tipi di effetti dai bagliori ai contorni. Il bordo potrebbe cambiare in dimensioni, colore ecc., Ed è ancora uno shader relativamente economico e solo un disegno in più. L'aspetto negativo è la strumentazione e la preelaborazione.

Non sono sicuro dell'efficienza, ma il modo più semplice che posso vedere sarebbe quello di disegnare una versione più grande dello sprite nel colore che si desidera selezionare per primo. Disegna lo sprite sopra di quello. Vedrai solo il bordo del primo sprite, dando l'effetto della selezione.

EDIT: Tuttavia, come puoi vedere dai commenti, questa non è una buona idea.

Sono d'accordo con il ridimensionamento dello sprite. Di gran lunga il percorso più semplice, e puoi applicarlo alla selezione di QUALSIASI sprite senza dover creare sprite aggiuntive appositamente per questo scopo.

• cioè spriteOutline.Scale = spriteOriginal.Scale * 0.1f; spriteOutline.Color = new Color (255, 0, 0, 255);

Sostituisci il colore dello sprite originale con il colore del contorno (o anche coloralo se vuoi). Rendering di questo sprite ombreggiato o colorato quattro volte con un offset di 1 pixel: a x, y = (- 1, -1), quindi (+ 1, -1), quindi (-1, + 1) quindi (+1 , +1). Ripetere l'operazione per tutti gli sprite che compongono l'oggetto.

Successivamente, esegui il rendering degli sprite originali nell'ordine corretto in cima a (0,0).