Categories
Giochi Realizzare Videogames

Realizzare Asteroids [parte 6]

Nella sesta lezione si vedono finalmente gli Asteroidi (ed era ora!). Gestiremo la creazione, il movimento e la distruzione degli Asteroidi.

Loading spinner

Questa è la sesta lezione su come realizzare un gioco simile ad Asteroids e ancora non abbiamo visto un solo asteroide!

Direi che è il momento di rimediare: in questa lezione creeremo il campo di Asteroidi, ne gestiremo il movimento e anche l’esplosione.

Per disegnare un Asteroide stilizzato possiamo utilizzare tanti sistemi, io ho deciso di semplificare al massimo la forma disegnando dei semplici esagoni.

Mi ripropongo di scrivere un Tutorial su come disegnare poligoni regolari matematicamente, per oggi ci limiteremo a disegnare un poligono che somiglia ad un esagono anche se non è proprio perfetto.

La Classe che disegnerà l’esagono è molto semplice: somiglia a quella che disegna l’Astronave e non fa altro che tracciare una forma in base alle coordinate che passiamo al Costruttore. La dimensione dell’esagono la impostiamo dopo averlo disegnato, in questo modo tutto è più semplice.

Creiamo dentro la cartella grafica un file chiamato Roccia.as e scriviamo questo codice:

package grafica {
    import flash.display.Sprite;
    public class Roccia extends Sprite {
        public function Roccia(color:uint = 26265, size:uint = 30) {
            this.graphics.beginFill(color);
            this.graphics.moveTo(0,-8);
            this.graphics.lineTo(7,-4);
            this.graphics.lineTo(7,4);
            this.graphics.lineTo(0,8);
            this.graphics.lineTo(-7,4);
            this.graphics.lineTo(-7,-4);
            this.graphics.lineTo(0,-8);
            this.graphics.endFill();
            this.height = size;
            this.scaleX = this.scaleY;
        }
    }
}

Ecco cosa abbiamo disegnato:

Coordinate per disegnare un esagono.
Le coordinate dei vertici del nostro esagono.

Dopo aver disegnato questo esagono di altezza complessiva 16 pixel, ne sistemiamo le proporzioni in base al valore passato al Costruttore, questo lavoro viene eseguito dalle ultime due righe:

            this.height = size;
            this.scaleX = this.scaleY;

Adesso che abbiamo realizzato la grafica dell’Asteroide possiamo creare la Classe che si occuperà del suo comportamento. Questa Classe non è molto diversa da quella che regola il comportamento del proiettile:

package elementi{
    import grafica.Roccia;
    import flash.display.Sprite;
    public class Rock extends Sprite {
        private var _color:uint;
        private var _boostX:Number;
        private var _boostY:Number;
        private var _boostR:Number;
        private var _size;
        public function Rock(x:int = 100,y:int = 100,color:uint = 0x006699, size:uint = 32,bx:Number = 1, by:Number = 1,br:Number = 1) {
            _color = color;
            this.x = x;
            this.y = y;
            _boostX = bx;
            _boostY = by;
            _boostR = br;
            _size = size;
            this.addChild(new Roccia(_color, size));
        }
        public function muovi() {
            if (this.stage) {
                this.x += _boostX;
                this.y += _boostY;
                if (this.x < -this.sz/2) {
                    this.x = stage.stageWidth+(this.sz/2);
                } else if (this.x > stage.stageWidth+(this.sz/2)) {
                    this.x = -this.sz/2;
                }
                if (this.y < -this.sz/2) {
                    this.y = stage.stageHeight+(this.sz/2);
                } else if (this.y > stage.stageHeight+(this.sz/2)) {
                    this.y = -this.sz/2;
                }
                this.rotation += _boostR;
            }
        }
        public function get sz():uint {
            return _size;
        }
    }
}

Oltre ad avere una spinta orizzontale e una spinta verticale, rappresentate dalle Variabili _boostX e _boostY, gli Asteroidi hanno anche una spinta di rotazione, rappresentata dalla variabile _boostR, questo serve soltanto a dare un effetto fluttuante alle rocce, che ruoteranno leggermente mentre vagano nello spazio.

Anche per questa Classe, la parte importante è data dal Metodo muovi che gestisce lo spostamento e fa in modo che quando un Asteroide esce fuori dallo schermo di gioco rientri dall’altra parte, con qualche accorgimento in più rispetto al proiettile…

