Parte 4: Creare il tuo personaggio

Nella Parte 3 hai imparato come creare il tuo primo livello. In questo tutorial, inizieremo a trasformare il nostro livello vuoto in un gioco.

Un Platformer è un gioco come Mario. Di solito i platformer hanno un personaggio che può essere controllato da un joystick, e può saltare per risolvere vari enigmi.

Questa parte della guida si basa sulla Parte 3, e presuppone che tu abbia già creato il tuo livello utilizzando le risorse del Platformer Starter Pack, che puoi scaricare dall'Asset Shop.

Aggiungere il Giocatore:

Prima di tutto, devi aggiungere la grafica del tuo giocatore al dock degli oggetti. Inizia navigando nella cartella Download della Libreria Asset e trova il personaggio animato Green Space Man.

Toccando il personaggio animato nella Libreria Asset, verranno mostrate tutte le cicli di animazione disponibili.

Poiché non vogliamo che il giocatore sembri che stia camminando anche se è fermo, utilizzeremo il ciclo di animazione "Stand". Tocca il ciclo di animazione "Stand" per aggiungerlo al dock.

Nota: Se la grafica animata che stai utilizzando non ha un ciclo di standby o inattivo, puoi sempre selezionare un singolo fotogramma di un'animazione tenendo premuto il dito sul ciclo di animazione e selezionando "Visualizza Fotogrammi" dal Menu Asset.

Ora che hai il tuo personaggio nel Dock degli Oggetti, puoi semplicemente trascinarlo fuori dal dock e nel tuo scenario.

Muovere il Giocatore:

Ora dobbiamo dare vita al personaggio e renderlo mobile con un joystick. hyperPad rende questo processo davvero semplice con i comportamenti inclusi.

Prima apri le Proprietà dell'Oggetto toccando il personaggio che hai appena trascinato sulla tela.

Dalla "Scheda Fisica" delle Proprietà dell'Oggetto, rendi il tuo personaggio un "Tipo di Fisica" toccando l'icona dell'oggetto fisico ( ) appena sotto il pulsante "Comportamenti".

Nota: Gli oggetti fisici adempieranno alle leggi della gravità e reagiranno ad altri oggetti e forze.

Successivamente, tocca il pulsante Comportamenti, per aprire l'editor dei comportamenti e iniziare il processo di rendere il tuo personaggio giocabile.

L'editor dei comportamenti ha diverse categorie visualizzate lungo la barra superiore, e comportamenti a sinistra.

Poiché hai aggiunto un Ciclo di Animazione, un comportamento di "Riproduci Animazione" è già stato aggiunto alla tela dei comportamenti.

Trascina il comportamento "Controllato da Joystick" sulla tua tela dalla categoria "interazione".

Non appena questo comportamento viene aggiunto, verrà anche automaticamente creato e aggiunto un joystick sul tuo GLOBAL UI Layer. Se avevi già un joystick aggiunto al tuo livello dell'interfaccia utente, il comportamento utilizzerà automaticamente quello invece di aggiungerne uno per te.

A questo punto, puoi premere play e far funzionare il tuo gioco! Tuttavia, potresti notare che il giocatore scivola semplicemente in giro per lo schermo...

Animazioni:

Facciamo sembrare il gioco un po' meglio aggiungendo alcune animazioni al nostro giocatore.

Iniziamo facendolo camminare quando muoviamo il joystick a sinistra o a destra.

Per fare questo, devi visualizzare i comportamenti di interazione "avanzati". Mentre sei nella categoria "Interazione", tocca l'opzione "Avanzato" in fondo alla lista dei comportamenti.

Dalla lista "avanzata" aggiungi "Joystick Sinistro" e "Joystick Destro" alla tela.

Successivamente, dalla categoria "FX", aggiungi il comportamento "Riproduci Animazione" e collega sia il Joystick Sinistro che Destro a questa nuova Riproduzione Animazione aggiunta.

Ora, tocca il comportamento "Riproduci Animazione" per visualizzare le Proprietà del Comportamento.

