Come posso creare un ampio spazio sullo sfondo che si ripete, in modo impercettibile


14

Come posso creare uno sfondo di ampio spazio che si ripete per un gioco RT. Voglio avere anche nebulose e campi di polvere complessi, ma poiché le unità avranno molto spazio da esplorare non posso avere un jpeg da 120000px per 1200000px, quindi voglio che l'immagine si ripeta, ma non ho linee di cambiamento tra i segmenti.

Sto usando questo con Babylon framework di Microsoft per tela web GL


8
Hai preso in considerazione l'utilizzo di uno shader procedurale anziché di un'immagine? Una semplice ricerca sul web fa apparire questo, che sembra molto impressionante: casual-effects.blogspot.com.au/2013/08/starfield-shader.html
LeFauve

@LeFauve In realtà mi piace molto questa idea. Il gioco ricorda le cose generate in passato quando torni indietro? Come posso gestirlo nella memoria del browser?
SuperUberDuper

@SuperUberDuper: non è necessario che "ricordi" qualsiasi cosa purché sia ​​generata in modo deterministico e locale. Rigenera i dati ogni volta che è necessario.
R .. GitHub smette di aiutare ICE il

@LeFauve: dovrebbe essere davvero una risposta. È molto meglio delle risposte fornite.
R .. GitHub smette di aiutare ICE il

@R .. Concordo, sarebbe anche bello avere un po 'di codice per esso in webGL;)
SuperUberDuper

Risposte:


19
  1. Usa lo scorrimento della parallasse. Hanno più livelli di sfondo che scorrono con diverse frazioni della velocità del punto di vista principale. Più basso è il livello, più lento scorre. Questo non è solo un ottimo modo per fornire un'illusione di profondità, ma rende anche gli sfondi meno ripetitivi perché gli oggetti sui diversi livelli appariranno in diverse composizioni a causa dei livelli non sincronizzati.

  2. crea i tuoi sfondi proceduralmente. Invece di un'enorme grafica di sfondo, disponi di diversi elementi più piccoli e posizionali tutti più volte in modo casuale in tutto il mondo di gioco.

E comunque: non usare JPEG quando puoi evitarlo. È un formato con perdita che perde più qualità ogni volta che lo modifichi e lo salvi, è fortemente ottimizzato per la fotografia e non supporta la trasparenza. Usa un formato senza perdita di dati con canale alfa come PNG. L'unico buon motivo sarebbe quando la tua immagine di origine è disponibile solo in JPEG (la NASA ha pubblicato molte belle immagini di astronomia che sono tutte di dominio pubblico) e non vuoi fare alcuna modifica su di esse.


7

Un modo per creare uno sfondo infinito per un gioco 2D è il seguente:

  1. Utilizzando un software di editor grafico (come iDraw per Mac), crea un'immagine A che rappresenta una parte del tuo sfondo. Questa immagine dovrebbe avere dimensioni limitate.
  2. Duplica A e specchialo sull'asse Y, questo è B
  3. Ora incolla (orizzontalmente) insieme A e B, questo è AB .
  4. Infine, importa l'immagine AB nel tuo gioco e ripeterla orizzontalmente tramite il codice tutte le volte che vuoi.

Spero che sia di aiuto.


2
Dimensioni limitate, ma non troppo limitate. Più piccola è la tessera, più ovvia sarà la ripetizione.
cHao,

1
Oppure, invece di eseguire il mirroring, usa il filtro Offset in Photoshop e clona il timbro sopra i bordi, oppure usa semplicemente il filtro "Rendi seamless" di GIMP (Filtro → Mappa → Rendi seamless).
mercoledì

5

Gli strati funzionano bene.

Ecco alcuni calcoli:

Supponiamo di avere un binario ferroviario mal fatto in modo tale che simili __ __notino il divario tra di loro. Quando la ruota gira su di loro, fa una piccola tacca (piccola tacca).

Se la lunghezza della carreggiata è le la ruota ha un raggio, rallora 2pi rè la circonferenza della ruota, ration=l/(2pi r)se il rapporto è 10,25, allora la ruota otterrà una tacca ogni quarto mentre guida per un lungo.

Questo è il modo più semplice che mi viene in mente di spiegare gli spazi di copertura.

Supponiamo quindi di avere due immagini, se una ha questo rapporto di un quarto otterrai uno schema a 4 fasi, che si ripeterà dopo 4 tessere. Supponiamo di avere 1 sfondo principale e 2 overlay, con le fasi m e n. Quindi il motivo si ripeterà dopo m * n tessere.

Anche se non importa molto lo schema sembrerà migliore se i numeri sono co-primi, questo è il più grande divisore comune è 1. Ad esempio supponiamo di avere qualcosa della fase 6 e qualcosa della fase 4, ogni altra fase che si "allineeranno" " in un senso.

