Pagine    Articoli    Prodotti    Forum    Cerca  
Nickname

Password


Non sei registrato?
Registrati a GPI qui!

Puoi anche attivare un vecchio utente GPI e chiedere una nuova password.
I Team

Mappa Team
I nostri utenti

Mappa Utenti
  Programmare un videogame Flash con Starling #6
Pubblicato da Andrea Venturi il 2013-02-17 16:32:53

“trois, deux, un, Fiiiiiiù”

 

In questo tutorial vedremo come scrivere del testo.

 

Momento teoria

Per scrivere i testi si possono usare due tipi di font:

 

* Embedded Font

* Bitmap Font

 

Ovviamente hanno due comportamenti diversi, senza entrare troppo nel dettaglio vediamo come si comportano.

 

Il metodo Embedded Font prende il testo da scrivere e utilizzando il font di sistema ne crea una rappresentazione vettoriale che verrà rasterizzata e passata alla GPU per essere visualizzata.

 

Il secondo metodo invece prevede l’utilizzo di una Bitmap font, che insieme al testo, viene passata direttamente alla GPU per la visualizzazione.

 

Come possiamo facilmente capire il secondo metodo risulta migliore, in quanto salta alcuni passaggi discretamente dispendiosi di risorse.

 

Iniziamo quindi con il creare la Bitmap font seguendo i seguenti passaggi:

 

Prendiamo il programma per il nostro sistema

Mac: http://www.71squared.com/en/glyphdesigner

Windows: http://www.angelcode.com/products/bmfont/

 

Per chi utilizza il programma sotto Windows, pochi passaggi per esportare i file giusti

andate in Option->Export Option e:

  1. in basso andate a cambiare il settaggio per esportare in PNG.
  2. Sopra in font descriptor selezionare XML.
  3. settate la Bitmap depth a 32 e nei canali (A.one, R: glyph G:glyph B: glyph)

 

Ora andate su Option-> Font Setting:

  1. scegliete il font da cui partire
  2. spuntate Font smoothing
  3. spuntate Clear type
  4. spuntate Charset Unicode
  5. impostate Size 32 (valore puramente a braccio)

[Salvate queste impostazioni che poi potrete richiamarle in futuro]

 

Il programma inizialmente non seleziona i caratteri, quindi andate a selezionare quelli che non userete ed esportate.

 

bitmapfont.png

 

Durante l’esportazione verranno creati due file un .PNG e un .FNT

 

L’immagine rappresenta i vostri caratteri, mentre il .FNT è un XML che racchiude i dati per poter andare a leggere i caratteri nell’immagine; in pratica funziona come le texture atlas.

 

Andiamo a creare la cartella font sotto media ed spostiamoci i file appena creati.

 

Ora passiamo al codice:

 

Mano al Codice

Apriamo immediatamente Assets.as, in quanto dobbiamo includere nel progetto il font creato.

 

Iniziamo con l’inclusione di due classi:

import starling.text.BitmapFont;
import starling.text.TextField;

Subito dopo andiamo a embeddare ed associare a delle classi i nostri due file creati precedentemente

[Embed(source="../media/font/mioFont.fnt", mimeType="application/octet-stream")]
public static const XMLFont:Class;
                
[Embed(source = "../media/font/mioFont_0.png")]
private static const FontTexture:Class;

a questo punto ci serve una variabile per memorizzare il nostro font, perchè utilizzeremo lo stesso meccanismo che abbiamo visto per le texture

public static var MioFont:BitmapFont;

e per concludere la funzione per popolare la nostra variabile

public static function getFont():BitmapFont
{

}

Cosa andiamo a scriverci dentro?

prima di tutto carichiamo l’immagine .PNG come Texture e il file .fnt come XML

var FontText:Texture = Texture.fromBitmap(new FontTexture());
var FontXML:XML = XML(new XMLFont());

dopo istanziamo l’oggetto di tipo BitmapFont e passiamo al costruttore le variabili appena create

MioFont= new BitmapFont(FontText, FontXML);

Attenzione!  questo è il passaggio più importante, si deve registrare il font, con registrare il font si intende che dobbiamo dire al framework Starling che la BitmapFont appena creata deve essere usata attraverso il suo nome.

 

Quindi andiamo a chiamare il metodo statico per farlo

TextField.registerBitmapFont(MioFont);

Incapsuliamo le righe appena scritte in un blocco if e subito fuori ritorniamo la variabile MioFont.

 

Il codice risultante dovrebbe apparire

public static function getFont():BitmapFont
{
    if (MioFont == null)
    {
        var FontText:Texture = Texture.fromBitmap(new FontTexture());
        var FontXML:XML = XML(new XMLFont());
        MioFont = new BitmapFont(FontText, FontXML);
        TextField.registerBitmapFont(MioFont); //<-- importante registrare il bitmap font
    }
    return MioFont;
}

A questo punto possiamo utilizzare il font creato per renderizzare testo su schermo.

 

Dato che sono un appassionato di archeologia videoludica, voglio mantenere uno stile retrò.

Quindi prima di far partire la nostra astronave contro i nemici diamo un senso di dinamismo facendo apparite due scritte prima di far partire lo scontro.

 

Apriamo il file StarField.as ed includiamo TextField

import starling.text.TextField;

e

import flash.utils.setTimeout;
import flash.utils.clearTimeout;

che useremo per temporizzare le nostre scritte.

Per realizzare questo ci appoggeremo a due attributi e della funzione setTimeout

private var startText:TextField;
private var idt:uint;

In pratica i “timeout” di flash sono eventi temporizzati la cui registrazione prende due parametri: una funzione e un intervallo temporale espresso in millisecondi, inoltre ritorna un intero, che rappresenta l’indice degli eventi registrati.

Al passare dei millisecondi viene effettuata la chiamata di funzione.

Per  qualsivoglia motivo  vogliamo cancellare il Timeout appena registrato, dobbiamo chiamare la clearTimeout passando come parametro l’indice della registrazione.

 

Prima di tutto disegnamo il nostro testo, spostiamoci nella drawScreen e alla fine andiamo a istanziare il nostro textField e aggiungiamolo come figlio per essere disegnato

startText = new TextField(200, 40, "READY...", Assets.getFont().name, 32,0xffffff);
addChild(startText);

I parametri che prende il costruttore di TextField sono la larghezza e l’altezza (sono autoridimensionabili), il testo, il font, la grandezza del font e il colore.

Ricordatevi a che grandezza avete creato il vostro font e usate quel valore.

 

Andiamo nella initialize e alla fine del metodo andiamo ad impostare la  posizione del nostro testo (nel centro dello stage) e facciamo partire il nostro primo timeout.

startText.x = (stage.stageWidth >> 1) - (startText.width >> 1);
startText.y = (stage.stageHeight >> 1) - (startText.height >> 1);
idt = setTimeout(onReady, 1000);

A questo punto andiamo a creare la funzione che verrà chiamata da questo Timeout.

 

La funzione avrà il solo scopo di cambiare il testo e registrare un’altro Timeout.

private function onReady():void
{
        startText.text = "GO!";
        idt = setTimeout(onStart, 500);
}

Ora tocca creare la onStart che cancellerà sia il Timeout che il testo, infine  far partire il gioco.

private function onStart():void
{
        clearTimeout(idt);
        startText.visible = false;
        removeChild(startText);
}

 

Ora andiamo a compilare.

 

Ed ecco il link al repository

 

Campagne crowfunding

Just One Line
Siamo presenti su

     
Copyright ©2016 - Manifesto - Privacy - Termini di Servizio - Community - Collaboratori - Contattaci