Creëer Space Invaders met Swift en Sprite Kit Introductie van Sprite Kit

Wat je gaat creëren

In deze serie zal ik je leren hoe je een Space Invaders-geïnspireerd spel maakt met Sprite Kit en de Swift-programmeertaal. Onderweg leer je over de geïntegreerde physics-engine van Sprite Kit, genereer je deeltjes met de ingebouwde particle editor van Sprite Kit, gebruik je de versnellingsmeter om de speler te verplaatsen en nog veel meer. Laten we beginnen.

Introductie van Sprite Kit

Sprite Kit is de 2D-game-engine van Apple die werd geïntroduceerd samen met iOS 7. Met de introductie van de Swift-programmeertaal in 2014 is er nooit een beter moment geweest om een ​​game-ontwikkelaar voor iOS te zijn.

Sprite Kit biedt een rendering-engine bovenop OpenGL. Met het gebruik van getextureerde sprites, een ingebouwde physics-engine en de zeer krachtige SKAction klasse, kun je heel snel functionele 2D-games bouwen.

Rennende lus

Sprite Kit maakt, zoals de meeste game-engines, gebruik van een rendering-lus om het scherm te renderen en bij te werken. De rendering-lus heeft verschillende stappen die worden doorlopen voordat de huidige scène wordt gerenderd. Ze zijn als volgt:

  1. Bijwerken
  2. Evalueer acties
  3. Simuleer fysica
  4. Beperkingen toepassen
  5. Render de scène

Elk van deze heeft een overeenkomstige methode die u kunt gebruiken om aanvullende logica toe te passen die op dat moment in het frame moet plaatsvinden. In het bijzonder zou u de volgende methoden in de scène gebruiken.

  1. bijwerken
  2. didEvaluateActions
  3. didSimulatePhysics
  4. didApplyConstraints
  5. didFinishUpdate

 We zijn geïnteresseerd in twee van deze methoden voor deze zelfstudie, bijwerken en didSimulatePhysics. We zullen de gebruiken bijwerken methode om de indringers handmatig te verplaatsen en de didSimulatePhysics methode om de speler bij te werken, die wordt bestuurd met behulp van de versnellingsmeter en de physics-engine.

SKNode

Een van de bouwstenen van het Sprite Kit-raamwerk is het SKNode klasse. De SKNode klasse trekt geen visuele activa. De primaire rol is om basislijngedrag te bieden dat andere klassen implementeren. De SKScene class is het hoofdknooppunt in een boom van SKNode instanties en wordt gebruikt om sprites en andere inhoud die moet worden weergegeven te houden.

De weergave en animatie wordt gedaan door een SKView exemplaar dat in een venster is geplaatst en er vervolgens andere weergaven aan worden toegevoegd. De SKScene instantie is toegevoegd aan de SKView aanleg. Je kunt een single gebruiken SKView bijvoorbeeld in uw venster en schakel op elk moment tussen verschillende scènes.

Het kader definieert een aantal SKNode subklassen. De meest voorkomende om een ​​scène te bouwen is de SKSpriteNode klasse. De SKSpriteNode klasse kan worden getekend als een rechthoek met een SKTexture op het in kaart gebracht of als een gekleurde, niet-getextureerde rechthoek. Je zult meestal getextureerde sprites gebruiken, want zo breng je je artwork tot leven in je game. Bekijk de overervingsboom van de SKNode class om te zien welke andere soorten knooppunten beschikbaar zijn.

SKAction

De SKAction klasse is wat je brengt SKNode lessen tot leven. Door de SKAction klasse kunt u de knooppunten verplaatsen, draaien, schalen en vervagen. Je kan ook gebruiken SKAction om een ​​geluid af te spelen en aangepaste code uit te voeren. De SKAction klas is erg krachtig en, samen met de SKNode klasse, is een van de bouwstenen van een Sprite Kit-spel.

Physics Engine

Sprite Kit heeft een geïntegreerde physics-engine die het verwerken van complexe fysische situaties een fluitje van een cent maakt. Als u ooit zelf hebt geprobeerd een physics-engine te implementeren, zult u deze functie op prijs stellen.

In Sprite Kit, de coördinaat (0,0) bevindt zich links onderaan het scherm in plaats van linksboven, wat u wellicht gewend bent als u met Flash, Corona, HTML5 Canvas en vele andere gamekaders hebt gewerkt. Dit komt omdat Sprite Kit OpenGL gebruikt onder de motorkap.

