Godot 0002 - Hello / 2D - 0002

Aller en bas

Tuto Godot 0002 - Hello / 2D - 0002

Message par TonTon Tof le Dim 20 Mai 2018 - 1:57

Articles précédents sur Godot:

Bonjour à vous pour ce nouveau billet sur la découverte de Godot,

Je vous propose un projet un peu plus ambitieux : une scène de type login, l'utilisateur tape son nom, valide, le programme affiche une fenêtre popup pour le saluer.

Créez un nouveau projet nommé "Hello"



Créez les objets suivants dans la scène :

- un Panel nommé PanelLogin
   - un Label nommé LabelLogin
   - un LineEdit nommé LiteEditLogin
   - un Button nommé ButtonValider

Créer un noeud:


Pour créer un noeud, utilisez le bouton "+" de l'onglet scène, et utilisez la barre de recherche pour trouver facilement le type de nœud a créer.



Pour renommer un objet, cliquez deux fois dessus dans la scène.


Utilisez l'inspecteur pour ajouter le texte "Valider" au bouton :


Déplacer et adaptez les objet sur la partie vue2D en utilisant les poignées pour que votre scène ressemble à :


Le Panel est un cadre pour contenir les autres éléments, le label est une étiquette pour afficher du texte, le LineEdit est la zone de saisie et le Button va permettre de déclencher le traitement de validation.

Complétez la scène avec les objets suivants :

- un WindowDialog éditeur la propriété text dans l'inspecteur et entrez Accueil
- un Label renommez le LabelMessage
- un Button renommez le ButtonFermer

L'objet WindowDialog est une popup, c'est-à-dire qu'elle n'apparaît pas au lancement de l'application et qu'on va la faire apparaître au besoin.

Disposez les objets de façons à ce que le label vide soit au centre de la WindowsDialog, et ajouter via l'inspecteur du text au bouton : "Fermer".



Attention, les fenêtre popup sont invisibles par défaut, pour les faire apparaitre, il faut rendre l'objet visible dans l'onglet scène -
ouvrir l'oeil a droite du noeud WindowDialog

C'est bon pour vous ? Nous allons maintenant passer à la partie scripting.

Attachez un GDScript dans le nœud PanelLogin tout en haut de l'arborescence. Clic-droit sur le nœud "PanelLogin" puis "Attacher un script. ", sélectionnez "intégrer le script" = On. Puis créez le script.



Cette option créera le script comme une sous-ressource du nœud, et non comme une ressource du projet.



Voici un schéma de notre scène :



Au niveau fonctionnel, nous voulons que lorsque l'utilisateur clique sur le bouton Valider : la fenêtre de dialogue s'ouvre en affichant un message "Bonjour " suivi du login précédemment saisie dans la zone de saisie.

Pour ce faire, nous allons :
- connecter le signal "Pressed()" du ButtonValider dans le script contenu dans l'objet PanelLogin, vers la fonction _on_ButtonValider_pressed
- afficher la fenêtre WindowDialog avec la fonction popup()
- Modifier la proprieté text de l'objet LabelMessage (contenu dans WindowDialog) pour afficher le message "Bonjour " + le login précédement saisie dans l'objet LineEditLogin.

Schema du cheminement du signal clic:



Sur le schéma nous voyons en rouge le cheminement du signal "Pressed" depuis le clic de l'utilisateur, en vert les actions d'affichage de la popup et de construction du message, et en violet l'utilisation de la valeur saisie dans LineEditLogin.

Connectez le signal "Pressed()" du bouton au nœud "PanelLogin"
- Selectionnez ButtonValider
- sur l'onglet "Nœuds", double-cliquez sur l'évènement "Pressed"



Pour accéder au nœud "WindowDialog" depuis le script nous pouvons utiliser la syntaxe  $WindowDialog ou get_node("WindowDialog"), ce sont deux syntaxes parfaitement équivalentes.

Pour ouvrir la fenêtre popup WindowDialog, nous n'avons qu'a utiliser la fonction popup().

Pour afficher le message, nous allons définir que le texte du nœud LabelMessage est "Bonjour " + texte du noeud LineEditLogin. N'oublions pas que le nœud LabelMessage est lui-même un enfant du nœud "WindowsDialog".



