SpriteKit From Scratch Visual and Audio Effects

Introduksjon

I denne opplæringen, den fjerde delen av SpriteKit From Scratch-serien, ser vi på de forskjellige visuelle og lydfunksjonene. SpriteKit gir deg en ekstra detalj og variasjon i spillene dine. Dette inkluderer partikkelsystemer, filtre, belysning og lyd.

For å følge med meg kan du enten bruke prosjektet du opprettet i forrige oppgave i denne serien eller laste ned en ny kopi fra GitHub.

Grafikken som brukes til spillet i denne serien, finnes på GraphicRiver. GraphicRiver er en god kilde for å finne kunst og grafikk for spillene dine.

1. Partikkelsystemer

I SpriteKit er begrepet partikkelsystemrefererer til en enkelt emitter node, representert av SKEmitterNode klasse. Det definerer systemets posisjon i din scene og alle partiklene det skaper. Emitteren spesifiserer de ulike oppføringene av partiklene som det genererer.

Partikkel systemer brukes best i SpriteKit spill hvor du må generere et stort antall like eller lignende sprites, som ikke trenger å ha et bestemt sted eller utføre noen handlinger.

I denne opplæringen skal vi legge til to partikkelsystemer når bilen treffer et hinder:

  • en kort eksplosjonseffekt som kort vises
  • en røykeffekt som forblir i scene på ubestemt tid

Selv om partikkelsystemer kan opprettes programmatisk, er det mye lettere å gjøre det ved å bruke Xcode's innebygde editor. Alle egenskapene til et partikkelsystem kan modifiseres i denne redigeringen, og endringene du gjør blir umiddelbart visualisert. Dette er mye enklere enn å måtte kjøre spillet ditt etter hver forandring du gjør.

Vi kommer først til å skape eksplosjonseffekten. Opprett en ny fil i prosjektet ditt og velg iOS> Ressurs> SpriteKit Particle File mal.

Fra menyen som vises, velg Brann som Partikkelmal. Gi filen navnet Eksplosjon eller noe lignende.

Etter at Xcode har opprettet filen, ser du at det er to nye filer i prosjektet, Explosion.sks og spark.png.

Explosion.sks inneholder partikkelsystemet og det er filen vi skal jobbe med. Den andre filen, spark.png, er et enkelt bilde som brukes av Brann partikkelmal for å skape sin visuelle effekt. Hvis du åpner Explosion.sks, du kan se brannen animere.

De viktigste endringene vi trenger å gjøre med dette partikkelsystemet er å ha partikler som beveger seg utover fra emitteren i alle retninger og ikke kontinuerlig å gyte nye partikler.

For å gjøre den første endringen, åpne Attributtsinspektør og under partikler seksjonen, endre Angle Range til 360 °.

Rett bort, kan du se at partiklene nå beveger seg utover i en rund form.

For å stoppe partikkelsystemet fra kontinuerlig å lage nye partikler, kan vi spesifisere en Maksimum verdi. Denne verdien forteller partikkelsystemet hvor mange partikler totalt det skal skape. Standardverdien for 0 betyr at det ikke er noe maksimum, noe som fører til at nye partikler blir skapt kontinuerlig.

I tillegg til å spesifisere en maksimumsverdi, skal vi også endre noen andre egenskaper for å skape en bedre eksplosjonseffekt. I partikler delen av Attributtsinspektør, endre følgende verdier:

Vi setter fødselshyppighet til en verdi som er høyere enn Maksimum eiendom fordi det bestemmer hvor mange partikler som opprettes per sekund. Vi vil at eksplosjonen skal skje veldig raskt. Så i stedet for å ha 1000 partikler som gyter over et helt sekundss spann, som ville skje med a fødselshyppighet av 1000, spesifiserer vi a fødselshyppighet av 5.000. Dette betyr at alle partiklene er opprettet på bare 0,2 sekunder.

Ved innstilling Livstid> Start til 3 partiklene lever i 3 sekunder. De Livstidsintervall Egenskapen kan brukes til å legge til variasjon i partiklens levetid.

Til slutt setter vi Hastighet> Start til 200 slik at partiklene flyter ut veldig raskt fra emitteren som ville skje i en ekte eksplosjon.

Etter å ha gjort disse endringene, kan du se at partikkelsystemet ser ganske annerledes ut og mer som en riktig eksplosjon.

Vær oppmerksom på at selv om animasjonen slår periodisk i Xcode-editoren, animerer partikkelsystemet bare en gang når den legges til scenen din.

Med eksplosjonspartikkelsystemet fullført, er det på tide å gå videre til røykpartikkelsystemet. Opprett en ny fil, Røyk, bruker den samme malen vi brukte til eksplosjonen. Den eneste forskjellen er Partikkelmal, som vi satt på Røyk.

