A recipe of: Flappy birds! – (Volando tra gli ostacoli)

Con questo Tutorial Andremo volando tra gli ostacoli di gioco.

 

Ingredienti:

 

Aumentiamo il numero di ostacoli!

Nell’ultimo tutorial, siamo andati a creare la classe ostacoli, per andare a rappresentare i vari tubi nel gioco.

Ora prima di iniziare a far volare il nostro protagonista tra di essi, dovremo crearne tanti in sequenza, e fare in modo, che quelli superati e usciti dalla schermo, si riposizionino davanti, cosi da andare a creare una sequenza infinita di ostacoli.

Iniziamo con il creare la funzione “riposiziona” nella classe degli ostacoli.

 

La funzione riposiziona

Tutto quello che dovra’ fare questa funzione, sara’ riposizionare i nostri in una nuova X, di conseguenza, all’interno della funzione, non faremo altro che settare la nuova posizione.

public void riposiziona(float x){
    posizioneSuperiore.set(x, rand.nextInt(150)+ 100 + 110);
    posizioneInferiore.set(x, posizioneSuperiore.y - 150 - TuboInferiore.getHeight());

}

 

Un po’ di spazio tra i tubi

Creata la funzione che ci permette di riposizionare i tubi una volta usciti dallo schermo, ora andiamo a creare due costanti che ci serviranno in futuro.

Una costante ci rappresentera’ lo spazio che vogliamo lasciare tra due coppie di tubi, mentre un’altra costante ci rappresentera’ il numero di coppie di tubi che vogliamo avere nel nostro gioco.

Andiamo quindi nella classe stato di gioco e aggiungiamo queste due stringhe:

public class StatoGioco extends Stato {

    private static final int SPAZIO = 100;
    private static final int NUMERO_TUBI = 6;

 

Un’array di ostacoli

Ora, finalmente possiamo andare ad aumentare il numero di ostacoli presenti nel gioco.

Per fare cio’ creiamo all’interno del nostro gioco un’array di ostacoli e chiamiamolo tubi.

private Array<Ostacoli> tubi;

E andiamo a crearli dentro il costruttore sfruttando la costante creata prima per il loop.

ostacoli = new Ostacoli(150);

tubi = new Array<Ostacoli>();
for(int i = 0; i < NUMERO_TUBI;i++){
    tubi.add(new Ostacoli(i * (SPAZIO + 55 )));
}

Fatto cio’, possiamo eliminare il vecchio tubo creato nella lezione precedente in quanto ora ne abbiamo un’intero array.

 

Riposizioniamo i tubi

Ora, dentro la classe dello stato di gioco, dentro la funzione update, andiamo a controllare quando un tubo esce fuori dallo schermo, e nel caso accada, andiamo a riposizionarlo.

Quindi andiamo a scrivere:

for(Ostacoli ostacolo : tubi){
    if(camera.position.x - (camera.viewportWidth/2) > ostacolo.getPosizioneSuperiore().x + ostacolo.getTuboSuperiore().getWidth()){
        ostacolo.riposiziona(ostacolo.getPosizioneSuperiore().x + ((55 + SPAZIO))*NUMERO_TUBI);
    }
}

Ci sono molte operazioni in questo stralcio di codice, ma sostanzialmente, quello che andiamo a fare, e’ spostare il nostro tubo appena uscito fuori dallo schermo, dopo l’ultimo tubo che deve ancora arrivare, con la propria spaziatura, in modo tale da andare a creare un loop infinito di tubi.

 

Renderizziamo i vari tubi

Nella funzione render, stiamo ancora renderizzando solo un tubo, quello vecchio che abbiamo rimosso, ora dobbiamo levarlo e andare invece a renderizzare tutti gli altri tubi (in ogni caso esattamente come avevamo fatto per quello).

La nostra nuova funzione di render sara’ quindi cosi:

 

public void render(SpriteBatch spriteBatch) {
    spriteBatch.setProjectionMatrix(camera.combined);
    spriteBatch.begin();
    spriteBatch.draw(sfondo,camera.position.x - (camera.viewportWidth / 2),0,FlappyBirdsGame.LARGHEZZA / 2,FlappyBirdsGame.ALTEZZA / 2);
    spriteBatch.draw(bird.getTexture(),bird.getPosizione().x,bird.getPosizione().y);
    for(Ostacoli ostacolo : tubi) {
        spriteBatch.draw(ostacolo.getTuboSuperiore(), ostacolo.getPosizioneSuperiore().x, ostacolo.getPosizioneSuperiore().y);
        spriteBatch.draw(ostacolo.getTuboInferiore(), ostacolo.getPosizioneInferiore().x, ostacolo.getPosizioneInferiore().y);
    }
    spriteBatch.end();
}

 

Muoviamoci nell’asse delle x

Ora andiamo nella classe “bird” e diamo una velocita’ orizzontale al nostro protagonista.

Andiamo quindi a settare una velocita’ orizzontale costante:

public class Bird extends Sprite {

    public static final int GRAVITY = -10;
    private static final int VELOCITA_ORIZZONTALE = 120;

E all’interno di update, sempre nella classe “bird” modifichiamo la stringa posizione.add e aggiungiamoci la velocita’ orizzontale.

public void update(float dt) {
    if(this.posizione.y >= 0) {
        velocita.add(0, GRAVITY);
        velocita.scl(dt);
        posizione.add(VELOCITA_ORIZZONTALE * dt, velocita.y);
        velocita.scl(1 / dt);
    }

Fatto cio’ possiamo tornare nel nostro stato di gioco, perche’ quello che dovremo fare, sara’ tenere l’uccello al centro dello schermo, e questo lo faremo grazie alla camera.

In update andiamo quindi a cambiare la posizione della nostra camera:

public void update(float deltaTime) {
    InputManager();
    bird.update(deltaTime);

    camera.position.x = bird.getPosizione().x + 50;

    for(Ostacoli ostacolo : tubi){
        if(camera.position.x - (camera.viewportWidth/2) > ostacolo.getPosizioneSuperiore().x + ostacolo.getTuboSuperiore().getWidth()){
            ostacolo.riposiziona(ostacolo.getPosizioneSuperiore().x + ((55 + SPAZIO))*NUMERO_TUBI);
        }
    }
camera.update();
}

yay

 

 

 

Ora, avremo che la camera seguira il nostro protagonista.

PS: non scordatevi il camera.update alla fine, dobbiamo far sapere al nostro programma che la posizione della camera e’ stata cambiata.

 

Fatto cio’ possiamo andare testare il programma e goderci il risultato, finalmente si riesce a vedere bene la forma del gioco 🙂

 

 

 

 

 

File creati durante questo tutorial: game

 

 

 

Saluti dal vostro nabbo Developer

Marco Tamagno

Facebook

Google+

Rispondi