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.
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.
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.
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 nodyScale
(CGFloat
): Liknande xScale
men det verkar i vertikal riktning iställetalfa
(CGFloat
): representerar nodens insyndold
(Bool
): Värde som bestämmer huruvida noden ska vara synlig eller intezRotation
(CGFloat
): representerar vinkeln, i radianer, att noden ska roteraszPosition
(CGFloat
): Används för att bestämma vilka noder som ska visas ovanpå andra noder i scenenSom 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 scenSKCameraNode
: kontrollerar var din scen ses frånSKLabelNode
: gör en textsträngSKEmitterNode
: används i samband med ett partikelsystem för att göra partikel effekterSKLightNode
: skapar belysning och skuggningseffekter i din scenUnder denna serie använder vi dessa nodertyper samt några av de andra mindre vanliga.
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.
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.
I 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 Textur, Placera, 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.
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:
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.