Den eneste forandringen vi trenger å gjøre med dette partikkelsystemet er å få røyken å bevege seg utover i en sirkel i stedet for bare rett opp. For å gjøre det, endre Vinkel> Område eiendom til 360 ° som vi gjorde for eksplosjonspartikkelsystemet. Etter dette skal røykpartikkelsystemet se slik ut:

Med begge partikkelsystemene klare, kan vi legge dem til vår scene. For å gjøre dette, laster vi inn alle filene vi opprettet som SKEmitterNode objekter og legg deretter til disse på scenen som en vanlig node. Åpen MainScene.swift og erstatte implementeringen av didBeginContact (_ :) med følgende:

Func didBeginContact (kontakt: SKPhysicsContact) hvis kontakt.bodyA.node == spiller || kontakt.bodyB.node == spiller hvis la eksplosjonPath = NSBundle.mainBundle (). pathForResource ("Eksplosjon", ofType: "sks"), la smokePath = NSBundle.mainBundle (). pathForResource ("Røyk", ofType: " sks "), la eksplosjon = NSKeyedUnarchiver.unarchiveObjectWithFile (explosionPath) som? SKEmitterNode, la røyk = NSKeyedUnarchiver.unarchiveObjectWithFile (smokePath) som? SKEmitterNode player.removeAllActions () kamera? .RemoveAllActions () player.hidden = true player.removeFromParent () explosion.position = player.position smoke.position = player.position addChild (røyk) addChild (eksplosjon)

Som i forrige implementering av didBeginContact (_ :), Vi utfører samme kontroll som før for å se om noen av knutepunktene som er involvert i kollisjonen er bilknutepunktet. Vi bruker deretter valgfri binding for å få stiene til både ressursfilene for eksplosjonen og røykepartikkelsystemet. Vi bruker disse banene for å instantiere SKEmitterNode gjenstander fra dem.

Deretter fjerner vi alle handlinger fra kamera- og spillernoder, og vi skjuler spillerkoden ved å fjerne den fra scenen. Vi fjerner bilen for å unngå flere kollisjoner som da fører til flere eksplosjoner.

Vi stiller også posisjonen til emitternoderne til bilens og legger dem til scenen. Som et resultat begynner SpriteKit umiddelbart å animere partikkelsystemene så snart de blir lagt til scenen.

Bygg og kjør spillet ditt. Du bør se eksplosjonspartikkelsystemet så snart bilen har et hinder. Dette etterfølges av røyk når brannen har ryddet.

2. Scenefiltre og effektnoder

I SpriteKit er det en spesiell type node (representert av SKEffectNode klasse) som kan bruke en Kjernebilde filter objekt (representert av CIFilter klasse) for å gjengi sine barnnoder med en rekke effekter. De SKScene klassen er også en underklasse av SKEffectNode, som betyr at du også kan bruke et filter på hele scenen.

Dessverre, når du skriver denne opplæringen, er det noen problemer knyttet til disse filtre og effektnoder i iOS 9. For øyeblikket er alle barna slått av, så snart en effekt er aktivert for en effektknute, noe som resulterer i effekten er ikke synlig.

Selv om vi ikke kan implementere dette i vårt spill og se hvordan det ser ut, kan vi fremdeles kjøre gjennom koden som vil bli brukt til å skape en effekt. I dette tilfellet er følgende metode et eksempel på å legge til og gradvis falme en uskarpt effekt på hele scenen.

funk addBlurFilter () la blurFilter = CIFilter (navn: "CIGaussianBlur") blurFilter? .setDefaults () blurFilter? .setValue (0.0, forKey: "inputRadius") filter = blurFilter shouldEnableEffects = ekte runAction (SKAction.customActionWithDuration (1.0, actionBlock : node: SKNode, forlengetTime: CGFloat) i la currentRadius = forlengetTime * 10.0 blurFilter? .setValue (currentRadius, forKey: "inputRadius")))

Vi lager en CIFilter objekt av en bestemt type. Hvis du vil se på noen av de andre innebygde filtre som er tilgjengelige for deg, kan du sjekke ut kjernefiltrets filterreferanse. Vi sikrer at dette filteret har alle standardinngangsverdiene og deretter manuelt sett inputRadius til 0.0, noe som betyr at det i utgangspunktet ikke er noe uskarphet.

Vi tilordner deretter filteret til filter Egenskapen til gjeldende scene og sett shouldEnableEffects til ekte for å aktivere det. Til slutt løper vi en skikk SKAction som gradvis øker filterets inngangsradius til 10.

Forhåpentligvis, i en fremtidig iOS-utgave, er problemene som påvirker effektnoder, løst, fordi de gir en måte å legge til noen svært unike og interessante effekter på SpriteKit-scenene dine..

