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

Articolo scritto da Gabriele Carbonai    Nessun 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

Aggiungiamo il personaggio principale

Ora che abbiamo un bel livello con tutti i componenti di base, creiamo il giocatore principale e le sue animazioni.

Apriamo SpriteHelper e andiamo su File\New a creiamo un nuovo progetto vuoto (empty sprite sheet). Dopo di che nel finder del nostro mac navighiamo sulla directory dove risiedono le nostre arti per questo gioco.
Una volta che siamo dentro, selezioniamo e trasciniamo sulla finestra di SpriteHelper tutti gli sprite del topo che sarà il nostro personaggio principale, le fiamme e i razzi.

Ora dobbiamo creare una singola immagine con l’arte che abbiamo appena importato. Questo è un passo essenziale prima di creare l’animazione. Tutti i motori supportati da LevelHelper SpriteHelper e si aspettano che i frame di animazione facciano parte di un unica e stessa immagine.

Passiamo al menu “Sheet Editor” e deselezioniamo l’opzione “Crop”, perché non vogliamo tagliare i fotogrammi dell’animazione del personaggio.

Clicchiamo “Pack Sprites” per organizzare tutti gli sprite nel foglio sprite.

Quindi, passiamo alla sezione “Animation” di SpriteHelper. Ci creeremo tutte le animazioni di cui abbiamo bisogno, esattamente come abbiamo fatto per il laser.

Con la stessa tecnica che avete imparato in precedenza, creare cinque animazioni con le proprietà elencate di seguito.

Se hai dimenticato come creare le animazioni, fare clic sul pulsante + e fare doppio clic per denominare lo stesso. Quindi selezionare i fotogrammi necessari per quella particolare animazione, impostare la velocità, e assicurarsi di verificare sempre l’opzione “Loop” per i personaggi che ne hanno bisogno.

1) Nome animazione: mouseRun

Start At Launch: YES
Loop Forever: YES
Speed: 0.400 (default)
Repetition: 1.000 (default)
Frames: rocketmouse_1_run, rocketmouse_2_run, rocketmouse_3_run, rocketmouse_4_run

2) Nome animazione: flame

Start At Launch: YES
Loop Forever: YES
Speed: 0.400 (default)
Repetition: 1.000 (default)
Frames: rocket_flame1, rocket_flame2

3) Nome animazione: mouseFly

Start At Launch: YES
Loop Forever: YES
Speed: 0.400 (default)
Repetition: 1.000 (default)
Frames: rocketmouse_5_fly

4)Nome animazione: mouseDie

Start At Launch: YES
Loop Forever: NO
Speed: 0.400 (default)
Repetition: 1.000 (default)
Frames: rocketmouse_7_die, rocketmouse_8_die

5) Nome animazione: mouseFall

Start At Launch: YES
Loop Forever: NO
Speed: 0.400 (default)
Repetition: 1.000 (default)
Frames: rocketmouse_6_fall

Una volta fatto, premi Cmd+S per salvare la scena. Nella finestra di dialogo Salva, selezionare la cartella Immagini all’interno della cartella Risorse del progetto Xcode, e salvare la scena come “mouse”.

In LevelHelper possiamo trovare tutte le nostre animazioni salvate nella sezione Animation.

Trasciniamo l’animazione mouseRun sullo schermo principale (quello con un bordo rosso). Inseriamolo appena a sinistra dello schermo.

Quindi trascinare lo sprite fiamma (salvato come flame) e mettiamolo proprio sotto il serbatoio rosso sul retro del mouse.

Se guardiamo attentamente, vedremo che lo sprite fiamma è sulla parte superiore del serbatoio rosso. Mettiamola dietro il serbatoio, in modo che appaia più come la fiamma che esce dal serbatoio. Effettuare questa operazione, selezionare lo sprite fiamma e in Proprietà generali, impostare l’ordine di Z a -1.

Se si esegue il livello in questo punto utilizzando “Scene Tester” si potrebbe o non si potrebbe essere in grado di vedere il nostro topolino.

Questo perché gli sprites sono resi usando i batch nodes (tutti gli sprite contemporaneamente). Per portare il topolino in cima a tutti gli altri sprite del livello, abbiamo bisogno di cambiare l’ordine Z del batch node (il file di immagine).

All’interno di LevelHelper spostiamoci nella sezione Images e favviamo doppio clic sul campo Z Order per il file mouse.png. Inseriamo un valore 4.

Vogliamo che il topolino sia sempre in cima a tutto il resto, e abbiamo intenzione di aggiungere altre immagini al più presto. Ecco perché stiamo mettendo un valore più grande

.

