Sujets sur : bitmap font

Et on continue dans la série de tutoriels consacrés au développement flash pour les iPhone, Android avec Adobe AIR.

Ce cours ActionScript est axé sur l’amélioration des performances des applications flash iPhone, Android.

C’est un fait, l’utilisation de textes dynamiques (les fameux TextField) dégrade les performances sur smartphones !

Il est donc important de trouver une alternative au TextField. Le texte est pratique pour afficher un score dans un jeux flash par exemple.

Et voici une classe qui permet de convertir automatiquement un TextField en images Bitmap.

Et ainsi, booster les performances de vos jeux flash pour iPhone et Android !

Text Bitmap

La version TextField et la version Bitmap sont quasiment identiques. Aucune différence à l’oeil nu sur un smartphone.

Il est possible de choisir l’alignement du texte : gauche, droite et centré.

L’affichage de textes multilignes n’est pas encore possible.

Cette classe prend en charge uniquement l’affichage de ligne simple.

Utilisation de BitmapText

Voici le constructeur de la classe BitmapText.

[codesyntax lang= »actionscript3″ title= »BitmapText.as » bookmarkname= »BitmapText.as »]

[/codesyntax]

Voici le détail des paramètres du constructeur :

• thisField : l’instance de votre TextField que vous voulez afficher avec le texte, les filtres, le format de la police…
• thisAlphabet : un objet qui contient les lettres au format Bitmap déjà créées. Sinon BitmapText s’occupe de créer les lettres Bitmap si le paramètre est null.
• thisCharList : la liste des caractères à utiliser pour les lettres Bitmap. Si paramètre null, BitmapText contient par défaut une liste de caractères.
• thisProps : un objet qui permet d’initialiser automatiquement les propriétés de la classe.

Et voici un exemple d’utilisation de la classe BitmapText :

[codesyntax lang= »actionscript3″ title= »BitmapText.as » bookmarkname= »BitmapText.as »]

[/codesyntax]

La classe BitmapText effectue une copie de votre TextField existant et l’enlève de la display list.

Pour mettre à jour le texte, vous pouvez utiliser simplement :

[codesyntax lang= »actionscript3″ title= »BitmapText.as » bookmarkname= »BitmapText.as »]

[/codesyntax]

Il y a également plusieurs getter / setter pour personnaliser la classe BitmapText :

• margin : spécifie l’espace entre les caractères.
• edge_buffer : spécifie un espace (ou marge) intérieur autour des lettres. C’est pour prendre en compte les filtres autour de chaque caractère.

Exemple Bitmap Text

Et voici un exemple d’affichage qui montre :

• en haut le TextField classique.
• en dessous le Bitmap Text.

Télécharger le code source

Vous pouvez télécharger le code source de l’exemple utilisé.

Consulter l’article original sur Flash on iPhone – Automatically convert dynamic text to high performance bitmaps (with filters)

Il existe également cette solution plus souple à utiliser, avec des filtres supplémentaires : Bitmap Font Renderer.

Pour des performances encore plus élevées, il est préférable d’utiliser les polices Bitmap avec stage3d et Starling Framework.

Quelles solutions utilisez-vous pour améliorer les performances Flash sur iPhone, Android ?

Partagez vos astuces dans les commentaires ci-dessous.

Le cours AS3 de cette semaine vous propose de découvrir une nouvelle technique pour utiliser vos polices de fichiers ttf.

C’est à dire de transformer, avec ActionScript, une police ttf en police Bitmap utilisable par une application flash.

Voici ce que vous allez apprendre dans ce Cours ActionScript :

• Comment utiliser vos polices systèmes à partir d’un fichier ttf.
• Comment créer ces polices sous forme Bitmap, c’est à dire les enregistrer dans une image png.
• La technique pour utiliser le framework BMFontRenderer pour afficher rapidement du texte personnalisé.

Cette formation AS3 vous permettra d’être capable d’utiliser des polices bitmap directement dans Flash.

BMFontRenderer

[spoiler]Bonjour à tous ici Matthieu pour actionscript-facile.com

Dans ce cours AS3 nous allons voir comment utiliser des polices bitmap en AS3.

Grâce à un petit package, il s’appelle : bitmap font renderer.

C’est-à-dire nous allons utiliser des polices personnalisées de type TTF.
Donc des polices que vous avez sous Windows, sous Linux ou sous Mac.

Ensuite, ces polices, nous allons les intégrer sous forme bitmap.
C’est-à-dire, à partir d’une image PNG, et sous flash, ce sera un bitmap qui sera affiché sur la scène.

Passons tout de suite à la pratique.

Alors nous avons le package bitmap front renderer.
Je vous enverrai le viens vers le site de l’auteur pour pouvoir le télécharger.

Dans un premier temps, il faut créer notre image PNG qui va contenir l’ensemble des caractères de la police.
Et également il nous faut créer le fichier .FNT qui contient les coordonnées et la taille de chaque caractère de la police.

