Tutorial sur sa boîte de dialogue et des astuces pour quelle soit plus esthétique

Par Rem_101, @NOTIZ@ et [TheDarkTiger]


Sommaire

a)    Création de ma boîte de dialogue

b)   Placer un background dans sa boîte de dialogue

c)    Changer la police de ma magnifique boîte de dialogue

d)   Bon, et ce bouton la, il n’est pas beau !

e)    Et si je veux un fond avec une bordure de Windows (la classe), comment je vais ?

f)    Heu… Je voudrais ajouter de la transparence à la Windows Vista (la classe), c’est par où ?

g)    On ne voit plus rien avec ton background joli !

h)    Comment faire pour changer la couleur du fond de mon « Ok » quand la souris est dessus ?

i)       Je peux avoir plusieurs boutons dans ma boîte de dialogue ?

j)     Et si je veux taper mon nom dans ma boîte de dialogue, c’est par où ?

k)    Et pour ouvrir mon lecteur CD ?

 
Téléchargez la librairie et l'exemple fournit: Cliquez Ici.

 

 

Ce tutorial a été écrit par Rem_101 et adapté pour la librairie de @NOTIZ@ contenant une partie des fonctions écrites ci-dessous. Vous pourrez en reconnaître certaines grâce aux icônes insérer à côté.

Tutorial écrit pour le Forum et pour le site du CBNA : http://lecbna.org/.

 

 

Bonjour à tous et à toutes !

Lorsque vous lancez votre jeu et que vous utilisez la fonction show_message, vous devez sûrement vous dires que c’est laid ! Enfin, pour ma part se fut le cas dès le premier regard sur ma boîte de dialogue

Dans ce tutorial je vais donc vous montrez quelques fonctions pour rendre votre boîte de dialogue plus esthétique.

 

Les logiciels à posséder :

Paint ou autre logiciel de dessins.

Game Maker 6.1 (enregistré, il me semble).

5 Minutes pour lire ce tutorial.

5 Secondes pour rendre votre boîte de dialogue plus esthétique.

Et pour finir un cerveau !

 

a) Création de ma boîte de dialogue.

D’abord commencé par lancer votre logiciel de dessin (Paint pour moi). Créer votre boîte dialogue de la taille que vous voulez mais sans bouton, texte, rien, juste les couleurs enfin bref le design de la boîte de dialogue. Surtout ne fermer par votre logiciel de dessin.

Maintenant lancer Game Maker.

Retournez dans votre logiciel de dessin et prenez les dimensions de votre boîte de dialogue (CTRL + E dans Paint) et faites CTRL + A (sélection du dessin) puis CTRL + C.

Revenez dans GM (Je diminue Game Maker par ses initiales) et créer un nouveau background, faites « éditer » puis CTRL + N et inscrivez les dimensions précédemment noter. Terminer par CTRL + V pour coller le dessin de votre boîte de dialogue. Nommer votre background « test » sans les guillemets bien sûr !

Créer un nouvel objet.
 

b) Placer un background dans sa boîte de dialogue.

Dans ce nouvel objet, ajouter l’Event Create et glisser l’action D&D « Execute a piece of code ».

Nous allons voir la fonction « message_background(votrebackground) » . Il y a plusieurs choses à savoir pour cette fonction.

Commencer par inscrire le code :

 

show_message("Ceci est une jolie boîte de dialogue");

 

Le message « Ceci est une jolie boîte de dialogue » devrait apparaître dans sa boîte de dialogue lorsque vous lancez le jeu.

Maintenant ajouter ceci :

show_message("Ceci est une jolie boîte de dialogue");
message_background(test);

 

Hein, quoi ? Mais rien à changer ! Normal, on vient d’afficher votre boîte de dialogue avant de lui donner son background. Ce n’est pas malin, votre PC vient de grié 

Bon on l’affiche peut être ce satané background !:

message_background(test);

show_message("Ceci est une jolie boîte de dialogue");

 

Noter bien qu’il faut attribuer le background avant d’afficher le message !

Mais il reste bien des choses à améliorer, telle que cette hideuse police, ou encore ces boutons. Argh…

 

c) Changer la police de ma magnifique boîte de dialogue.

Oula, mais vous avez vu ?

Le truc blanc en forme de lettre. C’est voter texte…

Mais c’est horrible !

Bon, nous allons changer tous sa grâce à ce code qui permet de modifier la police d’écriture : « message_text_font(font,12,c_black,0) »

Commençons par le décortiquer :

-         le font : que vous devez créer dans GM avec uniquement les polices de Windows au départ.

-         12 : est la taille de mon texte, on va pas passer trois ans sur sa !

-         c_black : est la couleur de votre texte. (Mettre c_puis la couleur en anglais).

-         0 : Permet de savoir si votre texte sera : normal (0), gras (1), italique (2) ou gras + italique (3).

Une petite précision, si vous voulez changer la police, couleur, taille… de votre bouton c’est « message_bouton_font() »  qui vous sauvera la vie !

Un petit exemple :

message_text_font(font,12,c_red,1);
show_message("La couleur est rouge, la grandeur 12, c'est du gras.");

 

Alors, elle n’est pas belle la vie ?

 

d) Bon, et ce bouton la, il n’est pas beau !

C’est vrai qu’il n’est pas terrible, donc je vous avais dit de ne pas quitter votre logiciel de dessin, ce n’est pas pour rien ! Retourner donc dans Paint et faites trois boutons :

