{dev} Blog

Ecrire avec XNA : méthode "fichier descripteur"

Ecrire en XNA n'est rien de compliqué. Pour faire vos premiers pas, créez un nouveau projet (ou ouvrez un projet existant, si vous êtes sur de votre coup).
Dans l'explorateur de solutions, au niveau du Content de votre projet, faites un clic droit et ajoutez un nouvel élément. Choisissez le type Sprite Font, renommez le à votre guise et validez. Pour cet exemple, j'ai nommé mon Sprite Font "testFont.spriteFont".
Dès lors, un fichier XML s'ouvre à vous. Il s'agit d'un fichier descripteur de police de caractères (Font).

Explication : pour écrire du texte à l'écran, XNA peut piocher dans les polices de caractères installées sur votre PC (voir votre répertoire Windows/Fonts/). XNA va alors convertir votre police en graphisme compatible avec lui-même et afficher le résultat à l'écran car il ne peut pas utiliser directement une police Windows (TrueType Font ou OpenFont). Tout ceci, XNA le fait sans que vous vous en rendiez compte.

Le fichier XML .spriteFont est là pour indiquer à XNA quelle police vous voulez utilisez, mais aussi la taille qu'elle devra avoir et son style (gras, italique, ...). Voici son contenu et à quoi correspondent les différents champs.

<!--
Le nom de la police que vous souhaitez (Arial, Comics, Time New Roman...)
-->
<FontName>testFont</FontName>

Remarquez que la valeur par défaut est le nom que vous lui avez donné. Dans notre cas, testFont n'est évidement pas une police réelle. Changeons la, en Arial par exemple.

<FontName>Arial</FontName>

Voilà pour ce qui est du champ le plus important. Voyons les autres champs.

<!--
La taille de votre police, comparable à celle dans un éditeur de texte.
-->
<Size>14</Size>
 
<!--
L'espacement entre chaque lettre (en pixel). A laisser à zéro si vous souhaitez l'espacement par défaut de la police.
-->
<Spacing>0</Spacing>
 
<!--
Défini si vous voulez utilier le crénage de la police ou non. Le crénage est la façon dont certains caractères se chevauchent légèrement (comme le W qui peut monter un peu sur le A).
Mettez à true si vous voulez que le crénage de la police soit utilisé. Mettez false dans les autres cas.
-->
<UseKerning>true</UseKerning>
 
<!--
Le style de la police.
Pour un police normale, mettez "Regular".
Pour du gras "Bold", pour de l'italique "Italic"
Attention à respecter les majuscules.
-->
<Style>Regular</Style>

La dernière partie du XML sert à définir quel espace de la table ASCII vous souhaitez couvrir. Par défaut, le fichier est configuré pour supporter les caractères d'indices 32 à 126, c'est à dire les caractères alphabétiques, numériques et les ponctuations, mais aucun accent. Pour supporter tous les caractères, il faut aller jusqu'au caractère d'indice 255 en modifiant l'XML comme suit.

<Start>&#32;</Start>
<End>&#255;</End>

Notre police est fin prête à être utilisée.
Pour utiliser ce nouveau Sprite Font, nous avons besoin de déclarer un objet de type de SpriteFont. Pour l'exemple, on le déclarera en donnée membre, au côté du SpriteBatch et du GraphicsDeviceManager.

GraphicsDeviceManager graphics;
SpriteBatch spriteBatch;
SpriteFont font;

Ensuite, pour charger notre police via notre fichier descripteur, on utilise la méthode habituelle du Content Pipeline (dans la méthode LoadContent).

font = Content.Load<SpriteFont>("testFont");

Il ne nous reste plus qu'à écrire avec notre police (dans la méthode Draw). Ecrire avec XNA nécessite un SpriteBatch car notre police sera en interne une texture.

spriteBatch.Begin();
spriteBatch.DrawString(font, // notre SpriteFont
    "Hello world!\nWééé des accents!", // le texte à afficher ( \n représente un saut de ligne)
    new Vector2(100, 100), // la position en pixel où on souhaite afficher le texte
    Color.Black); // la couleur du texte
spriteBatch.End();

Vous pouvez créer autant de fichiers descripteurs que de polices nécessaires.
Il est aussi possible de télécharger des polices de caractères exotiques mais toutes ne sont pas compatibles.

La méthode : "Font Bitmap"

Comme je vous l'ai expliqué, en interne, XNA transforme votre police en texture et en affiche le contenu. La méthode de cette partie consiste à "sauter" l'étape du fichier descripteur en donnant directement à XNA une texture. Une texture de police (ou Font Bitmap) se présente comme ceci.



Règles de construction d'un Font Bitmap :

• Les lettres doivent être disposées sur un fond magenta pur (#FF00FF).
• Il y doit avoir un espacement entre chaque caractère.
• La couleur noire sera considérée comme transparente à l'affichage.
• Il doit y avoir 16 caractères par ligne.

Une fois que vous avez votre image (vous pouvez prendre celle du dessus pour tester), vous pouvez l'ajouter à votre projet via le Content Pipeline (clic droit/ ajouter élément existant sur Content). Il y a juste une chose particulière à faire : préciser à XNA qu'il s'agit d'une police et non du texture banale. Pour ce faire, sélectionné votre fichier image dans l'explorateur de solution et regardez ses propriétés. A la ligne Content Processor, il faut mettre Sprite Font Texture.



Ensuite, on charge notre SpriteFont exactement de la même manière sauf que l'on charge notre Asset du Font Bitmap au lieu du fichier descripteur.

font = Content.Load<SpriteFont>("arial");

Et voilà! Le résultat est le même que pour la première méthode vu que l'on a utilisé la police Arial dans les deux cas.

Vous l'avez surement remarqué, il est très long et embêtant de créer soi même une police en Bitmap. Heureusement, les gars derrière XNA ont mis à notre disposition un outil permettant de pondre tout seul un Bitmap tout prêt à partir de n'importe quelle police installée sur son PC. Ce logiciel n'est pas fourni en standard avec XNA mais il est disponible sur le site officiel et à compiler soi même. Je vais épargner cette peine, je l'ai compilé pour vous (7zip nécessaire pour décompresser).

Quels sont les avantages de cette méthode?

• Pouvoir utiliser n'importe quelle police.
• Créer sa propre police, ou table de symboles (si vous avez besoin d'icone dans vos textes par exemple).
• Mettre des effets sur une police en modifiant la texture (mettre du relief, des dégradés, etc).
• Ne pas s'encombrer avec des TTF ou autres lorsque l'on redistribue son code source.

Vous savez désormais tout ce qu'il y a à savoir à propos de l'affichage de texte avec XNA.