Share
SpriteKit, beschikbaar op iOS, tvOS en OS X, is een raamwerk waarmee ontwikkelaars hoogwaardige 2D-games kunnen maken zonder zich zorgen te hoeven maken over de complexiteit van grafische API's, zoals OpenGL en Metal. Naast het verwerken van alle grafische voor ontwikkelaars biedt SpriteKit ook een breed scala aan extra functionaliteit, waaronder simulatie van de natuurkunde, audio / video afspelen en opslaan / laden van spellen.
In deze serie leer je alles over SpriteKit en krijg je vaardigheden die je vervolgens kunt toepassen op elk soort 2D-game dat met dit uitstekende framework wordt gebouwd. In deze serie creëren we een volledig functioneel spel waarin de speler een auto bestuurt die obstakels moet vermijden die zijn pad kruisen.
Voor deze serie moet Xcode 7.3 of hoger worden uitgevoerd, inclusief ondersteuning voor Swift 2.2 en de SDK's voor iOS 9.3, tvOS 9.2 en OS X 10.11.5. Je moet ook het startersproject downloaden van GitHub, dat de visuele activa bevat die in de game moeten worden gebruikt en enkele regels code om ons op weg te helpen.
De afbeeldingen die voor de game in deze serie worden gebruikt, zijn te vinden op GraphicRiver. GraphicRiver is een geweldige bron voor het vinden van illustraties en afbeeldingen voor uw games.
De eerste klasse waar u op moet letten bij het werken met SpriteKit is de SKScene klasse. Voor elk 2D-spel dat is gebouwd met SpriteKit, splitst u de inhoud van het spel op in meerdere scènes, elk met hun eigen inhoud SKScene subklasse.
Terwijl we zullen kijken naar de functionaliteit en innerlijke werking van de SKScene klasse later in deze serie, wat je nu moet weten is dat een scène is waar je de inhoud van het spel aan toevoegt en het fungeert als root-knooppunt. Dit brengt ons bij knooppunten.
De SKNode klasse, welke SKScene is een subklasse van, wordt gebruikt om elk item in uw scène weer te geven. Hoewel er veel verschillende soorten knooppunten beschikbaar zijn in SpriteKit, ook wel sprites genoemd, delen ze dezelfde sleuteleigenschappen met als belangrijkste:
Accentsconagua
positie (CGPoint)xScale (CGFloat): vertegenwoordigt de horizontale schaal van een knooppuntyScale (CGFloat): gelijkwaardig aan xScale maar in plaats daarvan werkt het in verticale richtingalpha (CGFloat): de transparantie van het knooppunt weergevenverborgen (Bool): waardebepaling of het knooppunt al dan niet zichtbaar moet zijnzRotation (CGFloat): vertegenwoordigt de hoek, in radialen, dat het knooppunt moet worden geroteerdzPosition (CGFloat): gebruikt om te bepalen welke knooppunten bovenop andere knooppunten in de scène moeten worden weergegevenZoals u ziet, kunt u met de bovenstaande eigenschappen nauwkeurig het basisbeeld van elk knooppunt in een scène positioneren, roteren en bewerken.
Net zoals u subviews aan kunt toevoegen UIView object in UIKit, in SpriteKit kun je een willekeurig aantal toevoegen kind knooppunten naar een bestaand knooppunt. Dit wordt gedaan met behulp van de addChild (_ :) methode op om het even welk SKNode voorwerp.
Ook vergelijkbaar met UIView objecten, de positie- en schaaleigenschappen van elk kindknooppunt zijn relatief ten opzichte van het bovenliggende knooppunt waaraan het is toegevoegd. Dit is hoe een SKScene object, een subklasse van SKNode, kan fungeren als het basisknooppunt van je scène. Voor alle knooppunten die u in uw scène wilt, moet u deze als kinderen van de scène zelf toevoegen met behulp van de addChild (_ :) methode.
De SKNode klasse op zichzelf is niet in staat om enige visuele inhoud te produceren. Om dit te doen, moet u een van de vele subklassen gebruiken die beschikbaar zijn in SpriteKit. Een beetje belangrijk SKNode subklassen om op te letten zijn:
SKSpriteNode: neemt een afbeelding en maakt een getextureerde sprite in uw scèneSKCameraNode: bepaalt waar uw scène wordt bekekenSKLabelNode: rendert een tekstreeksSKEmitterNode: gebruikt in combinatie met een particle systeem om partikeleffecten te makenSKLightNode: creëert licht- en schaduweffecten in uw scèneIn deze reeks gebruiken we deze typen knooppunten, evenals enkele van de andere minder gebruikelijke.
Als u uw SpriteKit-inhoud in een werkende toepassing wilt weergeven, moet u de SKView klasse. Dit is een subklasse van UIView (of NSView op OS X), die eenvoudig aan elk onderdeel van uw toepassing kan worden toegevoegd. Om een SpriteKit-scène te presenteren, moet u de presentScene (_ :) of presentScene (_: overgang :) methode op een SKView aanleg. De tweede methode wordt gebruikt wanneer u een aangepaste animatie of overgang naar uw nieuwe scène wilt.
Naast het alleen weergeven van uw SpriteKit-inhoud, is de SKView klas biedt ook enkele extra en zeer nuttige functionaliteit. Dit omvat een Bool eigenschap genoemd gepauzeerd, die eenvoudig kan worden gebruikt om een scène te pauzeren of te hervatten.
Er zijn ook verschillende eigenschappen die handig zijn bij het debuggen van je spel en informatie kunnen weergeven, zoals de huidige FPS (frames per seconde), knooppuntentelling en natuurkundige velden in je scène. Als je alle beschikbare eigenschappen wilt bekijken, bekijk dan de SKView klasseverwijzing.
Nu we de basisklassen hebben bekeken die in SpriteKit-spellen worden gebruikt, is het tijd om onze allereerste scène te maken. Hoewel scènes volledig programmatisch kunnen worden gemaakt, biedt Xcode een uitstekende bewerkingstool voor scènes, waarmee u gemakkelijk knooppunten naar uw scène kunt slepen en neerzetten terwijl u hun positie, uiterlijk en andere eigenschappen bewerkt.
Open het startersproject en maak een nieuw bestand door op te drukken Command + N of selecteren Nieuw> Bestand ... van Xcode's het dossier menu. Kies de iOS> Bron> SpriteKit-scène bestandstype en klik volgende.
Geef het bestand een naam MainScene en bewaar het. U zou nu uw nieuwe scènebestand moeten zien in de Project Navigator.
kiezen MainScene.sks om de scène-editor van Xcode te openen. Op dit moment is je scène leeg en heeft deze een grijze achtergrond. Er zitten nog geen knooppunten in. Voordat we enkele sprites aan je scène toevoegen, moeten we eerst de grootte ervan wijzigen.
In de Kenmerken Inspector aan de rechterkant, verander de grootte van je scène om een breedte te hebben (w) van 320 punten en een hoogte (H) van 480 punten.
Deze scènemaat komt overeen met de kleinste schermgrootte die we targeten (3,5 "scherm op iPhone 4s), zodat we onze knooppunten correct kunnen instellen. We zullen de scènemaat aanpassen om aangepast te zijn aan de huidige schermgrootte van het apparaat in een later zelfstudie.
Als u knooppunten aan uw scène wilt toevoegen, opent u de Objectbibliotheek aan de rechterkant. Mogelijk moet u op het pictogram klikken dat blauw is gemarkeerd als het Objectbibliotheek is niet zichtbaar.
Van de Objectbibliotheek, sleep een Kleur Sprite naar het midden van je scène.
Open de Kenmerken Inspector aan de rechterkant en verander de structuur, Positie, en Grootte schrijft toe aan de volgende waarden:
Je scène zou nu een auto moeten hebben in het midden zoals hieronder getoond.
Houd er rekening mee dat, in tegenstelling tot het UIKit-coördinatenstelsel, in SpriteKit, de positie van een knooppunt heeft altijd betrekking op het middelpunt van het oorsprongpunt van de linkerbenedenhoek van de scène (0, 0). Dit is de reden waarom de positie van de auto wordt ingesteld (160, 120) plaatst het midden van de auto 160 punten van links en 120 punten van de onderkant.
Sluit je scène nu af, open ViewController.swift en voeg bovenaan een importinstructie toe voor het SpriteKit-framework. Hierdoor kunnen we de SpriteKit-klassen en API's gebruiken ViewController.swift.
importeer UIKit importeer SpriteKit
Update vervolgens de implementatie van de viewDidLoad () methode van de ViewController klasse als volgt:
override func viewDidLoad () super.viewDidLoad () laat skView = SKView (frame: self.view.frame) laat scene = SKScene (fileNamed: "MainScene") skView.presentScene (scene) view.addSubview (skView)
Met deze code maken we eerst een SKView bijvoorbeeld, die dezelfde grootte heeft als de weergave van de view controller. Vervolgens laden we onze scène uit het bestand dat we hebben gemaakt met behulp van de SKScene (fileNamed :) initializer. Wij maken de SKView toon bijvoorbeeld deze scène en voeg deze toe als een subweergave van de hoofdweergave.
Selecteer de Iphone 4s simulator (zodat onze scène de juiste grootte heeft voor het scherm) en uw applicatie bouwen en uitvoeren. U zou een scherm moeten zien dat lijkt op het volgende:
In deze eerste tutorial van SpriteKit From Scratch leerde je de basis van views, scènes en knooppunten in SpriteKit. Je hebt een basisscène met één sprite gemaakt met de scène-editor die in Xcode is ingebouwd, wat het maken van scènes veel gemakkelijker maakt in vergelijking met het allemaal programmatisch doen.
In de volgende tutorial zullen we meer functionaliteit aan onze game toevoegen door gebruik te maken van SpriteKit-acties om de auto in de scene te verplaatsen. Je maakt ook kennis met de fysica-simulatie in SpriteKit door te detecteren wanneer de auto botst met een ander knooppunt.
Laat zoals altijd uw opmerkingen en feedback achter in de opmerkingen hieronder.
