Creiamo un gioco simile a Jetpack usando LevelHelper e SpriteHelper. lasers e coins

Articolo scritto da Gabriele Carbonai    1 Commento

Prefazione: Questi tutorial sono stati tradotti dall’Inglese all’Italiano sotto gentile concessione di
ray Wenderlich. Il link originale e i crediti li trovate a fondo di ogni articolo.
Per una comodità di impaginazione i tutorial sono stati divisi in più parti

Continua la serie di tutorial che ci insegna come creare un gioco simile a Jetpack Joyride,
precedentemente abbiamo visto e preso familiarità con i software LevelHelper e spriteHelper e come aggiungere gli oggetti al livello.

In questa parte vedremo come aggiungere dei movimenti e delle attività al gioco: laser, monete volo e l’inizio del codice di collisione.

iniziamo

Il prossimo passo sarà quello di creare alcune interazioni tra gli oggetto come le monete e il laser.
Aggiungere questi elementi è un ottima soluzione per iniziare ad imparare come implementare animazioni e sensori utilizzando LevelHelper.

Dato che vogliamo che il nostro laser si accenda e si spenga, abbiamo bisogno di crearle un animazione, per quanto riguarda le monete vogliamo sapere quando il personaggio principale ha una collisione.

Essendo alle prese con le basi dell’animazione e della collisione, espanderemo i concetti ad altri elementi del nostro gioco, compreso lo sprite principale.
Si imparerà a creare i tag per tenere traccia delle collisioni.

Prima di proseguire, sarebbe buona cosa quella di aprire il progetto in corso su LevelHelper e di salvare il livello con il nome di level03, in modo da non toccare quello fatto in precedenza.
Se si esegue questa operazione, assicurarsi di aggiungere il nuovo livello all’interno del progetto di Xcode e di modificare la linea di chiamata al livello all’interno del codice.

lh = [[LevelHelperLoader alloc] initWithContentOfFile:@"level03"];

Lavoriamo con le animazioni: aggiungiamo il laser

Il modo in cui useremo le animazioni in questo gioco è abbastanza semplice.
Quando il giocatore entra in contatto con il laser, dobbiamo solo verifiche che il frame sia acceso.

Se il laser è spento lasceremo la possibilità allo sprite di passarci attraverso, altrimenti se è acceso il nostro personaggio verrà ucciso.

Per creare l’animazione per i nostri laser, vai sulla lista sprites disponibile sul pannello di destra in LevelHelper e clicca con il tasto destro su uno degli sprite laser, infine scegli “Open SpriteHelper scene” sul menu.

SpriteHelper si aprirà con la corretta scena.
Passiamo ora alla sezione “Animation”, il menu a tab in alto a destra e clicchiamo sul simbolo + per aggiungere una nuova animazione, quindi doppio click sul nome di animazione e lo chiamiamo “Laser”.

Ora andiamo nella lista degli sprite e selezioniamo il laser verticale.
Torniamo alla sezione animazione e clicchiamo su “Add Frame”. Questo aggiunge i due sprite per l’animazione.

Disponiamo in modo corretto l’ordine dei frame di animazione (laser off, e poi laser1, laser2) facendo clic sulle frecce su e giu. Impostare la velocità (speed) a 3 e assicurarsi che sia attiva l’opzione “Loop forever”

Quando abbiamo finito premere la combinazione di tasti cmd + S per salvare il progetto.

Ora torniamo in LevelHelper per lavorare con l’animazione che abbiamo appena creato.
Vedremo che una sezione animazioni è già stato aggiunto per noi in LevelHelper, come nell’immagine qui sotto.

Ci sono due soluzioni per attivare l’animazione. Mostrerò entrambi.
Il primo è quello di trascinare l’animazione nel livello proprio come abbiamo fatto con gli sprite.

la seconda è quello di collegare l’animazione di uno sprite che è già presente nel livello. In questo caso, sto aggiungendo l’animazione allo sprite laser.

Vai alla sezione degli sprites. Non abbiamo ancora aggiunto il laser al livello, quindi trasciniamo uno di loro (non importa quale) dalla lista nel livello, e assicurariamoci che sia selezionata sprite. Poi andiamo alla sezione delle proprierà generale e selezioniamo l’animazione Laser dall’elenco.

Procediamo con l’aggiunta del laser all’interno del livello fino ad una quantità soddisfacente.
è possibile ruotare e scalare il laser utilizzando le maniglie che appaiono quando si seleziona uno sprite.

