Share
Acest tutorial vă va învăța cum să utilizați cadrul Sprite Kit pentru a crea un joc simplu de avioane. Pe parcurs, veți afla toate conceptele de bază ale Sprite Kit: animații, emițătoare, detectarea coliziunilor și multe altele!
Tutorialul avioanelor va fi împărțit în trei părți pentru a acoperi complet fiecare secțiune. După ce ați citit tutorialul cu trei părți, cititorii vor putea să creeze un joc interesant 2D utilizând noul cadru Sprite Kit furnizat cu iOS 7.
Fiecare parte va produce un rezultat practic, iar suma tuturor pieselor va produce jocul final. În timp ce fiecare parte a seriei poate fi citită independent, vă recomandăm să urmăriți pas cu pas o înțelegere completă a subiectului prezentat. Codul sursă pentru joc este furnizat incremental cu fiecare postare.
Ilustrația rezultatului final - Sprite Kit. Înainte de a începe tutorialul, am dori să-i mulțumim lui Daniel Ferenčak pentru că ne-a oferit arta jocului folosită pentru a produce această serie de tutorial.
Pentru a aprecia pe deplin seria tutorial, vă sfătuim să vă testați codul, implementându-l pe un dispozitiv real care rulează iOS 7. Veți avea nevoie de Xcode 5 și de cel mai recent SDK pentru iOS 7. Dacă nu aveți deja aceste instrumente, le puteți descărca de la Centrul pentru dezvoltatori Apple. Odată descărcat, instalați software-ul și veți fi gata să începeți.
Doamnelor și domnilor, porniți motoarele și lansați Xcode 5!
Odată ce Xcode se deschide, mergeți la File Menu> New> Project și veți vedea ceva asemănător cu următoarea imagine:
Ilustrația selectorului șablonului (Xcode). După cum probabil ați ghicit, trebuie să alegeți șablonul "Sprite Kit Game" (din lista laterală iOS). Acest șablon creează ceea ce aveți nevoie pentru a începe proiectul și, în același timp, include bibliotecile necesare pentru a rula motorul Sprite Kit. Oferă proiectului orice nume doriți, dar asigurați-vă că selectați "iPad" ca dispozitiv vizat.
Proiectul este creat cu 3 clase (AppDelegate, ViewController, și Scena mea). Astăzi, veți colabora Scena mea.
daca tu Construiți și executați proiectul, veți vedea un "Bună ziua, lumea!" interfață. De fiecare dată când faceți clic pe ecran, o nouă Spațiu este prezentată cu o proprietate de rotație:
Ilustrație a lui Hello World - Kit Sprite. Toate obiectele vizuale sunt redate de către SKView clasă. Unul dintre ele este necesar pentru prezentarea scenelor viitoare. Șablonul Sprite Kit face acest lucru pentru dvs. Uitați-vă la ViewController.m fișier și notează cum viewDidLoad metoda configurează vizualizarea și solicită scena implicită.
În acest pas, vom inițializa tabla de joc. Tabla de joc include fundalul, avionul, animațiile cu elice și o umbră a avionului.
Înainte de a adăuga un sprite, aveți nevoie de opera de arta pentru a fi folosită de sprite. Ar trebui să plasați aceste sprite în folderul Fișierele de susținere a proiectului dvs..
Toate resursele utilizate în acest tutorial sunt concepute pentru rezoluția iPad originală. Descărcați atașamentul acestui post pentru a le accesa.Odată ce ați descărcat resursele pentru această postare, veți găsi 7 imagini. Copiați-le în directorul Fișierele de asistență pentru proiectul dvs. și asigurați-vă că este bifată opțiunea "Copierea elementelor în dosarul grupului de destinație (dacă este necesar)".
Acum, când aveți imaginile, le puteți plasa pe ecran. Sprite Kit este similar cu Cocos2D prin aceea că folosește și o orientare de coordonate care pornește din colțul din stânga jos al ecranului (0,0), iar valorile x și y cresc pe măsură ce vă deplasați în sus și spre dreapta. Acest joc va fi configurat să ruleze în orientare portret, așa că nu ne vom concentra pe orientarea peisajului în acest moment. Configurați acum această setare accesând panoul Setări pentru proiectul dvs., selectând fila "Generalități" și debifând toate opțiunile de sub "Informații despre implementare", cu excepția "Portret".
Acum, veți dori să puneți avionul aproape de fund și de mijlocul axei x.
În MyScene.h, adăugați următorul cod:
@interface MyScene: SKScene CGRect screenRect; CGFloat screenHeight; Lățimea ecranului CGFloat; planul @property SKSpriteNode *;
Aceasta doar declară variabilele pe care le vom folosi în implementare.
În MyScene.m fișier, puteți șterge tot ce este în interiorul dacă (auto = [super initWithSize: dimensiune]) condițional, precum și tot ce se află în interiorul -(void) touchesBegan: (NSSet *) atinge evenimentul Event: (UIEvent *) metodă. Acest lucru va elimina codul de boilerplate inclus în proiect.
Crearea de sprite poate fi realizată utilizând următorul fragment de cod:
// Mai multe dimensiuni init utilizate în toate scenele screenRect = [[UIScreen mainScreen] limite]; screenHeight = screenRect.size.height; screenWidth = screenRect.size.width; // adăugarea avionului _plane = [SKSpriteNode spriteNodeWithImageNamed: @ "PLANE 8 N.png"]; _plane.scale = 0.6; _plane.zPosition = 2; _plane.position = CGPointMake (ecranul / 2, 15 + _plane.size.height / 2); [auto addChild: _plane]; // adăugarea fundalului SKSpriteNode * background = [SKSpriteNode spriteNodeWithImageNamed: @ "airPlanesBackground"]; background.position = CGPointMake (CGRectGetMidX (auto.frame), CGRectGetMidY (auto.frame)); [self addChild: fundal];
Acum puteți construi și rula aplicația. Fundalul și avionul ar trebui să apară foarte bine, similar cu figura următoare. Codul furnizat începe cu inițializarea valorilor ecranului pentru a efectua mai multe calcule în această clasă (veți folosi de mai multe ori). Similar cu Cocos2D, Sprite Kit vine cu proprietăți cum ar fi scala, zPoziția și poziția, care sunt cu adevărat utile. În cele din urmă, pentru a adăuga obiectul la Scena noastră, trebuie doar să folosim addChild metodă. Al treilea bloc de cod va adăuga fundalul în centrul ecranului.
Ilustrație de fundal și avion - Sprite Kit. Dacă ați analizat resursele, vedeți două elici (adică stânga și dreapta) și o umbră a avionului.
Plasarea umbrei avionului ar trebui să fie ușoară pentru dvs. chiar acum. Pentru a obține cea mai bună animație, ar trebui să pornească 15 puncte spre dreapta (axa x) și 15 puncte mai jos (axa y) a avionului.
Acum, vom merge mai departe și adăugați codul pentru a crea o umbră:
În MyScene.h, adăugați următoarele:
@property SKSpriteNode * planeShadow;
Și în Scene.m, adăugați următoarele imediat după [auto addChild: _plane];:
_planeShadow = [SKSpriteNode spriteNodeWithImageNamed: @ "PLANE 8 SHADOW.png"]; _planeShadow.scale = 0.6; _planeShadow.zPosition = 1; _planeShadow.position = CGPointMake (ecranWidth / 2 + 15, 0 + _planeShadow.size.height / 2); [auto addChild: _planeShadow];
A fost ușor, nu? Tocmai adaugam un scut de umbra scena si pozitionandu-l in relatie cu avionul.
Acum, permiteți să treceți la animația elicei. Pentru a face animația, avem două sprite (PLANE PROPELLER 1 și PLANE PROPELLER 2). SKAction-ul vă va permite să creați diferite animații și să faceți mai multe tipuri de acțiuni cu ele. În acest tutorial, trebuie să schimbați între doar două imagini. Pentru a face acest lucru, veți avea nevoie de două metode: animateWithTextures: timePerFrame și repeatActionForever. După cum puteți vedea, denumirile metodelor sunt explicite. Prima metodă va primi texturile (PLANE PROPELLER 1 și 2) și va schimba texturile în timpul definit (timePerFrame). A doua metodă va repeta această acțiune pentru totdeauna.
Pentru a realiza acest lucru, începeți prin adăugarea următoarelor fișiere de antet:
@property SKSpriteNode * elice;
Și înapoi în fișierul de implementare:
_propeller = [SKSpriteNode spriteNodeWithImageNamed: @ "PLANE PROPELLER 1.png"]; _propeller.scale = 0.2; _propeller.position = CGPointMake (ecranWidth / 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 = [repetActionFactor cu repetare: spin]; [runAction pentru propulsor: spinForever]; [self addChild: _propeller];
Construiți și executați codul. Acum este un moment bun pentru a investi câteva minute în explorarea de coduri pentru a învăța structura de bază a proiectului. Trebuie doar să te uiți în jur și să te familiarizezi cu organizația de bază.
Din păcate, în acest moment, avionul este încă static. Pentru a crea mișcarea, veți folosi datele accelerometrului intern și avionul va reacționa la mișcarea fizică a iPad-ului. Rețineți că nu vom explica profund cum funcționează accelerometrul deoarece acest tutorial nu se concentrează pe acel subiect. Cu toate acestea, dacă doriți să aflați mai multe despre accelerometru specific, puteți consulta documentația oficială Apple.
În MyScene.h trebuie să faceți niște modificări. Trebuie să adăugați UIAcelerometerDelegate, două variabile duble pentru ambele valori ale axelor (adică AccelX și AccelY) și o proprietate de administrat CoreMotion.
Finalul tău MyScene.h fișierul ar trebui să semene cu următorul fragment:
#import#import @ interfață MyScene: SKScene ScreenRect; CGFloat screenHeight; Lățimea ecranului CGFloat; curent dubluMaxAccelX; curent dubluMaxAccelY; @property (puternic, nonatomic) CMMotionManager * motionManager; @property SKSpriteNode * plan; @property SKSpriteNode * planeShadow; @property SKSpriteNode * elice; @Sfârșit
Deci, pentru a obține date despre accelerometru, trebuie să adăugați un cod la sfârșitul metodei -(Id) initWithSize: (CGSize) dimensiunea metodă. În timp ce se află încă în dacă (auto = [super initWithSize: dimensiune]) condiționată, adăugați următorul cod în locul în care ați terminat:
// CoreMotion self.motionManager = [[CMMotionManager alocare] init]; self.motionManager.accelerometerUpdateInterval = .2; [self.motionManager startAccelerometerUpdatesToQueue: [NSOperationQueue currentQueue] cuHandler: ^ (CMAccelerometerData * accelerometerData, eroare NSError *) [auto outputAccelertionData: accelerometerData.acceleration]; dacă (eroare) NSLog (@ "% @", eroare); ];
Acum, adăugați următoarea metodă la fișierul de implementare:
-(void) outputAccelertionData: accelerare CMA (accelerare CMA) currentMaxAccelX = 0; curentMaxAccelY = 0; dacă (fabs (acceleration.x)> fabs (currentMaxAccelX)) currentMaxAccelX = acceleration.x; dacă (fabs (acceleration.y)> fabs (currentMaxAccelY)) currentMaxAccelY = acceleration.y;
Acum, că aveți valorile accelerometrului iPad, le vom folosi în pasul următor prin mutarea avionului!
Cu valorile setului de accelerometru, trebuie să le aplicați pentru a deplasa avionul. Sprite Kit folosește o metodă -(Void) actualizare: (NSTimeInterval) currentTime pentru a actualiza totul în joc. Deci, pentru a deplasa avionul trebuie doar să actualizați poziția tuturor spritelor (avionul, umbra și elicele). Înlocuiți sau adăugați metoda de actualizare cu următorul cod:
-(void) actualizare: (NSTimeInterval) currentTime // NSLog (@ "o secundă"); flotare maxY = ecranWidth - _plane.size.width / 2; flotare minY = _plane.size.width / 2; flotare maxx = screenHeight - _plane.size.height / 2; flotare minX = _plane.size.height / 2; float newY = 0; float newX = 0; dacă (curentMaxAccelX> 0,05) newX = currentMaxAccelX * 10; _plane.texture = [SKTexture textureWithImageNamed: @ "PLANE 8 R.png"]; altfel dacă (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);
Două lucruri majore se întâmplă în metoda de actualizare: actualizați poziția și schimbați sprite-ul afișat.
Dacă iPad-ul se rotește la stânga, sprite-ul avionului va fi schimbat pentru "PLANE 8 L.png". Alternativ, dacă iPad-ul se rotește la dreapta, sprite-ul avionului se va schimba pentru "PLANE 8 R.png".
În cele din urmă, continuați și testați codul de mișcare. Ar trebui să vedeți ceva similar cu următoarea imagine:
Ilustrația Kitului de deplasare a avionului - Sprite. Acesta este sfârșitul primului tutorial! În acest moment, trebuie să înțelegeți cum să efectuați următoarele activități:
Dacă oricare dintre cele de mai sus este încă "fuzzy", aruncați o privire la codul pe care l-am creat mai sus. Rămâi acordat pentru următoarea tranșă din această serie în care vom continua să construim jocul nostru de avioane!
Accentsconagua