Nota: Un file di progetto completato per questo tutorial può essere trovato alla fine di questo articolo.

Introduzione

In questo tutorial, creeremo l'intelligenza artificiale (IA) per una convincente bava nemica in un gioco in stile platformer. Copriremo alcune funzionalità e comportamenti più avanzati in hyperPad, quindi questo tutorial presuppone una conoscenza di base dell'editor di hyperPad. Se pensi di dover familiarizzare di più con la creazione di un gioco da zero, puoi controllare il Guida Completa - Creazione di un Gioco Platform prima.

Per far sembrare la bava "intelligente", dovrebbe fare più che semplicemente muoversi avanti e indietro e dovrebbe essere in qualche modo a conoscenza dell'ambiente circostante.

Suona emozionante! Ma prima di iniziare, dovremmo prima dettagliare come dovrebbe comportarsi la bava nemica:

Invece di camminare, la bava salterà a sinistra o a destra per muoversi.
La bava salterà nella direzione del giocatore.
Se il giocatore si trova troppo lontano, la bava non si muoverà (ferma).
La bava toglierà la salute del giocatore al contatto.
La bava viene sconfitta se il giocatore salta sopra di essa.

Ora che sappiamo cosa vogliamo fare, cominciamo!

Parte 1: Impostazione del Progetto

In questo tutorial, inizieremo un nuovo progetto da zero per mantenere le cose semplici. Crea un nuovo progetto e impostalo su "Vista di lato", puoi lasciare le altre impostazioni ai loro valori predefiniti.

Con il tuo nuovo progetto creato, vai alla Libreria di Asset e prendi il "Pacchetto Iniziale Platformer" di hyperPad nel negozio di asset. (È gratuito!)

Ora che abbiamo alcuni asset con cui lavorare, vai avanti e posiziona alcuni blocchi di terreno e crea il tuo mondo. Se non sei già lì, vai alla Libreria di Asset e fai tap su "Download", poi "Pacchetto Iniziale Platformer".

Nell'immagine qui sotto, sono stati posizionati alcuni blocchi di terreno (cartella "Grass World") e è stato impostato uno sfondo (cartella "Backgrounds").

Ora che abbiamo una bella scena con cui lavorare, aggiungiamo gli oggetti Giocatore e Bava. Vai alla Libreria di Asset e apri la tua cartella "Download", poi la cartella "Pacchetto Iniziale Platformer" se non sono già aperte.

Utilizzeremo l'"Uomo Spaziale Verde" come giocatore, quindi fai tap sull'asset dell'uomo spaziale verde per vedere tutti i suoi cicli di animazione. Di base, vogliamo che il giocatore rimanga semplicemente in piedi, quindi fai tap sull'animazione "Stand" e posizionala sulla scena.

Nella stessa cartella nella Libreria di Asset, c'è anche un personaggio animato "Bava Rosa". Perfetto per noi da usare come nemico bava! Fai tap sull'asset della bava e scegli l'animazione "Move" e posiziona una bava sulla tua scena con il tuo personaggio giocatore.

Finora, tutto bene! Ora abbiamo il nostro oggetto giocatore e oggetto bava, pronti per essere utilizzati. Ma se dovessimo giocare il nostro progetto ora, non saremmo in grado di interagire affatto con il gioco. Dobbiamo quindi creare un po' di logica per dare vita al nostro gioco.

Parte 2: Controlli del Giocatore

Prima di poter lavorare per dare vita al nostro nemico bava, dovremmo prima avere alcuni controlli per l'uomo spaziale verde.

Fai tap sull'uomo spaziale verde e imposta il suo modalità fisica da Murata a Fisica, il che permetterà al giocatore di muoversi liberamente. Poi, fai tap sul pulsante "Comportamenti" per aprire l'editor di comportamenti per il nostro personaggio giocatore in modo da poter aggiungere alcuni controlli.

Nell'editor di comportamenti per il nostro personaggio giocatore, dovresti già vedere un solitario Riproduci Animazione comportamento. Possiamo lasciare quel comportamento com' è, ma possiamo dargli alcuni amici.

