Tutorials » Sviluppo » Internet » Flash CS3 » Actionscript 3.0

Actionscript 3.0 for beginners: lesson #2

mercoledì 3 settembre, 2008

Come promesso ecco la seconda lezione su ActionScript 3.0! Oggi inizieremo l'analisi di un semplice progetto che riproduce il giochino del Tris o Tic Tac Toe. Ho cercato di inserire in questo esempio alcune caratteristiche particolari di ActionScript 3.0, cercando di dare spazio alla comprensione e non allo stile. Ne segue che se avessi dovuto scrivere il "gioco" davvero, probabilmente l'avrei strutturato in modo assai diverso, ma in questo caso ho cercato di mediare tra una classica programmazione compatta ed ermetica con una maggiormente comprensibile per i neofiti. Ho realizzato un'unica classe documento, procedura non necessaria ma utile per rimanere in linea con la precedente lezione.

Tic Tac Toe

Loading Flash Player...

I sorgenti

Oltre al file ActionScript (.as) della classe documento, che inizieremo ad analizzare in dettaglio qui, il progetto è corredato con un classico filmato Flash (.fla) che fornisce l'interfaccia di gioco. Tutti i file necessari per seguire il commento al codice sono disponibili qui.

Schema del gioco

In questa versione del gioco non ho inserito il computer come avversario, attività che potete svolgere voi lettori se ne avete voglia. Il gioco, quindi, alterna due giocatori, esattamente come se stessimo giocando su una lavagna o su un foglio di carta. Lo schema logico che seguiremo è il seguente:

Schema Tic Tac Toe

Visione globale

Prima di iniziare l'analisi vera e propria del codice è bene visualizzare lo schema di una classe generica, composta dal package, class e il suo interno:

Schema Tic Tac Toe

Costruttore Classe Documento

Come abbiamo anticipato la scorsa volta, quando leghiamo ad un documento Flash - un filmato - una classe documento, essendo quest'ultima un vero e proprio oggetto da istanziare, il sistema avvierà il costruttore.

PLAIN TEXT
Actionscript:
  1. /**
  2.  * Costruttore della classe
  3.  */
  4. public function TicTacToe ():void {
  5.     // imposta stage scale mode e stage align
  6.     stage.scaleMode    = StageScaleMode.NO_SCALE
  7.     stage.align            = StageAlign.TOP_LEFT;
  8.     addEventListener(Event.ADDED_TO_STAGE, init);
  9. }

Il costruttore nel nostro caso imposta l'oggetto stage, che rappresenta il contenitore all'interno di un browser e aggiunge la chiamata alla funzione/metodo init() quando la nostra classe documento è aggiunta allo stage, cioè quando sarà visualizzata! Questa è una procedura standard che adotto spesso. In alcuni casi è del tutto inutile, tuttavia se si fa uso di componenti, cioè quegli oggetti visuali presenti nell'interfaccia di Flash (come TextArea, TreeView, etc...), questi non saranno disponibili (come puntatori) fino a quando l'evento ADDED_TO_STAGE non è stato rilasciato! Così, per mettersi al sicuro, è buona norma seguire sempre questa via, in previsione di eventuali nuove release.

Per chi è proprio all'asciutto di programmazione ad oggetti, consiglio quantomeno la lettura di Classi, Oggetti e Istanze!

La funzione, o metodo, init() è stata definita privata (vedi Actionscript 3.0: public, protected, private e internal ) tramite la keyword private:

PLAIN TEXT
Actionscript:
  1. /**
  2.  * Metodo invocato appena il MovieClip è aggiunto allo stage
  3.  *
  4.  * @param        {event}        e=passato da addEventListener(). Può essere null
  5.  * @return         void
  6.  * @private
  7.  */
  8. private function init(e:Event = null):void {
  9.     initCell();
  10. }

Per ora, come si vede, questa funzione non fa altro che chiamarne un'altra, initCell(). Spesso nel metodo init() vengono inserite tutte le funzioni di inizializzazione, evitando di inserire direttamente il codice aperto. Questo può ritornare utile in caso serva re-inizializzare qualche parametro. Essendo questo un esempio di un gioco relativamente semplice, può risultare strano avere questo doppio salto quasi inutile, tuttavia in altri casi il metodo init() può risultare molto più ampio, chiamando una serie di init functions tipo:

PLAIN TEXT
Actionscript:
  1. private function init(e:Event = null):void {
  2.     initBackground();
  3.     initIntro();
  4.     initPlayers();
  5.     initScore();
  6.     initEnemy();
  7.     initSound();
  8.     start();
  9. }

Il metodo init() viene invocato (cioè chiamato) quando il sistema rilascia l'evento ADDED_TO_STAGE. Proprio per questo motivo è stato inserito il parametro e:Event.

Tricks note: può capitare spesso di avere metodi (come init()) che vengono richiamati sia da eventi, sia all'interno del codice. È proprio per questo motivo che il parametro di questo metodo è stato impostato a e:Event = null. In questo modo, infatti, se dovesse mai servire, possiamo richiamare init() senza passare nessun parametro, in quanto non siamo un evento e quindi non potremmo passare il parametro e:Event (a meno di "simularlo" con un notevole spreco di energie). Per dettagli sulla gestione dei parametri in Actionscript 3.0 si veda anche: Argomenti variabili e di default in Javascript, Actionscript e PHP e Argomenti variabili in Actionscript 3.0,

