Accentsconagua

Crea un gioco aereo con Sprite Kit - Explosions & Clouds

Codice
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!

Formato della serie

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.

  • Crea un gioco aereo con Sprite Kit - Impostazione del progetto
  • Crea un gioco aereo con Sprite Kit - Nemici ed emettitori
  • Crea un gioco aereo con Sprite Kit - Explosions & Clouds

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.

Anteprima finale

Illustrazione del risultato finale - Kit Sprite.

Da dove siamo partiti ...

Bentornati alla terza parte del nostro gioco aereo con Sprite Kit. Nel nostro ultimo post, ci siamo concentrati sull'aggiunta di nemici ed emettitori al gioco. Nel tutorial di oggi, programmerai il rilevamento delle collisioni, lavorerai con un atlante di texture e creerai alcune esplosioni per completare il gioco. Iniziamo!

1. Aggiunta del rilevamento collisioni

I test di intersezione sono frequentemente utilizzati in ambienti in cui esiste più di un oggetto. In Sprite Kit, userai Collisioni e Contatti per rilevare se un dato oggetto colpisce un altro oggetto.

In questo gioco, utilizzerai il rilevamento delle collisioni. Quando un proiettile entra in contatto con un nemico, sia il proiettile che il nemico saranno rimossi dallo schermo.

Per fare ciò, è necessario definire i valori della maschera di categoria. Ci dovrebbe essere una categoria per ciascun oggetto fisico. Nel MyScene.h, aggiungi il seguente codice:

static const uint8_t bulletCategory = 1; static const uint8_t enemyCategory = 2;

Ora, mentre sei ancora in MyScene.h, aggiungi SKPhysicsContactDelegate come abbiamo fatto prima con il UIAccelerometerDelegate.

@interface MyScene: SKScene

Prima di poter utilizzare la fisica, è necessario avviare le impostazioni di fisica. Al if (self = [super initWithSize: size]) condizionale, istanziare la gravità con un valore 0 (cioè senza gravità) e quindi il delegato di contatto:

self.physicsWorld.gravity = CGVectorMake (0, 0); self.physicsWorld.contactDelegate = self;

I due corpi che hanno bisogno di fisica sono il proiettile e i nemici. Impostiamo diverse proprietà per ognuna. Aggiungiamo il codice qui sotto all'interno del -(nulli) EnemiesAndClouds metodo:

enemy.physicsBody = [SKPhysicsBody bodyWithRectangleOfSize: enemy.size]; enemy.physicsBody.dynamic = YES; enemy.physicsBody.categoryBitMask = enemyCategory; enemy.physicsBody.contactTestBitMask = bulletCategory; enemy.physicsBody.collisionBitMask = 0;

Il codice sopra afferma che l'area di contatto dell'aereo sarà un rettangolo che ha le dimensioni dello sprite nemico. La proprietà dinamica indica se il corpo fisico viene spostato dalla simulazione fisica. Quindi, il categoryBitMask è dove si imposta la categoria per l'oggetto, e il contactTestBitMask si riferisce a quali corpi interagiranno i nemici (in questo caso con i proiettili).

Ora definiamo la fisica per l'oggetto bullet. All'interno del -(vuoto) touchBegan: (NSSet *) tocca Evento: (UIEvent *) evento metodo, il codice di riferimento dovrebbe essere modificato per aggiungere:

bullet.physicsBody = [SKPhysicsBody bodyWithRectangleOfSize: bullet.size]; bullet.physicsBody.dynamic = NO; bullet.physicsBody.categoryBitMask = bulletCategory; bullet.physicsBody.contactTestBitMask = enemyCategory; bullet.physicsBody.collisionBitMask = 0;

Finora, hai definito le proprietà per le collisioni. Tuttavia, dobbiamo rilevare se viene effettuato un contatto.

Devi usare il metodo didBeginContact per sapere quali oggetti hanno contatto con altri oggetti. Quindi, il codice seguente calcola i due corpi che hanno contattato e li rimuove contemporaneamente dalla scena:

-(void) didBeginContact: (SKPhysicsContact *) contact SKPhysicsBody * firstBody; SKPhysicsBody * secondBody; if (contact.bodyA.categoryBitMask < contact.bodyB.categoryBitMask)  firstBody = contact.bodyA; secondBody = contact.bodyB;  else  firstBody = contact.bodyB; secondBody = contact.bodyA;  if ((firstBody.categoryBitMask & bulletCategory) != 0)  SKNode *projectile = (contact.bodyA.categoryBitMask & bulletCategory) ? contact.bodyA.node : contact.bodyB.node; SKNode *enemy = (contact.bodyA.categoryBitMask & bulletCategory) ? contact.bodyB.node : contact.bodyA.node; [projectile runAction:[SKAction removeFromParent]]; [enemy runAction:[SKAction removeFromParent]];

Abbastanza semplice, vero? Adesso, costruisci ed esegui. Se tutto è andato a posto, il nemico e il proiettile spariranno quando si scontreranno.

2. Incorporazione di un atlante di trama

Il nostro gioco è quasi completo, ma richiede un po 'di azione e animazione. I prossimi due passaggi aggiungeranno esplosioni e alcune animazioni di sfondo fatte dalle nuvole.

