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 SKScenes, 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 SKNodeinstantie 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.

• 
  iOS
  SpriteKit From Scratch: Fundamentals
  Davis Allie

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.

• 
  Spoedig
  Codeer een side-scrolling game met Swift 3 en SpriteKit
  Derek Jensen
• 
  Game Ontwikkeling
  Spelontwikkeling met Swift en SpriteKit
  Derek Jensen