Dutch (Nederlands) translation by Adjatay Bashroh Aldad (you can also view the original English article)
SpriteKit is de 2D-game—engine van Apple: een rendering engine bovenop OpenGL. Het werd geïntroduceerd met iOS 7 en elke volgende release heeft geweldige toevoegingen aan het framework opgeleverd. Met het gebruik van getextureerde sprites, een ingebouwde physics-engine en de zeer krachtige SKAction
klasse kun je heel snel functionele 2D-games bouwen.
SpriteKit heeft ingebouwde editors voor scènes en deeltjes, een cameraknooppunt sinds de release van iOS9, en ingebouwde ondersteuning voor tilesets sinds de release van iOS 10. Met deze nieuwe toevoegingen wordt SpriteKit snel een krachtpatser voor het maken van 2D-games.
Volg deze tutorial, om de bijbehorende GitHub-repo te downloaden. Het heeft een map met de naam ExampleProject Starter. Open het project in die map in Xcode en u bent klaar om te gaan!
Knoop
Knopen zijn de fundamentele bouwstenen van SpriteKit en SKNode
is de basisklasse van alle knooppunten. Al uw activa op het scherm zijn een SKNode
of een subklasse daarvan. SKNodes
alleen leveren echter geen visuele inhoud. Alle visuele inhoud wordt getekend met behulp van een van een aantal vooraf gedefinieerde SKNode
subklassen. SKNodes
en zijn subklassen delen verschillende eigenschappen die u kunt wijzigen. Enkele van de belangrijkste zijn als volgt.
-
standpunt
(CGPoint
): de positie van het knooppunt binnen het coördinatensysteem van de bovenliggende -
xScale
(CGFloat
): past de breedte van een knooppunt door een multiplier -
yScale
(CGFloat
): schaalt de hoogte van een knooppunt door een vermenigvuldiger -
alpha
(CGFloat
): de transparantie van het knooppunt -
zRotation
(CGFloat
): de Euler-rotatie rond de z-as (in radialen)
Een van de belangrijkste SKNodes
is de SKScene
. Dit is het hoofdknooppunt waaraan alle andere knooppunten worden toegevoegd. Door zelf SKScene
voorziet niet in een visuele elementen, maar het toont de knooppunten die zijn toegevoegd aan het.
Scène Knooppunten
SKScenes
zijn de hoofdknooppunten waaraan alle andere knooppunten worden toegevoegd. De scène wordt geanimeerd en rendert de inhoud van de onderliggende knooppunten. Als u wilt weergeven een scène, voegt u het aan een SKView
(die is een subklasse van UIView
en heeft dus veel van dezelfde eigenschappen als UIView
).
In het SpriteKit-startproject wordt de beginscène weergegeven wanneer het project wordt geladen. Voorlopig is dit slechts een leeg zwart scherm. Het wordt getoond wanneer de GameViewController
presentScene (_ :)
aanroept op het view-exemplaar en de scène doorgeeft als een parameter:
override func viewDidLoad() { super.viewDidLoad() let scene = GameScene(size:CGSize(width: 768, height: 1024)) let skView = self.view as! SKView skView.showsFPS = false skView.showsNodeCount = false skView.ignoresSiblingOrder = false scene.scaleMode = .aspectFill skView.presentScene(scene) // Present the Scene }
Maak je voorlopig geen zorgen over de andere opties; Ik zal ze later in deze serie uitleggen.
Een Scène Maken
Veel spellen hebben meer dan één scherm of scène, dus we zullen vanaf het begin een nieuwe scène maken en deze vervolgens laten zien vanuit onze eerste scène.
Selecteer Bestand> Nieuw> Bestand uit Xcode's menu en kies Cocoa Touch Class.

Zorg ervoor dat Klasse is ingesteld op NewScene en dat Subklasse van is ingesteld op SKScene
. Druk op Volgende en vervolgens op Maken om te controleren of het hoofddoel is geselecteerd. Hieronder staat de code voor de NewScene.swift.
import UIKit import SpriteKit class NewScene: SKScene { }
Nu hebben we twee scènes in ons project en geen van beide heeft visuele inhoud. Laten we een SKLabelNode
toevoegen (zoals alle knooppunten, dit is een subklasse van SKNode
). Het enige doel van de SKLabelNode
is om een tekstlabel weer te geven.
Labelknooppunten
Labelknooppunten, geïmplementeerd in de klasse SKLabelNode
, worden gebruikt om tekst in uw game weer te geven. U kunt desgewenst aangepaste lettertypen gebruiken, maar voor onze doeleinden houden we ons gewoon aan de standaard, die witte tekst weergeeft en is ingesteld op Helvetica Neue Ultra Light, 32 punt.
Voeg het volgende toe aan de methode didMove (to :)
binnen GameScene.swift. Deze methode wordt meteen aangeroepen nadat een scène door een weergave wordt gepresenteerd. Over het algemeen stelt u hier de activa van uw spel in en voegt u deze toe aan de scène.
override func didMove(to view: SKView) { let startGameLabel = SKLabelNode(text: "Start Game") }
Hier maken we een SKLabelNode
met gebruik van de convenience initializer init (text :)
, die als een parameter een tekenreeks neemt.
Knopen toevoegen en verwijderen
Als u knooppunten initialiseert, worden deze niet in de scène weergegeven. Om de knooppunten weer te geven, moet u de methode addChild (_ :)
op het ontvangende knooppunt aanroepen, waarbij u de SKNode
doorgeeft die u als parameter wilt toevoegen.
Voeg het volgende toe in de methode didMove (to :)
.
override func didMove(to view: SKView) { let startGameLabel = SKLabelNode(text: "Start Game") addChild(startGameLabel) }
De methode addChild (_ :)
is niet exclusief voor SKScene
s, maar is een methode van SKNode
. Hiermee kunt u een complexe hiërarchie van knooppunten maken, ook wel bekend als de 'knoopboom'. Stel dat je een spelkarakter hebt en je zijn armen en benen apart wilt verplaatsen. U kunt een SKNode
instantie maken en vervolgens elk afzonderlijk onderdeel toevoegen als een onderliggende waarde van die SKNode
(het bevattende knooppunt staat bekend als het bovenliggende knooppunt). Dit zou je het voordeel geven dat je het personage als een geheel kunt verplaatsen door de bovenliggende SKNode
te verplaatsen, maar je ook toestaat elk individueel onderdeel afzonderlijk te verplaatsen.
Een andere belangrijke methode voor het toevoegen van knooppunten is de methode insertChild (_: at :)
die een kind invoegt in een specifieke positie binnen de lijst met kinderen van de ontvanger-node. Wanneer u een kind toevoegt aan een knooppunt, houdt het knooppunt een geordende lijst met kinderen bij, waarnaar wordt verwezen door de eigenschap children
van het knooppunt te lezen. Het is belangrijk om bij het toevoegen van meerdere knooppunten aan een bovenliggend knooppunt hier rekening mee te houden, omdat de volgorde waarin u de knooppunten toevoegt, van invloed is op enkele aspecten van scèneverwerking, waaronder treffer testen en renderen.
Om te verwijderen van een knooppunt, aanroepen u van de methode van de removeFromParent()
op het knooppunt dat u wilt verwijderen.
Nu we het toevoegen en verwijderen van knooppunten hebben behandeld, kunnen we onze focus verleggen naar het voorbeeldproject. Als je je dit herinnert, hadden we zojuist een SKLabelNode
aan de GameScene
toegevoegd. Als u nu test, ziet u slechts de helft van de tekst linksonder op het scherm.

Waarom is maar de helft van de tekst te zien? Het zou een goed moment zijn om te praten over het coördinaten- en positioneringssysteem van SpriteKit.
Positionering en Coördineert
Standaard SpriteKit van coördinatensysteem plaatsen (0,0) bij de bodem verlaten van het scherm. Ook standaard SpriteKit knooppunten worden geplaatst, zodat ze zijn gepositioneerd op (0,0). Nog steeds, hoewel... waarom alleen zien we de helft van de tekst? Dit komt omdat standaard het tekstlabel horizontaal gecentreerd is op de oorsprong van het labelknooppunt (0,0). Hieronder ziet u een afbeelding die laat zien hoe het coördinatensysteem van een knooppunt werkt.

De oorsprong van het knooppunt ligt op (0,0) en een positieve x-coördinaat beweegt naar rechts en een positieve y-coördinaat gaat het scherm op. Vergeet niet dat een SKScene een knooppunt is en daarom is de oorsprong ervan ook (0,0).
De Positie van Een Knooppunt Instellen
Nu we hebben geleerd dat het coördinatensysteem van SpriteKit werkt en hoe het knooppunten plaatst, kunnen we de SKLabelNode
naar een andere positie verplaatsen, zodat we alle tekst kunnen zien. Voeg het volgende toe aan de methode didMove (to :)
binnen GameScene.swift.
override func didMove(to view: SKView) { let startGameLabel = SKLabelNode(text: "Start Game") startGameLabel.position = CGPoint(x: size.width/2, y: size.height/2) addChild(startGameLabel) }
Hier plaatsen we het label in het midden van de scène. De eigenschap position
is van het type CGPoint
, dat x- en y-waarden heeft die een enkel punt binnen de scène vertegenwoordigen.
Als u nu test, ziet u dat het label in het midden van de scène is geplaatst.

Schakelen Tussen Scènes
Zoals het er nu uitziet, is NewScene
slechts een lege scène. Laten we er ook een label aan toevoegen en dan kunnen we leren schakelen tussen scènes. Dit is een uitdaging: probeer voordat u verder leest een label toe te voegen aan NewScene
met de tekst "Ga terug". Mijn oplossing is hieronder.
Het eerste wat we moeten doen is de didMove (to :)
methode toevoegen. Voeg het volgende toe aan NewScene.swift.
class NewScene: SKScene { override func didMove(to view: SKView) { } }
Vervolgens moeten we het label toevoegen. Voeg de volgende binnen de didMove(to:)
methode die u hierboven hebt toegevoegd.
override func didMove(to view: SKView) { let goBackLabel = SKLabelNode(text: "Go Back") goBackLabel.position = CGPoint(x: size.width/2, y: size.height/2) addChild(goBackLabel) }
Dit voegt een label toe aan NewScene
met de tekst "Go Back". Vervolgens implementeren we de functionaliteit die dit label suggereert: we reageren op aanraakgebeurtenissen door van scène te wisselen.
Reageren op Touch
Bijna alle mobiele games zal worden wisselwerking met touch gebruikt. In deze stap leert u hoe te reageren op gebeurtenissen binnen uw spel te raken.
Als u handlers voor aanraakgebeurtenissen in uw game wilt registreren, moet u de touchesBegan-methode (_: with :)
van de view implementeren. Voeg het volgende toe aan GameScene.swift:
override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) { print("YOU TOUCHED") }
Als u dit nu wilt testen,u ziet YOU TOUCHED afgedrukt op de console wanneer u op het scherm tikt. Wat we echter meestal nodig hebben, is te kunnen vertellen wanneer een specifiek knooppunt is aangeraakt. Om dit te doen, hebben we een manier nodig om de knooppunten te vinden en te identificeren. We zullen leren hoe dit te bereiken, en dan terugkomen en de touchesBegan (_: met :)
methode afmaken.
Zoeken In de Knoopboom
Om een knooppunt te kunnen identificeren, gebruikt u de eigenschap name
van het knooppunt en zoekt u in de knooppuntenstructuur naar een knooppunt met die naam. De eigenschap name
van het knooppunt neemt een alfanumerieke tekenreeks zonder interpunctie.
Er zijn een aantal methoden om naar een knooppunt te zoeken op basis van de eigenschap name
. Als u al een verwijzing naar het knooppunt hebt, kunt u de eigenschap name
ervan direct controleren. Dit is wat we zullen doen in de methode touchesBegan (_: with :)
. Het is echter belangrijk om te weten hoe de knooppuntenstructuur voor een bepaald knooppunt op naam moet worden doorzocht, of om te zoeken naar een groep knooppunten met dezelfde naam.
De methode childNode (withName :)
zoekt de onderliggende elementen van een knooppunt op voor de specifieke naam die als parameter is doorgegeven.
De enumerateChildNodes (withName: using :)
methode doorzoekt de kinderen van een knooppunt en roept het blok eenmaal aan voor elk overeenkomend knooppunt dat het vindt. U gebruikt deze methode wanneer u alle knooppunten met dezelfde naam wilt vinden.
De methode subscript (_ :)
retourneert een array met knooppunten die overeenkomen met de parameter name.
U kunt ook naar knooppunten zoeken met behulp van een geavanceerde zoeksyntaxis waarmee u de hele scèneboomstructuur kunt doorzoeken of bijvoorbeeld een patroon kunt zoeken in plaats van een exacte naam. Deze geavanceerde zoekfunctie valt buiten het bestek van deze zelfstudie. Als u echter meer wilt weten, kunt u lezen in de SKNode
programmeerreferentie.
Nu we weten hoe we moeten zoeken naar knooppunten in de knooppuntenboom, laten we onze labels een naam geven.
Voeg het volgende toe binnen de didMove(to :)
methode binnen GameScene.swift.
override func didMove(to view: SKView) { let startGameLabel = SKLabelNode(text: "Start Game") startGameLabel.name = "startgame" startGameLabel.position = CGPoint(x: size.width/2, y: size.height/2) addChild(startGameLabel) }
Hier stellen we de naam property van startGameLabel
in om te beginnen met spelen
.
We moeten ook de naam van het label instellen binnen NewScene
. Voeg het volgende toe met de methode didMove (to :)
binnen NewScene.swift.
override func didMove(to view: SKView) { let goBackLabel = SKLabelNode(text: "Go Back") goBackLabel.name = "goback" goBackLabel.position = CGPoint(x: size.width/2, y: size.height/2) addChild(goBackLabel) }
We hebben de eigenschap name
ingesteld op slordig
.
Detecteren Welk Knooppunt Wordt Aangeraakt
Voeg het volgende toe binnen de touchesBegan (_: with :)
methode binnen GameScene.swift.
override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) { guard let touch = touches.first else { return } let touchLocation = touch.location(in: self) let touchedNode = self.atPoint(touchLocation) if(touchedNode.name == "startgame"){ let newScene = NewScene(size: size) newScene.scaleMode = scaleMode let doorsClose = SKTransition.doorsCloseVertical(withDuration: 2.0) view?.presentScene(newScene, transition: doorsClose) } }
De eigenschap multiTouchEnabled
van de weergave van de scène is standaard ingesteld op onwaar
, wat betekent dat de weergave alleen de eerste aanraking van een multitouch-reeks ontvangt. Als deze eigenschap is uitgeschakeld, kunt u het aanraken ophalen door de eerste
berekende eigenschap van de aanrakingen te gebruiken, omdat er maar één object in de set aanwezig is.
We kunnen de touchLocation
binnen de scène verkrijgen via de locatie
eigenschap van de aanrakingen. We kunnen dan uitzoeken welk knooppunt is aangeraakt door atPoint (_ :)
in te roepen en de touchLocation
door te geven.
We controleren of de eigenschap touched
naam gelijk is aan "startgame"
en als dat zo is, weten we dat de gebruiker het label heeft aangeraakt. We maken vervolgens een instantie van NewScene
en stellen de eigenschap scalemode
in op dezelfde waarde als de huidige scène— dit zorgt ervoor dat de scène op verschillende apparaten hetzelfde werkt. Ten slotte creëren we een SKTransition
en roepen we de presentScene (_: transition :)
methode op, die de scène samen met de overgang zal presenteren.
De SKTransition
klasse heeft veel klassenmethoden die u kunt gebruiken om verschillende overgangen tussen scènes weer te geven in plaats van de scène meteen weer te geven. Dit zorgt voor een beetje 'eye candy' voor de eindgebruiker en maakt het tonen van een nieuwe scène minder abrupt. Als u alle beschikbare overgangstypen wilt bekijken, raadpleegt u de klasse SKTransition
in de naslaggids.
Ik ga de touchesBegan (_: with :)
methode in NewScene
niet implementeren. Waarom probeer je dat niet alleen en laat je de labelovergang teruggaan naar de GameScene
met een ander overgangstype? De code lijkt veel op wat we hierboven hebben, maar onthoud dat we de SKLabelNode
"goback"
hebben genoemd.
Conclusie
We hebben tot nu toe een goed deel geleerd over knooppunten met behulp van scènes en je hebt gezien hoe een labelknooppunt als een generiek voorbeeld moest worden gebruikt om enkele kenmerken van knopen te leren. We hebben hun coördinatensystemen bestudeerd, hoe ze in de knooppuntenboom kunnen worden gevonden, hoe ze te positioneren en hoe ze op aanraakgebeurtenissen kunnen reageren.
Er zijn verschillende andere soorten knooppunten beschikbaar, en we zullen ze in de volgende tutorial bekijken —te beginnen met SKSpriteNode!
Voor meer informatie over hoe u aan de slag kunt gaan met SpriteKit, kunt u ook het bericht van Davis Allie hier op Envato Tuts + bekijken.
Bekijk ook onze SpriteKit-cursussen! Deze zullen je door alle stappen leiden van het bouwen van je eerste SpriteKit-game voor iOS, zelfs als je nog nooit met SpriteKit hebt gecodeerd.
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Update me weeklyEnvato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!
Translate this post