Puoi usare questa tecnica (specialmente con particelle e cose) per creare molte cose "uniche" con il minimo sforzo.

Di nuovo alla ruota del treno, se il rapporto è irrazionale, le tacche copriranno la ruota! Ma questo non ha molta importanza.


5

Ecco un'altra idea che sembra mancare:

Nel caso di sfondi a lunga distanza, come i riquadri del cielo, i livelli di parallasse non si sentono davvero bene. Pensa alle stelle, ad esempio, quando cammini sulla terra, o meglio durante la notte, tutte le stelle si muovono insieme, anche se sappiamo che sono a centinaia o pensieri lontani anni luce l'una dall'altra. Il fatto è che sono troppo lontani per farci notare le loro distanze. Detto questo, vogliamo ancora una trama molto grande (diciamo 120k * 120k), da disegnare con la nostra limitata potenza computazionale (che può gestire al massimo 8k * 8k). Come l'utilizzo di più livelli di parallasse, è necessario creare trame diverse, ognuna con diversi tipi di dettagli. Ad esempio, uno rappresenta le galassie, un altro è un gruppo di stelle, ecc. Ma questa volta invece di spostarle con velocità diverse, dovrebbero differire nelle loro dimensioni. Ecco un esempio: considera l'utilizzo di 3 trame, uno è 2048 * 2048, un altro è 729 * 729 e il terzo è 625 * 625. Poiché questi numeri sono coprimi tra loro, quando si combinano queste 3 trame in 3 strati, si dovrebbe spostare mcm (2048.729.625) = 764 M pixel dall'origine per vedere la stessa cosa disegnata, che sembra un po 'infinita. In effetti puoi aggiungere altri livelli o modificare le dimensioni di ogni trama e otterrai sempre un risultato grande quantoil minimo comune multiplo delle dimensioni della trama.


2
Questa e la risposta di AlecTeal descrivono una tecnica chiamata Principio Cicada . È un modo semplice per creare sfondi non casuali, molto grandi e non ripetitivi con pochissime risorse.
Sdraiati Ryan il

4

Questo sembra essere un lavoro per un pixel shader procedurale.

I vantaggi rispetto all'utilizzo di un'immagine sono:

  • Non è necessario fornire bitmap enormi
  • È procedurale, quindi non deve ripetere un'immagine fissa (può variare all'infinito)
  • Se si desidera un effetto paralax, è possibile simulare migliaia di piani, il che sarebbe impraticabile usando le immagini
  • Puoi fare effetti molto avanzati, come l'illuminazione dinamica
  • La maggior parte dell'elaborazione viene eseguita dalla GPU, lasciando la CPU libera per altre parti del gioco

Una semplice ricerca web porta questo shader su http://casual-effects.blogspot.com.au/2013/08/starfield-shader.html che assomiglia a quello che stai cercando.

Non sono un esperto di WebGL, ma secondo questa pagina sembra che usi il normale linguaggio GLSL (questo è il linguaggio C-Like usato dalle schede grafiche per programmare gli shader). Ciò significa che probabilmente avrai poche o nessuna modifica da fare per farlo funzionare.

Puoi comunque provare a iniziare con uno shader più semplice per capire come funziona.

Questa pagina del blog elenca tutti i passaggi per implementare uno shader in WebGL. Sembra un buon punto di partenza.

Un altro buon posto per trovare meravigliosi esempi di shader è https://www.shadertoy.com/


Grande grazie !!! Ora ho difficoltà a scegliere una risposta!
SuperUberDuper il

2
Bene, se hai la possibilità di provare gli shader, è sicuramente qualcosa che sarà utile a lungo termine se vuoi fare giochi belli da vedere. Il primo passo è un po 'alto (mi ci sono volute 2 settimane per avere il mio primo shader come volevo) ma ne vale la pena nel lungo periodo.
LeFauve,

2

Puoi tagliare il tuo jpeg grande in piccoli segmenti e posizionarli (parte visibile), non è nemmeno necessario memorizzarlo in ogni momento.

E come un vecchio gioco, alcune "tessere" possono ripetersi. Questa era la soluzione comune per la console NES, che era persino supportata dall'hardware.


1
È estremamente difficile, se non impossibile, tagliare un JPEG in JPEG più piccoli che si ricuciranno senza problemi visivi a causa della compressione con perdita. Se cerchi tessere, dovrai utilizzare un formato di file di compressione senza perdita di dati, come PNG.
LeFauve,

1
Concordo sul fatto che PNG potrebbe essere migliore, d'altra parte, le trame JPEG sono comuni nella grafica 3d e, cosa più importante, l'uso di blocchi 16x16 in formato JPEG per la codifica en.wikipedia.org/wiki/Macroblock non può essere notato se non si esegue la codifica nel modo più basso Vota.
Alexsey Shestacov,
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.