SpriteKit From Scratch Visuella och Ljudeffekter

Introduktion

I den här handledningen, den fjärde delen av SpriteKit From Scratch-serien, tittar vi på de olika visuella och ljudfunktionerna SpriteKit ger dig möjlighet att lägga till lite mer detaljer och variation i dina spel. Detta inkluderar partikelsystem, filter, belysning och ljud.

För att följa med mig kan du antingen använda det projekt du skapade i den tidigare handledningen i den här serien eller ladda ner en ny kopia från GitHub.

Grafiken som används för spelet i denna serie finns på GraphicRiver. GraphicRiver är en bra källa för att hitta konstverk och grafik för dina spel.

1. Partikelsystem

I SpriteKit används termen partikelsystemavser en enda emitternod, representerad av SKEmitterNode klass. Det definierar systemets position i din scen och alla partiklar som skapas. Emitteren specificerar de olika beteenden hos partiklarna som det genererar.

Partikelsystem används bäst i SpriteKit-spel där du behöver skapa ett stort antal identiska eller liknande sprites, som inte behöver ha en viss plats eller utföra några åtgärder.

I denna handledning kommer vi att lägga till två partikelsystem när bilen träffar ett hinder:

  • en kort explosionseffekt som kort framträder
  • en rök effekt som förblir i scenen på obestämd tid

Medan partikelsystem kan skapas programmatiskt är det mycket lättare att göra det med hjälp av Xcodes inbyggda editor. Alla egenskaper hos ett partikelsystem kan modifieras i denna editor och de ändringar du gör är omedelbart visualiserade. Det här är mycket lättare än att behöva springa ditt spel efter varje förändring du gör.

Vi kommer först att skapa explosionseffekten. Skapa en ny fil i ditt projekt och välj iOS> Resurs> SpriteKit partikelfil mall.

Från menyn som visas väljer du Brand som den Partikelmall. Namnge filen Explosion eller något liknande.

När Xcode har skapat filen ser du att det finns två nya filer i ditt projekt, Explosion.sks och spark.png.

Explosion.sks innehåller partikelsystemet och det är filen vi ska arbeta med. Den andra filen, spark.png, är en enkel bild som används av Brand partikelmall för att skapa sin visuella effekt. Om du öppnar Explosion.sks, du kan se eldanimera.

De viktigaste förändringarna vi behöver göra för detta partikelsystem är att partiklar rör sig utåt från emitteren i alla riktningar och att inte kontinuerligt spy nya partiklar.

För att göra den första ändringen, öppna Attribut Inspector och, under partiklar avsnitt, ändra Vinkelområde till 360 °.

Strax bort kan du se att partiklarna nu rör sig utåt i cirkulär form.

För att sluta partikelsystemet från att kontinuerligt skapa nya partiklar kan vi ange a Maximal värde. Detta värde berättar partikelsystemet hur många partiklar totalt det ska skapa. Standardvärdet för 0 innebär att det inte finns något maximalt vilket medför att nya partiklar skapas kontinuerligt.

Förutom att ange ett maximalt värde kommer vi också att ändra några andra egenskaper för att skapa en bättre explosionseffekt. I partiklar del av Attribut Inspector, ändra följande värden:

Vi sätter Födelseantal till ett värde som är högre än Maximal egendom eftersom det bestämmer hur många partiklar som skapas per sekund. Vi vill att explosionen ska ske väldigt snabbt. Så hellre än att ha 1000 partiklar som gyter över en helt sekund, vilket skulle hända med a Födelseantal av 1000 anger vi a Födelseantal av 5000. Det betyder att alla partiklar skapas på bara 0,2 sekunder.

Genom att sätta Livstid> Starta till 3 partiklarna lever i 3 sekunder. De Lifetime Range egendom kan användas för att lägga till variation i partiklarnas livstid.

Slutligen sätter vi in Hastighet> Starta till 200 så att partiklarna flyter mycket snabbt från emitteren som skulle hända i en verklig explosion.

Efter att ha gjort dessa förändringar kan du se att partikelsystemet ser ganska annorlunda ut och som en riktig explosion.

Observera att även om animeringen slingrar regelbundet i Xcode-editoren, animerar partikelsystemet bara en gång när den läggs till din scen.

När explosionspartikelsystemet är färdigt är det dags att gå vidare till rökpartikelsystemet. Skapa en ny fil, Rök, använder samma mall som vi använde för explosionen. Den enda skillnaden är Partikelmall, som vi satt på Rök.

