UDK Tutorial : Basic HUD

Introduction :

Je vais vous présenter dans ce petit tutoriel la méthode que j'utilise pour faire des HUD basiques. Je vais considérer que vous connaissez les bases de la programmation sur ce moteur (configuration de l'espace de travail, compilation).

I – Emplacement des classes

Dans cet exemple, nous allons placer nos classes dans le dossier dans un dossier «UDK\UDK-XXXX-XX\Development\Src\MyFolder\Classes».

II – Classe «MyGame»

Pour commencer, avant de fabriquer notre HUD, on va spécifier à notre classe de jeu d'utiliser ce nouveau HUD. Pour cela, modifiez vos propriétés de base de votre classe de jeu, ou bien créez une classe telle :

En sachant que notre classe de HUD s'appellera « MyHud », on indique sa référence dans les propriétés de base de notre jeu (qui est un simple Deathmatch de UT ici).

III – Classe «HUD»

Je vais commencer par décrire les fonctions et variables que j'utilise couramment dans mes classes de HUD et qui permettent déjà de faire pas mal de choses. Libre à vous d'aller jeter un œil à la classe « Canvas » si vous voulez en savoir un peu plus !

• SetPos(float X, float Y) : Cette fonction sert a vous positionner sur l'écran a partir du coin Haut/Gauche, et à afficher différentes choses à partir de cet emplacement.
• SetDrawColor(byte R, byte G, byte B, optional byte A ) : Définit la couleur (avec les valeur de Rouge, Vert et Bleue) et la transparence (avec la valeur Alpha) avec laquelle vous allez « dessiner » sur le HUD.
• var font Font : Cette variable permet de choisir quel police utiliser pour écrire sur le HUD. J'utilise très souvent les fonctions intégrées :
  Canvas.Font = class'Engine'.static.GetSmallFont();
  Canvas.Font = class'Engine'.static.GetMediumFont();
  Canvas.Font = class'Engine'.static.GetLargeFont();
• DrawText(string S) / DrawTextCentered(string S) : Permet d'afficher un texte (centré grâce à la deuxième fonction) sur le HUD, en ayant préalablement choisi la position, la couleur et la police à utiliser grâce aux fonctions et variables précédentes.
• DrawRect(float RectX, float RectY, optional Texture Tex = DefaultTexture) : Permet de dessiner un rectangle rempli de taille RectX*RectY ,si vous ne mettez pas de Texture, en ayant préalablement choisi la position, la couleur grâce aux fonctions précédentes, sinon le rectangle est rempli avec la texture.
• DrawBox(float width, float height) : Permet de dessiner les contours d'un rectangle de taille width*height en ayant préalablement choisi la position, la couleur grâce aux fonctions précédentes.
• DrawTile(Texture Tex, float XL, float YL, float U, float V, float UL, float VL) / DrawMaterialTile (Material Mat, float XL, float YL, float U, float V, float UL, float VL) : Permet de dessiner une Texture ou un Material sur le HUD dont on va préciser l 'échelle horizontale et verticale grâce à XL et YL. Les paramètres U et V permettent de décaler la texture. Par exemple, avec un U différent de 0 on peut obtenir :
  
  Enfin, UL et VL permettent de « découper » la texture. Par exemple, avec un VL inférieur à la taille de la texture :
  
  
• var float ClipX / var float ClipY : ces deux variables désignent la largeur et la hauteur de votre résolution, c'est a dire les coordonnées du coin inférieur droit de l'écran.

Voilà pour la présentation des différentes fonctions. Il faut bien savoir que ces fonctions ne sont pas directement disponible dans la classe « HUD » mais dans l'attribut « Canvas » de cette classe (comme vous l'avez peut être déjà remarqué). Il faudra donc a chaque fois mettre « Canvas.LaFonction() ». Pour résumer, on peut donc créer notre classe de HUD de base :

La fonction « DrawGameHud() » est appelée à chaque rafraichissement d'image pour redessiner le HUD. C'est ici que l'on va donc redéfinir ce qui va être afficher.

Par exemple pour écrire un simple « Hello World » au centre de l'écran.

IV – Exemple plus concret

Alors, maintenant que l'on a tous les éléments, on va réaliser une petite fonction utile a un HUD. En fait, notre fonction va nous permettre d'afficher la valeur d'une variable sur l'écran, sous forme de barre a paliers. On va essayer de réaliser cela :

Notre bar comporte donc :

• Un titre
• Dix rectangles (de 8px*12px) dont la transparence et/ou la couleur varie en fonction de la valeur

Voilà ce que l'on peut par exemple faire (les commentaires devraient vous aider) :

On va donc afficher de cette manière la vie et les munitions par exemple :

Ce qui nous donne :

Tutorial écrit le 13/01/2010 par Shad