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. Bine ați venit în partea a doua a jocului Avioane cu Sprite Kit. În tutorialul de astăzi, veți programa un emițător care va forma traseul de fum al unui avion. Această parte tutorial se concentrează asupra mai multor lucruri, cum ar fi mișcări, atingeri și așa mai departe, dar vom explica totul mai departe. Dacă nu ați finalizat încă Partea 1 a seriei, puteți descărca proiectul din partea 1 și preluarea exact acolo unde am rămas.
Particulele sunt folosite pentru a obține multe tipuri diferite de efecte cum ar fi focul, fumul, magia, ploaia, zăpada sau cascadele. În acest caz, le vom folosi pentru a crea un traseu de fum pentru avion. Particula va rămâne activă pe durata jocului.
Din fericire, Xcode 5 a introdus un Editor Emitter ca o caracteristică încorporată. Acesta este un instrument extrem de util și ne va permite să editați cu ușurință proprietăți precum textura particulelor, culoarea de fundal, particula de naștere, particulele maxime, durata de viață, poziția, intervalul, unghiul, viteza, accelerația, scala, rotația și multe altele. În mod implicit, Xcode 5 oferă, de asemenea, mai mulți emițători la cheie gata pentru utilizare. Deci, permiteți începerea și adăugați un emițător la jocul nostru.
Imaginile de particule necesare sunt disponibile în dosarul Resurse al descărcării atașate.Pentru a adăuga un emițător la jocul dvs., trebuie să mergeți la Fișier> Nou> Fișier ... . Veți vedea ceva asemănător cu următoarea imagine:
Ilustrația creării fișierului emițător SpriteKit (Xcode). Selectează iOS> Resource și SpriteKit Particle File (ca în figura de mai sus). Faceți clic pe Următorul. Acum, vi se va întreba ce șablon doriți să utilizați. Există 8 șabloane diferite disponibile. Selectați șablonul de fum și faceți clic pe Următorul, apoi dați-i un nume (denumit "trail" nostru) și faceți clic pe Creați. Xcode va adăuga două fișiere noi la proiectul dvs. (trail.sks și spark.png). Trebuie să modificați numărul de particule, textura, intervalul de poziție, unghiul și scala pentru rezultate optime. Aruncați o privire la configurația noastră:
Ilustrarea proprietăților emițătorului (Xcode). Acum, să adăugăm fumul la avionul nostru.
În MyScene.h, adăugați o proprietate traseu de fum:
@property SKEmitterNode * smokeTrail;
La sfârșitul dacă (auto = [super initWithSize: dimensiune]) condiționată în MyScene.m, adăugați următorul fragment:
// adăugând smokeTrail NSString * smokePath = [[NSBundle mainBundle] pathForResource: @ "Smoke" dinType: @ "sks"]; _smokeTrail = [NSKeyedUnarchiver unarchiveObjectWithFile: smokePath]; _smokeTrail.position = CGPointMake (ecranWidth / 2, 15); [self addChild: _smokeTrail];
Desigur, atunci când avionul se mișcă, traseul trebuie să se miște prea. La sfârșitul -(Void) actualizare: (NSTimeInterval) currentTime adăugați această linie:
_smokeTrail.position = CGPointMake (newX, newY - (_ plane.size.height / 2));
Construiți și conduceți proiectul și, dacă totul merge bine, va fi minunat!
Ar trebui să vedeți ceva de genul:
Ilustrarea proprietăților emițătorului (Xcode). Până acum, avionul se mișcă în jurul ecranului. Dar distracția începe când mai multe avioane devin disponibile. Deci, să adăugăm niște avioane inamice!
Nu numai că trebuie să creați dușmani, dar trebuie să definiți o cale aleatorie pentru fiecare, pentru a simula un câmp de luptă real. Pentru a realiza acest lucru, veți utiliza acțiunea followPath. Veți crea căi aleatorii (cu CGPath) și apoi fiecare dușman se va deplasa peste acea cale.
O mare metodă pe care a trebuit să o facem cu Cocos2D a fost program: interval:. Din păcate, Apple nu a adăugat o metodă similară modelului Sprite Kit, dar este ușor să creezi unul similar folosind SKActions. Pentru a realiza acest program, trebuie să creați un SKAction cerând o metodă waitForDuration. După aceea, vom crea o SKAction care poate rula un bloc și îl poate folosi pentru a apela metoda care adaugă inamici. Apoi, vom pune aceste două acțiuni într-o secvență și vom spune să o repetăm de-a lungul timpului.
Pentru a crea o explicație, veți avea nevoie doar de următorul fragment. Adăugați-l la sfârșitul condiției if dacă (auto = [super initWithSize: dimensiune]):
// programați inamicii SKAction * așteptați = [SKAction waitForDuration: 1]; SKAction * callEnemies = [SKAction runBlock: ^ [self EnemiesAndClouds]; ]; SKAction * updateEnimies = [Succesiune: @ [wait, callEnemies]]; [auto runAction: [SKAction repeatActionForever: updateEnimies]];
Destul de usor? Dacă aveți întrebări, nu ezitați să le întrebați în secțiunea de comentarii.
Acum trebuie să adăugați metoda care creează căile de mișcare pentru urmărirea dușmanilor. Noi alegem să folosim CGPathAddCurveToPoint, deoarece această metodă creează o curbă Bézier cu două puncte de control. Următoarea imagine explică modul în care funcționează:
Ilustrația creării curbei Bézier (Xcode). Deci, trebuie să adăugați următorul cod la adresa noastră MyScene.m fişier:
-(void) EnemiesAndClouds // nu intotdeauna int int GoOrNot = [auto getRandomNumber intre: 0 la: 1]; dacă (GoOrNot == 1) SKSpriteNode * inamic; int randomEnemy = [auto getRandomNumber între: 0 la: 1]; dacă (randomEnemy == 0) inamicul = [SKSpriteNode spriteNodeWithImageNamed: @ "PLANE 1 N.png"]; altfel inamicul = [SKSpriteNode spriteNodeWithImageNamed: @ "PLANE 2 N.png"]; enemy.scale = 0.6; enemy.position = CGPointMake (screenRect.size.width / 2, screenRect.size.height / 2); enemy.zPosition = 1; CGMutablePathRef cgpath = CGPathCreateMutabil (); // valori aleatoare float xStart = [auto getRandomNumber între: 0 + enemy.size.width to: screenRect.size.width-enemy.size.width]; float xEnd = [auto getRandomNumber între: 0 + enemy.size.width to: screenRect.size.width-enemy.size.width]; // ControlPoint1 float cp1X = [auto getRandomNumber între: 0 + enemy.size.width to: screenRect.size.width-enemy.size.width]; float cp1Y = [auto getRandomNumber între: 0 + enemy.size.width to: screenRect.size.width-enemy.size.height]; // ControlPoint2 float cp2X = [auto getRandomNumber între: 0 + enemy.size.width to: screenRect.size.width-enemy.size.width]; float cp2Y = [auto getRandomNumber între: 0 până la: 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 asAffset: NU orientToPath: YES duration: 5]; [auto adăugaChild: inamic]; SKAction * remove = [SKAction removeFromParent]; [runAction inamic: [secvența SKAction: @ [planeDestroy, remove]]; CGPathRelease (cgpath); - (int) getRandomNumber Între: (int) de la la: (int) la return (int) de la + arc4random ()% (până la + 1);
enemiesAndClouds metoda adaugă în prezent numai dușmani. Vom aștepta să adăugăm nori în a treia și ultima parte a acestei serii.
Esența acestei metode generează valori aleatorii. În primul rând, va decide dacă un nou inamic va fi eliberat, atunci își va crea poziția. După aceea, creează punctele de control inamice și, în final, acțiunile sunt create.
Atunci când adăugăm sau eliminăm un sprite pe ecran, trebuie să ne asigurăm că alocarea și dezafectarea memoriei sunt tratate cu grijă și succes. Actiunea
Accentsconagua
removeFromParent are grijă de asta pentru noi. Acum, construiți și conduceți proiectul și urmăriți cum inamicii încep să apară pe ecran.
Ilustrația dușmanilor (Xcode). Pentru a distra jocul, dușmanii noștri trebuie să fie distruși. Veți adăuga câteva gloanțe în avion pentru a realiza acest lucru. Pentru a face acest lucru, va trebui să facem următoarele:
Inlocuieste touchesBegan cu următorul fragment:
-(void) touchesBegan: (NSSet *) atinge cu EventEvent: (UIEvent *) eveniment / * Numit atunci când o atingere incepe * / CGPoint location = [pozitie plane]; SKSpriteNode * bullet = [SKSpriteNode spriteNodeWithImageNamed: @ "B 2.png"]; bullet.position = CGPointMake (loc.x, loc.y + _plane.size.height / 2); //bullet.position = locație; bullet.zPosition = 1; bullet.scale = 0.8; SKAction * action = [deplasare SKAction: auto.frame.size.height + bullet.size.height duration: 2]; SKAction * remove = [SKAction removeFromParent]; [rangul runAction: [secvența SKAction: @ [action, remove]]; [self addChild: bullet];
Construiți și conduceți proiectul. Dacă doriți să trageți un glonț, trebuie doar să atingeți ecranul!
Ați ajuns la sfârșitul celui de-al doilea tutorial din seria noastră.
În acest moment, trebuie să înțelegeți și să puteți efectua următoarele activități:
Rămâi acordat pentru următoarea tranșă din această serie, unde vom continua să construim jocul nostru de avioane!
Am dori să-i mulțumim lui Daniel Ferenčak pentru că ne-a oferit arta jocului folosită pentru a produce această serie de tutori.
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.
