SpriteKit From Scratch Fundamentals

Introduktion

SpriteKit, tillgängligt på iOS, tvOS och OS X, är ett ramverk som tillåter utvecklare att skapa högkvalitativa 2D-spel utan att oroa sig för komplexiteten i grafik-API: er, som OpenGL och Metal. Förutom att hantera all grafik för utvecklare erbjuder SpriteKit också ett brett utbud av extrafunktioner, inklusive fysik simulering, ljud / video uppspelning och sparar / laddar spel.

I hela denna serie lär du dig allt om SpriteKit och får färdigheter, som du sedan kan ansöka om någon form av 2D-spel som byggs med denna utmärkta ram. I denna serie skapar vi ett helt funktionellt spel där spelaren kontrollerar en bil som måste undvika hinder som korsar sin väg.

förutsättningar

Denna serie kräver att du kör Xcode 7.3 eller senare, vilket inkluderar stöd för Swift 2.2 samt SDK för iOS 9.3, tvOS 9.2 och OS X 10.11.5. Du måste också ladda ner startprojektet från GitHub, som innehåller de visuella tillgångarna som ska användas i spelet och några rader av kod för att hjälpa oss att komma igång.

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. Scener, nodar och synpunkter

scener

Den första klassen du måste vara medveten om när du arbetar med SpriteKit är SKScene klass. För varje 2D-spel som är byggt med SpriteKit delas spelets innehåll upp i flera scener, var och en med sina egna SKScene underklass.

Medan vi kommer att titta på funktionaliteten och inre arbeten hos SKScene klass senare i denna serie, vad du behöver veta för nu är att en scen är vad du lägger till spelets innehåll till och det fungerar som root node. Detta leder oss till noder.

Nodes (Sprites)

De SKNode klass, vilken SKScene är en underklass av, används för att representera någon typ av objekt inom din scen. Medan det finns många olika typer av noder tillgängliga i SpriteKit, vanligen kallad sprites, delar de samma nyckelegenskaper med de viktigaste:

  • placera (CGPoint)
  • xScale (CGFloat): representerar den horisontella skalan på en nod
  • yScale (CGFloat): Liknande xScale men det verkar i vertikal riktning istället
  • alfa (CGFloat): representerar nodens insyn
  • dold (Bool): Värde som bestämmer huruvida noden ska vara synlig eller inte
  • zRotation (CGFloat): representerar vinkeln, i radianer, att noden ska roteras
  • zPosition (CGFloat): Används för att bestämma vilka noder som ska visas ovanpå andra noder i scenen

Som du kan se, tillåter ovanstående egenskaper dig att positionera, rotera och redigera det grundläggande utseendet på varje nod i en scen.

Precis som du kan lägga till undervisningar till någon UIView objekt i UIKit, i SpriteKit kan du lägga till ett antal barn noder till en befintlig nod. Detta görs med hjälp av addChild (_ :) metod på vilken som helst SKNode objekt.

Liknar också UIView objekt, position och skala egenskaper för någon barn nod är i förhållande till moderkoden som den läggs till. Så här är en SKScene objekt, vara en underklass av SKNode, kan fungera som din nods rotknutpunkt. För eventuella noder som du vill ha i din scen måste du lägga till dem som barn för själva scenen med hjälp av addChild (_ :) metod.

De SKNode klassen i sig är inte kapabel att producera visuellt innehåll. För att göra det måste du använda en av de många underklasser som finns i SpriteKit. Några viktiga SKNode underklasser för att vara medveten om är:

  • SKSpriteNode: tar en bild och skapar en texturerad sprite i din scen
  • SKCameraNode: kontrollerar var din scen ses från
  • SKLabelNode: gör en textsträng
  • SKEmitterNode: används i samband med ett partikelsystem för att göra partikel effekter
  • SKLightNode: skapar belysning och skuggningseffekter i din scen

Under denna serie använder vi dessa nodertyper samt några av de andra mindre vanliga.

Visningar

Om du vill visa ditt SpriteKit-innehåll inom ett fungerande program måste du använda SKView klass. Detta är en underklass av UIView (eller NSView på OS X), som enkelt kan läggas till någon del av din ansökan. För att presentera en SpriteKit-scen måste du ringa antingen presentScene (_ :) eller presentScene (_: övergång :) metod på en SKView exempel. Den andra metoden används när du vill ha en anpassad animering eller övergång till din nya scen.