Sauvegardez la scène et testez. Cela fonctionne ? Super.

Il ne reste plus qu'a connecter l'objet ButtonFermer au nœud PanelLogin pour lui faire exécuter la fonction _on_ButtonFermer_pressed() dont le code sert simplement à masquer la fenêtre WindowDialog. On connais déjà : c'est la fonction hide()



Quelques nœuds, 3 lignes de codes, et grâce à Godot ... Voilà le résultat Smile



J'espère que ce tutoriel vous a plu.

À bientôt alors pour continuer notre découverte de Godot.


Dernière édition par TonTon Tof le Mar 22 Mai 2018 - 2:27, édité 3 fois (Raison : Améliorations)
avatar
TonTon Tof
Traceur de comètes
Traceur de comètes

Masculin Messages : 567
Date d'inscription : 22/10/2011

http://aloysia.fr/

Revenir en haut Aller en bas

Tuto Re: Godot 0002 - Hello / 2D - 0002

Message par Lydia le Mar 22 Mai 2018 - 20:34

Cool !
lydiacool
avatar
Lydia
Admin
Admin

Féminin Messages : 2083
Date d'inscription : 08/10/2011

http://lydelune.over-blog.com/

Revenir en haut Aller en bas

Tuto Re: Godot 0002 - Hello / 2D - 0002

Message par TonTon Tof le Mar 22 Mai 2018 - 23:19

Bonsoir Lydia,

Très sympa en effet, Godot propose de nombreux noeuds qui permettent de travailler :
- en 2D, les noeuds bleues, branche Node2D
- en 3D, les noeuds rouges, branche Spatial
- avec des interfaces utilisables en 2D ou 3D, les noeuds verts, branche "Control"
avatar
TonTon Tof
Traceur de comètes
Traceur de comètes

Masculin Messages : 567
Date d'inscription : 22/10/2011

http://aloysia.fr/

Revenir en haut Aller en bas

Tuto Re: Godot 0002 - Hello / 2D - 0002

Message par Trefle le Jeu 24 Mai 2018 - 15:36

Merci pour ce tuto emoticchapeau

Je trouve ce programme un peu compliqué quand même goutte2

_________________
Comment participer au forum ? D'abord signez le règlement, puis présentez-vous. Attendez ensuite qu'un administrateur vous ouvre les portes et vous serez admis parmi les Artstronautes !
Si vraiment vous êtes perdus et ne savez pas quoi faire, envoyez moi un mp
avatar
Trefle
Faiseur de galaxies
Faiseur de galaxies

Féminin Messages : 3259
Date d'inscription : 27/09/2011

http://luckytrefle.deviantart.com/ http://sylviesbd.over-blog.com/

Revenir en haut Aller en bas

Tuto Re: Godot 0002 - Hello / 2D - 0002

Message par TonTon Tof le Jeu 24 Mai 2018 - 19:37

Bonjour Trèfle,

Tu as parfaitement raison, comme l'a bien résumé Lydia, Godot n'est pas un logiciel spécialement "intuitif" ... il faut s'investir pour comprendre la philosophie du moteur.

C'est pour cela que j'ai crée ces tutoriaux pour découvrir et partager doucement, tranquillement cette philosophie.

Vous avez certainement remarqué la disparition du tutorial N°3 et je vous prie de m'en excuser. Je l'ai écris, mis en ligne, et j'ai trouvé qu'il contenais trop de concepts, introduits trop rapidement j'ai donc préférer le supprimer pour le refondre en profondeur.

Le but n'est pas de comprendre le fonctionnement d'un coup, mais d'avoir une idée des mécanismes que l'on peut mettre en action. Idée qui va s'affiner et se préciser au fil des tutoriaux.

Aussi n'hésitez pas a m'indiquer vos impressions, ce qui a été clair, ou pas afin que je puisse préciser ou représenter sous une autre forme certains concepts.

Merci a vous pour votre soutien et votre motivation.
avatar
TonTon Tof
Traceur de comètes
Traceur de comètes

Masculin Messages : 567
Date d'inscription : 22/10/2011

http://aloysia.fr/

Revenir en haut Aller en bas

Tuto Re: Godot 0002 - Hello / 2D - 0002

