Utilisation de DirectX sous Delphi : Asphyre 4.1

Une des utilités les plus intéressantes est de pouvoir afficher le nombre de FPS actuel. Cela peut nous informer de la qualité d'optimisation de notre programme.
Pour cela, il faut appeler la fonction FrameRate de Timer.

Le résultat de cette fonction est un entier. Il suffit donc de convertir la valeur et d'écrire, par exemple :

Sender.SysFonts.Font['sys:tahoma'].TextOut('FPS: ' + IntToStr(Timer.FrameRate),
  4, 10, $FFFFFFFF);

Cet outil se trouve à la base du répertoire dans lequel vous avez décompressé Asphyre. Voici de quoi il a l'air :

Depuis ce programme, on va pouvoir créer une police personnalisée avec toute sorte d'effets (ombrage, antialiasing, etc.).
Chaque police sera représentée par une image (en général PNG) contenant tous les caractères de la police et d'un fichier XML contenant toutes les données relatives à cette police.

Voyons maintenant en détail à quoi servent tous ces panneaux.

Dans ce panneau, vous pouvez paramétrer la police, sa taille et ses caractéristiques (gras, italique) comme dans n'importe quel éditeur de texte. Le bouton Details ouvre la boite de dialogue de sélection de police de caractères que tout le monde connait.
Un aperçu de la police brute est affiché en dessous.

Ce panneau montre un aperçu de ce que donnera la police définitive. La mise à jour se fait au bout de 2-3 secondes après avoir modifié un paramètre.

Ce panneau vous permet de sélectionner les effets que vous voulez intégrer à votre police. Les effets disponibles sont l'anticrénelage (Antialias), le contour (Outline), l'ombrage (Shadow), l'exagération des contours (Sharpen). Ces effets peuvent être combinés. Pour les activer, il suffit de cliquer sur le bouton correspondant.
Les deux listes déroulantes du dessus permettent de définir l'étendue des caractères qui seront intégrés à la police. En effet, comme nous l'avons vu plus haut, une image de la police est générée. Si vous ne comptez utiliser que les chiffres par exemple, il est inutile de surcharger les ressources pour rien : intégrez uniquement les chiffres dans votre police. Vous pouvez néanmoins intégrer tous les caractères que vous voulez.

Ce panneau définit la luminosité (Brightness) et l'opacité (Opacity) des caractères. Si vous jouez sur la valeur de luminosité, vous verrez les couleurs s'assombrir ou s'éclaircir dans l'aperçu de gauche.
Le fond en carreau de cet aperçu permet de contrôler facilement l'opacité. Cette opacité vient en complément de celle que l'on peut définir dans TextOut. Ainsi, si on définit, dans FontTool, une opacité à 50 %, si dans TextOut, on la définit à 100 % ($FF), on aura tout de même une police transparente à 50 %.

Les deux panneaux suivants permettent de paramétrer les effets Border et Shadow.

Ce panneau paramètre l'effet de bordure. Vous pouvez spécifier la luminosité, l'opacité et l'épaisseur de cette bordure.

Ce panneau, quant à lui, permet de paramétrer l'effet d'ombrage. Vous pouvez ainsi modifier les valeurs d'adoucissement (les ombres seront moins marquées), de luminosité, d'opacité, et la distance de l'ombre par rapport à son objet en pixels. Si vous voulez donner l'effet d'un texte juste au-dessus de ce qu'il couvre, laissez une petite valeur. Comme pour tous les paramètres, vous pourrez vérifier le résultat dans l'aperçu de gauche.

Voyons maintenant comment créer une police.
Exécutez FontTool.exe et paramétrez-le ainsi :

Panneau Windows Font Settings

Panneau Rendering Options

Panneau Individual Letter Text

Panneau Outer Letter Border

Panneau Letter Depth Shadow
Puisque l'effet Shadow n'est pas utilisé, il n'est pas nécessaire de paramétrer cette zone.

Une fois la police paramétrée, il faut la sauvegarder. Pour cela, cliquez sur le bouton en bas à gauche « Save Font As… » puis sélectionnez un chemin et un nom pour vos fichiers. Créez un répertoire « Fonts » dans le répertoire de votre projet puis enregistrez votre police dedans en la nommant « MaPolice.png ».

L'outil enregistrera automatiquement les deux fichiers dans le répertoire sélectionné. Ces deux fichiers auront le même nom.
Vous devez donc avoir deux fichiers :

• MaPolice.png

  

• MaPolice.xml : ce fichier contient les données nécessaires à l'utilisation de la police.

Auparavant, dans Asphyre eXtreme, on utilisait un composant, le TAsDb qui se chargeait d'ouvrir un fichier de type .asdb qui contenait toutes les ressources du programme. Ce fichier de ressources était créé à l'aide d'un outil proposé avec cette version d'Asphyre et permettait de rajouter toute sorte de fichiers.

Dans la version 4.1, tout se fait en XML. Le format .asdb n'existe plus (au grand dam de beaucoup de gens et au contraire de Asphyre Casual qui a repris ce système).

Vous devez donc créer un fichier XML qui fera appel au fichier XML de la police. Ce fichier XML peut contenir les données de polices et d'images que nous verrons plus loin.

