Share
In questa esercitazione, la quarta puntata della serie SpriteKit From Scratch, esaminiamo le varie funzioni visive e audio che SpriteKit fornisce per aggiungere più dettaglio e varietà ai tuoi giochi. Questo include sistemi di particelle, filtri, illuminazione e audio.
Per seguire insieme a me, puoi utilizzare il progetto che hai creato nel precedente tutorial di questa serie o scaricare una nuova copia da GitHub.
La grafica utilizzata per il gioco di questa serie può essere trovata su GraphicRiver. GraphicRiver è un'ottima fonte per trovare grafica e grafica per i tuoi giochi.
In SpriteKit, il termine sistema particellaresi riferisce a un singolo nodo emettitore, rappresentato dal SKEmitterNode classe. Definisce la posizione del sistema nella scena e tutte le particelle che crea. L'emettitore specifica i vari comportamenti delle particelle che genera.
I sistemi di particelle sono utilizzati al meglio nei giochi SpriteKit in cui è necessario generare un numero elevato di sprite identici o simili, che non devono necessariamente avere una posizione specifica o eseguire azioni.
In questo tutorial, aggiungeremo due sistemi di particelle quando l'auto colpisce un ostacolo:
Mentre i sistemi di particelle possono essere creati a livello di codice, è molto più semplice farlo utilizzando l'editor integrato di Xcode. Tutte le proprietà di un sistema di particelle possono essere modificate in questo editor e le modifiche apportate vengono immediatamente visualizzate. Questo è molto più facile di dover eseguire il gioco dopo ogni modifica effettuata.
Per prima cosa creeremo l'effetto esplosione. Crea un nuovo file nel tuo progetto e scegli il iOS> Resource> SpriteKit Particle File modello.
Dal menu che appare, seleziona Fuoco come il Modello di particelle. Nominare il file Esplosione o qualcosa di simile.
Dopo che Xcode ha creato il file, vedi che ci sono due nuovi file nel tuo progetto, Explosion.sks e spark.png.
Explosion.sks contiene il sistema particellare ed è il file con cui lavoreremo. Il secondo file, spark.png, è una semplice immagine usata dal Fuoco modello di particelle per creare il suo effetto visivo. Se apri Explosion.sks, puoi vedere il fuoco che anima.
I cambiamenti più importanti che dobbiamo apportare a questo sistema di particelle sono le particelle che si muovono verso l'esterno dall'emettitore in tutte le direzioni e che non generano continuamente nuove particelle.
Per fare il primo cambiamento, apri il Ispettore degli attributi e, sotto il Particelle sezione, cambia Intervallo angolare a 360 °.
Immediatamente, puoi vedere che le particelle si stanno ora spostando verso l'esterno in una forma circolare.
Per impedire al sistema particellare di creare continuamente nuove particelle, possiamo specificare a Massimo valore. Questo valore indica al sistema particellare quante particelle in totale dovrebbe creare. Il valore predefinito di 0 significa che non c'è il massimo, il che fa sì che nuove particelle vengano create continuamente.
Oltre a specificare un valore massimo, cambieremo anche alcune altre proprietà per creare un migliore effetto di esplosione. Nel Particelle sezione del Ispettore degli attributi, cambia i seguenti valori:
Prepariamo Tasso di natalità a un valore superiore al Massimo proprietà perché determina quante particelle vengono create al secondo. Vogliamo che l'esplosione avvenga molto rapidamente. Quindi piuttosto che avere 1.000 particelle che si generano nell'arco di un secondo, cosa che succederebbe con a Tasso di natalità di 1.000, specifichiamo a Tasso di natalità di 5.000. Ciò significa che tutte le particelle sono create in soli 0,2 secondi.
IMPOSTANDO Durata> Inizio a 3 le particelle vivono per 3 secondi. Il Gamma di vita la proprietà può essere utilizzata per aggiungere variazioni alla durata delle particelle.
Infine, abbiamo impostato Velocità> Avvia a 200 in modo che le particelle volino via molto rapidamente dall'emettitore come accadrebbe in una vera esplosione.
Dopo aver apportato queste modifiche, puoi vedere che il sistema di particelle sembra molto diverso e più simile a un'esplosione corretta.
Nota che, anche se l'animazione scorre periodicamente nell'editor Xcode, il sistema particella si anima solo una volta quando viene aggiunto alla scena.
Completato il sistema di particelle esplosive, è ora di passare al sistema di particelle di fumo. Crea un nuovo file, Fumo, usando lo stesso modello che abbiamo usato per l'esplosione. L'unica differenza è la Modello di particelle, che abbiamo impostato Fumo.
L'unico cambiamento che dobbiamo fare a questo sistema di particelle è di far muovere il fumo verso l'esterno in un cerchio piuttosto che semplicemente verso l'alto. Per fare ciò, cambia il Angolo> Gamma proprietà a 360 ° come abbiamo fatto per il sistema di particelle esplosive. Dopo averlo fatto, il sistema di particelle di fumo dovrebbe assomigliare a questo:
Con entrambi i sistemi di particelle pronti, possiamo aggiungerli alla nostra scena. Per fare questo, carichiamo ciascuno dei file che abbiamo creato come SKEmitterNode oggetti e quindi aggiungerli alla scena come un nodo normale. Aperto MainScene.swift e sostituire l'implementazione di didBeginContact (_ :) con il seguente:
Accentsconagua
func didBeginContact (contatto: SKPhysicsContact) if contact.bodyA.node == player || contact.bodyB.node == player if let explosionPath = NSBundle.mainBundle (). pathForResource ("Explosion", ofType: "sks"), lascia che smokePath = NSBundle.mainBundle (). pathForResource ("Smoke", ofType: " sks "), let explosion = NSKeyedUnarchiver.unarchiveObjectWithFile (explosionPath) as? SKEmitterNode, lascia smoke = NSKeyedUnarchiver.unarchiveObjectWithFile (smokePath) come? SKEmitterNode player.removeAllActions () camera? .RemoveAllActions () player.hidden = true player.removeFromParent () explosion.position = player.position smoke.position = player.position addChild (smoke) addChild (explosion)Come nella precedente implementazione di didBeginContact (_ :), eseguiamo lo stesso controllo di prima per vedere se uno dei nodi coinvolti nella collisione è il nodo dell'automobile. Quindi utilizziamo il binding opzionale per ottenere i percorsi sia per i file di risorse del sistema di esplosione che di particelle di fumo. Usiamo questi percorsi per creare un'istanza SKEmitterNode oggetti da loro.
Successivamente, rimuoviamo tutte le azioni dai nodi della fotocamera e del lettore e nascondiamo il nodo del player rimuovendolo dalla scena. Rimuoviamo l'auto per evitare ulteriori collisioni che portano a ulteriori esplosioni.
Impostiamo anche la posizione dei nodi dell'emettitore su quella della macchina e li aggiungiamo alla scena. Di conseguenza, SpriteKit inizia immediatamente ad animare i sistemi di particelle non appena vengono aggiunti alla scena.
Costruisci e gestisci il tuo gioco. Dovresti vedere il sistema di particelle esplosive non appena l'auto colpisce un ostacolo. Questo è seguito dal fumo una volta che l'incendio si è ripulito.
In SpriteKit, esiste un tipo speciale di nodo (rappresentato da SKEffectNode classe) che può usare a Immagine principale oggetto filtro (rappresentato dal CIFilter class) per rendere i suoi nodi figlio con una varietà di effetti. Il SKScene la classe è anche una sottoclasse di SKEffectNode, il che significa che puoi anche applicare un filtro all'intera scena.
Sfortunatamente, al momento di scrivere questo tutorial, ci sono alcuni problemi relativi a questi filtri e nodi effetto in iOS 9. Attualmente, non appena un effetto è abilitato per un nodo di effetti, tutti i suoi figli sono nascosti, il che si traduce in l'effetto non è visibile.
Anche se non possiamo implementarlo nel nostro gioco e vedere come si presenta, possiamo comunque eseguire il codice che verrebbe utilizzato per creare un effetto. In questo caso, il seguente metodo è un esempio di aggiunta e dissolvenza graduale di un effetto sfocato all'intera scena.
func addBlurFilter () let blurFilter = CIFilter (nome: "CIGaussianBlur") blurFilter? .setDefaults () blurFilter? .setValue (0.0, forKey: "inputRadius") filter = blurFilter shouldEnableEffects = true runAction (SKAction.customActionWithDuration (1.0, actionBlock : (node: SKNode, elapsedTime: CGFloat) in let currentRadius = elapsedTime * 10.0 blurFilter? .setValue (currentRadius, forKey: "inputRadius")))
Creiamo a CIFilter oggetto di un tipo particolare. Se vuoi vedere alcuni degli altri filtri incorporati disponibili, consulta il Riferimento del Core Image Filter. Garantiamo che questo filtro abbia tutti i valori di input predefiniti e quindi impostato manualmente inputRadius a 0.0, il che significa che inizialmente non c'è sfocatura.
Quindi assegniamo il filtro al filtro proprietà della scena corrente e set shouldEnableEffects a vero per abilitarlo. Finalmente, eseguiamo un'abitudine SKAction che aumenta gradualmente il raggio di input del filtro a 10.
Si spera che, in una futura versione di iOS, i problemi relativi ai nodi degli effetti siano corretti, poiché forniscono un modo per aggiungere effetti molto unici e interessanti alle scene di SpriteKit.
SpriteKit include anche un eccellente sistema di illuminazione che può essere utilizzato per rendere le tue scene più realistiche. Le luci sono molto facili da implementare e vengono create attraverso l'uso di SKLightNode classe. Un nodo di luce definisce alcune proprietà, come il colore della luce (incluso il colore dell'ambiente) e la sua forza sulla distanza.
Nella nostra scena, creeremo una sola luce bianca che verrà collegata alla macchina. Questa luce illuminerà gli ostacoli davanti all'auto e produrrà ombre.
Iniziamo creando una luce nel didMoveToView (_ :) metodo del tuo il MainScene classe.
override func didMoveToView (visualizza: SKView) ... let light = SKLightNode () light.lightColor = UIColor.whiteColor () light.falloff = 0.5 player.addChild (light)
Con questo codice, creiamo un nuovo SKLightNode oggetto, cambia il suo colore chiaro proprietà di bianco, e abbassare la sua cadere proprietà dal valore predefinito di 1 a 0.5.
Proprio come quando si imposta la rilevazione della collisione fisica in SpriteKit, è necessario specificare quali luci interagiscono con i nodi di una scena attraverso l'uso di maschere di bit. Quando SpriteKit esegue il rendering delle luci in una scena, utilizza un operatore AND logico sul nodo di luce categoryBitMask e il lightingBitMask e shadowCastBitMask di ogni altro nodo per determinare come dovrebbe apparire quel particolare nodo.
Per il nostro gioco, vogliamo che gli ostacoli interagiscano con la luce in modo da proiettare ombre nella scena. Per fare ciò, aggiungi le seguenti due righe alla fine del spawnObstacle (_ :) metodo del MainScene classe:
func spawnObstacle (timer: NSTimer) ... obstacle.lightingBitMask = 0xFFFFFFFF obstacle.shadowCastBitMask = 0xFFFFFFFF
Impostando una maschera di bit con tutti i bit abilitati, gli ostacoli interagiscono con ogni luce nella scena.
Crea ed esegui la tua app. Vedrai che, mentre la tua auto si muove attraverso la scena, ogni ostacolo ha un'ombra dinamica, che punta sempre lontano dal centro dell'auto.
Come puoi vedere, le luci di SpriteKit sono molto semplici da usare e possono aggiungere effetti piacevoli alle tue scene.
Infine, esamineremo i nodi audio in SpriteKit. I nodi audio vengono utilizzati per aggiungere effetti sonori a una scena. Questi nodi speciali sono rappresentati dal SKAudioNode classe. Perché SKAudioNode è un SKNode sottoclasse, puoi aggiungerle e posizionarle ovunque in una scena, come un nodo normale.
Oltre a riprodurre l'audio in modo regolare e suonare allo stesso modo indipendentemente dalla disposizione della scena (ad esempio, musica di sottofondo), SpriteKit consente di utilizzare l'audio posizionale per creare un effetto davvero coinvolgente. Questo viene fatto specificando a ascoltatore nodo per la scena, da cui viene "ascoltato" il suono.
I nodi audio sono posizionali per impostazione predefinita. Ciò significa che, se non si desidera utilizzare questa funzionalità in casi particolari, è possibile impostare un nodo specifico posizionale proprietà a falso.
Mentre non lo implementeremo nel nostro gioco, il seguente è un metodo di esempio per aggiungere un nodo musicale di sottofondo che si estende fino a quando fa parte della scena. Nel metodo, aggiungiamo anche un nodo sonoro esplosivo che inizia a suonare quando lo diciamo.
Si noti che importiamo il AVFoundation quadro in alto. Questo è necessario per accedere e lavorare con avAudioNode proprietà di un SKAudioNode oggetto. Come puoi vedere, i nodi audio sono molto facili da configurare e utilizzare in SpriteKit.
import AVFoundation func addAudioNode () listener = player lascia backgroundMusic = SKAudioNode (fileNamed: "backgroundMusic") backgroundMusic.positional = false let explosion = SKAudioNode (fileNamed: "explosion") explosion.autoplayLooped = false addChild (backgroundMusic) addChild (explosion) do try explosion.avAudioNode? .engine? .start () // Chiamato quando si desidera riprodurre il suono catch // Fare qualcosa con l'errore
Ora dovresti essere a tuo agio a lavorare con alcuni degli effetti più avanzati di SpriteKit, compresi i sistemi di particelle, i filtri, la luce e l'audio. Questi effetti combinati possono influire notevolmente sull'aspetto del tuo gioco e su quanto sia coinvolgente.
Nel prossimo e ultimo tutorial di questa serie, tratteremo alcune delle migliori pratiche da tenere a mente quando lavoriamo con SpriteKit. Vi mostro anche come creare atlanti di texture e salvare / caricare scene.
Come sempre, assicurati di lasciare i tuoi commenti e feedback nei commenti qui sotto.