Quando il proiettile arriva al bordo dello schermo di gioco, sparisce. Questo non crea fastidio perché il proiettile è un oggetto molto piccolo. Un Asteroide è ben più grande, non è un bell’effetto se questo sparisce una volta toccato il bordo dello schermo.

Tutto intorno allo schermo di gioco ho previsto un’area di tolleranza pari alla metà del raggio dell’esagono, in questo modo l’Asteroide ha il tempo di uscire completamente fuori dallo schermo prima di scomparire ed essere trasferito all’estremo opposto. Se il trasferimento avviene al di fuori dell’area visibile non si vede che l’elemento sparisce:

Area di movimento degli Asteroidi e Area di gioco.
Area di movimento degli Asteroidi e Area di gioco.

Gestione degli Asteroidi all’interno del gioco

A questo punto dobbiamo inervenire sulla Classe AsteroidsGame per inserire gli Asteroidi all’interno del gioco.

Prima modifica: importiamo la Classe necessaria

import elementi.Rock;

Seconda modifica: dichiariamo un Array per tenere traccia di tutti gli Asteroidi che esistono sullo schermo

private var _asteroidsArray:Array = new Array();

Terza modifica: all’interno del Metodo init chiamiamo una Funzione che avrà il compito di creare i primi Asteroidi

addAsteroids();

Quarta modifica: dobbiamo scrivere la Funzione addAsteroids

private function addAsteroids() {
    for (var i = 0; i < 4; i++) {
        var r = new Rock(-64,-64,0,128,(Math.random()*2)-1,(Math.random()*2)-1,(Math.random()*2)-1);
        this.addChild(r);
        _asteroidsArray.push(r);
    }
}

Questa Funzione aggiunge 4 Asteroidi nuovi, per modificare questo numero potete cambiare a piacere il valore nel Ciclo for.

I primi quattro Asteroidi hanno una lunghezza di 128 pixel e vengono creati fuori dall’area visibile, alle coordinate -64, -64.

Ogni Asteroide creato viene conservato all’interno dell’Array _asteroidsArray.

Quinta modifica: gestiamo il movimento degli Asteroidi dentro al Metogo goOn

Questo codice va aggiunto dentro al Metodo goOn:

for (var i = 0; i < _asteroidsArray.length; i++) {
    _asteroidsArray[i].muovi();
    if (_asteroidsArray[i].hitTestPoint(_b.x,_b.y,true) && _b.parent) {
        this.removeChild(_b);
        splitAsteroid(i);
    }
}

Questo Ciclo, oltre a richiamare il Metodo muovi di ogni Asteroide, controlla se l’Asteroide è stato colpito da un proiettile. Se l’Asteroide è stato colpito demanda la gestione della sua distruzione ad un’altra funzione, chiamata splitAsteroid.

Sesta modifica: la funzione che fa esplodere gli Asteroidi

private function splitAsteroid(index) {
    var myAsteroid = _asteroidsArray[index];
    if (myAsteroid.sz > 16) {
        for (var i = 0; i < 2; i++) {
            var r = new Rock(myAsteroid.x,myAsteroid.y,0,myAsteroid.sz/2,(Math.random()*2)-1,(Math.random()*2)-1,(Math.random()*2)-1);
            this.addChild(r);
            _asteroidsArray.push(r);
        }
    }
    _asteroidsArray.splice(index,1);
    this.removeChild(myAsteroid);
    myAsteroid = null;
 }

Se la grandezza dell’Asteroide colpito è maggiore di 16 pixel, vengono creati al suo posto due Asteroidi più piccoli. I due nuovi Asteroidi vengono aggiunti all’Array _asteroidsArray, in modo che anche il loro movimenti sia ben gestito.

Se la grandezza dell’Asteroide colpito non è maggiore di 16 pixel non viene creato nulla.

L’asteroide originale viene rimosso in ogni caso dallo Stage e dall’Array _asteroidsArray.

Questo è il prodotto al termine della sesta lezione:

[kml_flashembed publishmethod=”dynamic” fversion=”10.0.0″ useexpressinstall=”true” movie=”https://www.danielealessandra.com/wp-content/uploads/2010/05/Asteroids1.swf” width=”300″ height=”300″ targetclass=”flashmovie”]

Get Adobe Flash player

[/kml_flashembed]

La collisione dell’Astronave non è ancora gestita, quindi non è possibile perdere… godetevelo fino alla prossima lezione.

Loading spinner

Leave a Reply

Your email address will not be published. Required fields are marked *