Se facciamo partire ora il test è possibile vedere il nostro personaggio però non effettua a dovere le collisioni.

In realtà sta eseguendo le collisioni con i cani e gatti, ma questo avviene perché il topo e altri oggetti sono ancora statici.

è il momento di renderli dinamici! apriamo la scena di levelHelper per il mouse.

Quindi, selezioniamo tutti gli sprite per renderli dinamici. Dato che non vogliamo che il topo ruoti quando si scontra con qualsiasi altro sprite, selezioniamo l’opzione “Fixed Rotation”.

Per gli altri due sprite, abbiamo anche bisogno di controllare che sia selezionata l’opzione “is sensor”. Questo perché andremo ad attaccare la fiamma al serbatoio.

Salviamo tutto al compimento.

Testiamo l’applicazione e quindi noteremo che il topo esce dallo schermo, questo perché risponde alla gravità e noi dobbiamo fare in modo di farlo rimanere al suo interno.

clicchiamo il pulsante “Physic Boundaries”

si aprirà una finestra e andiamo a cliccare “create”.

Abbiamo ora creato il confine, ma vogliamo modificarlo in modo che sia proprio sotto il topolino al centro del pavimento, dove il topo camminare.

All’interno della finestra Physic Boundaries, fare clic su “edit”.

Vedremo ora quattro maniglie rosse agli angoli del confine fisico. Trasciniamo una delle maniglie in basso per spostare il confine in modo che sia sotto i piedi del topo.

Avremo quindi qualcosa di simile:

Quando saremo soddisfatti con il nostro confine fisico, premiamo il pulsante “editing” per arrestare il processo di modifica.

Avviando il test ora vedremo che il nostro personaggio avrà le collisioni con i gatti i topi, che non cadrà più sotto lo schermo ma avrà la sua posizione di partenza, però ci sono ancora dei problemi.

Questa volta, la fiamma è caduta fuori dallo schermo. Questo perché è un sensore che non avrà una collisione con qualsiasi oggetto e non è attaccato al corpo del mouse. Ma è possibile collegare la fiamma al topo creando un giunto.

Andiamo nella sezione dei “Joints” (giunti) all’interno di LevelHelper, selezioniamo “Distance Joint” dalla lista e facciamo clic sul pulsante verde con il simbolo più (+)

Ora selezioniamo gli sprite che vogliamo connettere.

Selezionare il giunto dalla lista (se non è già selezionato), poi sulle proprietà del Body A, fare clic e tenere premuta l’icona cerchio. Quindi trascinare il mouse sopra lo sprite fiamma. Quando il testo dice rocket_flame_1, rilasciare il mouse. (Questo è esattamente lo stesso processo di collegamento utilizzato nei progetti all’interno di Interface Builder in Xcode.)

Ripetiamo il processo per il Body B

Ora mettiamo insieme i punti di ancoraggio.

Selezioniamo “A” nella proprietà, trasciniamo la maniglia che mostra la sprite fiamma, e mettiamo l’ancora a destra sulla parte superiore del serbatoio.

Ripetiamo la procedura per l’altro punto di ancoraggio. Selezioniamo l’ancoraggio B, trasciniamo la maniglia e mettiamo il punto di ancoraggio accanto all’altro.

Se testiamo ora potremmo notare che la fiamma non si stacca più.
Ora abbiamo quasi tutto quello che serve per iniziare a programmare il gioco!

Creazione dei Tag per eseguire le collisioni

Al fine di effettuare le collisioni tra i nostri sprites, abbiamo bisogno di un modo per registrare le collisioni tra gli sprite di un tipo, con sprite di altri tipi.

Avremo bisogno di dividere i nostri sprites per tipo con i tag. Così tutti gli sprite cane avranno il tag “DOG” e tutti gli sprite gatto avranno il tag “CAT”.

Per creare i tag, all’interno LevelHelper fare clic sul pulsante “Define Tags”.

All’interno della finstra “Define Tags” impostiamo il nome per la nuova etichetta e facciamo clic sul pulsante “Add” per crearla.
Creiamo i seguenti tag: DOG, CAT, LASER, COIN, PLAYER.

Ora che abbiamo i tag definiti, abbiamo bisogno di assegnare i tag.

Selezioniamo tutti gli sprite del cane dalla lista di sprite a sinistra. Poi sotto “General Properties”, assegniamo il cartellino del cane a tutti gli sprite.

Ripetere la procedura per tutti gli sprite. Assegnare PLAYER alla sprite mouse, CAT a tutti gli sprite gatto, Laser a tutti gli sprite laser, e della moneta a tutti gli sprite monete.

Salviamo premendo la combinazione di tasti cmd+S

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