Créez donc un nouveau fichier XML dans Delphi et appelez-le Ressources.xml.
Voici le squelette de ce fichier XML :

<unires>

</unires>

Il est inutile de spécifier la version d'encodage des caractères.
Chaque ressource (image, police) sera incluse dans un groupe que l'on peut nommer.

Comme notre police est contenue dans un fichier image, nous devons d'abord la répertorier dans un groupe d'image :

<image-group name="default group">
</image-group>

Entre ces balises, nous devons spécifier l'image. Les images sous Asphyre sont des textures et il convient de les déclarer comme tels :

<image uid="mapolicepicture" type="image">
  <format type="a8r8g8b8" miplevels="auto"/>

  <textures count="1">
   <texture num="0" source=".\fonts\mapolice.png" />
  </textures>

 </image>

Regardons plus en détail ces lignes. La première ligne ouvre un nouveau nœud image. L'attribut uid est l'identifiant de l'image. L'attribut type définit lui le type d'image. Ce type peut être image, surface ou dynamic.
Le nœud format définit les caractéristiques de l'image. type définit comment sont encodées les couleurs et miplevels définit le niveau de mip-mapping.
Comme nous l'avons vu, il faut maintenant déclarer les textures qui composent notre image. Dans notre exemple, il n'y a qu'une seule texture : l'image MaPolice.png. Comme vous le voyez, il est tout à fait possible d'utiliser des chemins relatifs.

Une fois l'image créée, on peut déclarer une police dans un groupe de police de cette façon:

<font-group name="default">
</font-group>

Dans ce groupe, on répertorie une nouvelle police en utilisant l'image répertoriée plus haut et le fichier XML que l'on a créé avec FontTool.exe :

<font uid="mapolice" type="bitmap" image="mapolicepicture" space="0.5" desc=".\fonts\mapolice.xml" />

