Sto cercando di creare un effetto tunnel simile in COCOS2D (iOS). Qualcuno potrebbe suggerire qualche suggerimento?
Fino ad ora ho provato con diversi sprite a forma di anello con scala decrescente e posizionati al centro su uno stesso punto e mantenendo Z crescente anche per ogni sprite più piccolo.
Detto questo, animandolo con CCScaleTo e modificando le dimensioni in 2.0 con la durata dell'animazione, ma non si avvicina comunque all'effetto tunnel mostrato nel riferimento.
Grazie Sam
Risposte:
Ho trovato la descrizione dell'implementazione dall'autore di questo effetto:
Sicuramente è stato molto lavoro per creare l'illusione della profondità in un piano 2D.
Il principio è molto semplice però: i cerchi iniziano al centro dello schermo con la scala 0. Quindi il primo cerchio del tunnel inizia a ridimensionare proporzionalmente al tempo trascorso (il ridimensionamento lineare non funziona) e dopo qualche tempo il secondo cerchio inizia a ridimensionare , quindi il 3o, il 4o e così via.
Abbassi quindi proporzionalmente il valore alfa per i cerchi (quelli in fondo hanno un valore alfa inferiore a quelli davanti per dare l'illusione della sfocatura), definisci un percorso che ogni cerchio deve seguire, spostando X e Y coordinate, quindi metti un'astronave al centro dello schermo. Inclinando il dispositivo, il tunnel si sposta a sinistra e a destra, su e giù (ma ciò dà l'impressione che l'astronave si stia muovendo!).
Una volta che i cerchi escono dallo schermo, vengono rapidamente sbiaditi e rimessi nella posizione iniziale (per risparmiare memoria, quindi non ho bisogno di creare nuovi cerchi ma riutilizzo gli stessi).
Mi dispiace per il mio inglese, ma spero che abbia spiegato l'idea generale :)
Ci sei quasi con sprite ad anello multipli con valore e scala Z decrescenti. Basta non centrarli tutti.
Devi tenere traccia del punto in cui vuoi che il tunnel colpisca l'orizzonte degli eventi lontano. Puoi spostare quel punto nel tempo come preferisci.
Quindi, posizionando ogni nuovo sprite, posizionalo in quel punto, ridimensionalo in piccolo, imposta l'opacità come preferisci, quindi inizia un CCSpawncon CCScaleToe CCFadeTo, ad esempio:
sprite->runAction(CCSpawn::create(
CCScaleTo::create(2.0f, 1.5f),
CCFadeTo::create(5.0f, 255),
nullptr));
Pre-creare tutti gli sprite e ruotare quello che si trova nella parte posteriore per mantenerlo efficiente.
Probabilmente proverei a ordinarlo con un livello di sfondo e effetti di particelle. È possibile testare gli effetti nel progettista di particelle e riprodurli successivamente nel livello backgroung.
Ad essere sincero, non penso che l'immagine sia resa usando una videocamera 2D. Sembra che il gioco sia reso usando un sistema di rendering 3D. Ma poiché vuoi usare cocos2d, devi simulare tu stesso quella matrice di transormazione 3D. Ecco un'idea per cominciare: sai in una scena 3D, ogni oggetto è definito da 3 valori scalari, x, ye z. Il metodo più semplice che puoi usare è il ridimensionamento come hai suggerito, ma non come hai implementato! ccScaleTosi tradurrà in un ridimensionamento lineare nel tempo, che non produrrà sensazione 3D. Puoi iniziare con ridimensionare l'oggetto in base al valore di 1/z. Questo è in qualche modo identico alla matrice di proiezione più semplice che ti viene in mente! se ritieni che ciò non ti soddisfi, dai un'occhiata a matrici di proiezione più moderne e più complesse .
Nota a margine: l'implementazione della matrice di proiezione personalizzata in cocos2D sarà un po 'sporca. se davvero non ti piace l'effetto, ti consiglio vivamente di cambiare il tuo motore con uno con supporto 3D.
Ecco come l'ho fatto, in pseudo-codice
Attiva l'effetto tunnel:
createCircle ()
Controllo (con parallasse)
La posizione è il Punto di fuga, pertanto non è possibile spostare i livelli senza spostare il punto di fuga. Tuttavia, se sposti il punto di ancoraggio, il livello sembra muoversi, ma il Punto di fuga rimane lo stesso - questo crea un effetto di parallasse, perché lo spostamento di ccp (0.2,0.2) su un livello vicino (grande scala) ha più effetto di muovendo lo stesso su uno strato lontano.
Avvolgi tutto in strati della stessa dimensione, per assicurarti che il riposizionamento dell'ancora crei lo stesso movimento in tutti i livelli.