Pour cela, vous pouvez utiliser soit bitmap font générator avec l’URL qui s’affiche ou alors yero.
Je vais utiliser Hiero pour créer l’image PNG qui contient tous les caractères de notre police.

Vous lancez le logiciel. Son fonctionnement est très simple.

Vous choisissez votre police parmi toutes celles qu’il y a sur votre ordinateur.

Il y en a beaucoup beaucoup beaucoup sur le mien.
Ensuite vous sélectionnez ascii ??
Vous faites un reset cash pour intégrer plus ou moins de glyphes donc de caractères dans votre police.
Nous, on va en intégrer beaucoup donc avec les caractères accentués et les chiffres, les majuscules.

Il y a également la possibilité d’intégrer des effets, ça c’est vraiment génial !
Soit vous en mettez, soit vous en mettez pas.
Vous pouvez enlever l’effet. J’ajoute un petit effet shadow, c’est très sympa.
Je lui ai donné une couleur. Vous pouvez définir la couleur de base de votre police.

Ensuite, il ne vous reste plus qu’à sauvegarder le fichier FNT sur votre disque dur.
C’est aussi simple que cela et votre police est créée.

Qu’est-ce que ça vous donne comme résultat ?
Et bien vous avez une image PNG qui contient tous les caractères de votre police :
les chiffres
les lettres majuscules, minuscules
les caractères accentuées
etc. etc.

Bien évidemment, Hiero est gratuit.
Il fonctionne avec la machine Java donc il vous suffit de télécharger Java gratuitement et ce logiciel.

Regarder bien la configuration que j’ai utilisé c’est très important sinon ça ne fonctionnera pas très bien.

Ensuite, passons à la partie actionscript.

La partie actionscript qu’est ce qu’il faut faire ?

C’est très simple, on utilise des ressources embed donc on importe le fichier FNT que je vais vous montrer.
Le fichier FNT contient les coordonnés des lettres comme je vous le dis.
Pour chaque lettre, il contient la taille et les coordonnées.

Voilà le nom de la police, si on a pris bold ou italique, vous avez remarqué que je n’ai pas pris ni bold ni italique donc je ne pourrais pas l’utiliser.

Pareil le fichier PNG vous l’importez en embed ressource.
Cela permet de définir la couleur de fond de mon SWF.
Rien de bien méchant, comme d’habitude notre classe main qui étend Sprite.
Une fois que tout est prêt, on lance l’intégration de la police.

On va utiliser la classe bitmap font qui est ici.
Cette classe, on charge, on utilise new font data qu’on stock dans un byteArray font data.

C’est notre fichier FNT qui contient les coordonnées.
On le lit et on parse le fichier obtenu de font : les coordonnées de chaque caractère de la police.

On le parse, on affiche le nombre de glyphes parsés.
Ici on va en trouver 156.
Quand on utilisera le monster debuggueur, on aura également 156.

Et il nous reste plus qu’à ajouter l’image PNG qui contient les caractères de la police dans notre objet bitmap PNF font.

C’est la classe de base, créer un bitmap data, avec sa taille, on utilise la transparence, la couleur.
Et notre texte on le positionne.

Voici du texte, je peux rajouter des chiffres.
Également, on créé un deuxième texte avec des caractères accentués, des caractères spécifiques.
Et on les ajoute, on ajoute nos bitmap.
C’est-à-dire que ça fonctionne avec un bitmap data. La police est au format bitmap.
Il nous reste plus qu’à lancer la compilation et vous voyez notre police.

C’est votre police personnalisée en fichiers TTF qui est sur votre disque dur qui s’affichera dans l’application flash de votre internaute.

Tout simplement !

Ca peut être utile dans certains quand on ne veut pas s’embêter à exporter la police dans un fichier SWF.

C’est une solution très rapide qui permet d’utiliser des polices bitmap.

Voilà donc dans le monster debugeur, ça marche il y a 256 glyphes.

Je recharge voilà.

Comme d’habitude, vous trouverez le code source complet de bitmap front renderer sous cette vidéo.

Est ce que vous avez déjà utilisé les polices bitmap dans vos applications flash ?

Dites moi ça dans les commentaires sous cette vidéo.

C’est un cours ActionScript très court et très simple.
Les polices bitmap peuvent être très pratiques et en plus c’est très rapide à utiliser.

Je vous dis à très bientôt sur actionscript-facile.com[/spoiler]

Version démonstration

Ci-dessous un exemple tout simple d’utilisation des polices bitmap dans flash !

Télécharger le code source du cours AS3

Vous trouverez l’ensemble du code source commenté pour vous aider.

Télécharger la dernier version de BMFontRenderer.

Télécharger le logiciel gratuit Hiero pour créer les images png des polices de caractères.

Et vous, avez-vous déjà utilisé les polices bitmap dans vos applications flash ?

Je suis curieux de voir vos applications flash avec des polices bitmap.

Postez-les dans les commentaires ci-dessous !