Share
In deze zelfstudie, de vierde aflevering van de SpriteKit From Scratch-serie, bekijken we de verschillende visuele en audiokenmerken die SpriteKit biedt om meer detail en variatie toe te voegen aan uw games. Dit omvat particle-systemen, filters, verlichting en audio.
Om met mij mee te gaan, kun je het project dat je in de vorige tutorial van deze serie hebt gemaakt gebruiken of een nieuwe kopie van GitHub downloaden..
De afbeeldingen die voor de game in deze serie worden gebruikt, zijn te vinden op GraphicRiver. GraphicRiver is een geweldige bron voor het vinden van illustraties en afbeeldingen voor uw games.
In SpriteKit is de term particle systemverwijst naar een enkel emitterknooppunt, gerepresenteerd door de SKEmitterNode klasse. Het definieert de positie van het systeem in uw scène en alle deeltjes die het creëert. De emitter geeft het verschillende gedrag aan van de deeltjes die het genereert.
Particle-systemen kunnen het best worden gebruikt in SpriteKit-spellen waarbij u een groot aantal identieke of soortgelijke sprites moet genereren, die geen specifieke locatie hoeven te hebben of geen acties hoeven uit te voeren.
In deze tutorial gaan we twee deeltjessystemen toevoegen wanneer de auto een obstakel raakt:
Hoewel deeltjessystemen programmatisch kunnen worden gemaakt, is het veel gemakkelijker om dit te doen met behulp van de ingebouwde editor van Xcode. Alle eigenschappen van een deeltjessysteem kunnen in deze editor worden aangepast en de wijzigingen die u aanbrengt, worden onmiddellijk gevisualiseerd. Dit is veel gemakkelijker dan je spel te moeten uitvoeren na elke wijziging die je aanbrengt.
We gaan eerst het explosie-effect creëren. Maak een nieuw bestand in uw project en kies het iOS> Bron> SpriteKit-deeltjesbestand sjabloon.
Selecteer in het menu dat wordt weergegeven Brand als de Deeltjessjabloon. Geef het bestand een naam Explosie of iets dergelijks.
Nadat Xcode het bestand heeft gemaakt, ziet u dat er twee nieuwe bestanden in uw project zijn, Explosion.sks en spark.png.
Explosion.sks bevat het deeltjessysteem en het is het bestand waarmee we zullen werken. Het tweede bestand, spark.png, is een eenvoudige afbeelding gebruikt door de Brand deeltjessjabloon om zijn visuele effect te creëren. Als je opent Explosion.sks, je ziet het vuur animeren.
De belangrijkste veranderingen die we aan dit deeltjessysteem moeten aanbrengen, zijn dat deeltjes in alle richtingen naar buiten van de emitter bewegen en niet voortdurend nieuwe deeltjes spawnen.
Om de eerste wijziging aan te brengen, opent u de Kenmerken Inspector en, onder de deeltjes sectie, verandering Hoek bereik naar 360 °.
Je kunt meteen zien dat de deeltjes nu in cirkelvorm naar buiten bewegen.
Om te voorkomen dat het particle systeem voortdurend nieuwe deeltjes creëert, kunnen we een specificeren maximaal waarde. Deze waarde vertelt het particle systeem hoeveel deeltjes het totaal zou moeten creëren. De standaardwaarde van 0 betekent dat er geen maximum is, waardoor er voortdurend nieuwe deeltjes worden gemaakt.
Naast het specificeren van een maximale waarde, gaan we ook een paar andere eigenschappen veranderen om een beter explosie-effect te creëren. In de deeltjes deel van de Kenmerken Inspector, verander de volgende waarden:
We gaan zitten Geboortecijfer naar een waarde die hoger is dan de maximaal eigenschap omdat het bepaalt hoeveel deeltjes worden gemaakt per seconde. We willen dat de explosie snel gebeurt. Dus in plaats van 1.000 deeltjes die over de hele reeks van een seconde uitzetten, wat zou gebeuren met een Geboortecijfer van 1.000 geven we een Geboortecijfer van 5.000. Dit betekent dat alle deeltjes in slechts 0,2 seconden worden gemaakt.
Door in te stellen Levensduur> Start naar 3 de deeltjes leven gedurende 3 seconden. De Levensduur bereik eigenschap kan worden gebruikt om variatie toe te voegen aan de levensduur van de deeltjes.
Ten slotte hebben we vastgesteld Snelheid> Start naar 200 zodat de deeltjes heel snel uit de zender vliegen zoals bij een echte explosie.
Nadat je deze wijzigingen hebt aangebracht, kun je zien dat het deeltjessysteem er heel anders uitziet en meer als een echte explosie.
Merk op dat, hoewel de animatielussen periodiek in de Xcode-editor worden herhaald, het particle-systeem slechts eenmaal animeert wanneer het wordt toegevoegd aan uw scène.
Als het explosiesysteem is voltooid, is het tijd om over te gaan naar het rookdeeltjessysteem. Maak een nieuw bestand, Rook, met dezelfde sjabloon die we voor de explosie hebben gebruikt. Het enige verschil is de Deeltjessjabloon, waar we naar toe gingen Rook.
De enige verandering die we in dit deeltjessysteem moeten aanbrengen, is door de rook in een cirkel naar buiten te laten bewegen in plaats van recht naar boven. Om dit te doen, wijzigt u de Hoek> Bereik eigendom aan 360 ° zoals we deden voor het explosiesysteem. Na dit te hebben gedaan, zou het rookdeeltjessysteem er ongeveer zo uit moeten zien:
Als beide deeltjessystemen klaar zijn, kunnen we ze aan onze scène toevoegen. Om dit te doen, laden we alle bestanden die we hebben gemaakt als SKEmitterNode objecten en voeg deze vervolgens als een normaal knooppunt toe aan de scène. Open MainScene.swift en vervang de implementatie van didBeginContact (_ :) met het volgende:
Accentsconagua
func didBeginContact (contact: SKPhysicsContact) if contact.bodyA.node == speler || contact.bodyB.node == speler if let explosPath = NSBundle.mainBundle (). pathForResource ("Explosion", ofType: "sks"), laat smokePath = NSBundle.mainBundle (). pathForResource ("Smoke", ofType: " sks "), laat explosion = NSKeyedUnarchiver.unarchiveObjectWithFile (explosionPath) als? SKEmitterNode, laat roken = NSKeyedUnarchiver.unarchiveObjectWithFile (smokePath) as? SKEmitterNode player.removeAllActions () camera? .RemoveAllActions () player.hidden = true player.removeFromParent () explosion.position = player.position smoke.position = player.position addChild (smoke) addChild (explosion)Zoals in de vorige implementatie van didBeginContact (_ :), we voeren dezelfde controle uit als eerst om te zien of een van de knooppunten die bij de botsing betrokken is, het autoknooppunt is. Vervolgens gebruiken we optionele binding om de paden naar zowel de bronbestanden van de explosie- en rookdeeltjessystemen te krijgen. We gebruiken deze paden om te instantiëren SKEmitterNode objecten van hen.
Vervolgens verwijderen we alle acties van de camera- en spelersknooppunten en verbergen we het spelersknooppunt door het van de scène te verwijderen. We verwijderen de auto om meer botsingen te voorkomen die vervolgens tot meer explosies leiden.
We stellen ook de positie van de emitterknooppunten in die van de auto en voegen deze toe aan de scène. Als gevolg hiervan begint de SpriteKit onmiddellijk de deeltjessystemen te animeren zodra ze aan de scène worden toegevoegd.
Bouw en run je spel. Je zou het explosiesysteem moeten zien zodra de auto een obstakel raakt. Dit wordt gevolgd door rook zodra het vuur is verdwenen.
In SpriteKit is er een speciaal type knooppunt (vertegenwoordigd door de SKEffectNode klasse) die een a kan gebruiken Core Image filter object (vertegenwoordigd door de CIFilter klasse) om de onderliggende knooppunten met verschillende effecten weer te geven. De SKScene klasse is ook een subklasse van SKEffectNode, wat betekent dat u ook een filter op de hele scène kunt toepassen.
Helaas zijn er op het moment van schrijven van deze zelfstudie enkele problemen met betrekking tot deze filters en effectknooppunten in iOS 9. Momenteel, zodra een effect is ingeschakeld voor een effectknooppunt, zijn al zijn kinderen verborgen, wat resulteert in het effect is niet zichtbaar.
Hoewel we dit niet in onze game kunnen implementeren en niet kunnen zien hoe het eruit ziet, kunnen we nog steeds de code doorlopen die zou worden gebruikt om een effect te creëren. In dit geval is de volgende methode een voorbeeld van het toevoegen en geleidelijk vervagen van een blur-effect naar de gehele scène.
func addBlurFilter () laat blurFilter = CIFilter (naam: "CIGaussianBlur") blurFilter? .setDefaults () blurFilter? .setValue (0.0, forKey: "inputRadius") filter = blurFilter shouldEnableEffects = true runAction (SKAction.customActionWithDuration (1.0, actionBlock : (node: SKNode, elapsedTime: CGFloat) in laat currentRadius = elapsedTime * 10.0 blurFilter? .setValue (currentRadius, forKey: "inputRadius")))
We creëren een CIFilter object van een bepaald type. Als je naar een aantal andere ingebouwde filters wilt kijken die voor jou beschikbaar zijn, bekijk dan de Core Image Filter Reference. We zorgen ervoor dat dit filter alle standaard invoerwaarden heeft en vervolgens handmatig wordt ingesteld inputRadius naar 0.0, wat betekent dat er aanvankelijk geen onscherpte is.
Vervolgens wijzen we het filter toe aan de filter eigenschap van de huidige scène en ingesteld shouldEnableEffects naar waar om het in te schakelen. Ten slotte hebben we een aangepaste versie SKAction Hiermee wordt de invoerradius van het filter geleidelijk verhoogd tot 10.
Hopelijk zijn in een toekomstige iOS-release de problemen met effectknooppunten opgelost, omdat ze een manier bieden om een aantal zeer unieke en interessante effecten aan je SpriteKit-scènes toe te voegen.
SpriteKit bevat ook een uitstekend verlichtingssysteem dat kan worden gebruikt om uw scènes realistischer te maken. Lichten zijn zeer eenvoudig te implementeren en worden gecreëerd door het gebruik van de SKLightNode klasse. Een licht knooppunt definieert bepaalde eigenschappen, zoals de kleur van het licht (inclusief de omgevingskleur) en de sterkte over de afstand.
In onze scène gaan we één wit licht maken dat aan de auto wordt bevestigd. Dit lampje verlicht de obstakels voor de auto en produceert schaduwen.
Laten we beginnen met het creëren van een licht in de didMoveToView (_ :) methode van je de MainScene klasse.
override func didMoveToView (weergave: SKView) ... let light = SKLightNode () light.lightColor = UIColor.whiteColor () light.falloff = 0,5 player.addChild (light)
Met deze code maken we een nieuwe SKLightNode object, verander het lichte kleur eigendom naar wit, en verlaag het falloff eigenschap van de standaardwaarde van 1 naar 0.5.
Net als bij het instellen van botsingdetectie van natuurkundigen in SpriteKit, moet je opgeven met welke lichten in een scène door het gebruik van bitmaskers wordt gewerkt. Wanneer SpriteKit de lichten in een scène weergeeft, wordt een logische AND-operator op de lichtknooppunten gebruikt categoryBitMask en de lightingBitMask en shadowCastBitMask van elk ander knooppunt om te bepalen hoe dat specifieke knooppunt zou moeten verschijnen.
Voor onze game willen we dat de obstakels in wisselwerking staan met het licht, zodat ze schaduwen in de scène werpen. Voeg hiervoor de volgende twee regels toe aan het einde van de spawnObstacle (_ :) methode van de MainScene klasse:
func spawnObstacle (timer: NSTimer) ... obstacle.lightingBitMask = 0xFFFFFFFF obstacle.shadowCastBitMask = 0xFFFFFFFF
Door een bitmasker in te stellen waarin alle bits zijn ingeschakeld, werken de obstakels op elk licht in de scène in.
Bouw en voer uw app uit. Je zult zien dat, terwijl je auto door de scène beweegt, elk obstakel een dynamische schaduw heeft, die altijd weg wijst van het midden van de auto.
Zoals je ziet, zijn de lichten in SpriteKit heel eenvoudig te gebruiken en kunnen ze leuke effecten toevoegen aan je scènes.
Ten slotte gaan we kijken naar audioknooppunten in SpriteKit. Audioknooppunten worden gebruikt om geluidseffecten toe te voegen aan een scène. Deze speciale knooppunten worden vertegenwoordigd door de SKAudioNode klasse. Omdat SKAudioNode is een SKNode subklasse, kunt u ze overal in een scène toevoegen en positioneren, zoals een normaal knooppunt.
Naast het op een regelmatige manier afspelen van audio en hetzelfde klinken, ongeacht hoe uw scène is gerangschikt (bijvoorbeeld achtergrondmuziek), kunt u met SpriteKit positionele audio gebruiken om een echt meeslepend effect te creëren. Dit wordt gedaan door een a te specificeren luisteraar knooppunt voor je scène, waar het geluid vanaf wordt "gehoord".
Audioknooppunten zijn standaard positioneel. Dit betekent dat als u deze functionaliteit in bepaalde gevallen niet wilt gebruiken, u een specifiek knooppunt kunt instellen positie- eigendom aan vals.
Hoewel we dit niet in onze game zullen implementeren, is het volgende een voorbeeldmethode voor het toevoegen van een achtergrondmuziekknooppunt dat lust zolang het deel uitmaakt van de scène. In de methode voegen we ook een explosieklanknode toe die begint te spelen wanneer we dat zeggen.
Merk op dat we het importeren AVFoundation raamwerk bovenaan. Dit is nodig om toegang te krijgen tot en te werken met de avAudioNode eigendom van een SKAudioNode voorwerp. Zoals je ziet, zijn audioknooppunten heel gemakkelijk in te stellen en te gebruiken in SpriteKit.
import AVFoundation func addAudioNode () listener = speler laat backgroundMusic = SKAudioNode (fileNamed: "backgroundMusic") backgroundMusic.positional = false let explosion = SKAudioNode (fileNamed: "explosion") explosion.autoplayLooped = false addChild (backgroundMusic) addChild (explosion) doen try explosion.avAudioNode? .engine? .start () // Wordt gebeld wanneer u geluid wilt afspelen vangst // Doe iets met de fout
Je zou nu comfortabel moeten werken met enkele van de meer geavanceerde effecten in SpriteKit, inclusief deeltjessystemen, filters, licht en audio. Deze gecombineerde effecten kunnen van grote invloed zijn op het uiterlijk van je spel en hoe meeslepend het spel is.
In de volgende en laatste zelfstudie van deze serie bespreken we enkele van de beste werkwijzen om in gedachten te houden wanneer u met SpriteKit werkt. Ik laat je ook zien hoe je textuuratlassen kunt maken en scènes kunt opslaan / laden.
Laat zoals altijd uw opmerkingen en feedback achter in de opmerkingen hieronder.
