Creare un heads-up display (HUD)
Un heads-up display (brevemente HUD) è l'interfaccia che mostra la salute del giocatore, il punteggio ed altre informazioni in-game. Facciamo un semplicissimo HUD con un oggetto testo.
L'HUD sta sempre nello stesso punto dello schermo. Se abbiamo alcuni oggetti di intefaccia, non vogliamo che vadano in giro mentre il giocatore cammina - devono stare sempre sullo schermo. Per default i layers scorrono. Per fare in modo che restino fissi sullo schermo, dobbiamo usare il parametro Parallax del layer. Il parallasse (parallax) permette a layer differenti di scorrere a velocità differenti, per una specie di effetto 3D. Se settiamo l'effetto parallasse a 0, comunque, il layer non scorre per niente - ideale per un HUD.
Torniamo alla barra dei layer che abbiamo usato in precedenza. Aggiungiamo un nuovo layer chiamato HUD. Assicuriamoci che sia in cima all'elenco dei layer e selezioniamolo (ricordiamoci che questo lo rende attivo). La barra delle proprietà dovrebbe adesso mostrarci, appunto, le sue proprietà. Settate la proprietà Parallax a 0, 0 (ovvero 0 su entrambi gli assi X e Y).
Fate Double-click su uno spazio per inserire un altro oggetto. Questa volta scegliete l'oggetto Text. Posizionatelo sull'angolo in alto a sinistra del layout. Sarà difficile da vedere se è nero, quindi nella barra delle proprietà settatelo in bold (grassetto), italic (corsivo), yellow (giallo) e scegliete la dimensione del font leggermente più larga. Ridimensionatelo in maniera larga abbastanza per farci stare un testo sufficiente. Dovrebbe essere qualcosa di questo tipo:
Tornate al foglio eventi. Teniamo il testo aggiornato con il punteggio del giocatore. Nell'evento Every tick che abbiamo aggiunto prima, aggiungiamo l'azione Text -> Set text.
Usando l'operatore & possiamo convertire un numero in un testo ed unirlo in un'altra stringa. Quindi, per il testo, inserite:
"Score: " & Score
La prima parte ("Score: ") significa che il testo comincerà sempre con la parola Score:. La seconda parte (Score) è il valore attuale della variabile globale Score. L'operatore & li unisce in un unico testo.
Fate partire il gioco e sparate ad alcuni mostri. Il punteggio viene mostrato e resta nella stessa posizione dello schermo!
Tocchi finali
Abbiamo quasi finito. Aggiungiamo alcuni tocchi finali.
Innanzitutto, facciamo in modo che i mostri compaiano in maniera regolare, altrimenti una volta che gli avrete ammazzati tutti non ci sara' più niente da fare. Creeremo un mostro nuovo ogni 3 secondi. Aggiungete un nuovo evento:
Condition: System -> Every X seconds -> 3
Action: System -> Create object -> Monster, layer 1, 1400 (per la X), random(1024) (per la Y)
1400 è una coordinata per la x subito fuori l'angolo destro del layout, e random(1024) è un valore casuale della coordinata Y per l'altezza del layout.
Da ultimo, facciamo in modo che i fantasmi uccidano il giocatore.
Condition: Monster -> On collision with another object -> Player
Action: Player -> Destroy
Conclusioni
Congratulazioni, avete creato il vostro primo gioco HTML5 in Construct 2! Se avete un server e volete mostrare il vostro lavoro, cliccate Export nel menu File. Construct può salvare tutti i file del progetto in una cartella del vostro computer, che potete caricare o integrare in una pagina web. Se non avete il vostro server, potete condividire i vostri giochi su Dropbox.
Avete imparato alcune nozioni base su Construct 2: inserire oggetti, usare i layer, i behaviours, gli eventi ed ancora di più. Speriamo che questo vi abbia lasciato con l'intenzione di imparare ancora di più in Construct 2! Provate ad esplorare le sue caratteristiche e guardate cosa può fare per voi.
Il prodotto finito
provate a scaricare il progetto completo del tutorial Ho aggiunto alcune caratteristiche extra, come la scritta "Game over" e la velocità dei mostri che aumenta gradualmente. Sapendo quel che fate, adesso, non dovrebbe essere tanto difficile capire come funziona. Ci sono anche un sacco di commenti che descrivono il suo funzionamento.
Ben fatto! Se avete problemi o pensate che nel tutorial ci siano parti che potrebbero essere migliorate, lasciate un commento o lasciate un messaggio sul forum. Vedremo cosa potremo fare!
Infine, se vi è piaciuto qeusto tutorial e pensate che ci sia qualcuno cui potrebbe piacere Construct 2, perchè non mandargli un link a questo tutorial? Di sicuro non farà male :)
Altre letture
Volete aggiungere musiche ed effetti sonori? Guardate Sounds & Music nel manuale per un'occhiata veloce.
Potreste essere interessati al nostro tutorial alternativo per i platform, Come fare un platform.
Se volete sapere di più su come gli eventi funzionano in Construct 2, guardate la sezione How Events Work nel manuale. E' estremamente raccomandato in maniera che possiate cominciare in fretta con i vostri progetti! Quindi per utleriori informazioni, non dimenticate che c'è la documentazione completa nel manuale