Share
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!
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.
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.
Illustratie van eindresultaat - Sprite-set. Welkom bij het tweede deel van onze Airplanes-game met Sprite Kit. In de tutorial van vandaag programmeer je een zender die het rookpad van een vliegtuig vormt. Dit zelfstudiedeel concentreert zich op verschillende dingen, zoals bewegingen, aanrakingen, enzovoort, maar we zullen alles hieronder verder uitleggen. Als u Deel 1 van de serie nog niet hebt voltooid, kunt u het project van deel 1 en ophalen downloaden waar we gebleven waren.
Deeltjes worden gebruikt om veel verschillende soorten effecten te bereiken, zoals vuur, rook, magie, regen, sneeuw of watervallen. In dit geval gebruiken we ze om een rooksleep voor je vliegtuig te maken. Het deeltje blijft geactiveerd gedurende de duur van het spel.
Gelukkig heeft Xcode 5 een Emitter Editor geïntroduceerd als een ingebouwde functie. Dit is een buitengewoon handig hulpmiddel waarmee we eigenschappen als deeltjestextuur, achtergrondkleur, geboortecijferdeeltje, maximale deeltjes, levensduur, positie, bereik, hoek, snelheid, versnelling, schaal, rotatie en meer gemakkelijk kunnen bewerken. Standaard biedt Xcode 5 ook verschillende turn-key Emitters die klaar zijn voor gebruik. Laten we dus beginnen en een emitter aan onze game toevoegen.
De benodigde deeltjesafbeeldingen zijn beschikbaar in de map Resources van de bijgevoegde download.Om een emitter aan je spel toe te voegen, moet je naar Bestand> Nieuw> Bestand ... . Je ziet zoiets als de volgende afbeelding:
Illustratie van de creatie van SpriteKit-emitterbestand (Xcode). Selecteer de Bestand Particle en SpriteKit Particle optie (zoals in de bovengenoemde figuur). Klik volgende. Nu wordt u gevraagd welke sjabloon u wilt gebruiken. Dat zijn 8 verschillende sjablonen beschikbaar. Selecteer de rooksjabloon en klik op Volgende, geef het een naam (we noemden ons 'spoor') en klik op Maken. Xcode voegt twee nieuwe bestanden aan uw project toe (trail.sks en spark.png). U moet het aantal deeltjes, de textuur, het positiebereik, de hoek en de schaal voor de beste resultaten wijzigen. Bekijk onze configuratie:
Illustratie van de emittereigenschappen (Xcode). Laten we nu de rook aan ons vliegtuig toevoegen.
Binnen MyScene.h, voeg een rookspoor toe:
@property SKEmitterNode * smokeTrail;
Aan het einde van de if (self = [super initWithSize: size]) voorwaardelijk in MyScene.m, voeg het volgende fragment toe:
// toevoeging van de smokeTrail NSString * smokePath = [[NSBundle mainBundle] pathForResource: @ "Smoke" ofType: @ "sks"]; _smokeTrail = [NSKeyedUnarchiver unarchiveObjectWithFile: smokePath]; _smokeTrail.position = CGPointMake (screenWidth / 2, 15); [self addChild: _smokeTrail];
Natuurlijk, wanneer het vliegtuig beweegt, moet het pad ook bewegen. Aan het einde van de -(Void) update: (NSTimeInterval) currentTime methode, voeg deze regel toe:
_smokeTrail.position = CGPointMake (newX, newY - (_ plane.size.height / 2));
Bouw en run het project en als alles goed is gegaan zal het geweldig zijn!
Je zou iets als het volgende moeten zien:
Illustratie van de emittereigenschappen (Xcode). Tot nu toe laat je het vliegtuig gewoon over het scherm bewegen. Maar het plezier begint wanneer er meer vliegtuigen beschikbaar komen. Laten we wat vijandige vliegtuigen toevoegen!
Je moet niet alleen vijanden maken, maar je moet ook een willekeurig pad voor elk definiëren om een echt slagveld te simuleren. Om dit te bereiken, gebruikt u de actie followPath. Je maakt willekeurige paden (met CGPath) en vervolgens beweegt elke vijand over dat pad.
Een geweldige methode om dit met Cocos2D te doen was schema: interval:. Helaas heeft Apple geen vergelijkbare methode toegevoegd aan Sprite Kit, maar het is eenvoudig om een vergelijkbare methode te gebruiken SKActions. Om dit schema te bereiken, moeten we een SKAction oproepen voor een methode waitForDuration. Hierna zullen we een SKAction maken die een blok kan uitvoeren en deze kan gebruiken om de methode aan te roepen die vijanden toevoegt. Vervolgens plaatsen we deze twee acties in een reeks en zeggen we gewoon om het in de loop van de tijd te herhalen.
Om de uitleg opnieuw te maken, hebt u alleen het volgende fragment nodig. Voeg deze toe aan het einde van de if-voorwaarde if (self = [super initWithSize: size]):
// schema vijanden SKAction * wait = [SKAction waitForDuration: 1]; SKAction * callEnemies = [SKAction runBlock: ^ [self EnemiesAndClouds]; ]; SKAction * updateEnimies = [SKAction sequence: @ [wait, callEnemies]]; [self runAction: [SKAction repeatActionForever: updateEnimies]];
Makkelijk genoeg? Als je vragen hebt, aarzel dan niet om ze te stellen in de comments sectie.
Nu moet je de methode toevoegen die de bewegingspaden creëert voor de vijanden die moeten volgen. We kiezen ervoor om de CGPathAddCurveToPoint, omdat deze methode een Bézier-curve creëert met twee controlepunten. De volgende afbeelding legt uit hoe dit werkt:
Illustratie van de Bézier Curve Creation (Xcode). Dus je moet de volgende code toevoegen aan onze MyScene.m het dossier:
-(void) EnemiesAndClouds // not always come int GoOrNot = [self getRandomNumberBetween: 0 to: 1]; if (GoOrNot == 1) SKSpriteNode * vijand; int randomEnemy = [self getRandomNumberBetween: 0 to: 1]; if (randomEnemy == 0) enemy = [SKSpriteNode spriteNodeWithImageNamed: @ "PLANE 1 N.png"]; else enemy = [SKSpriteNode spriteNodeWithImageNamed: @ "PLANE 2 N.png"]; vijand.scale = 0.6; enemy.position = CGPointMake (screenRect.size.width / 2, screenRect.size.height / 2); enemy.zPosition = 1; CGMutablePathRef cgpath = CGPathCreateMutable (); // willekeurige waarden zwevend xStart = [self getRandomNumberBtween: 0 + enemy.size.width to: screenRect.size.width-enemy.size.width]; float xEnd = [self getRandomNumberBtween: 0 + enemy.size.width to: screenRect.size.width-enemy.size.width]; // ControlPoint1 float cp1X = [self getRandomNumberBtween: 0 + enemy.size.width to: screenRect.size.width-enemy.size.width]; float cp1Y = [self getRandomNumberBtween: 0 + enemy.size.width to: screenRect.size.width-enemy.size.height]; // ControlPoint2 float cp2X = [self getRandomNumberBtween: 0 + enemy.size.width to: screenRect.size.width-enemy.size.width]; float cp2Y = [self getRandomNumberBleween: 0 to: cp1Y]; CGPoint s = CGPointMake (xStart, 1024.0); CGPoint e = CGPointMake (xEnd, -100.0); CGPoint cp1 = CGPointMake (cp1X, cp1Y); CGPoint cp2 = CGPointMake (cp2X, cp2Y); CGPathMoveToPoint (cgpath, NULL, s.x, s.y); CGPathAddCurveToPoint (cgpath, NULL, cp1.x, cp1.y, cp2.x, cp2.y, e.x, e.y); SKAction * planeDestroy = [SKAction followPath: cgpath asOffset: NO orientToPath: YES duration: 5]; [self addChild: vijand]; SKAction * remove = [SKAction removeFromParent]; [vijandelijke runActie: [SKAction-reeks: @ [planeDestroy, remove]]]; CGPathRelease (cgpath); - (int) getRandomNumberTetween: (int) from to: (int) to return (int) from + arc4random ()% (to-from + 1);
De enemiesAndClouds methode voegt alleen vijanden toe voor nu. We wachten om wolken toe te voegen in het derde en laatste deel van deze serie.
De essentie van deze methode is het genereren van willekeurige waarden. Eerst zal het beslissen of een nieuwe vijand zal worden vrijgelaten, waarna het zijn positie creëert. Daarna creëert het de vijandelijke controlepunten en ten slotte worden de acties gecreëerd.
Wanneer we een sprite aan het scherm toevoegen of verwijderen, moeten we ervoor zorgen dat de toewijzing van geheugen en de toewijzing met zorg en met succes worden behandeld. De actie
Accentsconagua
removeFromParent zorgt hier voor ons voor. Bouw en run nu het project en kijk hoe vijanden op het scherm verschijnen.
Illustratie van de vijanden (Xcode). Om het spel leuk te maken, moeten onze vijanden te vernietigen zijn. Je zult wat kogels aan je vliegtuig toevoegen om dit te bereiken. Om dit te doen, moeten we het volgende doen:
Vervang de touchesBegan methode met het volgende fragment:
-(ongeldig) raaktBegan: (NSSet *) raakt aan metEvent: (UIEvent *) -gebeurtenis / * Wordt aangeroepen wanneer een aanraking begint * / CGPoint-locatie = [_planepositie]; SKSpriteNode * bullet = [SKSpriteNode spriteNodeWithImageNamed: @ "B 2.png"]; bullet.position = CGPointMake (location.x, location.y + _plane.size.height / 2); //bullet.position = locatie; bullet.zPosition = 1; bullet.scale = 0,8; SKAction * action = [SKAction moveToY: self.frame.size.height + bullet.size.height duration: 2]; SKAction * remove = [SKAction removeFromParent]; [bullet runAction: [SKAction-reeks: @ [actie, verwijderen]]]; [self addChild: bullet];
Bouw en run uw project. Als je een kogel wilt afvuren, hoef je alleen maar op het scherm te tikken!
Je hebt het einde van de tweede zelfstudie in onze serie bereikt.
Op dit punt moet u de volgende taken begrijpen en kunnen uitvoeren:
Blijf op de hoogte voor de volgende aflevering in deze serie, waar we onze vliegtuiggame verder zullen bouwen!
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.