Message par Lydia le Jeu 24 Mai 2018 - 20:33

Coucou !

Il y a un "détail" qu'il ne faut cependant pas perdre de vue : Nous ne sommes pas sur un forum pour programmeurs (sinon il s’appellerait "Les Codonautes" ou les "programmaunautes")
Sauf cas exceptionnel, les artstronautes ne se réunissent pas pour pleurer sur du code mais pour se pâmer sur de belles courbes, de belles couleurs ou de beaux rendus.
En nous enfonçant ainsi dans le code "en dur", on perd l'esprit d'évasion d'Aloysia.
Pour autant, je pense que Godot et ses tutos ont toute leur place sur ce forum car ils peuvent permettre d'ouvrir des portes sur d'autres mondes d'imagination et de création.

L'idéal serait de permettre des points d'accès aux jeux (à leur conception) où chacun est à l'aise et dans son élément.
Par exemple, trèfle qui connait clickteam fusion et en dispose, peut tout à fait démarrer un petit jeu avec clickteam et animer un atelier que rejoindront et suivront ceux que ça intéresse...
Un autre qui serait plus "unity" peut en faire autant avec unity
un autre avec Godot,
un autre en pur C# ou Python ou Lua (très sympa Lua)
tout en partageant des ressources communes...

Chaque "petit" jeu indépendant, en état de fonctionnement, étant relié à Aloysia par des passerelles tendues par notre admirable chef d'orchestre !?

En attendant, et pour dire les choses autrement : Actuellement nous sommes 3 à nous intéresser au développement de ce projet : Il est indispensable de trouver un bac à sable qui convienne agréablement aux trois.

(à force de poser les questions et de dire les choses, un jour je vais finir avec un couteau dans le dos)
avatar
Lydia
Admin
Admin

Féminin Messages : 2083
Date d'inscription : 08/10/2011

http://lydelune.over-blog.com/

Revenir en haut Aller en bas

Tuto Re: Godot 0002 - Hello / 2D - 0002

Message par TonTon Tof le Jeu 24 Mai 2018 - 21:01

Bonsoir Lydia,

Je trouve ton idée est très intéressante, c'est a dire qu'au lieu d'avoir un gros jeu, on aurais un ensemble de petits jeux ...



avatar
TonTon Tof
Traceur de comètes
Traceur de comètes

Masculin Messages : 567
Date d'inscription : 22/10/2011

http://aloysia.fr/

Revenir en haut Aller en bas

Tuto Re: Godot 0002 - Hello / 2D - 0002

Message par Trefle le Jeu 24 Mai 2018 - 22:34

Un tas de petits jeux qui tourneraient autour du thème du forum. Par contre en ce qui concerne clickteam je le connais pas tant que ça lol! j'ai juste suivis le tuto pas à pas pour apprendre à l'utiliser, mais ça remonte à un bail. Il faudra que je me remette un peu au point avnt d'envisager de créer un jeu complet Laughing

Je serais bien plus à l'aise avec rpgmaker que j'ai pratiqué un peu plus (avec 2 ou 3 jeux inachevés).

_________________
Comment participer au forum ? D'abord signez le règlement, puis présentez-vous. Attendez ensuite qu'un administrateur vous ouvre les portes et vous serez admis parmi les Artstronautes !
Si vraiment vous êtes perdus et ne savez pas quoi faire, envoyez moi un mp
avatar
Trefle
Faiseur de galaxies
Faiseur de galaxies

Féminin Messages : 3259
Date d'inscription : 27/09/2011

http://luckytrefle.deviantart.com/ http://sylviesbd.over-blog.com/

Revenir en haut Aller en bas

Tuto Re: Godot 0002 - Hello / 2D - 0002

Message par TonTon Tof le Jeu 24 Mai 2018 - 23:25

Merci de vos remontées. J'en tiens compte.
avatar
TonTon Tof
Traceur de comètes
Traceur de comètes

Masculin Messages : 567
Date d'inscription : 22/10/2011

http://aloysia.fr/

Revenir en haut Aller en bas

Tuto Re: Godot 0002 - Hello / 2D - 0002

Message par Contenu sponsorisé


Contenu sponsorisé


Revenir en haut Aller en bas

Revenir en haut

- Sujets similaires

 
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum