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. Voordat we de tutorial beginnen, willen we Daniel Ferenčak bedanken voor het verstrekken van de gamekunst 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.
Dames en heren, start uw motoren en start Xcode 5!
Zodra Xcode wordt geopend, gaat u naar Bestand Menu> Nieuw> Project en je ziet zoiets als de volgende afbeelding:
Illustratie van de sjabloonkiezer (Xcode). Zoals je misschien al geraden hebt, moet je de "Sprite Kit Game" -sjabloon kiezen (uit de iOS-laterale lijst). Deze sjabloon maakt wat u nodig hebt om het project te starten en bevat tegelijkertijd de bibliotheken die nodig zijn om de Sprite Kit-engine uit te voeren. Geef het project de naam die je wilt, maar selecteer "iPad" als het doelapparaat.
Het project is gemaakt met 3 klassen (AppDelegate, ViewController, en Mijn scene). Vandaag ga je ermee werken Mijn scene.
als jij Build and Run het project, ziet u een "Hallo, Wereld!" interface. Elke keer dat je op het scherm klikt, wordt een nieuw ruimteschip gepresenteerd met een rotatie-eigenschap:
Illustratie van Hello World - Sprite Kit. Alle visuele objecten worden weergegeven door de SKView klasse. Er is één SKView nodig om de toekomstige scènes ook te presenteren. De Sprite Kit-sjabloon doet dit voor u. Bekijk de ViewController.m bestand en noteer hoe het viewDidLoad methode configureert de weergave en roept de standaardscène aan.
In deze stap initialiseren we het spelbord. Het bord bevat de achtergrond, het vliegtuig, de propeller-animaties en één vliegtuigschaduw.
Voordat u een sprite toevoegt, hebt u de afbeelding nodig die door die sprite wordt gebruikt. Plaats deze sprites in de map Ondersteunende bestanden van uw project.
Alle bronnen die in deze zelfstudie worden gebruikt, zijn ontworpen voor de oorspronkelijke iPad-resolutie. Download de bijlage van deze post om ze te openen.Zodra je de bronnen voor dit bericht hebt gedownload, vind je 7 afbeeldingen. Kopieer ze naar de map Ondersteunende bestanden van uw project en zorg ervoor dat de optie "Items naar bestemmingsgroep kopiëren (indien nodig)" is aangevinkt.
Nu u uw afbeeldingen hebt, kunt u ze op het scherm plaatsen. Sprite Kit lijkt op Cocos2D omdat het ook een coördinatenoriëntatie gebruikt die begint vanaf de linkerbenedenhoek van het scherm (0,0), en de x- en y-waarden toenemen naarmate je hoger en naar rechts gaat. Deze game wordt geconfigureerd om te werken in staande richting, dus we zullen ons momenteel niet concentreren op de liggende stand. Configureer deze instelling nu door naar het paneel Instellingen voor uw project te gaan, het tabblad 'Algemeen' te selecteren en alle opties onder 'Implementatie-informatie' behalve 'Portret' uit te schakelen.
Nu wil je het vliegtuig dicht bij de bodem en in het midden van de x-as plaatsen.
Voeg in MyScene.h de volgende code toe:
@interface MyScene: SKScene CGRect screenRect; CGFloat scherm Hoogte; CGFloat schermbreedte; @property SKSpriteNode * vliegtuig;
Dit verklaart alleen de variabelen die we zullen gebruiken bij de implementatie.
In de MyScene.m bestand, kunt u alles in de map verwijderen if (self = [super initWithSize: size]) voorwaardelijk evenals alles binnen de -(ongeldig) raaktBegan: (NSSet *) raakt aan metEvent: (UIEvent *) -gebeurtenis methode. Hiermee wordt de bij het project meegeleverde boilerplate code verwijderd.
De creatie van de sprite kan worden bereikt met behulp van het volgende codefragment:
// begin verschillende grootten die worden gebruikt in alle scenarasterRect = [[UIScreen mainScreen] bounds]; screenHeight = screenRect.size.height; screenWidth = screenRect.size.width; // toevoeging van het vliegtuig _plane = [SKSpriteNode spriteNodeWithImageNamed: @ "PLANE 8 N.png"]; _plane.scale = 0.6; _plane.zPosition = 2; _plane.position = CGPointMake (screenWidth / 2, 15 + _plane.size.height / 2); [self addChild: _plane]; // de achtergrond toevoegen SKSpriteNode * background = [SKSpriteNode spriteNodeWithImageNamed: @ "airPlanesBackground"]; background.position = CGPointMake (CGRectGetMidX (self.frame), CGRectGetMidY (self.frame)); [self addChild: achtergrond];
Nu kun je de app bouwen en uitvoeren. Je achtergrond en het vliegtuig zouden prima moeten lijken, vergelijkbaar met de volgende figuur. De geleverde code begint met het initialiseren van de schermwaarden om verschillende berekeningen in deze klasse uit te voeren (u zult deze meerdere keren gebruiken). Net als bij Cocos2D, wordt Sprite Kit geleverd met eigenschappen zoals schaal, zPosition en positie, die allemaal erg handig zijn. Om het object aan onze Scene toe te voegen, moeten we tenslotte de. Gebruiken addChild methode. Het derde blok code voegt de achtergrond toe aan het midden van het scherm.
Illustratie van achtergrond en vliegtuig - Sprite Kit. Als je naar de bronnen kijkt, zie je twee propellers (dus links en rechts) en één vliegtuigschaduw.
De plaatsing van de vliegtuigschaduw moet nu gemakkelijk voor u zijn. Om de beste animatie te krijgen, moet deze 15 punten naar rechts (x-as) en 15 punten onder (y-as) van het vliegtuig starten.
Nu gaan we door en voegen we de code toe om een schaduw te maken:
Voeg in MyScene.h het volgende toe:
@property SKSpriteNode * planeShadow;
En voeg in Scene.m het volgende toe [self addChild: _plane];:
_planeShadow = [SKSpriteNode spriteNodeWithImageNamed: @ "PLANE 8 SHADOW.png"]; _planeShadow.scale = 0.6; _planeShadow.zPosition = 1; _planeShadow.position = CGPointMake (screenWidth / 2 + 15, 0 + _planeShadow.size.height / 2); [self addChild: _planeShadow];
Dat was makkelijk, toch? We voegen gewoon een schaduwsprite toe aan de scène en positioneren deze ten opzichte van het vlak.
Laten we nu verdergaan met de propelleranimatie. Om de animatie te maken, hebben we twee sprites (PLANE PROPELLER 1 en PLANE PROPELLER 2). Met de SKAction kunt u verschillende animaties maken en verschillende soorten acties met hen uitvoeren. In deze zelfstudie moet u tussen slechts twee afbeeldingen wisselen. Om dit te realiseren, hebt u twee methoden nodig: animateWithTextures: timePerFrame en repeatActionForever. Zoals u kunt zien, zijn de namen van de methoden voor zichzelf. De eerste methode ontvangt de texturen (PLANE PROPELLER 1 en 2) en wijzigt de texturen gedurende de gedefinieerde tijd (timePerFrame). De tweede methode zal deze actie voor altijd herhalen.
Om dit te bereiken, begint u met het toevoegen van het volgende aan uw header-bestand:
@property SKSpriteNode * propeller;
En terug in het implementatiebestand:
_propeller = [SKSpriteNode spriteNodeWithImageNamed: @ "PLANE PROPELLER 1.png"]; _propeller.scale = 0,2; _propeller.position = CGPointMake (screenWidth / 2, _plane.size.height + 10); SKTexture * propeller1 = [SKTexture textureWithImageNamed: @ "PLANE PROPELLER 1.png"]; SKTexture * propeller2 = [SKTexture textureWithImageNamed: @ "PLANE PROPELLER 2.png"]; SKAction * spin = [SKAction animateWithTextures: @ [propeller1, propeller2] timePerFrame: 0.1]; SKAction * spinForever = [SKAction repeatActionForever: spin]; [_propeller runAction: spinForever]; [self addChild: _propeller];
Bouw en voer uw code uit. Dit is een goed moment om enkele minuten te investeren in code-exploratie om de basisstructuur van het project te leren kennen. Kijk eens rond en maak uzelf vertrouwd met de basisorganisatie.
Helaas is het vliegtuig op dit moment nog steeds statisch. Om de beweging te maken, gebruikt u de interne gegevens van de versnellingsmeter en het vlak reageert op de fysieke beweging van de iPad. Merk op dat we niet diep zullen uitleggen hoe de versnellingsmeter werkt, aangezien deze tutorial niet op dat onderwerp is gericht. Als u echter meer wilt weten over de versnellingsmeter, kunt u de officiële Apple-documentatie raadplegen.
In de MyScene.h je moet een paar wijzigingen aanbrengen. U moet het toevoegen UIAcelerometerDelegate, twee dubbele variabelen voor beide aswaarden (dat wil zeggen AccelX en AccelY) en één te beheren eigenschap CoreMotion.
Je finale MyScene.h bestand moet lijken op het volgende fragment:
#importeren#importeren @interface MyScene: SKScene CGRect screenRect; CGFloat scherm Hoogte; CGFloat schermbreedte; dubbele stroomMaxAccelX; dubbele stroomMaxAccelY; @property (strong, nonatomic) CMMotionManager * motionManager; @property SKSpriteNode * vliegtuig; @property SKSpriteNode * planeShadow; @property SKSpriteNode * propeller; @einde
Dus, om de gegevens van de versnellingsmeter te verkrijgen, moet je wat code toevoegen aan het einde van de methode -(Id) initWithSize: (CGSize) formaat methode. Hoewel nog steeds binnen de if (self = [super initWithSize: size]) Voorwaardelijk, voeg de volgende code toe waar je eerder was gebleven:
// CoreMotion self.motionManager = [[CMMotionManager alloc] init]; self.motionManager.accelerometerUpdateInterval = .2; [self.motionManager startAccelerometerUpdatesToQueue: [NSOperationQueueQueue] withHandler: ^ (CMAccelerometerData * accelerometerData, NSError * error) [self outputAccelertionData: accelerometerData.acceleration]; if (fout) NSLog (@ "% @", fout); ];
Voeg nu de volgende methode toe aan het implementatiebestand:
-(void) outputAccelertionData: (CMAcceleration) acceleratie currentMaxAccelX = 0; currentMaxAccelY = 0; if (fabs (acceleratie.x)> fabs (currentMaxAccelX)) currentMaxAccelX = acceleratie.x; if (fabs (acceleration.y)> fabs (currentMaxAccelY)) currentMaxAccelY = acceleration.y;
Nu je de waarden van de versnellingsmeter van de iPad hebt, zullen we ze in de volgende stap gebruiken om het vliegtuig te verplaatsen!
Met de waarden van de versnellingsmeter moet u deze daadwerkelijk toepassen om het vliegtuig te verplaatsen. Sprite Kit gebruikt een methode -(Void) update: (NSTimeInterval) currentTime om alles in je game te updaten. Dus, om het vliegtuig te verplaatsen, moet je alleen de positie van alle sprites bijwerken (vliegtuig, schaduw en propellers). Vervang of voeg de updatemethode toe met de volgende code:
-(ongeldige) update: (NSTimeInterval) currentTime // NSLog (@ "one second"); float maxY = screenWidth - _plane.size.width / 2; zweven minY = _plane.size.width / 2; float maxX = schermhoogte - _plane.size.hoogte / 2; zweven minX = _plane.size.hoogte / 2; zweven nieuwY = 0; float newX = 0; if (currentMaxAccelX> 0.05) newX = currentMaxAccelX * 10; _plane.texture = [SKTexture textureWithImageNamed: @ "PLANE 8 R.png"]; else if (currentMaxAccelX < -0.05) newX = currentMaxAccelX*10; _plane.texture = [SKTexture textureWithImageNamed:@"PLANE 8 L.png"]; else newX = currentMaxAccelX*10; _plane.texture = [SKTexture textureWithImageNamed:@"PLANE 8 N.png"]; newY = 6.0 + currentMaxAccelY *10; float newXshadow = newX+_planeShadow.position.x; float newYshadow = newY+_planeShadow.position.y; newXshadow = MIN(MAX(newXshadow,minY+15),maxY+15); newYshadow = MIN(MAX(newYshadow,minX-15),maxX-15); float newXpropeller = newX+_propeller.position.x; float newYpropeller = newY+_propeller.position.y; newXpropeller = MIN(MAX(newXpropeller,minY),maxY); newYpropeller = MIN(MAX(newYpropeller,minX+(_plane.size.height/2)-5),maxX+(_plane.size.height/2)-5); newX = MIN(MAX(newX+_plane.position.x,minY),maxY); newY = MIN(MAX(newY+_plane.position.y,minX),maxX); _plane.position = CGPointMake(newX, newY); _planeShadow.position = CGPointMake(newXshadow, newYshadow); _propeller.position = CGPointMake(newXpropeller, newYpropeller);
Twee belangrijke dingen gebeuren in de updatemethode: u werkt de positie bij en wisselt de weergegeven sprite om.
Als de iPad naar links draait, wordt de sprite van het vliegtuig vervangen door "PLANE 8 L.png". Als alternatief, als de iPad naar rechts draait, zal de vliegtuigsprite veranderen voor de "PLANE 8 R.png".
Tenslotte, ga je gang en test de bewegingscode. Je zou iets moeten zien dat lijkt op de volgende afbeelding:
Illustratie van Moving Airplane - Sprite Kit. Dat is het einde van de eerste tutorial! Op dit punt moet u weten hoe u de volgende taken kunt uitvoeren:
Als een van bovenstaande nog steeds 'fuzzy' is, kijk dan nog eens naar de code die we hierboven hebben gemaakt. Blijf op de hoogte voor de volgende aflevering in deze serie, waarin we onze vliegtuiggame verder zullen bouwen!
Accentsconagua