In deze tutorial leer je hoe je het Sprite Kit-framework gebruikt om een eenvoudig vliegtuigspel te maken. Onderweg leer je alle basisbegrippen van Sprite Kit: animaties, emitters, botsingsdetectie en meer!
Serie-indeling
De zelfstudie van Airplanes zal in drie delen worden verdeeld om elke sectie volledig te bestrijken. Na het lezen van de driedelige zelfstudie, kunnen de lezers een interessant 2D-spel maken met behulp van het nieuwe Sprite Kit-framework dat wordt geleverd met iOS 7.
Bouw een vliegtuigspel met Sprite Kit - Project Setup
Bouw een vliegtuigspel met Sprite Kit - Enemies & Emitters
Bouw een vliegtuigspel met Sprite Kit - Explosions & Clouds
Elk onderdeel levert een praktisch resultaat op en de som van alle delen levert het laatste spel op. Hoewel elk deel van de serie onafhankelijk van elkaar kan worden gelezen, raden we aan deze stap voor stap te volgen voor een volledig begrip van het gepresenteerde onderwerp. De broncode voor het spel wordt incrementeel bij elk bericht verstrekt.
Laatste voorbeeld
Illustratie van eindresultaat - Sprite-set.
Waar we zijn gebleven ...
Welkom terug bij het derde deel van ons vliegtuigspel met Sprite Kit. In ons laatste bericht hebben we ons gericht op het toevoegen van vijanden en emitters aan het spel. In de tutorial van vandaag programmeer je de botsingsdetectie, werk je met een textuuratlas en maak je een aantal explosies om het spel te voltooien. Laten we beginnen!
1. Collision Detection toevoegen
Kruistests worden vaak gebruikt in omgevingen waarin meer dan één object bestaat. In Sprite Kit gebruikt u botsingen en contactpersonen om te detecteren of een bepaald object een ander object raakt.
In dit spel gebruik je botsingsdetectie. Wanneer een kogel contact maakt met één vijand, worden zowel de kogel als de vijand van het scherm verwijderd.
Hiertoe moet u de categoriemask-waarden definiëren. Er moet één categorie zijn voor elk fysica-object. In MyScene.h, voeg de volgende code toe:
Nu, terwijl je nog steeds binnen MyScene.h bent, voeg je toe SKPhysicsContactDelegate zoals we eerder deden met de UIAccelerometerDelegate.
@interface MyScene: SKScene
Voordat u natuurkunde kunt gebruiken, moet u de natuurkundige instellingen starten. Bij de if (self = [super initWithSize: size]) Voorwaardelijk, stel de zwaartekracht in met een 0-waarde (d.w.z. geen zwaartekracht) en vervolgens de contactafgevaardigde:
De twee lichamen die de natuurkunde nodig hebben, zijn de kogel en de vijanden. Laten we verschillende eigenschappen instellen voor elke categorie. Laten we de onderstaande code toevoegen binnen de -(Void) EnemiesAndClouds methode:
De bovenstaande code geeft aan dat het contactgebied van het vliegtuig een rechthoek is met de grootte van de vijandelijke sprite. De dynamische eigenschap geeft aan of het fysieke lichaam wordt verplaatst door de fysische simulatie. Vervolgens de categoryBitMask is waar u de categorie instelt op het object, en de contactTestBitMask verwijst naar met welke lichamen de vijanden zullen omgaan (in dit geval met kogels).
Laten we nu de fysica voor het bullet-object definiëren. Binnen de -(ongeldig) raaktBegan: (NSSet *) raakt aan metEvent: (UIEvent *) -gebeurtenis methode, moet de opsommingscode worden gewijzigd om toe te voegen:
Tot nu toe hebt u de eigenschappen voor botsingen gedefinieerd. We moeten echter detecteren of een contact is gemaakt.
U moet de methode gebruiken didBeginContact om te weten welke objecten contact hebben met andere objecten. Dus, de volgende code berekent de twee lichamen die contact hebben gemaakt en ze tegelijkertijd verwijderen uit de scène:
Best simpel, toch? Bouw en run nu. Als alles goed is gegaan, zullen de vijand en de kogel verdwijnen wanneer ze botsen.
2. Een textuuratlas opnemen
Onze game is bijna voltooid, maar heeft wat actie en animatie nodig. De volgende twee stappen voegen explosies toe en sommige achtergrondanimaties gemaakt van wolken.
Tot nu toe hebben we Texture Atlas niet gebruikt. Sprite Kit bevat een textuur-atlasengenerator met verschillende interessante functies. In Xcode 5 kunt u een structuuratlas maken met de volgende stappen:
Plaats alle sprites in een enkele map. Voor ons project vindt u alle afbeeldingen in de bijgevoegde download in de map "EXPLOSION".
Wijzig de extensie van de map in * .atlas. Wijzig in ons geval EXPLOSION naar EXPLOSION.atlas.
Versleep de map naar het project. Ik heb het toegevoegd aan de map Ondersteunende bestanden in de Xcode-navigator.
Zorg ervoor dat de optie "Texture Altas Generation inschakelen" is ingeschakeld. Om dit te controleren, gaat u naar de bouwinstellingen van uw project.
Dat is het. Nogmaals, de afbeeldingen voor dit onderdeel zijn beschikbaar in de map Resources van de bijgevoegde download.
Nu moet u de textuuratlas in het project laden.
Binnen MyScene.h toevoegen:
@property NSMutableArray * explosionTextures;
Aan het einde van de if (self = [super initWithSize: size]) Voorwaardelijk, voeg het volgende codefragment toe:
Zodra je de explosies hebt geladen, is nog een stap nodig om ze in actie te zien. Je maakt nu een explosie die ontstaat wanneer een kogel een vijand raakt. Aan het einde van de voorwaarde indien voorwaardelijk if ((firstBody.categoryBitMask & bulletCategory)! = 0), voeg het volgende fragment toe:
Bouw en run het project om de botsing en explosie-animatie te testen. Je zou zoiets als de volgende figuur moeten zien:
Illustratie van de explosie (Xcode).
4. Wolken toevoegen
We hebben de game bijna voltooid! Dit is slechts de laatste aanraking. Nu moet je de wolkenatlas maken en dan de textuuratlas in het geheugen laden.
Voordat we de code voor deze stap schrijven, moet u de .atlas-extensie toevoegen aan de map "Clouds" in de bijgevoegde download en deze naar uw project slepen.
Binnen de MyScene.h bestand voeg het volgende toe:
@property NSMutableArray * cloudsTextures;
Binnen de MyScene.m bestand, onder de code "load explosions", voeg het volgende toe:
De laatste stap is om willekeurig wolken te genereren en deze met enige beweging op het scherm te presenteren. U moet het volgende fragment aan het einde van de EnemiesAndClouds methode:
// random Clouds int randomClouds = [self getRandomNumberBtween: 0 to: 1]; if (randomClouds == 1) int whichCloud = [self getRandomNumberBleween: 0 to: 3]; SKSpriteNode * cloud = [SKSpriteNode spriteNodeWithTexture: [_ cloudsTextures objectAtIndex: whichCloud]]; int randomYAxix = [self getRandomNumberBleween: 0 to: screenRect.size.height]; cloud.position = CGPointMake (schermRect.size.height + cloud.size.height / 2, randomYAxix); cloud.zPosition = 1; int randomTimeCloud = [self getRandomNumberBetween: 9 to: 19]; SKAction * move = [SKAction moveTo: CGPointMake (0-cloud.size.height, randomYAxix) duration: randomTimeCloud]; SKAction * remove = [SKAction removeFromParent]; [cloud runAction: [SKAction-reeks: @ [verplaatsen, verwijderen]]]; [self addChild: cloud];
Bouw en run het project nog een keer. Als alles goed gaat, zou je zoiets als de volgende figuur moeten zien:
Illustratie van het laatste spel (Xcode).
Conclusie
Hiermee is de derde en laatste zelfstudie afgerond waarin wordt gedemonstreerd hoe je een vliegtuigspel kunt maken met behulp van het nieuwe Sprite Kit-framework dat beschikbaar is met de iOS 7 SDK. Als je deze serie van start tot finish hebt gevolgd, zou je nu genoeg kennis moeten hebben om een eenvoudig Sprite Kit-spel te maken met deze dynamische nieuwe game-engine. Als u vragen of opmerkingen heeft, kunt u deze hieronder laten staan!
Erkenningen en aanbevelingen
We willen graag Daniel Ferenčak bedanken voor het verstrekken van de game-art die is gebruikt om deze tutorialserie te produceren.
Om de tutorialseries ten volle te waarderen, raden we u aan onze code te testen door deze te implementeren op een echt apparaat met iOS 7. U hebt Xcode 5 en de nieuwste iOS 7 SDK nodig. Als u deze hulpmiddelen nog niet heeft, kunt u deze downloaden van het Apple Developer Center. Installeer na het downloaden de software en je bent klaar om te beginnen.
Share
Illustratie van eindresultaat - Sprite-set. 
Accentsconagua
Illustratie van de explosie (Xcode). 
Illustratie van het laatste spel (Xcode). 