La prima casella in alto è l'oggetto a cui vuoi applicare l'animazione. hyperPad seleziona automaticamente l'oggetto corrente.

Nota: Puoi toccare qui e selezionare qualsiasi altro oggetto nella tua scena se vuoi. Non vogliamo farlo ora, quindi lo lasceremo così com'è.

La casella sottostante rappresenta l'animazione che vuoi riprodurre. Poiché non ci sono animazioni da riprodurre, è vuota.

Tocca la casella vuota per selezionare un'animazione.

Noterai che appare una striscia di pellicola lungo la parte inferiore dello schermo. Tocca l'icona della Libreria Asset per aggiungere un ciclo di animazione alla striscia di pellicola.

Naviga al personaggio animato "Green Spaceman", e seleziona il ciclo "Walk". Nota che ogni fotogramma dell'animazione è stato automaticamente aggiunto alla striscia di pellicola. Tocca dove vuoi per chiudere la striscia di pellicola e tornare alle proprietà.

Nota: Puoi anche aggiungere immagini singole o fotogrammi di animazione alla striscia di animazioni. Non sei limitato solo ai cicli di animazione pre-creati.

Infine, rinominiamo questo comportamento in modo che sia più facile trovarlo in seguito. Dalle proprietà del comportamento tocca il nome del comportamento in alto. Questo aprirà una tastiera e ti permetterà di digitare un nuovo nome per il comportamento. Chiamiamolo "Walk Animation"

Se premi play ora, il tuo personaggio dovrebbe muoversi attorno con il joystick e animarsi!

Saltare:

Non puoi avere un gioco di piattaforme senza saltare! Far saltare il giocatore è un gioco da ragazzi in hyperPad.

Mentre sei ancora nell'editor dei comportamenti del Green Spaceman, tocca la categoria "Interazione", e dalla lista dei comportamenti a sinistra, trascina su il comportamento "Salta con Pulsante". Proprio come il comportamento Controllato da Joystick, il salto con pulsante gestirà anche gran parte dei movimenti dei tuoi oggetti e aggiungerà automaticamente un pulsante al Global UI Layer.

Puoi toccare il comportamento di salto per visualizzare le sue proprietà. Dalle proprietà del comportamento di salto puoi cambiare impostazioni come il suono da riprodurre, la potenza dei salti e altro ancora. Per questo tutorial, lasceremo tutto come è, tranne che cambieremo la potenza.

Ho dovuto impostare la potenza su 18, per poter saltare oltre tutti gli ostacoli nel livello creato per la Parte 3. Se hai progettato il tuo livello, potresti dover giocare con il valore di salto finché non funziona per te.

Se premi play ora, puoi vedere il tuo giocatore correre in giro e saltare. Tuttavia, potresti aver notato che il personaggio continua a camminare mentre salta in aria... Risolviamo questo!

Iniziamo riproducendo un'animazione mentre salti.

Dalla categoria "Interazione" aggiungi un comportamento "Iniziato a Toccare", quindi tocca il comportamento che hai appena aggiunto per visualizzare le proprietà.

Ora dobbiamo modificare il comportamento, per funzionare solo quando inizi a toccare il pulsante di salto. Dalle proprietà del comportamento "Iniziato a Toccare", tocca la grafica del spaceman nella casella superiore.

Questo ti porta alla schermata "Selettore Oggetti". Da qui puoi selezionare qualsiasi oggetto o elemento dell'interfaccia utente nella tua scena. Probabilmente non puoi selezionare il pulsante. Questo perché il Green Spaceman era sul Livello Principale, e il pulsante è sul Global UI Layer. Dalla barra dei livelli sulla destra dello schermo, tocca semplicemente il Global UI Layer. Ora puoi selezionare il pulsante.

Con il pulsante selezionato, tocca l'icona di accettazione in basso.

Successivamente, aggiungi un'altra Riproduzione Animazione e collegala al comportamento Iniziato a Toccare che abbiamo aggiunto in precedenza.