Förutom att bara göra ditt SpriteKit-innehåll, så SKView klassen erbjuder också lite extra och mycket användbar funktionalitet. Detta inkluderar a Bool egendom som heter pausas, som lätt kan användas för att pausa eller återuppta en scen.

Det finns också flera egenskaper som är användbara när du felsöker ditt spel och kan visa information, som den aktuella FPS (bilder per sekund), nodtal och fysikfält inom din scen. Om du vill titta på alla tillgängliga egenskaper, kolla in SKView klass referens.

2. Scenredigerare

Nu när vi har tittat på de grundläggande klasserna som används i SpriteKit-spel, är det dags att skapa vår allra första scen. Medan scener kan skapas helt programmatiskt, ger Xcode ett utmärkt scenredigeringsverktyg, vilket gör att du enkelt kan dra och släppa noder i din scen medan du redigerar sin position, utseende och andra egenskaper.

Öppna startprojektet och skapa en ny fil genom att trycka på Kommando + N eller välja Ny> Fil ...  från Xcode s Fil meny. Välj den iOS> Resurs> SpriteKit Scene filtyp och klicka Nästa.

Namnge filen MainScene och spara det. Nu ska du se din nya scenfil i Project Navigator.

Välj MainScene.sks för att öppna Xcodes scenredigerare. För tillfället är din scen tom och har en grå bakgrund. Det finns inga knutpunkter i det än. Innan du lägger till några sprites till din scen måste vi först ändra storleken.

Attribut Inspector till höger, ändra din scens storlek för att ha en bredd (W) med 320 poäng och en höjd (H) av 480 poäng.

Denna scenstorlek motsvarar den minsta skärmstorlek som vi riktar in (3,5 tums skärm på iPhone 4s) så att vi kan förstora våra noder korrekt. Vi ändrar scenstorleken för att vara anpassad till den aktuella skärmens storlek i en senare handledning.

För att lägga till noder till din scen öppnar du Objektbibliotek till höger. Du kan behöva klicka på ikonen markerad med blå om Objektbibliotek är inte synlig.

Från Objektbibliotek, dra a Color Sprite till mitten av din scen.

Öppna Attribut Inspector till höger och ändra TexturPlacera, och Storlek attribut till följande värden:

Din scen borde nu ha en bil i mitten som visas nedan.

Observera att, till skillnad från UIKit-koordinatsystemet, i SpriteKit, placera av en nod avser alltid sitt centrum från scenens botten-vänstra hörnens ursprungspunkt (0, 0). Därför ställer du bilens position till (160, 120) placerar bilens mitt 160 poäng i vänster och 120 poäng uppifrån.

3. Visa en scen

Med din scen färdig för nu, öppna ViewController.swift och lägg till ett importdeklaration för SpriteKit-ramen längst upp. Detta tillåter oss att använda SpriteKit klasserna och API: erna i ViewController.swift.

importera UIKit import SpriteKit

Därefter uppdatera implementeringen av viewDidLoad () metod för ViewController klass enligt följande:

åsidosätta func viewDidLoad () super.viewDidLoad () låt skView = SKView (ram: self.view.frame) låt scen = SKScene (filnamn: "MainScene") skView.presentScene (scene) view.addSubview (skView)

Med denna kod skapar vi först en SKView exemplet, som är lika stor som visningskontrollerns vy. Därefter laddar vi vår scen från filen vi skapade genom att använda SKScene (fileNamed :) initierare. Vi gör SKView Exempel presentera den här scenen och lägg sedan till den som en undervy till huvudvisningen.

Välj iPhone 4s simulator (så att vår scen är korrekt storlek för skärmen) och bygga och springa din applikation. Du bör se en skärm som liknar följande:

Slutsats

I denna första handledning av SpriteKit From Scratch lärde du dig grunderna i synpunkter, scener och noder i SpriteKit. Du skapade en grundläggande scen med en sprite med hjälp av scenredigeraren som är inbyggd i Xcode, vilket gör att skapa scener mycket enklare jämfört med att göra allt programmerat.

I nästa handledning lägger vi till mer funktionalitet i vårt spel genom att använda SpriteKit-åtgärder för att flytta bilen runt i scenen. Du kommer också att introduceras i fysik simuleringen i SpriteKit genom att upptäcka när bilen kolliderar med en annan nod.

Lämna alltid dina kommentarer och feedback i kommentarfältet nedan, som alltid.