-         Non pressé et non survolé par la souris.

-         Non pressé mais avec la souris qui le survole.

-         Pressé.

Note : vous devez bien les mettre dans cet ordre et surtout ne pas mettre de texte !

 

Ensuite faites un copier de votre première image, créer un nouveau sprite, puis collez-y la première image, sélectionner la case « Use new size ». Et voila ! Faites la même chose pour les autres images dans le même sprite mais en utilisant « Original size ». Nommer ce sprite « essai ».

Nous allons voir la fonction « message_button(votresprite) » . Cette fonction vous permet d’ajouter un nouveau sprite pour remplacer le bouton par défaut dans votre boîte de dialogue.

Insérer ceci :

message_boutton(essai);
show_message("Oh, mais le bouton à changer la, en dessous");

 

Voila, vous savez maintenant modifier le bouton de votre boîte de dialogue.


e) Et si on veut un fond avec une bordure de Windows (la classe), comment je vais ?

Ah oui, si vous voulez faire un logiciel, se sera un peu plus esthétique (même si GM n’est pas fait pour).

Continuons avec notre background précédant.

Nous allons voir cette fois-ci la fonction « message_caption(1,"titre") » .

Fonction qui permet de faire apparaître un titre et une bordure.

-         1 : permet de faire apparaître une bordure, si vous ne voulez pas de bordure, tapez 0. (Comme dans les émissions de TV !)

-         "titre" : permet de faire apparaître comme titre ce qu’il y a d’écrit entre les guillemets.

Voila le code avec notre background, et la bordure :

message_caption(1,"Ceci est ma boite");
message_background(test);
show_message("Ah Ah Ah Ah");

 

Eh ! Vous ne voyez pas comme un problème ? Beh, si la taille de la boîte est égale à la taille du background, si elle est trop petite pour afficher le bouton elle s’agrangit un peu. Histoire de voir le « Ok ».

 

Il va maintenant nous falloir la fonction « message_size(largeur,hauteur) ».

Yearh… Régler le size de la boîte jusqu'à ce que mort sans suive… heu… que sa vous conviennes. Et op, une étape de plus !

 

f) Heu… Je voudrais faire une boîte à la Windows Vista (la classe) avec de la transparence.

Bon, ok, alors je vous montre.

Nous allons utiliser la fonction « message_alpha(0.6) » .

Régler la transparence en sachant que c’est entre 1 et 0 compris. (Plus vous êtes proche du 0 plus c’est transparent.)

 

Bon un p’tit exemple avec un bout de code (si jamais vous êtes trop fainéant ou alors vous ne voulez pas réfléchir !)

message_background(test);

message_alpha(0.6);

message_text_font(font;12,c_red,1);

show_message(“Un background, de l’alpha, une police ! C’est déjà pas mal !”);

 

Voila, vous avez une boîte avec un background un bouton, une police de tarer et de la transparence ! Elle n’est pas belle la vie ? (J’ai peut être déjà du le dire…)

Vous en voulez encore ?

 

g) Ouai… Nous, on a fait des graphismes de malade pour notre jeu et toi tu nous colles une boîte de dialogue en plein milieu, certes très belle mais on voit plus rien avant d’avoir cliquer sur « Ok ».

Ola ! J’avais oublié…

Utiliser la fonction « message_position(x,y) » , vous savez comment faire, pas besoin de vous expliquez quand même ?!

x=horizontale=abscisse.

y=verticale=ordonnée.

 

h) Mais moi si je veux que la couleur du fond de mon « Ok » change quand je suis dessus avec la souris, comment est-ce que l’on fait ?

Pas de panique, ne pleurez pas.

Il vous faudra la fonction « message_mouse_color(c_black) » .

Je vous rappelle que « c_black » est la couleur mais vous le savez déjà.

 

i) Je peux avoir plusieurs boutons dans ma boîte de dialogue ?

Oui, et tout simplement en plus !

Grâce à la commande « show_message_ext("votremessage","&Bouton1","&Couton2","&Houton3") »

Vous avez plein de boutons maintenant ! Aussi le « & » vous permet d’avoir un raccourci clavier !

 

Nota Bene : si vous voulez que deux boutons, changer le "&Couton2" par "" (juste deux guillemets à suivre). Vous ne pourrez pas avoir plus de trois boutons !

 

j) Moi je voudrais pouvoir taper mon nom dans ma boîte de dialogue.

Pas plus simple, pour du texte :

« get_string("Votre message","la réponse par défaut"); »

Pour des chiffres :

« get_integer("Votre message","0123456789"); »

 

Un petit exemple pour la route :

// Dans l’Event que vous voulez dans que vous avez créer la variable « question » avant, dans l’Event Create.


question=get_string("Quand il fait beau je tape :","Alors je tape quoi ?");

 

// Dans l’Event Step (en général).

 

if question="toto"
{
show_message("OUI");
}

 

Au passage si le fond de votre champ de saisie ne vous plaie pas, utiliser cette fonction : « message_input_color(c_red); » .

 

k) Et pour ouvrir mon lecteur CD ?

Ah, oui… oui

cd_init()
cd_open_door()
cd_close_door()

 

Quoi ?! Mais qu’est-ce que sa fait la ? Beh tant pis, c’est écrit, c’est écrit… !

 

 

 

 

- Rem_101 -

- @NOTIZ@ -

- [TheDarkTiger] -