Si on regarde cette ligne, excepté space (Sinon c'est trop facile!), on comprend rapidement à quoi correspondent les attributs :

• uid : identifiant de la police ;
• type : le type de ressource d'où elle est tirée ;
• image : l'uid de l'image qui contient la police créée précédemment ;
• space : facteur de multiplication pour la largeur du caractère espace (0.0 = pas d'espace ; 1.0 = un espace entier) ;
• desc : chemin du fichier XML qui définit la police.

Voilà le plus dur est fait ! À noter qu'il existe un utilitaire qui permet de faire ceci. Cet utilitaire, créé par le membre Ch@ser, est téléchargeable sur le site d'afterwarp ici. Les seuls inconvénients sont :

• quelle que soit l'image (texture complexe ou simple comme notre exemple) toutes les données sont ajoutées, même celles qui sont inutiles. Le XML en devient vite illisible ;
• l'interface pas franchement ergonomique à mon goût.

En revanche, on visualise plus facilement les données grâce à ce programme. L'autre avantage est que les possibilités du XML y sont – normalement – toutes. On peut donc utiliser ce programme pour savoir comment se constituent ces fichiers XML.

Une fois le fichier XML dûment créé, il faut maintenant charger dans le programme les données que l'on a définies dans ce fichier.
Comme toujours, Asphyre permet de faire assez simplement cette manœuvre. Contrairement à ce que l'on pourrait croire, le chargement de ces fichiers se fait avant l'initialisation et dans le OnCreate !

Le chargement se fait pour chacune des ressources de façon distincte :

procedure TMainFrm.FormCreate(Sender: TObject);
begin
  ImageGroups.ParseLink('Ressources.xml'); //Chargement des images
  FontGroups.ParseLink('Ressources.xml'); //Chargement des polices

  if (not Devices.Initialize(ConfigureDevice, Self)) then //Initialisation
  begin
    MessageDlg('Asphyre n''a pas pu s''initialiser!', mtError, [mbOk], 0);
    Close();
    Exit;
  end;

  //Démarrage et paramétrage du Timer
  Timer.Enabled  := True;
  Timer.OnTimer  := TimerEvent;
  Timer.OnProcess:= ProcessEvent;
  Timer.MaxFPS   := 100;
end;

N'oubliez pas de déclarer les unités dans la clause uses :

• ImageGroups est déclaré dans MediaImages ;
• FontGroups est déclaré dans MediaFonts.

Une fois ces images chargées, on peut initialiser. En outre, il est également possible de vérifier que les ressources se soient chargées correctement.
Comme nous l'avons vu plus haut, il suffit de déclarer une méthode en cas d'erreur de chargement de cette façon :

procedure TMainFrm.ConfigureDevice(Sender: TAsphyreDevice; Tag: TObject;
  var Config: TScreenConfig);
begin
  Config.Width   := ClientWidth;
  Config.Height  := ClientHeight;
  Config.Windowed:= True;

  Config.WindowHandle:= Self.Handle;
  Config.HardwareTL  := true;

  EventResolveFailed.Subscribe(OnResolveFailed, Sender); //Inscription de la méthode pour l'événement
end;

Il faut alors créer une nouvelle procédure OnResolveFailed de cette façon :

procedure TMainFrm.OnResolveFailed(Sender: TObject; EventParam: Pointer;
  var Success: Boolean);
begin
  MessageDlg('Erreur de chargement de ressources.', mtError, [mbOk], 0);

  Devices.Finalize();
  Timer.Enabled:= False;
  Application.Terminate();
end;

Ainsi, si une erreur se produit, un message d'erreur apparait puis l'application se ferme.

Nous voilà enfin parvenus à tout charger correctement! Il ne reste plus qu'à écrire avec cette police amoureusement créée.
De la même façon qu'avec l'écriture « simple », tout se passe encore dans le Callback de rendu. Par contre, cette fois-ci, ce n'est pas Sender.SysFonts, mais Sender.Fonts que l'on utilise :

procedure TMainFrm.RenderCallback(Sender: TAsphyreDevice; Tag: TObject);
begin
  Sender.Fonts.Font['MaPolice'].TextOut('Ma chaine de caracteres',
    4, 10, $FFFF0000 );
end;

procedure TMainFrm.TimerEvent(Sender: TObject);
begin
  DefDevice.Render(RenderCallback, self, $FFFFFF);
  Timer.Process;
end;

Pour des raisons esthétiques, j'ai simplement modifié la couleur de fond dans TimerEvent afin d'avoir un fond blanc.
Vous devriez avoir un résultat comme celui-ci :

Il existe également une autre procédure TextOut qui, à la place d'un Cardinal pour la couleur demande un type TColor2.
Mais un TColor2, c'est quoi donc ?? C'est évidemment un type d'Asphyre qui est une combinaison de deux couleurs. Mais pourquoi deux couleurs ? Que de questions !! Pour la réponse, je vous laisse découvrir ce que ça donne avec ce code :

  Sender.Fonts.Font['MaPolice'].TextOut('Ma chaine de caracteres',
      4, 10, cColor2($FF00FF00, $FFFF0000) );

En effet, simplement en spécifiant deux couleurs et en utilisant la fonction cColor2, on obtient un dégradé le plus simplement du monde.

On peut également modifier les options de dessin de la police. Par exemple, on voudrait modifier l'espace entre chaque caractère. Pour cela, la propriété Font propose une propriété Options qui permet ce genre de modifications.
Par exemple, ce code :

  with Sender.Fonts.Font['MaPolice'] do
  begin
    Options.Kerning := -2;
    TextOut('Ma chaine de caracteres',
      4, 10, cColor2($FF00FF00, $FFFF0000) );
  end;

va diminuer l'espace entre chaque caractère. D'autres paramètres sont disponibles comme la taille (attention: ce n'est qu'un facteur d'échelle : l'image d'origine reste la même !), afficher l'ombrage ou non, etc.

Dans l'animation, le pattern est une notion très importante. En effet, lorsque vous animez un personnage par exemple, vous ne faites « que » succéder des images donnant l'illusion du mouvement. Donc deux options s'offrent à nous pour arriver à ce résultat :

• utiliser une image par mouvement ;
• utiliser une image qui regroupe tous les mouvements.

Il est évident qu'en termes d'utilisation de ressources, la seconde méthode est à privilégier !
Ce genre d'image s'appelle une feuille de sprites.
Voici donc à quoi pourrait ressembler une telle image :

Cette image est extraite de l'excellent tutoriel de Loka que vous trouverez ici.
Comme vous le voyez, chaque décomposition du mouvement est sur la même image. Chacune de ses décompositions est un pattern ! Par exemple, dans notre exemple la taille du pattern à utiliser est de la taille de l'image puisqu'il n'y a pas d'animation. En revanche, sur une feuille de sprites, la taille du pattern est celle de chacun des éléments.

Comme d'habitude, analysons chaque partie du programme séparément.

Première chose à faire : charger l'image. Cela se fait à l'aide du bouton Browse. Une fois l'image chargée, il faut spécifier la taille du pattern.

Donc, si vous avez bien suivi, vous aurez compris que dans l'exemple qui nous intéresse, la taille du pattern est la taille de l'image. Vous remarquerez le « Number of patterns » grisé en dessous qui indique le nombre de patterns d'après la taille que vous avez spécifiée au-dessus.

Cette partie peut être intéressante si vous n'utilisez pas de format d'image transparent. Vous pouvez en effet choisir de garder les informations de transparence de l'image utilisée (channel Alpha) ou bien spécifier une couleur qui va servir de transparence avec une tolérance.
En règle générale, je vous conseille d'utiliser un format contenant des informations de transparence comme le PNG par exemple.

Cette partie permet de spécifier la taille de sortie de l'image. Comme nous l'avons vu, la taille doit être une puissance de 2. En cliquant sur le bouton , le programme calculera lui-même la taille la plus adaptée.

Ce paramètre correspond à l'écart que vous voulez donner entre vos patterns. Si vous voulez qu'ils soient accolés, laissez à 0, sinon, vous pouvez spécifier une autre valeur. Dans notre cas, laissons 0 puisque nous n'avons qu'un seul pattern sur la texture.

Cette partie permet de visualiser l'organisation finale et les pixels inutilisés d'après les paramètres que l'on a fournis.