Den enda förändringen som vi behöver göra för detta partikelsystem är att röken rör sig utåt i en cirkel snarare än bara rakt upp. För att göra det, ändra Vinkel> Räckvidd egendom till 360 ° som vi gjorde för explosionspartikelsystemet. Efter det ska rökpartikelsystemet se ut så här:

Med båda partikelsystemen redo kan vi lägga till dem på vår scen. För att göra detta laddar vi alla filer som vi skapade som SKEmitterNode objekt och lägg sedan till dem på scenen som en vanlig nod. Öppna MainScene.swift och ersätta genomförandet av didBeginContact (_ :) med följande:

func didBeginContact (kontakt: SKPhysicsContact) om contact.bodyA.node == player || contact.bodyB.node == spelare if let explosionPath = NSBundle.mainBundle (). pathForResource ("Explosion", ofType: "sks"), låt smokePath = NSBundle.mainBundle (). pathForResource ("Smoke", ofType: " sks "), låt explosion = NSKeyedUnarchiver.unarchiveObjectWithFile (explosionPath) som? SKEmitterNode, låt rök = NSKeyedUnarchiver.unarchiveObjectWithFile (smokePath) som? SKEmitterNode player.removeAllActions () kamera. .RemoveAllActions () player.hidden = sant player.removeFromParent () explosion.position = player.position smoke.position = player.position addChild (smoke) addChild (explosion)

Som i det tidigare genomförandet av didBeginContact (_ :), Vi utför samma kontroll som tidigare för att se om någon av knutpunkterna som är inblandade i kollisionen är bilnoden. Vi använder sedan valfri bindning för att få vägarna till både explosions- och rökpartikelsystemets resursfiler. Vi använder dessa vägar för att inställa SKEmitterNode föremål från dem.

Därefter tar vi bort alla åtgärder från kamerans och spelarens noder, och vi gömmer spelarnoden genom att ta bort den från scenen. Vi tar bort bilen för att undvika fler kollisioner, vilket leder till mer explosioner.

Vi ställer också positionen för emitternoden till bilen och lägger dem till scenen. Som ett resultat börjar SpriteKit omedelbart att animera partikelsystemen så fort de läggs till scenen.

Bygg och kör ditt spel. Du bör se explosionspartikelsystemet så snart bilen träffar ett hinder. Detta följs av rök när elden har rensat.

2. Scenfilter och Effektnoder

I SpriteKit finns en särskild typ av nod (representerad av SKEffectNode klass) som kan använda a Core Image filterobjekt (representerat av CIFilter klass) för att göra sina barnnoder med en mängd olika effekter. De SKScene klassen är också en underklass av SKEffectNode, vilket innebär att du också kan tillämpa ett filter på hela scenen.

Tyvärr, när du skrivit den här handledningen finns det några problem som rör dessa filter och effekttoder i IOS 9. För tillfället, så snart en effekt är aktiverad för en effektnod, är alla sina barn dolda, vilket resulterar i effekten är inte synlig.

Även om vi inte kan implementera detta i vårt spel och se hur det ser ut, kan vi fortfarande köra igenom koden som skulle användas för att skapa en effekt. I det här fallet är följande metod ett exempel på att lägga till och gradvis blekna en suddig effekt på hela scenen.

func addBlurFilter () let blurFilter = CIFilter (namn: "CIGaussianBlur") blurFilter? .setDefaults () blurFilter? .setValue (0.0, förKey: "inputRadius") filter = blurFilter shouldEnableEffects = true runAction (SKAction.customActionWithDuration (1.0, actionBlock : (nod: SKNode, förflutitTime: CGFloat) i låt currentRadius = elapsedTime * 10.0 blurFilter? .setValue (currentRadius, forKey: "inputRadius")))

Vi skapar en CIFilter föremål för en viss typ. Om du vill titta på några av de andra inbyggda filtren som är tillgängliga för dig, kolla in Core Image Filter Reference. Vi ser till att detta filter har alla standardinmatningsvärden och sedan manuellt inställt inputRadius till 0,0, vilket innebär att det i början inte finns någon suddighet.

Vi tilldelar sedan filtret till filtrera egenskapen för den aktuella scenen och uppsättningen shouldEnableEffects till Sann för att aktivera det. Slutligen kör vi en anpassning SKAction som gradvis ökar filterets ingångsradie till 10.