Sotto la sezione Interazione, posiziona ovunque un comportamento Controllato da Joystick così come un comportamento Salta con Pulsante. Con questi comportamenti, il nostro giocatore è ora pronto per essere controllato. Ma, manca di un po' di animazione.

Fai tap sul comportamento Controllato da Joystick e imposta l'"Animazione Joystick Sinistra" sul ciclo di animazione "Camminata" nell'asset Uomo Spaziale Verde. Fai la stessa cosa con "Animazione Joystick Destra".

Ora il nostro personaggio giocatore cammina, ma ancora non si anima quando salta.

Fai tap sul comportamento Salta con Pulsante e cambia sia l'"Animazione in Caduta" che l'"Animazione di Salto" al ciclo di animazione "Salto".

Se ora giochiamo il nostro gioco, possiamo muoverci e saltare! Ora possiamo lavorare sul nostro nemico bava.

Parte 3: Movimento della Bava

Come abbiamo dettagliato nella sezione di introduzione di questo tutorial, vogliamo che la nostra bava salti verso il giocatore. Per fare questo, la nostra bava deve sapere dove si trova il giocatore nel mondo. Per questo motivo, dovremmo aggiungere un Tag al nostro personaggio giocatore, in modo che i nostri comportamenti possano recuperare il nostro personaggio giocatore in qualsiasi scena.

Fai tap sul personaggio giocatore, e seleziona la scheda Tag in fondo alla vista delle proprietà. Digita "Giocatore" nel campo di testo in alto nel menu tags e premi il pulsante aggiungi (+) accanto ad esso. Ora il nostro personaggio giocatore è contrassegnato con il tag "Giocatore".

Simile a quanto abbiamo fatto con il personaggio giocatore, fai tap sulla bava e imposta la sua modalità fisica da Murata a Fisica. Poi, fai tap sul pulsante Comportamenti per aprire l'editor di comportamenti della bava.

Nell'editor di comportamenti, vai alla sezione Personalizzato e inserisci un comportamento Timer nell'editor.

Fai tap sul comportamento Timer e imposta il suo intervallo a 2 secondi.

Questo sarà l'inizio della nostra logica per l'intelligenza artificiale della nostra bava.

L'idea qui è che ogni 2 secondi, la nostra bava "penserà" a cosa fare dopo, come: Dovrebbe la bava saltare? Se sceglie di saltare, in che direzione dovrebbe saltare?

Successivamente, vai alla sezione Trasforma e posiziona un comportamento Ottieni Posizione comportamento. Fai tap su di esso e imposta il suo target sul tag "Giocatore" che abbiamo creato in precedenza toccando la scheda Tag in fondo alla vista delle proprietà e selezionando "Giocatore". Ora collega il Timer al comportamento Ottieni Posizione.

Ora sappiamo dove si trova il nostro giocatore nel mondo! Per determinare se il giocatore si trova a sinistra o a destra della bava, dobbiamo anche sapere dove si trova la bava nel mondo.

Trascina un altro comportamento Ottieni Posizione nell'editor. Di default, il comportamento sta già mirando alla nostra bava, quindi non dobbiamo fare altro che collegarlo al nostro ramo di logica. Collega il comportamento Ottieni Posizione per il giocatore a quello per la bava.

Opzionale: Per semplificare le cose, ho rinominato i miei comportamenti Ottieni Posizione per indicare chiaramente cosa stanno tracciando: "Ottieni Posizione Giocatore" e "Ottieni Posizione Bava". Questo è facoltativo, ma se anche tu vuoi cambiare i nomi dei comportamenti, puoi farlo toccando il comportamento e toccando il suo nome nella parte superiore della vista delle proprietà.

Finora, quello che abbiamo è che ogni 2 secondi, la bava recupera la posizione del personaggio giocatore e di se stessa. Ora che abbiamo queste informazioni, possiamo determinare se la bava dovrebbe saltare a sinistra o a destra.

