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

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

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.

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.

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.

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.

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/

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.