Général
 
Exclusif
 
 
Tutoriaux
 
 
Soutien

 
 
Fight Spam! Click Here!

 
 
Tutorial
 

  << retour
Ce tutorial est utilisable pour:
- UT
- UT 2003
- UT 2004
Niveau moyen
 

Les fonctions Canvas ou comment faire un HUD

 

A savoir avant de commencer

Les fonction canvas sont la plupart du temps utilisées pour dessiner des HUDs.
L'utilisation de ces fonctions est relativement simple en théorie mais suivant l'utilisation qu'on en fait, cela peut devenir plus hardu qu'on ne le pense.
Ces fonction servant pour le HUD, leur utilisation ce fait depuis le script de ce dernier et non pas en sub-classant la class Canvas. Un petit exemple :
PHP
class myHUD extends HUDBase;

simulated function DessineUnTruc(Canvas C)
{
C.SetPos(0, 0);
C.DrawText("Un Truc");
}

Cette fonction écrit "Un Truc" dans le coin supérieur gauche de l'écran. la variable C fait référence à la class Canvas ou sont "stockées" toutes les fonction que je vais décrire...

Un des trucs important à savoir est que presque toutes les fonctions d'un HUD s'éxécutent à chaque tick donc presque toutes les millisecondes (en fait ce n'est pas Tick(float dTime) qui les appelle mais les fonction Render (PostRender(Canvas canvas) le plus souvent) qui sont éxécutées aussi souvent). Donc si dans le script de votre HUD vous faites référence à une variable (du GameType par exemple) qui n'est initialisée qu'en début de partie, mieux vaut stocker la valeur de cette variable dans une varible globale du HUD avec une fonction qui n'est éxécutée qu'une seule fois (PostBeginPlay() par exemple) plutôt que à chaque tick aller chercher cette variable, ce qui risque de créer un ralentissement dans le script.
Ensuite toute les fonction doivent être définies comme "simulated". Ceci sert pour la réplication, ce qui sgnifie que ces fonctions ne seront éxécutées que du coté client vu qu'un HUD n'existe que pour le joueur qui le possède.

Les fonctions

Fonctions de position


On commence avec les plus simples : les fonctions gerant la position ou va être dessiner notre texte ou notre texture.
Tout d'abord il faut savoir que les varibles ClipX et ClipY contiennent par défaut la résolution de votre écran. Donc si la résolution est de 1024*768, ClipX sera égale à 1024 et ClipY à 768. Donc utilisez souvent une position avec un rapport de ces variables si vous ne voulez pas vous retrouver avec un placement différent suivant la résolution.
Assez causé, on attaque les fonctions...

- final function SetPos( float X, float Y ) Cette fonction sert à définir quelle sera la position en pixels du coin supérieur gauche du material ou du texte que l'on veut dessiner. Petit exemple :
PHP
simulated function EcritUnTrucAuMilieu(Canvas C)
{
C.SetPos(C.ClipX / 2, C.ClipY / 2);
C.DrawText("Un Truc");
}

Cette fonction écrira le texte "Un Truc" à partir du milieu de l'écran. Je dis "à partir" car le texte ne sera pas centré sur l'écran. si on veut le centrer, il faudra utiliser une fonction que je citerai plus tard.

- final function SetOrigin( float X, float Y ) Cette fonction agit sur les variables OrgX et OrgY qui définissent la position du point supérieur gauche de la zone où l'on peut dessiner. Par défaut ces deux variables sont à 0. Changer la valeur de ces variables revient à modifier la taille maximale de la zonne où l'on peu dessiner sur l'écran.
Par exemple si on appelle cette fonction avec comme paramètres 200 et 100 (SetOrigin(200, 100);) et qu'ensuite on initialise la position de dessin au point 0,0 (SetPos(0, 0);), cela se traduira sur l'écran par un dessin non pas dans le coin supérieur gauche de l'écran mais à partir du point 200,100.

- final function SetClip( float X, float Y ) Cette fonction fonctionne ( laugh.gif ) comme la précédente sauf qu'elle agit sur les variables ClipX et ClipY qui définissent la position du point inférieur droit de la zone de dessin.

Les deux dernières fonctions ne sont que rarement utilisées et si vous vous en servez, je vous conseille de le faire avec modération afin de ne pas oublier de remettre les valeurs des variables par défaut et ensuite se retrouver avec des bugs d'affichage.
Pour la petite histoire, ces fonctions ont été utilisées pour le Translator d'Unreal premier du nom. Elles définissaient une zone de dessin plus petite et ensuite le texte était écrit à partir du nouveau point 0,0. Bien que le texte soit souvent trop long pour tenir sur une seule ligne, lorsqu'il atteignait le nouveau bord droit de la zone défini avec SetClip(), le texte revenait automatiquement à la ligne (c'est ti pas formidable ? laugh.gif )

Fonctions de texte


- native(465) final function DrawText( coerce string Text, optional bool CR ); Ecrit le texte que vous entrez dans le premier paramètre. Le terme "coerce" signifie que vous pouvez entrer (presque) tout type de variable, le moteur tentera ensuite de la convertir en "string" (non je ne parle pas des petites culottes sexy que portent les jeunes filles en chaleur innocent.gif ). Par contre je ne sais pas à quoi correspond le second paramètre.

- var font Font; Là c'est pas très compliqué, "Font" ça veut dire "police" en français (de caractère, pas ceux qui vous font souffler dans le balon biggrin.gif ). Donc ça c'est pour définir la police qui sera utilisée pour le texte à dessiner.
Les polices on peut les trouver grâce au browser de texture sur UnrealEd. Si c'est la version 2 et que quand vous ouvrez un certain groupe dans un certain package vous voyez toutes les textures de tous les packages ouverts vous pouvez vous dire "ça c'est une police", le nom de la police étant le groupe qui provoque ça. Dans UEd3 il n'y a plus ce bug et on peu voir directement la police en ouvrant le groupe.
Voilà ça c'était si vous voulez choisir un texture spécifique, mais dans le code du HUD il y a certaines fonctions comme GetMediumFontFor() qui choisissent automatiquement une police "par défaut" en fonction de la résolution de l'écran.

On continue avec la couleur...
- var color DrawColor;
- final function SetDrawColor(byte R, byte G, byte B, optional byte A)
La fonction est utilisée pour convertir les paramètres qu'on lui donne en variable de type "color" qui est ensuite stocké dans DrawColor.
Par défaut, DrawColor est blanc (255,255,255).
Je suppose que vous avez compris que cette variable sert à définir la couleur de la police. Mais elle ne sert pas que pour les textes, elle fonctionne aussi sur les textures, donc si par exemple vous mettez à DrawColor une couleur rouge, la texture que vous dessinerez ensuite sera beacoup plus rouge, comme si on y avait appliqué un filtre avec un logiciel de retouche photo comme Photoshop.
Au fait vous pouvez soit jouer directement avec la variable (par exemple si vous y attribuez une couleur enregistrée dans une variable gloale du HUD et qu'elle ne change pas), soit avec la fonction (si vous voulez que certains paramètres de la couleur changent en fonction d'une variable et pas d'autres...)

- native(464) final function StrLen( coerce string String, out float XL, out float YL ); Ca c'est la fonction dont je vous parlais plus haut qui peut permettre de centrer le texte. Description des paramètres :
-- coerce string String : La chaine de caractères dont vous voulez analyser la taille (oui en fait la fonction retourne la taille d'une chaine).
-- out float XL : Retourne (le terme "out" signifie que l'on prend un paramètre et qu'on le retourne à la fin de la fonction, parfois utile lorsqu'on veut retourner plusieurs variables avec une seul fonction, comme dans le cas présent) la largeur en pixels de la chaine entrée en premier paramètre en fonction de la police choisie.
-- out float YL : Retourne la hauteur en pixels de la chaine entrée en premier paramètre en fonction de la police choisie.
Donc si j'en reviens à ce que je disais plus haut pour centrer un texte :
PHP
simulated function EcritUnTucAuCentre(Canvas C)
{
local float XL, YL;

C.StrLen("Un truc", XL, YL);
C.SetPos((C.ClipX - XL) / 2, (C.ClipY - YL) / 2);
C.DrawText("Un Truc");
}

On commence par anlyser la taille de ce qu'on veut écrire, comme on ne défini pas de police, celle par défaut sera utilisée. Ensuite on initialise la position à la moitié de l'écran (C.Clip? / 2) moins la moitié de la taille de la chaine (?L / 2) (oui en fait ça donne "C.Clip? / 2 - ?L / 2" mais ceux qui font un peu de maths savent qu'on peut factoriser en (C.Clip? - ?L) / 2 ^^). Et enfin on écrit le texte qui sera centré flowers.gif

Fonctions de "dessin"


- native(466) final function DrawTile( material Mat, float XL, float YL, float U, float V, float UL, float VL ); Certainement la fonction dont je me sert le plus...
-- material Mat (Texture Tex dans UT) : le material (ou la texture) que l'on veut dessiner
-- float XL : Largeur de la texture quand elle sera affichée à l'écran. Utilisé pour étirer ou rétrécir l'image.
-- float YL : Pareil que XL mais sur la hauteur
-- float U : Décalage horizontal par exemple on dit que la texture fait 64 de coté,
CODE
ABCD
EFGH
^ on va dire que c'est la texture
si on met un U de 32 ça va donner
CODE
CDAB
GHEF

-- float V : la même que U mais sur la hauteur. Ainsi si on dit que la même texture fait 32 de hauteur et qu'on met 16 à V ça donnera :
CODE
EFGH
ABCD

-- float UL : Portion horizontale de la texture à dessiner. Si vous mettez 0 ça ne dessinera rien. Exemple si on reprend toujours ma superbe texture avec les lettres, si on met 64 ça la dessinera en entier et si vous mettez 32 ça en dessinera la moitié :
CODE
AB
EF
D'un autre coté si vous mettez 128 ça donnera ceci :
CODE
ABCDABCD
EFGHEFGH

-- float VL : Portion verticale de la texture à dessiner. Donc ça fait la même chose que UL mais sur la hauteur (non la c'est bon je vous épargne l'exemple flowers.gif )
Avec une bonne utilisation des quatre derniers paramètres, vous pourrez dessiner nimporte quelle partie d'une texture, un coin, un carré au centre, un carré avec une position bizarre sur la texture...)

- final function DrawIcon( texture Tex, float Scale ) Alors ça c'est bien un truc de fainéant, mais ça marche que pour les textures (donc pas de problèmes si vous bossez sur le UEngine 1.x). Ca dessine la texture Tex avec un grandissement de la valeur de Scale. Donc si vous y mettez 1.0, vous aurez la texture à la taille normale, si vous mettez 2.0 elle sera deux fois plus grande.

- native final function DrawTileScaled(material Mat, float XScale, float YScale);
Presque la même chose, juste que là il y a un grandissement pour la largeur (XScale) et un pour la hauteur (YScale).

- final function DrawRect( texture Tex, float RectX, float RectY ) Là pareil, ça ne fonctionne que sur les textures. Ca dessine simplement la texture Tex avec RectX comme largeur et RectY comme hauteur.
Après il est possible qu'il y ait des fonctions comme DrawTilePartialStretched() ou DrawTileStretched() (ce sont toues des natives donc je ne puis dire ce qu'elles font sans les tester et donc elles s'éxécutent plus rapidement) qui fassent la même chose mais je ne suis pas sûr. Au moins peuvent-elle utiliser tout type de material.

Autre fonction


- native(480) final function DrawPortal( int X, int Y, int Width, int Height, actor CamActor, vector CamLocation, rotator CamRotation, optional int FOV, optional bool ClearZ );
Celle là elle permet d'afficher un autre endroit de la map sur le HUD, un peu comme une caméra de surveillance. Si vous avez le mod U4eT pour UT99, cette fonction est utilisée avec le petit affichage de la position des missiles Tomahawk.
D'après UnrealWiki, il y aurait des problèmes avec un rendu OpenGL, et si ça marche comme les WarpZones, il risque en effet d'y avoir des problèmes (à vérifier)
Il y a plusieurs paramètres qui me laissent perplexe donc je n'en ferai pas la description (je ne me suis jamais servi de cette fonction).

La note de la fin...

Voilà, c'est fini. Je n'ai pas décrit toutes les fonctions parce que soit je ne les connais pas, soit elles me laissent perplexe. Mais il y a là tout ce qu'il faut savoir.
Bonne nuit biggrin.gif

Tutorial par spl0k


[Options]
Imprimez ce tutorial - Ajouter une note

<< Retour a la liste

[Notes des utilisateurs]
Aucune note pour le moment. Pour ajouter une note, cliquez ici

 

 

La tour de Babel
 
En Résumé
 
Sondage
 
5 derniers tests
 
Hébergés
 

http://cokx.free.fr
Unreal-Impulse
Le magajine des zeux videos !


UnrealArena


UnrealArena

 

Google
Design byBlacK
©2004 Unreal-Design.com - Tous droits réservés
Tous les tutoriaux, commentaires, maps, articles et les diverses créations personnelles sont propriétaires de leur auteur respectif.
Il est strictement interdit de les modifier, copier et/ou marchander.
Page généree en 0.45s

cookie session: 630a1c9982e1fb9137d02bef137130ff