3. Lysnoder

SpriteKit inkluderer også et utmerket belysningssystem som kan brukes til å gjøre scenene dine mer realistiske. Lysene er veldig enkle å implementere og er opprettet ved bruk av SKLightNode klasse. En lysnode definerer bestemte egenskaper, som lysets farge (inkludert omgivende farge) og dens styrke over avstand.

I vår scene skal vi lage et enkelt hvitt lys som skal festes til bilen. Dette lyset vil lyse opp hindringene foran bilen, og produsere skygger.

La oss begynne med å skape et lys i didMoveToView (_ :) metode for din MainScene klasse.

overstyr func didMoveToView (se: SKView) ... la lys = SKLightNode () light.lightColor = UIColor.whiteColor () light.falloff = 0.5 player.addChild (lys)

Med denne koden oppretter vi en ny SKLightNode objekt, endre dens lys farge eiendom til hvitt, og senk dens falle av eiendom fra standardverdien av 1 til 0.5.

Akkurat som når du oppretter fysikkkollisjonssporing i SpriteKit, må du angi hvilke lys som interagerer med hvilke noder i en scene gjennom bruk av bitmasker. Når SpriteKit gjør lysene i en scene, bruker den en logisk OG-operatør på lysknappen categoryBitMask og lightingBitMask og shadowCastBitMask av alle andre knuter for å avgjøre hvordan den aktuelle noden skal vises.

For vårt spill vil vi ha hindringer for å samhandle med lyset slik at de støter på skygger i scenen. For å gjøre det, legg til følgende to linjer på slutten av spawnObstacle (_ :) metode av MainScene klasse:

func spawnObstacle (timer: NSTimer) ... obstacle.lightingBitMask = 0xFFFFFFFF obstacle.shadowCastBitMask = 0xFFFFFFFF

Ved å sette litt maske med alle biter aktivert, påvirker hindringene med hvert lys i scenen.

Bygg og kjør appen din. Du vil se at når bilen beveger seg gjennom scenen, har hver hindring en dynamisk skygge, som alltid peker bort fra midten av bilen.

Som du ser, er lys i SpriteKit veldig enkle å bruke og kan legge til fine effekter på scenene dine.

4. Lydnoder

Til slutt skal vi se på lydnoder i SpriteKit. Lyd noder brukes til å legge til lydeffekter på en scene. Disse spesielle noder er representert av SKAudioNode klasse. Fordi SKAudioNode er en SKNode underklasse, du kan legge til og plassere dem hvor som helst i en scene, som en vanlig node.

I tillegg til å spille lyd på en vanlig måte og høres det samme uansett hvordan scenen din er arrangert (for eksempel bakgrunnsmusikk), kan SpriteKit du bruke posisjonslyd for å skape en virkelig nedsenkende effekt. Dette gjøres ved å spesifisere en lytteren node for din scene, som er hvor lyden blir hørt fra.

Lyd noder er standard som standard. Dette betyr at hvis du ikke vil bruke denne funksjonaliteten i bestemte tilfeller, kan du angi en bestemt node posisjons eiendom til falsk.

Selv om vi ikke vil implementere dette i vårt spill, er følgende et eksempel på hvordan du legger til en bakgrunnsmusikknode som slenger så lenge den er en del av scenen. I metoden legger vi også til en eksplosjonslydknude som begynner å spille når vi forteller det.

Legg merke til at vi importerer Foundation- rammeverk på toppen. Dette er nødvendig for å få tilgang til og arbeide med avAudioNode eiendom av en SKAudioNode gjenstand. Som du kan se, er lydnoder veldig enkle å sette opp og jobbe med i SpriteKit.

importere AVFoundation func addAudioNode () listener = spiller la backgroundMusic = SKAudioNode (filNamed: "backgroundMusic") backgroundMusic.positional = falsk la eksplosjon = SKAudioNode (filnavn: "eksplosjon") explosion.autoplayLooped = false addChild (backgroundMusic) addChild (eksplosjon) gjør prøv eksplosjon.avAudioNode? .engine? .start () // Kalt når du vil spille lyd fange // Gjør noe med feilen

Konklusjon

Du bør nå være komfortabel med å jobbe med noen av de mer avanserte effektene i SpriteKit, inkludert partikkelsystemer, filtre, lys og lyd. Disse effektene kombinert kan i stor grad påvirke utseendet på spillet ditt og hvor nedsenkende det er.

I den neste og siste opplæringen av denne serien dekker vi noen av de beste metodene for å huske på når du arbeider med SpriteKit. Jeg viser deg også hvordan du lager teksturatlaser og lagrer / laster scener.

Som alltid, vær sikker på å legge igjen dine kommentarer og tilbakemeldinger i kommentarene nedenfor.