Proprio come hai fatto prima, puoi rinominare il comportamento e selezionare un'animazione dalle Proprietà del Comportamento.

Per rinominare, tocca il titolo del comportamento nelle proprietà dell'oggetto e inserisci un nuovo nome. Ho usato "Animazione Salto".

Come hai fatto per l'animazione della camminata, devi selezionare un ciclo per il salto. Tocca la seconda casella vuota nelle proprietà del comportamento e seleziona il ciclo di animazione Salto delle animazioni disponibili del Green Spaceman.

Devi anche disattivare l'interruttore "Loop Animation" e l'interruttore "Ripristina Fotogramma".

Se premi play ora, puoi vedere che quando salti il personaggio sembra che stia saltando! Tuttavia, ci sono ancora 2 piccoli problemi.

1. Il personaggio non torna alla sua animazione di standby quando atterra

2. Se muovi il personaggio mentre è in aria, il personaggio riproduce l'animazione di camminata in aria.

Per il primo problema, passa alla categoria "Trasformazione" e tocca il pulsante avanzato per visualizzare i comportamenti avanzati.

Ora trascina il comportamento "Fermato di Cadere", e trascina anche un altro comportamento "Riproduci Animazione" dalla categoria FX e collegalo a "Fermato di Cadere".

Nel "Riproduci Animazione" che hai appena aggiunto, seleziona il ciclo di animazione "Stand" del Green Spaceman, disabilita gli interruttori "Ripristina Fotogramma" e "Loop Animation", e cambia il nome del comportamento Riproduci Animazione in "In Piedi".

Il Green Spaceman dovrebbe ora essere in grado di saltare e sembrare che stia in piedi quando atterra.

Per il secondo problema, dobbiamo fermare l'animazione mentre il personaggio salta.

Passa alla categoria comportamento "Personalizzato" e trascina "Comportamento Spento", e collegalo al comportamento "Iniziato a Toccare" che abbiamo aggiunto precedentemente per l'Animazione Salto.

Ora tocca il "Comportamento Spento", e tocca la casella vuota per selezionare un comportamento dall'elenco. Dall'elenco, localizza il comportamento "Riproduci Animazione" (Walk Animation) che è collegato ai comportamenti Joystick sinistro e destro.

Successivamente, aggiungi un "Comportamento Acceso" e collegalo al comportamento "Fermato di Cadere" che abbiamo aggiunto precedentemente.

Ancora una volta, tocca la casella vuota e seleziona il comportamento Riproduci animazione (Walk Animation) che riproduce l'animazione di camminata.

Se premi play ora, il tuo personaggio dovrebbe essere in grado di muoversi e saltare perfettamente!

Muovere lo Schermo:

Come avrai notato, se ti muovi troppo lontano, il personaggio esce dallo schermo. Nei tradizionali giochi di piattaforma, lo schermo di solito si muove con il tuo giocatore. Prendi Mario ad esempio, Mario rimane sempre al centro dello schermo (con un po' di varianza).

Facciamo in modo che lo schermo si muova con il Green Spaceman, in modo che non possa mai uscire dallo schermo.

Mentre sei ancora nei comportamenti del Green Spaceman, passa alla categoria "Schermo", e aggiungi il comportamento "Segui Schermo". Il comportamento "Segui Schermo" muoverà lo schermo con il tuo oggetto selezionato.

Successivamente, apri le proprietà del comportamento Segui Schermo e disabilita l'interruttore per "Segui Y". Questo fa in modo che lo schermo segua il tuo giocatore a sinistra o a destra, ma non su e giù.

A questo punto se premi play dovresti essere in grado di correre attraverso il tuo livello con un personaggio animato, e avere lo schermo che si muove insieme a te.

Puoi scaricare la versione finale della Parte 4 dal Hub e vederla tutta in azione.

Nella Parte 5, inizieremo ad aggiungere un po' più di elementi di Gioco aggiungendo monete da raccogliere e un punteggio.