Se guardiamo la forma laser si può vedere che la sprite è un rettangolopieno.

In questo modo il nostro personaggio morirà toccando il rettangolo e quindi avremo una sensazione errata durante il gioco, invece noi vogliamo che il topo muoia solo quando toccherà effettivamente il laser.

Per fare questo possiamo definire una forma come abbiamo fatto per il cane e il gatto, oppure possiamo modificare la proprietà Border Shape sotto il menu di “Physics” utilizzando i valori predefiniti. Dal momento che si sa già come creare una forma con i punti, proviamo così il secondo modo.

Selezioniamo l’immagine laser1 all’interno della sezione Immagini di LevelHelper.
Facciamo clic con il pulsante destro su di esso e selezionare “Open SpriteHelper Scene”.

Una volta che la scena è aperta, fare clic sul sprite “laser1″. Poiché il laser è una animazione, abbiamo bisogno di modificare le proprietà fisiche del primo fotogramma dell’animazione – in questo caso la sprite “laser1″. Le animazioni hanno le proprietà fisiche del primo fotogramma.

Con laser1 selezionato, andiamo al menu “Physics” e inseriamo 70 e 40 per i valori bordo della forma. Questo renderà la forma dello sprite pari alla dimensione sprite. Si può vedere la rappresentazione visiva della vista.

possiamo vedere che tutti i laser sono stati aggiornati con la forma corretta.

Ora selezionare tutti i laser per aggiungerli alla nostra scorrimento parallelo.

Digitare 1 e 0 per il rapporto.

Salvare il livello, e se compiliamo il gioco i nostri laser saranno animati.

Lavoriamo con i sensori e aggiungiamo le monete

Vogliamo che il nostro personaggio passi attraverso le monete senza rimbalzare quando si verifica una collisione.

Selezioniamo lo sprite “moneta” dalla lista sprites all’interno di LevelHelper, tasto destro del mouse (o Ctrl-clic) e scegliamo “Open SpriteHelper Scene”.

Con la scena aperta, selezioniamo lo sprite e controlliamo se la moneta è settata sull’opzione “is sensor”, come da immagine e quindi salviamo la scena.

- Is Sensor: innesca una collisione ma non da una risposta di rimbalzo;
- Is Circle: Rende la forma del corpo su forma tonda;
- Can Sleep: Accelera la simulazione della fisica

Ora aggiungiamo la moneta al livello e posizioniamola come meglio crediamo.
Utilizziamo lo strumento clone per clonare facilmente la moneta con la direzione che preferiamo.

Ora il livello assomiglia a qualcosa del genere:

Aggiungiamo le monete per la tutta il livello di gioco, impostandoo il rapporto di 1 e 0 e salviamo il livello. Compiliamo ed eseguire il progetto, per vedere il risultato.

Sommario tutorial

1. Creiamo un gioco simile a Jetpack usando LevelHelper e SpriteHelper. Preparazione

2. Creiamo un gioco simile a Jetpack usando LevelHelper e SpriteHelper. uso di Level Helper

3. Creiamo un gioco simile a Jetpack usando LevelHelper e SpriteHelper. Il livello

4. Creiamo un gioco simile a Jetpack usando LevelHelper e SpriteHelper. lasers e coins

5. Creiamo un gioco simile a Jetpack usando LevelHelper e SpriteHelper. aggiungiamo il personaggio principale

6. Creiamo un gioco simile a Jetpack usando LevelHelper e SpriteHelper. Logica di gioco

7. Creiamo un gioco simile a Jetpack usando LevelHelper e SpriteHelper. Le collisioni

8. Creiamo un gioco simile a jetpack usando LevelHelper e SpriteHelper: Il sound

9. Creiamo un gioco simile a jetpack usando LevelHelper e SpriteHelper: collisioni con gli animali e aggiustamenti del gioco

10. Creiamo un gioco simile a jetpack usando LevelHelper e SpriteHelper: rotazione laser e coniglietti

11. Creiamo un gioco simile a jetpack usando LevelHelper e SpriteHelper: punteggio e display layer

Questo è un articolo scritto da Bogdan Vladu, uno sviluppatore di applicazioni IoS e asptirante programmatore di videogiochi, vive attualmente a Bucharest in Romania.

Un ringraziamento speciale va a Ray Wenderlich che ci ha dato il permesso di tradurre in Italiano i suoi tutorial

http://www.raywenderlich.com/8183/how-to-make-a-game-like-jetpack-joyride-using-levelhelper-spritehelper-part-2