Förhoppningsvis, i en framtida IOS-version, är problemen som påverkar effektnoder fixade, eftersom de ger ett sätt att lägga till några mycket unika och intressanta effekter på dina SpriteKit-scener.

3. Ljusnoder

SpriteKit innehåller även ett utmärkt belysningssystem som kan användas för att göra dina scener mer realistiska. Ljus är mycket lätta att genomföra och skapas genom användningen av SKLightNode klass. En ljusnod definierar vissa egenskaper, såsom ljusets färg (inklusive omgivande färg) och dess styrka över avståndet.

I vår scen ska vi skapa ett enda vitt ljus som kommer att fästas i bilen. Detta ljus kommer att tända hindren framför bilen samt producera skuggor.

Låt oss börja med att skapa ett ljus i didMoveToView (_ :) Metod för din MainScene klass.

åsidosätta func didMoveToView (visa: SKView) ... släpp ljus = SKLightNode () light.lightColor = UIColor.whiteColor () light.falloff = 0.5 player.addChild (light)

Med den här koden skapar vi en ny SKLightNode objekt, ändra dess ljus färg egendom till vitt och sänka dess falla av egenskap från standardvärdet av 1 till 0,5.

Precis som när man konfigurerar fysikalskollisionsdetektering i SpriteKit måste man ange vilka ljus som interagerar med vilka noder i en scen genom användning av bitmasker. När SpriteKit gör ljusen i en scen, använder den en logisk OCH-operatör på ljusnodet categoryBitMask och den lightingBitMask och shadowCastBitMask av varje annan nod för att bestämma hur den specifika noden ska visas.

För vårt spel vill vi ha hindren att interagera med ljuset så att de kastar skuggor i scenen. För att göra så lägger du till följande två rader i slutet av spawnObstacle (_ :) metod för MainScene klass:

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

Genom att ställa in en liten mask med alla bitar aktiverade, samverkar hindren med varje ljus i scenen.

Bygg och kör din app. Du kommer att se det, när din bil går igenom scenen, har varje hinder en dynamisk skugga som alltid pekar bort från bilens mittpunkt.

Som du kan se är lampor i SpriteKit mycket enkla att använda och kan lägga till fina effekter på dina scener.

4. ljudnoder

Slutligen ska vi titta på ljudnoder i SpriteKit. Ljudnoder används för att lägga till ljudeffekter på en scen. Dessa speciella noder representeras av SKAudioNode klass. Därför att SKAudioNode är en SKNode underklass, kan du lägga till och placera dem var som helst i en scen, som en vanlig nod.

Förutom att spela ljud på ett ordentligt sätt och låta detsamma oavsett hur din scen är ordnad (till exempel bakgrundsmusik), kan SpriteKit du använda positionsljud för att skapa en verkligt nedsänkt effekt. Detta görs genom att ange a lyssnare nod för din scen, där ljudet kommer att höras från.

Ljudnoder är standard som standard. Det innebär att om du inte vill använda den här funktionen i vissa fall kan du ställa in en specifik nod positions egendom till falsk.

Medan vi inte kommer att implementera detta i vårt spel är följande ett exempel på att lägga till en bakgrundsmusiknod som löser så länge den är en del av scenen. I metoden lägger vi också till en explosionsljudnod som börjar spela när vi säger det till.

Observera att vi importerar AVFoundation ram på toppen. Detta är nödvändigt för att komma åt och arbeta med avAudioNode egendom av en SKAudioNode objekt. Som du kan se är ljudnoder väldigt enkelt att installera och arbeta med i SpriteKit.

importera AVFoundation func addAudioNode () listener = spelare låter backgroundMusic = SKAudioNode (fileNamed: "backgroundMusic") backgroundMusic.positional = false let explosion = SKAudioNode (fileNamed: "explosion") explosion.autoplayLooped = false addChild (backgroundMusic) addChild (explosion) gör prova explosion.avAudioNode? .engine? .start () // Kallas när du vill spela ljud fånga // Gör något med felet

Slutsats

Du borde nu vara bekväm att arbeta med några av de mer avancerade effekterna i SpriteKit, inklusive partikelsystem, filter, ljus och ljud. Dessa kombinerade effekter kan kraftigt påverka ditt spel och hur nedsänkt det är.

I nästa och sista handledning av denna serie täcker vi några av de bästa metoderna för att komma ihåg när du arbetar med SpriteKit. Jag visar dig också hur man skapar texturatlaser och spara / ladda scener.

Som alltid, var noga med att lämna dina kommentarer och feedback i kommentarerna nedan.