Share
In diesem Tutorial, der vierten Ausgabe der SpriteKit From Scratch-Serie, werden die verschiedenen visuellen und akustischen Funktionen von SpriteKit betrachtet, um Ihren Spielen mehr Details und Abwechslung zu verleihen. Dazu gehören Partikelsysteme, Filter, Beleuchtung und Audio.
Um mit mir zu folgen, können Sie entweder das Projekt verwenden, das Sie im vorherigen Tutorial dieser Serie erstellt haben, oder eine neue Kopie von GitHub herunterladen.
Die für das Spiel in dieser Serie verwendeten Grafiken finden Sie auf GraphicRiver. GraphicRiver ist eine großartige Quelle, um Grafiken und Grafiken für Ihre Spiele zu finden.
In SpriteKit der Begriff Partikelsystembezieht sich auf einen einzelnen Emitterknoten, dargestellt durch den SKEmitterNode Klasse. Es definiert die Position des Systems in Ihrer Szene und alle von ihm erzeugten Partikel. Der Emitter gibt die verschiedenen Verhalten der Partikel an, die er erzeugt.
Partikelsysteme werden am besten in SpriteKit-Spielen verwendet, bei denen Sie eine große Anzahl identischer oder ähnlicher Sprites generieren müssen, die keinen bestimmten Ort haben oder Aktionen ausführen müssen.
In diesem Tutorial fügen wir zwei Partikelsysteme hinzu, wenn das Auto auf ein Hindernis trifft:
Partikelsysteme können zwar programmgesteuert erstellt werden, jedoch ist dies mit dem in Xcode integrierten Editor viel einfacher. Alle Eigenschaften eines Partikelsystems können in diesem Editor geändert werden und die von Ihnen vorgenommenen Änderungen werden sofort visualisiert. Dies ist viel einfacher, als nach jeder Änderung, die Sie vornehmen, Ihr Spiel auszuführen.
Wir werden zuerst den Explosionseffekt erzeugen. Erstellen Sie eine neue Datei in Ihrem Projekt und wählen Sie die iOS> Ressource> SpriteKit-Partikeldatei Vorlage.
Wählen Sie im angezeigten Menü Feuer als die Partikelvorlage. Benennen Sie die Datei Explosion oder etwas ähnliches.
Nachdem Xcode die Datei erstellt hat, werden in Ihrem Projekt zwei neue Dateien angezeigt, Explosion.sks und spark.png.
Explosion.sks enthält das Partikelsystem und es ist die Datei, mit der wir arbeiten werden. Die zweite Datei, spark.png, ist ein einfaches Bild, das von verwendet wird Feuer Partikelvorlage, um seinen visuellen Effekt zu erzeugen. Wenn du öffnest Explosion.sks, Sie können das Feuer animieren sehen.
Die wichtigste Änderung, die wir an diesem Partikelsystem vornehmen müssen, ist, dass sich Partikel in alle Richtungen vom Emitter nach außen bewegen und nicht ständig neue Partikel entstehen.
Um die erste Änderung vorzunehmen, öffnen Sie die Attribute-Inspektor und unter der Partikel Abschnitt ändern Winkelbereich zu 360 °.
Sie sehen sofort, dass sich die Partikel kreisförmig nach außen bewegen.
Um zu verhindern, dass das Partikelsystem kontinuierlich neue Partikel erzeugt, können Sie a angeben Maximal Wert. Dieser Wert teilt dem Partikelsystem mit, wie viele Partikel es insgesamt erzeugen soll. Der Standardwert von 0 bedeutet, dass es kein Maximum gibt, wodurch kontinuierlich neue Partikel erzeugt werden.
Neben der Festlegung eines Maximalwerts werden wir auch einige andere Eigenschaften ändern, um einen besseren Explosionseffekt zu erzielen. In dem Partikel Abschnitt der Attribute-Inspektor, Ändern Sie die folgenden Werte:
Legen wir fest Geburtenrate auf einen Wert, der höher ist als der Maximal Diese Eigenschaft bestimmt, wie viele Partikel erstellt werden pro Sekunde. Wir möchten, dass die Explosion sehr schnell geschieht. Anstatt also 1.000 Partikel über eine Zeitspanne von nur einer Sekunde zu spawnen, was mit einem geschehen würde Geburtenrate von 1.000 geben wir a an Geburtenrate von 5.000. Dies bedeutet, dass alle Partikel in nur 0,2 Sekunden erstellt werden.
Indem man es einstellt Lebensdauer> Start zu 3 Die Partikel leben 3 Sekunden lang. Das Lebensdauerbereich Diese Eigenschaft kann verwendet werden, um die Lebensdauer der Partikel zu variieren.
Zum Schluss setzen wir Geschwindigkeit> Start zu 200 so dass die Partikel sehr schnell aus dem Emitter herausfliegen, wie dies bei einer echten Explosion der Fall wäre.
Nach diesen Änderungen können Sie sehen, dass das Partikelsystem ganz anders aussieht und eher wie eine richtige Explosion aussieht.
Beachten Sie, dass das Partikelsystem, auch wenn die Animation im Xcode-Editor regelmäßig abläuft, nur einmal animiert wird, wenn Sie es Ihrer Szene hinzufügen.
Wenn das Explosionspartikelsystem abgeschlossen ist, ist es Zeit, zum Rauchpartikelsystem überzugehen. Erstellen Sie eine neue Datei, Rauch, mit der gleichen Vorlage, die wir für die Explosion verwendet haben. Der einzige Unterschied ist der Partikelvorlage, auf das wir gesetzt haben Rauch.
Die einzige Änderung, die wir an diesem Partikelsystem vornehmen müssen, besteht darin, dass sich der Rauch kreisförmig nach außen bewegt und nicht nur gerade nach oben. Ändern Sie dazu das Winkel> Bereich Eigentum an 360 ° wie wir es für das Explosionspartikelsystem getan haben. Danach sollte das Rauchpartikelsystem ungefähr so aussehen:
Wenn beide Partikelsysteme bereit sind, können wir sie unserer Szene hinzufügen. Dazu laden wir jede der Dateien, die wir erstellt haben SKEmitterNode Objekte und fügen Sie diese der Szene dann wie einen regulären Knoten hinzu. Öffnen MainScene.swift und ersetzen Sie die Implementierung von didBeginContact (_ :) mit den folgenden:
Accentsconagua
func didBeginContact (Kontakt: SKPhysicsContact) if contact.bodyA.node == Spieler || contact.bodyB.node == player wenn let explosionPath = NSBundle.mainBundle (). pathForResource ("Explosion", ofType: "sks"), let smokePath = NSBundle.mainBundle (). pathForResource ("Smoke", ofType: " sks "), let explosion = NSKeyedUnarchiver.unarchiveObjectWithFile (explosionPath) als? SKEmitterNode, rauch = NSKeyedUnarchiver.unarchiveObjectWithFile (smokePath) als? SKEmitterNode player.removeAllActions () Kamera? .RemoveAllActions () player.hidden = true player.removeFromParent () explosion.position = player.position smoke.position = player.position addChild (smoke) addChild (explosion)Wie bei der vorherigen Implementierung von didBeginContact (_ :), Wir führen dieselbe Überprüfung wie zuvor durch, um zu sehen, ob einer der an der Kollision beteiligten Knoten der Autoknoten ist. Wir verwenden dann eine optionale Bindung, um die Pfade zu den Ressourcendateien des Explosions- und des Rauchpartikelsystems abzurufen. Wir verwenden diese Pfade, um zu instanziieren SKEmitterNode Objekte von ihnen.
Als Nächstes entfernen wir alle Aktionen von den Kamera- und Playerknoten und verstecken den Playerknoten, indem Sie ihn aus der Szene entfernen. Wir entfernen das Auto, um weitere Kollisionen zu vermeiden, die dann zu weiteren Explosionen führen.
Wir setzen auch die Position der Senderknoten auf die Position des Autos und fügen sie der Szene hinzu. Daher beginnt SpriteKit sofort damit, die Partikelsysteme zu animieren, sobald sie der Szene hinzugefügt werden.
Bauen Sie Ihr Spiel auf und führen Sie es aus. Sie sollten das Explosionspartikelsystem sehen, sobald das Auto auf ein Hindernis trifft. Nach dem Löschen des Feuers folgt Rauch.
In SpriteKit gibt es einen speziellen Knotentyp (dargestellt durch den SKEffectNode Klasse), die eine Kernbild Filterobjekt (dargestellt durch das CIFilter class), um die untergeordneten Knoten mit einer Vielzahl von Effekten darzustellen. Das SKScene Klasse ist auch eine Unterklasse von SKEffectNode, Das bedeutet, dass Sie auch einen Filter auf die gesamte Szene anwenden können.
Zum Zeitpunkt der Erstellung dieses Tutorials gibt es leider einige Probleme in Bezug auf diese Filter und Effektknoten in iOS 9. Sobald ein Effekt für einen Effektknoten aktiviert ist, werden alle seine untergeordneten Elemente ausgeblendet, was zur Folge hat der Effekt ist nicht sichtbar.
Auch wenn wir dies nicht in unser Spiel implementieren können und sehen, wie es aussieht, können wir trotzdem den Code durchlaufen, der verwendet werden würde, um einen Effekt zu erzeugen. In diesem Fall ist die folgende Methode ein Beispiel für das Hinzufügen und allmähliche Ausblenden eines Unschärfeeffekts für die gesamte Szene.
func addBlurFilter () let blurFilter = CIFilter (Name: "CIGaussianBlur") blurFilter? .setDefaults () blurFilter? .setValue (0.0, forKey: "inputRadius") filter = : (Knoten: SKNode, elapsedTime: CGFloat) in let currentRadius = elapsedTime * 10.0 blurFilter? .setValue (currentRadius, forKey: "inputRadius")))
Wir schaffen ein CIFilter Objekt eines bestimmten Typs. Wenn Sie einige der anderen integrierten Filter anzeigen möchten, die Ihnen zur Verfügung stehen, lesen Sie die Referenz zu Core Image Filter. Wir stellen sicher, dass dieser Filter alle voreingestellten Eingabewerte besitzt und dann manuell eingestellt wird inputRadius zu 0,0, was bedeutet, dass es anfangs keine Unschärfe gibt.
Wir weisen den Filter dann dem zu Filter Eigenschaft der aktuellen Szene und gesetzt shouldEnableEffects zu wahr um es zu aktivieren. Schließlich führen wir einen Brauch aus SKAction Dadurch wird der Eingaberadius des Filters allmählich auf 10.
Hoffentlich werden in einer zukünftigen iOS-Version die Probleme mit Effektknoten behoben, da sie eine Möglichkeit bieten, Ihren SpriteKit-Szenen einige einzigartige und interessante Effekte hinzuzufügen.
SpriteKit enthält auch ein hervorragendes Beleuchtungssystem, mit dem Ihre Szenen realistischer wirken können. Lichtquellen sind sehr einfach zu implementieren und werden durch die Verwendung von erzeugt SKLightNode Klasse. Ein Lichtknoten definiert bestimmte Eigenschaften, z. B. die Farbe des Lichts (einschließlich Umgebungsfarbe) und seine Stärke über die Entfernung.
In unserer Szene erstellen wir ein einzelnes weißes Licht, das am Auto angebracht wird. Dieses Licht beleuchtet die Hindernisse vor dem Auto und erzeugt Schatten.
Beginnen wir mit dem Erstellen eines Lichts im didMoveToView (_ :) Methode Ihrer MainScene Klasse.
func didMoveToView überschreiben (view: SKView) … let light = SKLightNode () light.lightColor = UIColor.whiteColor () light.falloff = 0.5 player.addChild (light)
Mit diesem Code erstellen wir einen neuen SKLightNode Objekt, ändern Sie seine helle Farbe Eigenschaft zu Weiß und senken Sie seine runterfallen Eigenschaft aus dem Standardwert von 1 zu 0,5.
Genauso wie beim Einrichten der Physikkollisionserkennung in SpriteKit müssen Sie angeben, welche Lichter mit welchen Knoten in einer Szene über Bitmasken interagieren. Wenn SpriteKit die Lichter in einer Szene rendert, verwendet es einen logischen UND-Operator für den Lichtknoten categoryBitMask und das lightingBitMask und shadowCastBitMask von jedem anderen Knoten, um zu bestimmen, wie dieser bestimmte Knoten erscheinen soll.
Für unser Spiel möchten wir, dass die Hindernisse mit dem Licht interagieren, sodass sie Schatten in die Szene werfen. Fügen Sie dazu die folgenden zwei Zeilen am Ende der Zeile hinzu spawnObstacle (_ :) Methode der MainScene Klasse:
func spawnObstacle (Timer: NSTimer) … obstacle.lightingBitMask = 0xFFFFFFFF obstacle.shadowCastBitMask = 0xFFFFFFFF
Durch das Setzen einer Bitmaske, bei der alle Bits aktiviert sind, interagieren die Hindernisse mit jedem Licht in der Szene.
App erstellen und ausführen Sie werden sehen, dass jedes Hindernis, wenn sich Ihr Auto durch die Szene bewegt, einen dynamischen Schatten hat, der immer von der Fahrzeugmitte weg zeigt.
Wie Sie sehen, sind Lichter in SpriteKit sehr einfach zu bedienen und können Ihren Szenen schöne Effekte hinzufügen.
Zum Schluss betrachten wir die Audioknoten in SpriteKit. Audioknoten werden verwendet, um einer Szene Soundeffekte hinzuzufügen. Diese speziellen Knoten werden durch die dargestellt SKAudioNode Klasse. weil SKAudioNode ist ein SKNode In einer Unterklasse können Sie sie an einer beliebigen Stelle in einer Szene wie ein normaler Knoten hinzufügen und positionieren.
Mit SpriteKit können Sie nicht nur regelmäßig Audiodateien abspielen und gleich klingen, egal wie Ihre Szene angeordnet ist (z. B. Hintergrundmusik). Sie können auch positionelles Audio verwenden, um einen wirklich beeindruckenden Effekt zu erzeugen. Dies geschieht durch Angabe von a Hörer Knoten für Ihre Szene, von wo aus der Ton "gehört" wird.
Audioknoten sind standardmäßig positionell. Das bedeutet, wenn Sie diese Funktion in bestimmten Fällen nicht verwenden möchten, können Sie einen bestimmten Knoten festlegen positionell Eigentum an falsch.
Während wir dies nicht in unserem Spiel implementieren werden, ist das folgende Beispiel eine Methode zum Hinzufügen eines Hintergrundmusikknotens, der sich in einer Schleife befindet, solange er Teil der Szene ist. In der Methode fügen wir auch einen Explosions-Soundknoten hinzu, der abgespielt wird, wenn wir es dazu sagen.
Beachten Sie, dass wir das importieren AV-Gründung Rahmen an der Spitze. Dies ist notwendig, um auf das Internet zuzugreifen avAudioNode Eigentum eines SKAudioNode Objekt. Wie Sie sehen können, lassen sich Audio-Knoten in SpriteKit sehr einfach einrichten und damit arbeiten.
import AVFoundation func addAudioNode () listener = player let backgroundMusic = SKAudioNode (Dateiname: "backgroundMusic") backgroundMusic.positional = false let explosion = SKAudioNode (Dateiname: "explosion") explosion.autoplayLooped = false addChild (backgroundMusic) addChild (backgroundMusic) addChild (backgroundMusic) do try explosion.avAudioNode? .engine? .start () // Wird aufgerufen, wenn Sie Sound abspielen möchten catch // etwas mit dem Fehler tun
Sie sollten sich nun mit einigen der fortschrittlicheren Effekte in SpriteKit auskennen, darunter Partikelsysteme, Filter, Licht und Audio. Diese kombinierten Effekte können das Erscheinungsbild Ihres Spiels erheblich beeinflussen und beeinflussen, wie beeindruckend es ist.
Im nächsten und letzten Tutorial dieser Serie werden einige der bewährten Vorgehensweisen beschrieben, die bei der Arbeit mit SpriteKit zu beachten sind. Ich zeige Ihnen auch, wie Sie Textur-Atlanten erstellen und Szenen speichern / laden.
Wie immer sollten Sie Ihre Kommentare und Rückmeldungen in den nachstehenden Kommentaren hinterlassen.
