A recipe of: Flappy birds! – ( Il Menu )

Flappy Birds, Il menu!

Con questo terzo tutorial, andremo a creare lo stato Menu, e i suoi elementi grafici.

Ingredienti:

 

Riprendiamo!

Con l’ultimo tutorial eravamo rimasti con l’introduzione dello StatoMenu e del GameStateManager, ora, finalmente, possiamo iniziare a vedere qualche elemento grafico.

Ecco un piccolo screenshot di come eravamo rimasti:

dove-eravamo-rimasti

 

Immagini

Con questo tutorial, andremo a impostare lo sfondo di gioco e il pulsante “play” per iniziare a giocare.

Tra gli ingredienti, vi ho lasciato il download delle due immagini, scaricateli e metteteli dentro la cartella assets (tutte le immagini andranno messe li dentro).

assets

 

La cartella si puo’ ritrovare tramite il percorso Android -> Assets come riportato nella figura qua accanto.

Una volta caricate le due immagini, l’immagine di sfondo e il pulsante per giocare, dovremo fare in modo che queste, vengano mostrate nel Menu all’avvio del gioco.

Per fare cio’, andiamo ad aprire la classe “StatoMenu” e aggiungiamo due variabili di tipo Texture, fornite dalla libreria Badlogic.

Una variabile l’andremo a chiamare “Sfondo” e un’altra variabile l’andremo a chiamare “Play”.

private Texture sfondo;
private Texture play;

Dichiarate le due variabili andremo ad assegnargli all’interno del costruttore le due immagini.

public StatoMenu(GameStateManager gsm) {

    super(gsm);
    sfondo = new Texture("large.jpg");
    play = new Texture("playbtn.png");
}

Ora, andiamo a utilizzare la funzione di render con lo spriteBatch, per renderizzare le immagini a schermo.

Per fare cio’, nella funzione di render andremo per prima cosa a utilizzare il metodo begin dello spritebatch, per iniziare la fase di renderizzazione, dopodiche, tramite il metodo draw, andiamo a dirgli cosa renderizzare dove e con quali dimensioni.

Lo sfondo, dovra’ occupare tutto lo schermo di gioco, per tanto, inizieremo a disegnarlo dalla posizione “0,0” e dovra’ essere della stessa grandezza dello schermo, quindi in codice avremo che:

spriteBatch.draw(sfondo,0,0, FlappyBirdsGame.LARGHEZZA,FlappyBirdsGame.ALTEZZA);

Mentre, il pulsante di play, dovra’ essere inserito al centro della schermata, e avere delle dimensioni ridotte.

in codice avremo che il pulsante di play sara’:

spriteBatch.draw(play,FlappyBirdsGame.LARGHEZZA/2 - play.getWidth()/2 ,FlappyBirdsGame.ALTEZZA/2 - play.getHeight()/2);

Infine, finito di disegnare, possiamo andare a chiudere lo spritebatch, tramite il suo metodo “end”.

La funzione di render dovrebbe ora apparirvi cosi:

renderfunction

flappybirdssfondopulsante

 

Ora, se provate a lanciare l’applicazione, e avete fatto tutto correttamente, dovrete vedere una schermata del tipo come riportata qui a fianco.

 

 

Nel prossimo tutorial, renderemo interattivo il pulsante play, e andandolo a cliccare, andremo nella schermata di gioco, che andremo a implementare sempre nel prossimo tutorial.

 

 

Saluti dal vostro nabbo Developer

Marco Tamagno

Facebook

Google+

 

 

Rispondi