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] -