Ik raad je ten zeerste aan Apple's Programmagids voor Sprite Kit te lezen om meer vertrouwd te raken met de bovenstaande concepten. Laten we aan de slag met het bouwen van een spel met Sprite Kit, met deze korte introductie.

1. Projectinstelling

Open Xcode en kies Maak een nieuw Xcode-project of kies Nieuw> Project ...  van de het dossier menu.


Zorg ervoor dat u target iOS,dat het type is Toepassing, en dat je hebt gekozen Spel als het sjabloontype. Klik volgende doorgaan.

Kies vervolgens wat je wilt voor de productnaam, organisatie naam, en Organisatie-ID. Zeker weten dat Taal ingesteld op Snel, Game-technologie ingesteld op SpriteKit, en apparaten ingesteld op iPad. Geef een locatie op om de projectbestanden op te slaan en klik op creëren.

Als u op de knop Uitvoeren linksboven klikt (of druk op Command-R), Zal Xcode uw applicatie bouwen en uitvoeren, met weergave van de tekst "Hallo Wereld!". Wanneer u op het scherm tikt, wordt een afbeelding van een ruimteschip toegevoegd en begint het te roteren.

2. Projectconfiguratie

Selecteer het project in de Project Navigator en open de Algemeen tab bovenaan. Onder Deployment Info, Schakel alle selectievakjes uit maar Portret voor Apparaatoriëntatie.

Selecteer vervolgens en wis GameScene.sks. De .sks bestand stelt u in staat om de scène visueel op te maken. Voor dit project zullen we elk knooppunt programmatisch toevoegen. Open GameViewController.swift, verwijder de inhoud en vervang deze door het volgende.

import UIKit import SpriteKit class GameViewController: UIViewController override func viewDidLoad () super.viewDidLoad () laat scène = StartGameScene (size: view.bounds.size) laat skView = view as zien! SKView skView.showsFPS = true skView.showsNodeCount = true skView.ignoresSiblingOrder = true scene.scaleMode = .ResizeFill skView.presentScene (scène) overschrijven func geeft de voorkeurStatusBarHidden () -> Bool return true

De GameViewController klasse erft van UIViewController en zal een hebben SKView als zijn mening. Binnen in de viewDidLoad methode, we forceren het downcasten uitzicht eigendom van een SKView bijvoorbeeld met behulp van de zoals! type cast-operator en configureer de weergave.

Mogelijk hebt u de tekst in de rechterbenedenhoek van het scherm opgemerkt toen u de toepassing de eerste keer uitvoerde. Dat is wat de showsFPS en showsNodeCount eigenschappen zijn voor, met de frames per seconde waar het spel op draait en het aantal SKNodes zichtbaar in de scène.

Als sommige knooppunten buiten het scherm zouden bewegen, zou het aantal punten dalen, maar ze zouden nog steeds in het geheugen zijn. Dit is belangrijk om te onthouden en laat het tellen van het knooppunt u niet voor de gek houden. Als u 100 knooppunten aan een scène toevoegt en 90 ervan buiten het scherm zijn, hebt u nog steeds 100 knooppunten die geheugen innemen.

Voor optimalisatiedoeleinden, de ignoresSiblingOrder ingesteld op waar. U kunt hier meer over lezen in de programmeerhandleiding voor Sprite Kit. Het laatste wat we doen is de SKView's presentScene methode en doorgeven in de StartGameScene, die we in de volgende stap zullen maken.

Ten slotte willen we niet dat de statusbalk wordt weergegeven, dus keren we terug waar van de preferStatusBarHidden methode.

3. Creëren StartGameScene

Stap 1: De. Toevoegen StartGameScene Klasse

Kiezen nieuwe > Het dossier… van de het dossier menu en kies Cocoa Touch Class van de iOS> Bron sectie. Klik volgende doorgaan.

Geef vervolgens de klas een naam StartGameScene en zorg ervoor dat het erft van SKScene. Taal moet worden ingesteld op Snel. Klik volgende doorgaan.

Vertel Xcode waar u het bestand voor de nieuwe klasse wilt opslaan en klik op creëren. Voeg de volgende code toe aan StartGameScene.swift.

import UIKit import SpriteKit-klasse StartGameScene: SKScene override func didMoveToView (weergave: SKView) backgroundColor = SKColor.blackColor () NSLog ("We hebben het startscherm geladen")

De didMoveToView (_ :) methode wordt aangeroepen onmiddellijk nadat de scène wordt gepresenteerd door de weergave. Over het algemeen zul je hier de instellingen voor je scène doen en je items maken.

