Comment utiliser des polices Bitmap en AS3 avec Bitmap Font Renderer ?

Commentaires fermés sur Comment utiliser des polices Bitmap en AS3 avec Bitmap Font Renderer ?

Écrit le 22 décembre par Matthieu
Publié dans le(s) sujet(s) ActionScript 3

Mots clés : , , , , , , , , ,

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 “Bitmap Font Renderer”

BMFontRenderer.zip – Téléchargé 565 fois – 225,27 Ko

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 !