[Tutoriel Andengine] Partie 3 – Un peu de texte

Hier, nous avons vu comment installer et utiliser Andengine pour afficher des images ainsi que dessiner des formes. Aujourd’hui, nous allons passer à l’ajout de texte sur notre scène.

Rien de bien compliqué par rapport aux autres tutoriaux, il nous faut une police d’écriture pour écrire notre message, voyons comment faire de plus près.

Les textes statiques

Commençons par déclarer une Police d’écriture comme ceci :

private Font font;

Puis, chargeons tout cela dans notre méthode onLoadResources

Tout d’abord, nous allons déclarer une variable de type Texture, qui contiendra les caractères de la police.

final BitmapTextureAtlas fontTexture = new BitmapTextureAtlas(256, 256, TextureOptions.BILINEAR);

Puis comme pour les images, on charge la texture dans le moteur

this.getEngine().getTextureManager().loadTexture(fontTexture);

Nous savions faire cela déjà dans le tutoriel précédent, donc je n’y reviendrais pas, mais la partie importante se trouve à la suite. Il faut instancier notre police d’écriture.

Voici la déclaration attendue par notre moteur :

Font(Texture pTexture, Typeface pTypeface, float pSize, boolean pAntiAlias, int pColor)

Elle prend en paramètres :

• Une texture
• un TypeFace (Police d’écriture)
• Sa taille
• Utilisation de l’anti-crénelage
• Sa couleur

Voici ce que nous allons faire :

font = new Font(fontTexture, Typeface.create(Typeface.DEFAULT, Typeface.NORMAL), 24, true, Color.WHITE);

Nous lui passons notre texture en paramètre, puis nous allons utiliser la police par défaut du système grâce à la méthode create de l’objet TypeFace, puis sa taille, etc…

public static Typeface create (Typeface family, int style)

Paramètres :

• family Peut être NULL. Le nom de la police existante.
• style Le style (normal, gras, italique) de la police. e.g. NORMAL, BOLD, ITALIC, BOLD_ITALIC

Et pour finir, nous chargeons dans notre moteur tout comme pour les textures, sauf que cette fois-ci on utilisera le FontManager.

this.getEngine().getFontManager().loadFont(font);

Voilà, nous sommes près à écrire quelque chose.

Dirigeons-nous dans notre méthode onLoadScene

final Text monTexte = new Text(0, 0, font , "Hello world !");

scene.attachChild(monTexte);

On commence par le couple de coordonnées X et Y, puis notre police et pour finir notre message.

Ensuite, on l’ajoute à notre scène.

Lancez l’application et voyez :

Les textes dynamiques

Dans notre version précédente, vous ne pouvez plus modifier le texte de notre message une fois celui-ci spécifié, c’est plutôt embêtant si le message doit changer de temps à autre.

Andengine dispose d’une classe pour faire cela, déclarons un variable avec ce type :

private ChangeableText changeableText;

Elle fonctionne comme la classe Text, à l’exception qu’elle dispose d’une methode setText(String) qui permet de changer sa valeur au cours du temps :

changeableText = new ChangeableText(0, 50, font, "Coucou tout le monde");

changeableText.setText("Et puis non !");

scene.attachChild(changeableText);

Voyez par vous-même le texte ne sera pas “Coucou tout le monde” mais “Et puis non !”

A vous d’utiliser la bonne classe selon vos besoins.

Ma propre police d’écriture

Dans AndEngine, nous pouvons utiliser nos propres polices d’écriture, si celle par défaut ne vous convient pas vous pouvez toujours opter pour une de votre choix donc.

Commençons par rajouter un repertoire “font” dans “assets”, et mettons la police ci-dessous à l’intérieur.

Police d’écriture

Nous y mettrons notre police personnalisée, puis dans le onLoadResource définissions le chemin par défaut

FontFactory.setAssetBasePath("font/");

Déclarons une nouvelle texture qui contiendra notre police personnalisée et chargeons celle-ci dans le moteur

final BitmapTextureAtlas fontPersoTexture = new BitmapTextureAtlas(256, 256, TextureOptions.BILINEAR);

this.getEngine().getTextureManager().loadTexture(fontPersoTexture);

Nous n’avons plus qu’a déclarer notre police d’écriture grâce à la méthode createFromAsset de la classe FontFactory

createFromAsset(Texture pTexture, Context pContext, String pAssetPath, float pSize, boolean pAntiAlias, int pColor)

Paramètres :

• Une texture
• Le contexte
• Le nom de la police
• La taille de la police
• Anticrénelage
• Sa couleur

Ensuite, il faut charger la police dans le FontManager du moteur :

this.getEngine().getFontManager().loadFont(fontPerso);

Voilà, modifiez la police de notre changeableText par fontPerso

changeableText = new ChangeableText(0, 50, fontPerso, "Coucou tout le monde");

Il n’y a plus qu’à lancer :

C’est pas beau tout ça ?

Sources de la formation

A bientôt pour le prochain tutoriel !