Inizializzazione del gioco

PLAIN TEXT
Actionscript:
  1. /**
  2.  * Inizializza un array lineare che rappresenterà la nostra griglia di gioco.
  3.  * Questa "griglia" viene preimpostata a zero (0), valore che indica che nessun
  4.  * segno (o/x) è stato fatto.
  5.  * Al player 1 (o) verrà associato il valore uno (1). Mentre al player 2 (x) verrà
  6.  * associato il valore dieci (10). Con questo stratagemma quando ad esempio la
  7.  * somma dei valori presenti nella riga 1 è uguale a 3, sapremo che ha vinto il player 1.
  8.  * Se la somma, invece, della colonna 1 è 30, allora ha vinto il player 2... e via così.
  9.  *
  10.  * 0 | 0 | 0
  11.  * --+---+---
  12.  * 0 | 0 | 0
  13.  * --+---+---
  14.  * 0 | 0 | 0
  15.  *
  16.  * @param        void
  17.  * @return         void
  18.  * @private
  19.  */
  20. private function initCell():void {
  21.     // preimposto l'array di gioco a zero
  22.     __cell            = [0,0,0, 0,0,0, 0,0,0];
  23.     // inizia sempre il giocatore (player) numero 1
  24.     __player        = 1;
  25.     // disegno la griglia a video
  26.     createGrid();
  27.     // mostro a video il turno del giocatore (in questo caso 1)
  28.     turno_txt.text     = 'PLAYER '+__player;
  29.     // questa variabile è usata per mettere il gioco in pausa se true
  30.     // start-game
  31.     __stop            = false;
  32. }

Questo metodo initCell() si preoccupa di inizializzare tutte le variabili e creare tutti gli oggetti del gioco.

Tricks note: quasi tutti i programmatori di videogame conoscono perfettamente la tecnica di mappare l'area di gioco in un array ad una o più dimensioni. Questa tecnica, usata nei cosidetti Tile Game, permette di eseguire tutta una serie di controlli in un'area logica svincolata dalla grafica a video. In questo specifico caso io ho usato un semplice array monodimensionale composto da 9 elementi che rappresentano le 9 caselle del gioco. Il fatto che gli elementi dell'array siano sequenziali, rispetto alla griglia 3 x 3, non è un problema come vedremo, ma solo una questione di punti di vista!
Per chi vuole approfondire l'interessante argomento, consiglio la lettura di Tile Based Games

Tutte le variabili ad uso interno, globali a livello di classe, uso indicarle con il doppio underscore davanti. Queste, infatti, durante la prima stesura di una classe potrebbero diventare successivamente proprietà pubbliche, sfruttando l'incapsulamento proprio della programmazione OO (vedi Scrivere buon codice OO in Adobe Flash). __player e __stop indicano rispettivamente il giocatore attivo e lo stato del gioco.

Per adesso mi fermo qui! La prossima volta analizzeremo il metodo createGrid() e il resto del gioco, se avete dubbi o domande su questa parte commentate.

Post correlati

Questo articolo ti è stato utile?: Per nientePocoAbbastanzaMoltoMoltissimo
Loading ... Loading ...

Tags: , , , , , , ,

4 commenti a: “Actionscript 3.0 for beginners: lesson #2”

  1. getAvatar 1.0
    28 set, 2008 Actionscript 3.0 for beginners: lesson #3 | Undolog.com:

    [...] l'analisi dell'esempio del gioco Tic Tac Toe, presentato in Actionscript 3.0 for beginners: lesson #2. Eravamo arrivati alla funzione che crea la griglia di gioco: PLAIN TEXT [...]

  2. getAvatar 1.0
    04 nov, 2008 Billigflüge:

    Even though I don't like tic tac toe, because the first player always wins, if he makes his marks on at the right places, your tut is great!! There are some point unclear to me yet, but I hope you will translate the site fastly. Kind regards

    Rispondi Quota
  3. getAvatar 1.0
    11 nov, 2008 Actionscript 3.0 for beginners: lesson #4 | Undolog.com:

    [...] il nostro codice di esempio del TicTacToe (che trovate per intero su Google Code) e iniziamo ad analizzarlo in [...]

  4. getAvatar 1.0
    28 nov, 2008 dosa85:

    ontinuo a non capire come inserire il codice....mi da errori se copio e incollo normalmente nel file AS.......bhà!

    Rispondi Quota

Lascia un commento

TAG XHTML PERMESSI: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> INSERIMENTO CODICE: 
<pre></pre>         // blocco generico
[code][/code]       // blocco generico
[as][/as]           // Actionscript
[css][/css]         // CSS Style Sheet
[html][/html]       // HTML
[js][/js]           // Javascript
[objc][/objc]       // Objective-C
[php][/php]         // PHP
[sql][/sql]         // SQL