Share
Lo scrolling di parallasse è un modo semplice ed efficace per creare l'illusione della profondità in un gioco 2D. Sia che tu stia sviluppando uno sparatutto verticale o un platform a scorrimento laterale orizzontale, lo scrolling della parallasse è una vera e propria graffetta di gioco che aumenterà notevolmente l'immersione e l'impatto grafico del tuo progetto.
In questo tutorial, tratterò i fondamenti dello scrolling della parallasse, insieme a diversi metodi di implementazione, in modo tale che sarai in grado di introdurre con sicurezza e con successo lo scrolling della parallasse nel tuo set di abilità, indipendentemente dal tuo attuale livello di abilità.
Prova la demo qui sotto per vedere le scene che utilizzano lo scorrimento orizzontale, verticale, entrambi e senza parallasse. Fare clic sulla demo per attivarla, quindi utilizzare i tasti numerici per cambiare le scene e i tasti freccia per spostare l'astronave (per le scene appropriate).
La parallasse è definita come lo spostamento apparente di un oggetto osservato a causa di un cambiamento nella posizione dell'osservatore. Con lo scrolling di parallasse 2D, la posizione dell'osservatore cambia solo lungo gli assi xey. Solo la velocità e la posizione di un oggetto cambieranno con la posizione dell'osservatore, in quanto il ridimensionamento dell'oggetto richiederebbe una modifica lungo l'asse z.
Takashi Nishiyama's Moon Patrol è ampiamente riconosciuto come il primo gioco a presentare lo scrolling di parallasse 2D, ma la tecnica esisteva nell'animazione tradizionale già nel 1933. Utilizzando una fotocamera multiplane, gli animatori erano in grado di creare un effetto 3D non stereoscopico che creava l'illusione della profondità consentendo diverse risorse artistiche per muoversi a velocità diverse in relazione alla distanza percepita dall'obiettivo della fotocamera. In questo modo si ottiene lo scrolling della parallasse nei videogiochi moderni, ma invece di una telecamera multiplane, le scene vengono assemblate con più livelli e una singola videocamera o vista.
Dividendo gli elementi di sfondo e di primo piano di un gioco in diversi livelli, è possibile controllare la velocità e la posizione di questi elementi in base ai loro livelli. L'osservatore, in questo caso, è il giocatore, e la videocamera di gioco rimane focalizzata su un particolare punto o oggetto, mentre i livelli di sfondo e di primo piano si spostano di conseguenza.
Questo punto focale si muove alla velocità "normale" o alla velocità definita dal gameplay. Gli oggetti di sfondo si muovono più lentamente del punto focale mentre gli oggetti in primo piano si muovono più velocemente del punto focale. Ciò si traduce in un'illusione di profondità che rende più coinvolgente una scena 2D.
Nel nostro primo esempio, abbiamo una scena molto semplice di una strada di notte che presenta uno scorrimento orizzontale senza elementi interattivi. I vari livelli di sfondo si muovono a velocità predeterminate lungo l'asse x. Per ora, concentriamoci sulle basi dello scrolling della parallasse senza preoccuparci di alcun movimento del giocatore o di cambi di vista.
In primo luogo, analizziamo i singoli elementi e gli attributi della nostra scena. La finestra di gioco è 600x300px e le nostre risorse artistiche hanno ciascuna una larghezza di almeno 600 px. Utilizzando elementi di sfondo più grandi della finestra di gioco, possiamo impedire che l'intera risorsa sia visibile in qualsiasi momento. Dato che i livelli sono affiancati, questo aiuterà a evitare un'eccessiva ripetizione poiché la stessa risorsa scorre indefinitamente.
I quattro strati che compongono la nostra prima scena.La nostra scena è composta da quattro strati. In questo esempio, il numero del layer definisce l'ordine in cui la risorsa viene disegnata sullo schermo e la sua velocità di movimento. Se si trattasse di un platform a scorrimento laterale, il nostro oggetto giocatore sarebbe presente sopra il livello 3. Questo strato sarebbe il punto focale dell'osservatore e determinerebbe anche la velocità dei livelli di sfondo e di primo piano.
Il Livello 2 si muove più lentamente del Livello 3 e il Livello 1 si sposta più lentamente del Livello 2. Il Livello 4 esiste come livello in primo piano, quindi si sposta più rapidamente del punto focale sul Livello 3.
Esistono diversi modi per implementare questo tipo di tecnica di scorrimento della parallasse. In questo esempio, gli strati si muovono a velocità predeterminate senza fare riferimento l'un l'altro. Se si prevede di avere più scene con quantità variabili di livelli di sfondo e di primo piano, sarebbe meglio definire le velocità dei livelli leggendo la velocità corrente del livello del punto focale. Ad esempio, se il punto focale è il livello 3 e si sta muovendo alla velocità di 5, quindi ogni successivo livello di sfondo si sposta a una velocità inferiore a 5. Qualsiasi strato in primo piano si muoverà a una velocità maggiore di 5.
// Variables focal_point_speed = 5; layer_difference = 1; // Livello del punto focale layer3.hspeed = focal_point_speed; // Background layers layer2.hspeed = layer3.hspeed - layer_difference; layer1.hspeed = layer2.hspeed - layer_difference; // Strati di primo piano layer4.hspeed = layer3.hspeed + layer_difference; layer5.hspeed = layer4.hspeed + layer_difference;
Mentre lo scrolling della parallasse è più spesso usato con sfondi orizzontali, può anche essere usato in scene verticali, come in questo esempio di sparatutto spaziale. Ci possono essere modi più efficienti per creare un campo stellare, ma lo scrolling della parallasse porta a termine il lavoro.
La cosa più importante da rimuovere da questo esempio verticale è che lo scrolling della parallasse funziona in tutte e quattro le direzioni lungo gli assi xey. (Vedremo quanto è importante questo nel nostro terzo ed ultimo esempio).
Questa scena presenta quattro livelli di sfondo: uno sfondo nero statico e tre raccolte di stelle di diverse dimensioni. Lo sfondo statico non si muove e ogni strato successivo di stelle si ingrandisce e si muove più velocemente, con lo strato finale di stelle che determina in definitiva la velocità verticale del punto focale, l'astronave del giocatore. Questo tipo di scrolling di parallasse ci consente di simulare la profondità dello spazio simulando anche il movimento in avanti. La nave del giocatore non si muove mai realmente sullo schermo, ma si ha comunque la sensazione di viaggiare nello spazio ad alta velocità.
Ora che abbiamo una migliore comprensione di ciò che è lo scrolling della parallasse, possiamo iniziare a costruire una scena in cui sono implementati sia lo scorrimento orizzontale che verticale, insieme a una vista di gioco che tiene traccia del movimento di un oggetto controllato dal giocatore.
Nella demo nella parte superiore del tutorial, questa scena è divisa in due esempi. La prima versione mostra come è la scena senza lo scrolling della parallasse. La seconda versione presenta lo scrolling di parallasse verticale e orizzontale completo, e illustra davvero come lo scrolling della parallasse può aggiungere una grande quantità di immersione e profondità a quella che in origine era una scena molto piatta e senza vita.
L'aspetto più importante di questo esempio è il movimento del giocatore e la vista di gioco. Poiché il nostro sfondo non è più bloccato in una posizione predeterminata di velocità o schermo, dobbiamo calcolare la velocità e la posizione di ciascun livello in relazione alla finestra di visualizzazione mentre il giocatore si muove intorno.
L'origine della nostra finestra di visualizzazione è nell'angolo in alto a sinistra in (X, Y). L'origine di ogni livello del livello di sfondo si trova nell'angolo superiore sinistro dello sprite in (0,0). Trovando le coordinate xey correnti della finestra di visualizzazione in relazione al mondo di gioco, possiamo eseguire un calcolo per determinare dove deve essere collocata l'origine di un livello di sfondo nella scena. Questa posizione cambia mentre la finestra della vista si muove in base a questo calcolo.
Utilizzando valori diversi nel calcolo di ogni livello, siamo in grado di spostare ogni livello a velocità diverse, a seconda della velocità con cui il giocatore si muove.
Il codice per disegnare il livello che si trova direttamente dietro il nostro oggetto giocatore è nel seguente formato: draw_background_tiled_horizontal (layer, x, y) dove draw_background_tiled_horizontal () è una semplice funzione per disegnare una risorsa piastrellata in una posizione specifica, e bg_ex_3_2 è la nostra risorsa di livello.
// Layer 3 draw_background_tiled_horizontal (bg_ex_3_2, view_xview [view_current] / 2.5, (view_yview [view_current] / 10) + 300);
Il valore X del livello in questo caso è definito dal valore X della vista corrente diviso per un valore di 2.5, creando un movimento orizzontale che si sposta leggermente più lentamente del movimento della vista stessa.
Allo stesso modo, il valore Y del livello è definito dal valore Y della vista corrente divisa per 10. Il valore Y del livello viene quindi aumentato di 300 posizionarlo correttamente in relazione al mondo di gioco. Senza questa aggiunta aggiuntiva di 300, la risorsa apparirà vicino alla parte superiore del mondo di gioco invece che vicino al fondo dove vogliamo che sia.
Questi valori saranno ovviamente diversi nel tuo progetto, ma la cosa importante da ricordare è che la velocità del movimento del livello aumenterà con l'aumento del numero di divisione, ma solo fino a un certo punto. Usando la divisione, il livello può muoversi solo alla stessa velocità o più lentamente della velocità del giocatore.
I due strati dietro questo livello si muovono più lentamente, quindi i numeri di divisione sono più piccoli:
// Layer 1 draw_background_tiled_horizontal (bg_ex_3_0, view_xview [view_current] / 1.5, (view_yview [view_current] / 2.5) + 175); // Layer 2 draw_background_tiled_horizontal (bg_ex_3_1, view_xview [view_current] / 2, (view_yview [view_current] / 5) +250);
Per fare in modo che un livello si muova più velocemente del punto focale, come un livello in primo piano, è necessario apportare una leggera modifica. In questo esempio non vi è alcun livello in primo piano e il livello del punto focale è visibile solo nella parte inferiore dello schermo. Il giocatore è in grado di volare in alto e al di sopra del punto focale, che è il terreno, quindi la nave stessa diventa il punto focale. Ci riferiamo al terreno come il punto focale in questo esempio perché il terreno è l'unico strato che si muove alla stessa velocità percepita dell'astronave. Qui è dove otteniamo il nostro vero senso della velocità nella scena.
Lo strato di base si sposta più rapidamente della vista stessa, quindi il codice per disegnare questo livello è leggermente diverso rispetto agli altri livelli di sfondo:
// Livello del punto focale (terreno) draw_background_tiled_horizontal (bg_ex_3_3, -view_xview [view_current] * 1.5, -view_yview [view_current] + 700);
Con gli strati che si muovono più rapidamente della vista, prendiamo il negativo I valori X e Y della vista corrente e moltiplica per alcuni valori. Non vi è alcuna divisione coinvolta nel calcolo della velocità dei livelli in primo piano. In questo esempio, lo strato di base si sposta a una velocità orizzontale di una volta e mezza Più veloce rispetto alla velocità della finestra di visualizzazione. Nessuna moltiplicazione viene eseguita sulla velocità verticale del livello, quindi si sposta alla stessa velocità della vista. Un valore aggiuntivo di 700 viene aggiunto al valore Y del livello per posizionarlo nella posizione desiderata vicino al fondo del mondo di gioco.
Lo scrolling di parallasse è un modo semplice ma molto efficace per aggiungere l'illusione di profondità a un gioco 2D. Spero che gli esempi nella demo abbiano dimostrato quanto possa essere efficace, e spero che il tutorial stesso abbia dimostrato quanto sia semplice da implementare!
Accentsconagua