Sotto la scheda Logica, inserisci e collega un comportamento If. Nelle sue proprietà, imposta il primo valore sulla posizione x del primo comportamento Ottieni Posizione (tag "Giocatore") trascinando il valore di output del comportamento nel campo delle proprietà If. Per il secondo valore, impostalo sulla posizione x del secondo comportamento Ottieni Posizione (bava). Infine, imposta la condizione del comportamento If su "È Minore di" (<).

Nota: La posizione x di un oggetto è il valore che rappresenta dove si trova l'oggetto nel mondo sull'asse x. (Sinistra e destra)

Quindi, cosa significa tutto questo? Il comportamento If controllerà se la posizione x del giocatore è inferiore alla posizione x della bava. Se quanto sopra è vero, eseguirà il comportamento successivo collegato. Ciò significa essenzialmente che se il giocatore si trova più a sinistra della bava, l'esecuzione del comportamento continuerà.

Va bene, ora abbiamo impostato la logica per far saltare la bava a sinistra, quindi facciamo proprio questo!

Sotto la sezione Fisica, inserisci e collega un comportamento Applica Forza al comportamento If. Nelle sue proprietà, imposta la Forza su: x = -0,5, y = 1. Poi, imposta il moltiplicatore su un numero considerevole, 200 dovrebbe andargli bene.

Quello che abbiamo ora è che se la bava trova il giocatore più a sinistra di se stessa, salterà in alto (y = 1 × 200) e un po' a sinistra (x = -0,5 × 200).

Prova! Gioca il gioco e testa per assicurarti che tutto funzioni. Quello che dovresti vedere è la bava che salta a sinistra ogni 2 secondi, finché il giocatore è a sinistra di essa. Se sposti il giocatore a destra della bava, dovrebbe smettere di saltare fino a quando non ti sposti di nuovo a sinistra.

Nota: Se la tua bava non si sta muovendo, controlla i passaggi precedenti per assicurarti di non aver perso nulla. Assicurati che i comportamenti siano collegati correttamente e che la modalità fisica della tua bava sia impostata su Fisica (movibile) invece che Murata (non-movibile). Inoltre, presto sistemeremo il problema in cui la bava a volte si ribalta di lato o capovolta.

Ottimi progressi finora! Se la tua bava saltella come previsto, allora siamo pronti per continuare. Completiamo i suoi comportamenti di movimento consentendo anche alla bava di saltare a destra.

Torna all'editor di comportamenti della bava, duplica il comportamento If. Trascina e aggancia il nuovo comportamento If a destra del comportamento If originale. Questo lo trasformerà in un comportamento "Else If".

Duplica anche il comportamento Applica Forza e collegalo al nuovo comportamento Else If.

Nelle proprietà della Else If, cambia la condizione da "È Minore di" (<) a "È Maggiore di" (>). Questo avrà l'effetto opposto del primo If. Se il primo comportamento If non è vero, controllerà se l'Else If è vero. Ciò significa che se il giocatore non si trova a sinistra della bava, verificherà se il giocatore è a destra della bava e continuerà l'esecuzione dei comportamenti collegati all'Else If.

Dovresti ora avere un ramo di comportamento che appare simile a questo:

