Come posso creare più faretti 2D?


12

Sto cercando di creare un effetto "riflettore" 2D che consenta di far luce su più entità. Cioè, come se diversi folletti reggessero torce. Per una singola entità (un riflettore), utilizzo una tecnica in cui sovrappongo uno sprite di gradiente e il punto centrale insegue quell'entità. Questa tecnica funziona bene per un singolo riflettore. Ecco uno screenshot per illustrare di cosa sto parlando:

Spotlight singolo: funziona

Effetto Spotlight con un faretto

Il problema che incontro è che questa tecnica non si estende a più entità. Se sovrappongo un'altra immagine di riflettori mi imbatto in diversi problemi. Ecco uno screenshot simulato:

Riflettori multipli = Problemi

Effetto Spotlight con due faretti

Il problema più ovvio sono gli angoli visibili. Ciò potrebbe essere risolto rendendo l'immagine dei riflettori gigantesca per coprire l'intero livello, ma ciò non sembra giusto. Il secondo e più intrattabile problema è che sto moltiplicando efficacemente l'oscurità con questa tecnica. Quindi ogni sprite aggiunto ha l'effetto di oscurare tutti gli altri. Chiaramente sto affrontando questo problema in modo errato.

Qualche idea?


Sforzi continui

C'è stata qualche discussione sulle opzioni di fusione nei commenti. Ecco il mio pensiero attuale. Nel mio esempio di singolo spotlight sopra, uso un file di immagine che assomiglia a questo: (ho sostituito la trasparenza con il colore verde per semplificare l'illustrazione)

Approccio alla trasparenza

Come discusso in precedenza, il problema è che la fusione alfa dell'immagine con un'altra immagine non produrrà l'effetto desiderato. Invece produrrà questo:

Sovrapposizione di due cerchi di trasparenza

Questo non mi sembra un problema di opzioni di fusione. Il problema, a mio avviso, è che quel tipo di immagine ha la maschera di trasparenza e l'immagine (un quadrato nero) incorporato, quando dovrebbero essere separate.

Quindi, invece di un'immagine nera con una trasparenza ritagliata incorporata, dovrei usare maschere di trasparenza che vengono utilizzate in fase di esecuzione contro il quadrato nero. Quando lo faccio, non riesco ancora a usare una tradizionale maschera per trasparenti bianca e nera o si imbatterà nello stesso problema. Ecco un esempio, questa volta il bianco e il nero rappresentano il bianco e il nero:

Maschera per trasparenze

La soluzione, a quanto pare, sarebbe quella di applicare una maschera di trasparenza che utilizza essa stessa la trasparenza. Qualcosa del genere: (verde = trasparente)

Maschera per trasparenze con trasparenza

In questo modo, più maschere di trasparenza potrebbero essere miscelate alfa insieme e quindi utilizzate come maschera di trasparenza contro il quadrato nero. Ecco un esempio di due maschere di trasparenza alfa miscelate insieme:

Due maschere trasparenti con trasparenza

Comunque, questo è l'approccio che sto lavorando per implementare. Pubblicherò i risultati se questo funziona. Quello che non so (al momento) è se posso usare una maschera di trasparenza che ha di per sé trasparenza.


Pensandoci, sembra che dovrei spostare le maschere trasparenti e applicarle a una grande trama nera. Non ho idea di come sarebbe fatto però.
Cameron Fredman,

7
Non sei sicuro di come stai creando o applicando i tuoi gradienti, tuttavia questo potrebbe essere un problema di fusione, dove se usi la giusta fusione funzionerà bene. Avremmo bisogno di maggiori informazioni sulle trame.
Dennmat,

Sto usando AndEngine come framework e gran parte della fusione avviene dietro le quinte, sebbene sia disponibile un "setBlendFunction ()" .
Cameron Fredman,

Guardando ciò a cui ti sei collegato direi che probabilmente vuoi la seconda soluzione elencata in fondo o la terza se non funziona. Non sono chiaro su andEngine e non sembrano avere documenti, forse se non riesci a trovare la tua risposta in quella discussione potrebbero essere in grado di aiutarti ulteriormente, poiché sembra che stiano già giocando con la fusione opzioni molto dietro le quinte.
Dennmat,

Anche se quel thread sembra risolvere il tuo problema in primo luogo, hai la versione che include quella modifica?
Dennmat,

Risposte:


3

Concettualmente, la soluzione a più faretti è composta da:

  1. Inizia con un array completamente nero per contenere i valori di illuminazione per ciascun pixel della scena.
    • Zero rappresenterà un'area dell'immagine senza luce.
    • Il 100% rappresenterà un'area completamente satura di luce naturale.
    • Se vuoi essere fantasioso, potresti avere un valore superiore al 100% (diciamo, 200%) che rappresenta un'area dell'immagine saturata e sfuma tutto in una chiazza di pixel bianca accecante. Preoccupati di questo in seguito, e per il momento limita semplicemente i valori tra 0-100%.
  2. Per ogni sorgente di luce all'interno dello schermo o abbastanza vicino al bordo che il suo alone aggiungerebbe alla luce, aggiungi i valori di luce da quella sorgente di luce alla tua gamma di valori di luce per i pixel della scena.
  3. Usa l'array valore-luce risultante per modificare i pixel della scena in modo tale che:
    • I pixel illuminati dallo 0% di luce sono neri.
    • I pixel illuminati dal 100% di luce hanno il loro colore normale.
    • Altri pixel sono un colore a metà strada.
    • Sembra che tu sappia già come fare questo passaggio, a giudicare dai tuoi screenshot.

Il trucco è capire che la miscelazione alfa può eseguire uno o più di questi passaggi. La fusione alfa si riferisce all'utilizzo di una mappa / immagine alfa per modificare i pixel di un'immagine o di una trama in modo semplice. Di solito significa anche che sarà un set veloce di funzioni, o implementato con speciali comandi hardware, per renderlo veloce. Puoi farlo con array regolari e normali comandi di linguaggio, ma probabilmente è meglio usare le speciali funzioni della libreria alpha / blending. ... E non avrà bug. A volte questo significa rendere i pixel parzialmente trasparenti, ma per il tuo caso, ciò significa:

  • Aggiunta di valori alfa a ciascun pixel, per creare l'array di valori di luce dal n. 1.
  • Utilizzando l'array valore-luce dal n. 1 per risolvere i colori finali per i pixel dal passaggio n. 3.

Inizierei a cercare la documentazione per le funzioni di fusione alfa per vedere quali funzionalità offrono per combinare pixel di vario tipo. Sospetto che avranno funzioni per ciascuno dei passaggi che dovrai eseguire, ma potrebbero essere sotto nomi che non sono ovvi.


Sto scavando questa risposta e ho intenzione di provarci. L'idea di un riflesso / sfocatura dell'obiettivo per valori superiori al 100% è anche un bonus interessante e stimolante. Pubblicherà aggiornamenti con le lezioni apprese nel processo. Grazie ET
Cameron Fredman,
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.