Share
Questo tutorial ti insegnerà come utilizzare il framework Sprite Kit per creare un semplice gioco di aeroplani. Lungo la strada, imparerai tutti i concetti chiave di Sprite Kit: animazioni, emettitori, rilevamento di collisioni e altro ancora!
Il tutorial sugli aerei sarà diviso in tre parti al fine di coprire completamente ogni sezione. Dopo aver letto il tutorial in tre parti, i lettori saranno in grado di creare un interessante gioco 2D usando il nuovo framework Sprite Kit fornito con iOS 7.
Ogni parte produrrà un risultato pratico e la somma di tutte le parti produrrà il gioco finale. Mentre ogni parte della serie può essere letta indipendentemente, ti consigliamo di seguire passo dopo passo per una comprensione completa dell'argomento presentato. Il codice sorgente del gioco viene fornito in modo incrementale con ogni post.
Illustrazione del risultato finale - Kit Sprite. Bentornati alla seconda parte del nostro gioco Airplanes con Sprite Kit. Nel tutorial di oggi, programmerai un emettitore che formerà la scia del fumo di un aeroplano. Questa parte del tutorial si concentra su diverse cose come movimenti, tocchi e così via, ma spiegheremo tutto di seguito. Se non hai ancora completato la parte 1 della serie, puoi scaricare il progetto dalla parte 1 e riprendere esattamente da dove eravamo rimasti.
Le particelle sono utilizzate per ottenere diversi tipi di effetti come fuoco, fumo, magia, pioggia, neve o cascate. In questo caso, li useremo per creare una scia di fumo per il tuo aereo. La particella rimarrà attivata per tutta la durata del gioco.
Fortunatamente, Xcode 5 ha introdotto un editor di emettitori come funzionalità integrata. Questo è uno strumento estremamente utile e ci consentirà di modificare facilmente proprietà come la particella, il colore di sfondo, la particella nativa, le particelle massime, la durata, la posizione, l'intervallo, la velocità, l'accelerazione, la scala, la rotazione e altro. Per impostazione predefinita, Xcode 5 fornisce anche diversi emettitori chiavi in mano pronti per l'uso. Quindi, iniziamo e aggiungiamo un emettitore al nostro gioco.
Le immagini delle particelle necessarie sono disponibili nella cartella Risorse del download allegato.Per aggiungere un emettitore al tuo gioco, devi andare a File> Nuovo> File ... . Vedrai qualcosa come la seguente immagine:
Illustrazione della creazione di SpriteKit Emitter File (Xcode). Seleziona il iOS> Resource and SpriteKit Particle File opzione (come nella figura sopra). Fare clic su Avanti. Ora ti verrà chiesto quale modello desideri utilizzare. Sono disponibili 8 diversi modelli. Selezionare il modello di fumo e fare clic su Avanti, quindi dargli un nome (abbiamo chiamato il nostro "percorso") e fare clic su Crea. Xcode aggiungerà due nuovi file al tuo progetto (trail.sks e spark.png). È necessario modificare il numero di particelle, la trama, l'intervallo di posizione, l'angolo e la scala per ottenere i migliori risultati. Dai un'occhiata alla nostra configurazione:
Illustrazione delle proprietà dell'emettitore (Xcode). Ora, aggiungiamo il fumo al nostro aereo.
Entro MyScene.h, aggiungi una proprietà della pista di fumo:
@property SKEmitterNode * smokeTrail;
Alla fine di if (self = [super initWithSize: size]) condizionale in MyScene.m, aggiungi il seguente snippet:
// aggiunta di smokeTrail NSString * smokePath = [[NSBundle mainBundle] pathForResource: @ "Smoke" ofType: @ "sks"]; _smokeTrail = [NSKeyedUnarchiver unarchiveObjectWithFile: smokePath]; _smokeTrail.position = CGPointMake (screenWidth / 2, 15); [self addChild: _smokeTrail];
Ovviamente, quando l'aeroplano si muove, anche il sentiero deve muoversi. Alla fine di -(Vuoto) aggiornamento: (NSTimeInterval) currentTime metodo, aggiungi questa riga:
_smokeTrail.position = CGPointMake (newX, newY - (_ plane.size.height / 2));
Costruisci ed esegui il progetto e se tutto è andato bene sarà fantastico!
Dovresti vedere qualcosa di simile al seguente:
Illustrazione delle proprietà dell'emettitore (Xcode). Finora, hai solo l'aereo in movimento sullo schermo. Ma il divertimento inizia quando più aerei diventano disponibili. Quindi, aggiungiamo alcuni aerei nemici!
Non solo devi creare nemici, ma devi anche definire un percorso casuale per ciascuno per simulare un vero campo di battaglia. Per raggiungere questo, userai l'azione followPath. Creerai percorsi casuali (con CGPath) e poi ogni nemico si muoverà su quel percorso.
Un grande metodo che abbiamo dovuto fare con Cocos2D è stato pianificazione: Intervallo:. Sfortunatamente, Apple non ha aggiunto un metodo simile a Sprite Kit, ma è facile crearne uno simile usando SKActions. Per raggiungere questo programma, dobbiamo creare un SKAction chiedendo un metodo waitForDuration. Dopodiché, creeremo un SKAction che può eseguire un blocco e usarlo per chiamare il metodo che aggiunge nemici. Quindi, inseriremo queste due azioni in sequenza e diremo semplicemente di ripeterle nel tempo.
Per ricreare la spiegazione avrai solo bisogno del seguente frammento. Aggiungilo alla fine del condizionale se if (self = [super initWithSize: size]):
// pianificare i nemici SKAction * wait = [SKAction waitForDuration: 1]; SKAction * callEnemies = [SKAction runBlock: ^ [self EnemiesAndClouds]; ]; SKAction * updateEnimies = [sequenza di SKAction: @ [wait, callEnemies]]; [self runAction: [SKAction repeatActionForever: updateEnimies]];
Abbastanza facile? Se avete domande, non esitate a chiedere loro all'interno della sezione commenti.
Ora devi aggiungere il metodo che crea i percorsi di movimento per i nemici da seguire. Scegliamo di usare il CGPathAddCurveToPoint, poiché questo metodo crea una curva di Bézier con due punti di controllo. La seguente immagine spiega come funziona:
Illustrazione di Bézier Curve Creation (Xcode). Quindi, è necessario aggiungere il seguente codice al nostro MyScene.m file:
-(void) EnemiesAndClouds // non sempre viene int GoOrNot = [self getRandomNumberBetween: 0 to: 1]; if (GoOrNot == 1) SKSpriteNode * nemico; int randomEnemy = [self getRandomNumberBetween: 0 a: 1]; if (randomEnemy == 0) enemy = [SKSpriteNode spriteNodeWithImageNamed: @ "PLANE 1 N.png"]; else enemy = [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 = CGPathCreateMutable (); // valori casuali float xStart = [self getRandomNumberBetween: 0 + enemy.size.width a: screenRect.size.width-enemy.size.width]; float xEnd = [self getRandomNumberBetween: 0 + enemy.size.width a: screenRect.size.width-enemy.size.width]; // ControlPoint1 float cp1X = [self getRandomNumberBetween: 0 + enemy.size.width a: screenRect.size.width-enemy.size.width]; float cp1Y = [self getRandomNumberBetween: 0 + enemy.size.width a: screenRect.size.width-enemy.size.height]; // ControlPoint2 float cp2X = [self getRandomNumberBetween: 0 + enemy.size.width a: screenRect.size.width-enemy.size.width]; float cp2Y = [self getRandomNumberBetween: 0 a: 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 durata: 5]; [autoaggiunta: nemico]; SKAction * remove = [SKAction removeFromParent]; [actionAzione nemica: [sequenza SKAction: @ [planeDestroy, remove]]]; CGPathRelease (cgpath); - (int) getRandomNumberBetween: (int) da a: (int) a return (int) da + arc4random ()% (a-da + 1);
Il enemiesAndClouds il metodo aggiunge solo nemici per ora. Aspetteremo di aggiungere nuvole nella terza e ultima parte di questa serie.
L'essenza di questo metodo sta generando valori casuali. In primo luogo, deciderà se un nuovo nemico verrà rilasciato, quindi creerà la sua posizione. In seguito crea i punti di controllo nemici e, infine, vengono create le azioni.
Quando aggiungiamo o rimuoviamo uno sprite sullo schermo, dobbiamo assicurarci che l'allocazione della memoria e la deallocazione siano trattate con cura e successo. L'azione
Accentsconagua
removeFromParent si prende cura di questo per noi. Ora, costruisci ed esegui il progetto e osserva come i nemici iniziano ad apparire sullo schermo.
Illustrazione dei nemici (Xcode). Per rendere il gioco divertente, i nostri nemici devono essere distruttibili. Aggiungerai alcuni proiettili al tuo aereo per raggiungere questo obiettivo. Per fare questo, dovremo fare quanto segue:
Sostituisci il touchesBegan metodo con il seguente frammento:
-(vuoto) touchBegan: (NSSet *) tocca Evento: (UIEvent *) evento / * Chiamato all'avvio di un tocco * / Posizione CGPoint = [posizione di piano]; SKSpriteNode * bullet = [SKSpriteNode spriteNodeWithImageNamed: @ "B 2.png"]; bullet.position = CGPointMake (location.x, location.y + _plane.size.height / 2); //bullet.position = posizione; 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 sequence: @ [action, remove]]]; [self addChild: bullet];
Costruisci e gestisci il tuo progetto. Se vuoi sparare un proiettile devi solo toccare lo schermo!
Hai raggiunto la fine del secondo tutorial della nostra serie.
A questo punto, dovresti capire ed essere in grado di svolgere le seguenti attività:
Restate sintonizzati per la prossima puntata di questa serie, in cui continueremo a costruire il nostro gioco aereo!
Vorremmo ringraziare Daniel Ferenčak per averci fornito l'arte del gioco usata per produrre questa serie di tutorial.
Per apprezzare appieno la serie di tutorial, ti consigliamo di testare il nostro codice distribuendolo su un dispositivo reale con iOS 7. Avrai bisogno di Xcode 5 e dell'ultimo iOS 7 SDK. Se non disponi già di questi strumenti, puoi scaricarli dall'Apple Developer Center. Una volta scaricato, installa il software e sarai pronto per iniziare.