Finora, non abbiamo usato Texture Atlas. Sprite Kit include un generatore di texture atlas che ha diverse caratteristiche interessanti. In Xcode 5, puoi creare un atlante di texture con i seguenti passaggi:

  1. Metti tutti gli sprite in una singola cartella. Per il nostro progetto, è possibile trovare tutte le immagini nel download allegato nella cartella "ESPLOSIONE".
  2. Cambia l'estensione della cartella in * .atlas. Nel nostro caso, rinomina ESPLOSIONE in EXPLOSION.atlas.
  3. Trascina e rilascia la cartella nel progetto. L'ho aggiunto alla cartella dei file di supporto all'interno del navigatore Xcode.
  4. Assicurati che l'opzione "Abilita generazione di texture Altas" sia attiva. Per verificarlo, vai alle Impostazioni di costruzione del tuo progetto.

Questo è tutto. Ancora una volta, le immagini per questa parte sono disponibili nella cartella Risorse del download allegato.

Ora, è necessario caricare l'atlante di texture nel progetto.

Entro MyScene.h Inserisci:

@property NSMutableArray * explosionTextures;

Alla fine di if (self = [super initWithSize: size]) condizionale, aggiungi il seguente frammento di codice:

// load explosions SKTextureAtlas * explosionAtlas = [SKTextureAtlas atlasNamed: @ "EXPLOSION"]; NSArray * textureNames = [explosionAtlas textureNames]; _explosionTextures = [NSMutableArray new]; for (nome NSString * in textureNames) SKTexture * texture = [explosionAtlas textureNamed: name]; [_explosionTextures addObject: texture];

3. Aggiunta di esplosioni

Una volta caricate le esplosioni, è necessario un altro passaggio per vederle in azione. Ora creerai un'esplosione che si verifica quando un proiettile colpisce un nemico. Alla fine del condizionale se if ((firstBody.categoryBitMask & bulletCategory)! = 0), aggiungi il seguente snippet:

 // aggiungi esplosione SKSpriteNode * explosion = [SKSpriteNode spriteNodeWithTexture: [_ explosionTextures objectAtIndex: 0]]; explosion.zPosition = 1; explosion.scale = 0.6; explosion.position = contact.bodyA.node.position; [autoinserimento: esplosione]; SKAction * explosionAction = [SKAction animateWithTextures: _explosionTextures timePerFrame: 0.07]; SKAction * remove = [SKAction removeFromParent]; [esplosione runAction: [SKAction sequence: @ [explosionAction, remove]]];

Costruisci ed esegui il progetto per testare l'animazione di collisione ed esplosione. Dovresti vedere qualcosa come la prossima figura:

Illustrazione di Explosion (Xcode).

4. Aggiunta di nuvole

Abbiamo quasi completato il gioco! Questo è solo l'ultimo tocco. Ora è necessario creare l'atlante delle nuvole e quindi caricare l'atlante delle texture in memoria.

Prima di scrivere il codice per questo passaggio, assicurati di aggiungere l'estensione .atlas alla cartella "Nuvole" nel download allegato e trascinarla nel tuo progetto.

All'interno del MyScene.h file aggiungere quanto segue:

@property NSMutableArray * cloudsTextures;

All'interno del MyScene.m file, sotto il codice "load explosions", aggiungi quanto segue:

 // load clouds SKTextureAtlas * cloudsAtlas = [SKTextureAtlas atlasNamed: @ "Clouds"]; NSArray * textureNamesClouds = [cloudsAtlas textureNames]; _cloudsTextures = [NSMutableArray new]; for (nome NSString * in textureNamesClouds) SKTexture * texture = [cloudsAtlas textureNamed: name]; [_cloudsTextures addObject: texture];

L'ultimo passaggio consiste nel generare casualmente nuvole e presentarle sullo schermo con un certo movimento. È necessario aggiungere il seguente snippet alla fine del EnemiesAndClouds metodo:

 // random Clouds int randomClouds = [self getRandomNumberBetween: 0 a: 1]; if (randomClouds == 1) int whichCloud = [self getRandomNumberBetween: 0 a: 3]; SKSpriteNode * cloud = [SKSpriteNode spriteNodeWithTexture: [_ cloudsTextures objectAtIndex: whichCloud]]; int randomYAxix = [self getRandomNumberBetween: 0 to: screenRect.size.height]; cloud.position = CGPointMake (screenRect.size.height + cloud.size.height / 2, randomYAxix); cloud.zPosition = 1; int randomTimeCloud = [self getRandomNumberBetween: 9 to: 19]; SKAction * move = [SKAction moveTo: CGPointMake (0-cloud.size.height, randomYAxix) duration: randomTimeCloud]; SKAction * remove = [SKAction removeFromParent]; [cloud runAction: [sequenza SKAction: @ [sposta, rimuovi]]]; [self addChild: cloud];

Costruisci ed esegui nuovamente il progetto. Se tutto va bene, dovresti vedere qualcosa come la prossima figura:

Illustrazione del gioco finale (Xcode).

Conclusione

Questo conclude il terzo e ultimo tutorial che dimostra come creare un gioco di aeroplani usando il nuovo framework Sprite Kit disponibile con iOS 7 SDK. Se hai seguito questa serie dall'inizio alla fine, ora dovresti avere abbastanza conoscenze per creare un semplice gioco Sprite Kit usando questo dinamico motore di gioco. Se avete domande o commenti, non esitate a lasciarli qui sotto!

Riconoscimenti e raccomandazioni

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.

Codice
×