Nelle proprietà della seconda Applica Forza (sotto l'Else-If), cambia le sue proprietà in modo che la sua forza sia x = 0,5, invece di x = -0,5. Ora, invece di saltare a sinistra, la bava salterà a destra.

Gioca il progetto e riprova! Ora dovresti vedere la bava saltare nella direzione del giocatore. Eccellente!

Una cosa che potresti aver notato durante il play test è che se collidi con la bava, può a volte cadere di lato o capovolta. Vogliamo che la bava rimanga in posizione verticale, quindi sistemiamo rapidamente questo.

Torna all'editor di comportamenti della bava, vai alla sezione comportamenti Trasforma e inserisci un comportamento Blocco Rotazione nell'editor. Non è necessario collegarlo a un altro comportamento, vogliamo che blocchi la sua rotazione non appena la bava viene creata, quindi puoi lasciarlo così. Una volta fatto ciò, prova di nuovo il gioco. Questa volta dovresti avere difficoltà a tentare di ribaltare la bava di lato.

Potresti anche aver notato che l'animazione della bava sta girando troppo velocemente. Se questo sta accadendo, fai tap sul comportamento Riproduci Animazione nell'editor di comportamenti della bava e cambia i fotogrammi per secondo con un numero molto più piccolo. 6 fotogrammi per secondo sembrano buoni.

Ottimo! Ora la nostra bava non solo si muove bene, ma sembra anche fantastica. Per la maggior parte, la logica di movimento della nostra bava è completa.

Tuttavia, vogliamo anche che la bava salti solo se il giocatore è nelle vicinanze. In modo che se costruiamo un mondo più grande, le bave lontane non cercheranno immediatamente di saltare verso e attaccare il giocatore. Nella prossima parte, vedremo di aggiungere un'altra condizione per bloccare la logica del salto se il giocatore è troppo lontano.

Parte 4: Bava inattiva

In questa parte, implementeremo alcuni comportamenti della bava che la renderanno inattiva (cioè, non muoversi) quando il giocatore è troppo lontano.

Per ottenere questo, dobbiamo trovare un modo per misurare la distanza dalla nostra bava al giocatore. Convenientemente, ci sono comportamenti disponibili per fare proprio questo! Mettiamoci al lavoro.

Apri l'editor di comportamenti della bava e inserisci un comportamento Calcola Distanza dalla sezione Logica. Nelle proprietà del suo comportamento, il primo oggetto è già impostato sulla nostra bava. Per il secondo oggetto, vai al menu a schede e seleziona il tag "Giocatore".

Questo comportamento, quando eseguito, calcolerà la distanza in metri dalla nostra bava al giocatore. Utilizzando queste informazioni, possiamo vedere se il giocatore si trova troppo lontano verificando se supera una certa distanza.

Posiziona un altro comportamento If dalla sezione Logica e collegalo sotto il comportamento Calcola Distanza. Nelle proprietà del comportamento If, imposta il primo valore sul valore di output del Calcola Distanza. Imposta la condizione su "È Minore di" e il secondo valore su 15.

Ora ciò che abbiamo è un modo per controllare se il giocatore è troppo lontano controllando se la distanza tra la bava e il giocatore è inferiore a 15 (metri). Se tale condizione è falsa, allora il giocatore è troppo lontano e il comportamento If non eseguirà il comportamento successivo.

Ora che abbiamo la nostra nuova condizione pronta all'uso, disconnetti il comportamento Ottieni Posizione (bava) e il vecchio comportamento If dalla parte precedente del tutorial e fai spazio per la nostra nuova condizione. Puoi disconnettere i comportamenti toccando e tenendo premute le connessioni tra i comportamenti.

Con la nuova condizione di distanza in atto, collega il comportamento Ottieni Posizione (bava) al comportamento Calcola Distanza e poi collega il nuovo comportamento If al vecchio comportamento If. Ora dovresti avere qualcosa di simile a questo:

Inizia a sembrare piuttosto complicato ora, ma l'idea è relativamente semplice. Ora ciò che abbiamo è che prima di controllare in quale direzione la bava deve saltare, prima verifichiamo se la distanza tra la bava e il giocatore è inferiore a 15 (metri).

Se il giocatore si trova a meno di 15 metri, allora continuerà e controllerà quale direzione dobbiamo saltare, come al solito. Se il giocatore si trova a più di 15 metri di distanza, non continuiamo e la logica termina lì fino alla prossima volta che la bava "pensa" di nuovo (2 secondi dopo).

Gioca al gioco! Se ti avvicini troppo alla bava, dovrebbe iniziare a saltare verso di te, ma se ti allontani troppo, dovrebbe smettere di muoversi e attendere finché non ti riavvicini di nuovo.

La nostra bava sta iniziando a sembrare piuttosto minacciosa ora, ma manca ancora un modo per danneggiare il giocatore. Nella prossima parte di questo tutorial, daremo al giocatore una barra della salute e implementeremo un po' di logica per infliggere danno al giocatore.

Parte 5: Attacco al Giocatore

Come dettagliato nella sezione di introduzione, implementeremo attacchi della bava facendo in modo che la bava danneggi il giocatore quando lo tocca. Per iniziare a implementare un modo per la bava di attaccare il giocatore, dovremo prima dare al giocatore un po' di salute.

Nell'editor principale, seleziona il livello Scene UI e crea un nuovo oggetto con il pulsante Oggetti Speciali. Fai tap su "Barra della Salute" per creare una barra della salute per il nostro giocatore.

Poiché è posizionata sul livello Scene UI, se decidiamo di espandere il nostro mondo e fare in modo che lo schermo segua il giocatore, rimarrà nella stessa posizione sullo schermo.

Puoi posizionarla ovunque tu ritenga opportuno sulla schermata. Io l'ho posizionata al centro dello schermo vicino al fondo.

Quando hai finito di trovare un buon posto per la tua barra della salute, possiamo dedicarci alla rimozione della salute dalla barra della salute. Torna al livello principale dove si trova la tua bava e apri di nuovo il suo editor di comportamenti.

In un buon posto vuoto nei comportamenti della bava, inserisci un comportamento Colliso trovato sotto la sezione Oggetto. Nelle sue proprietà, imposta il secondo oggetto sul tag "Giocatore".

Sotto la sezione comportamenti Personalizzati, inserisci un comportamento Broadcast Message e collegalo sotto il comportamento Colliso. Nelle proprietà del comportamento Broadcast Message, imposta la Chiave Evento su "giocatore colpito" e imposta il valore su -10.

Ricorda: Le chiavi degli eventi sono sensibili alle maiuscole! Per semplicità, questo tutorial utilizzerà solo minuscole per le chiavi degli eventi. Puoi scegliere di utilizzare le maiuscole se lo preferisci, ma ricorda quali lettere sono maiuscole per dopo.

Ora abbiamo un modo per rilevare quando il giocatore dovrebbe perdere salute. Quando il giocatore collida con la bava, verrà trasmesso un messaggio per l'evento "giocatore colpito" con un valore di -10. Utilizzeremo il -10 per dire alla barra della salute di "aggiungere" -10 salute, e poiché il valore è negativo, rimuoverà 10 salute.

Dobbiamo ancora aggiungere quella logica alla barra della salute, quindi facciamolo ora. Esci dall'editor di comportamenti della bava e poi, nell'editor principale, fai tap sulla fascia di livello Scene UI e poi sulla barra della salute. Apri l'editor di comportamenti per la barra della salute.

Nell'editor di comportamenti della barra della salute, inserisci un comportamento Ricevi Messaggio dalla sezione Personalizzata. Nelle sue proprietà, imposta la Chiave Evento su "giocatore colpito". (Ricorda che è sensibile alle maiuscole!)

Questo comportamento sarà il nostro ascoltatore per il messaggio "giocatore colpito" inviato ogni volta che il giocatore colpisce la bava. Quando questo comportamento rileverà un messaggio trasmesso per "giocatore colpito" da qualche parte nel gioco, eseguirà.

Ora, aggiungi un comportamento Aggiungi alla Barra della Salute sotto la sezione comportamenti UI e collegalo sotto il comportamento Ricevi Messaggio.

Nelle proprietà dell'Aggiungi alla Barra della Salute, trascina il valore di output dalla Ricevi Messaggio al campo "Valore da aggiungere". Quel valore sarà il valore -10 che abbiamo impostato in precedenza nel comportamento Broadcast Message sulla bava. In questo modo, se scegliamo di far sì che altri nemici infliggano danni di diverse quantità, tutto ciò che dobbiamo fare è cambiare il valore sulla trasmissione a quello che vogliamo e la barra della salute utilizzerà invece quel valore!

Assicurati che "Evento su Completo" sia disattivato, e "Evento su Vuoto" sia attivato. Ciò significa che se la barra della salute raggiunge zero salute, eseguirà il comportamento successivo.

Sotto la sezione Scene comportamenti, inserisci un comportamento Carica Overlay e collegalo al comportamento Aggiungi alla Barra della Salute.

Nelle impostazioni di Carica Overlay, cambia l'overlay selezionato in

Conclusione &amp; Esercizi