Als je het spel nu test, zou je een zwart scherm moeten zien met de framesnelheid en knooppunttelling in de rechterbenedenhoek van het scherm.

Stap 2: toevoegen startGameButton

Het is niet leuk om naar een zwart scherm te kijken, dus laten we onze eerste maken SKSpriteNode aanleg. Werk het didMoveToView (_ :) methode zoals hieronder getoond.

override func didMoveToView (weergave: SKView) let startGameButton = SKSpriteNode (imageNamed: "newgamebtn") startGameButton.position = CGPointMake (size.width / 2, size.height / 2 - 100) startGameButton.name = "startgame" addChild (startGameButton ) 

We verklaren een constante startGameButton gebruik van de gemakinitialisator init (imageNamed :), waarbij als argument de naam van de afbeelding wordt gebruikt. We centreren het op het scherm, zowel horizontaal als verticaal, behalve dat we 100 punten aftrekken om het een beetje uit het midden op de verticale as te plaatsen. We hebben zijn naam eigendom aan start het spel zodat we er later naar terug kunnen verwijzen. Ten slotte voegen we het toe aan de scène door op te roepen addChild (_ :), die als argument het knooppunt neemt om toe te voegen aan de scène. U kunt meer leren over de SKSpriteNode klasse in de SpriteKit Framework Reference.

Het zou een goed moment zijn om de afbeeldingen aan het project toe te voegen. Download de bronbestanden van deze tutorial en vind de map met de naam afbeeldingen. Sleep het naar de map met de naam van bijvoorbeeld uw project, MobileTutsInvaderz. Zorg ervoor dat Kopieer items indien nodig wordt gecontroleerd, evenals het hoofddoel in de lijst met doelen.

Als u uw toepassing test, ziet u een knop met het label "Nieuw spel".

Stap 3: Implementeren touchesBegan

Vervolgens moeten we de touchesBegan (_: withEvent :) methode. De implementatie wordt hieronder weergegeven. De touchesBegan methode wordt aangeroepen wanneer een of meer vingers op het scherm raken.

override func touchesBegan (touches: Set, withEvent event: UIEvent) let touch = touches.first as! UITouch let touchLocation = touch.locationInNode (self) let touchedNode = self.nodeAtPoint (touchLocation) if (touchedNode.name == "startgame") let gameOverScene = GameScene (size: size) gameOverScene.scaleMode = scaleMode let transitionType = SKTransition. flipHorizontalWithDuration (1.0) view? .presentScene (gameOverScene, transition: transitionType)

De multiTouchEnabled eigenschap van de scène is ingesteld op vals Standaard betekent dit dat de weergave alleen de eerste aanraking van een multitouch-reeks ontvangt. Als deze eigenschap is uitgeschakeld, kunt u het aanraken ophalen met behulp van de eerste berekend eigendom van de accenten ingesteld omdat er maar één object in de set is. Merk op dat we het ook naar a neerslaan UITouch.

We slaan de locatie van de aanraking in de scène op in een constante naam touchLocation. We doen dit door aan te roepen locationInNode (_ :) op de aanraken voorwerp, passerend in de scène. We kunnen dan uitzoeken welk knooppunt is aangeraakt door aan te roepen nodeAtPoint, doorgeven op de aanraaklocatie. Met dit knooppunt touchedNode gevonden, kunnen we de naam eigendom en, als het gelijk is aan start het spel, we weten dat ze op de knop tikken.

Als de gebruiker op de knop tikt, geven we de GameScene klasse en stel het in scaleMode hetzelfde te zijn als de schaalmodus van de huidige scène. We maken vervolgens een SKTransition genaamd transitionType en toon de scène door aan te roepen presentScene (_: overgang :) passeren in de gameOverScene en de transitionType.

Er zijn er nogal wat SKTransistion soorten om uit te kiezen. Je kunt meer over ze lezen in de SpriteKit Framework Reference. Ik stel voor dat je er een paar uitprobeert en ziet welke jij het leukst vindt.

Als u uw toepassing test, kunt u op de knop tikken, waarmee u naar de GameScene. Dit is dezelfde scène als waarmee het project aanvankelijk begon.

Conclusie

Dit brengt het eerste deel van deze serie tot een einde. Je bent voorgesteld aan Sprite Kit en hebt geleerd hoe je aangepaste scènes kunt maken, gebruik de SKSpriteNode klasse, en detecteer aanrakingen. Dit is nog maar het begin, we moeten nog veel leren. Bedankt voor het lezen en ik zie je in het volgende deel van deze serie.