Apprendre


Vous êtes
nouveau sur
Oniromancie?

Visite guidée
du site


Découvrir
RPG Maker

RM 95
RM 2000/2003
RM XP
RM VX/VX Ace
RM MV/MZ

Apprendre
RPG Maker

Tutoriels
Guides
Making-of

Dans le
Forum

Section Entraide

News: Résultat des Alex d'Or 2021 / Tutos: [MV/MZ] Les bases des formules / News: News d'automne / Jeux: Dagga / Jeux: Le rêve de Merm / Chat

Bienvenue
visiteur !





Désactiver
la neige


publicité RPG Maker!

Statistiques

Liste des
membres


Contact

Mentions légales

149 connectés actuellement

14191054 visiteurs
depuis l'ouverture

9993 visiteurs
aujourd'hui



Barre de séparation

Partenaires

Indiexpo

Akademiya RPG Maker

Hellsoft

Planète Glutko

Lunae - le bazar d'Emz0

RPG Maker Détente

Eclipso

Le Temple de Valor

Le Studio du Chat Vert

Tous nos partenaires

Devenir
partenaire



Godot : Créer un menu

Fin de cette série de tutoriels initiant à Godot, cette fois on s'intéresse à l'interface en créant un petit écran titre.

Ecrit par moretto le 06/04/2021


❤ 1

image
Premier contact, partie 3 :
Créer un menu







Dans cette dernière partie, nous allons aborder les éléments d’UI.
Retrouvez la première partie ici.


Maintenant que nous avons notre joueur, nos ennemis et que tout le monde se rencontre dans la joie, il nous reste à créer un menu.

Organisation de la scène « Enemy »

Commençons par créer une scène. Cette fois-ci choisissez « Interface Utilisateur ».
Renommez le nœud Control créé en Menu.

Nous allons créer un menu très simple : un titre et deux boutons (jouer et quitter).

Godot possède un très bon outil pour créer les interfaces, vous allez voir c’est très simple à utiliser.

Pour commencer nous créons un container pour y placer nos différents items. Ajoutez un nœud enfant à Menu et choisissez VBoxContainer. Un VBoxContainer va aligner verticalement ses nœuds enfants.

Ajoutez en nœuds enfants à notre container un Label et deux Button.

Sélectionnez le Label, dans l’inspecteur, Changez le texte par le nom de notre jeu, choisissons un nom qui fera vendre : Avoid the red Godots.
Renommez le Label en Title.
Renommez le premier Button en Play et le Deuxième en Quit.

Pour finir, centrons notre container au centre de la fenêtre. Après avoir sélectionné container, cliquez sur « Disposition sur l’écran » au-dessus de la vue de la scène.

image

Votre scène doit ressembler à ceci :

image

Script

Créez un script sur le nœud Menu.
Nous allons encore avoir affaire aux signaux.
Pour les deux boutons, connectez le signal pressed() au script de Menu.

Dans la fonction _on_Play_pressed(), écrivez la ligne suivante :

Portion de code : Tout sélectionner

1
get_tree().change_scene("res://Game.tscn")



Cela permet de changer la scène vers celle désignée.

Dans la fonction _on_Quit_pressed(), ajoutez :

Portion de code : Tout sélectionner

1
get_tree().quit()



C’est la même ligne que lorsque notre joueur touche un ennemi.

Notre menu est fonctionel !
Mais il est assez moche, améliorons cela et profitons-en pour peaufiner notre jeu.

Améliorations

Interface

Pour commencer nous allons changer la police d’écriture de notre titre.
Mettez la police de votre choix dans le dossier du projet, j’ai choisi celle-ci de mon côté : https://www.dafont.com/fr/game.font.
Sélectionnez le nœud Title, dans l’inspecteur, cherchez Custom Font. Cliquez.
Il y a une ligne Font avec une case [vide]. Cliquez sur [vide].
Choisissez Nouveau DynamicFont, des sous-menus apparaissent, cliquez sur Font.
image

Cliquez à nouveau sur vide, Nouveau DynamicFont Data.
Modifiez le FontPath en choisissant votre police d’écriture dans le dossier du jeu.
image

Changez la taille de la police dans Setting, toujours dans Custom Font. Ici vous pouvez mettre un outline (contour) également.
Vous pouvez changer les couleurs de l’outline et de la police dans Custom Color, un peu plus bas dans l’Inspecteur.

Modifions maintenant les boutons, j’ai choisi cette police : https://www.dafont.com/fr/play-pretend.font .
Refaites les mêmes étapes que pour le titre sur un des boutons. Une fois satisfait, faites un clic droit sur DynamicFont et enregistrez sous ButtonStyle.

Sur l’autre bouton, allez sur Custom Font et au lieu de créer une nouvelle DynamicFont, chargez celle précédemment enregistrée. Il vous faudra tout de même changer la couleur de la font.

Maintenant que nous avons une belle police, plus besoin d’avoir le cadre des boutons, dans l’Inspecteur, en haut, cochez Flat pour masquer le thème de l’UI sur le bouton.
Le thème est le style de tous les éléments d’Interface, nous aurions pu le modifier pour arriver au même résultat mais c’est assez compliqué à modifier.

Pour finir, changeons le gris du fond de la fenêtre, dans Projet > Paramètre du Projet > Rendering > Environment, modifier Default Clear Color.
En modifiant la taille des polices, votre container va bouger, recentrez-le en cliquant sur « Disposition sur l’écran »

Voilà le résultat :

image


C’est toujours moche ? Oui, et alors ?


Score

Ajoutons également un chrono pour voir combien de temps le joueur va tenir. Ajoutez un Label et un Timer à Game. Nommez-les Score et ScoreTimer.

Connecter le signal timeout() à Game.

Ajouter la variable score en tête du script :

Portion de code : Tout sélectionner

1
var score : int



: int permet de typer la variable, elle n’acceptera pas d’autre valeur qu’un entier.

Dans la fonction _on_ScoreTimer_timeout(), écrivez :

Portion de code : Tout sélectionner

1
2
score +=1
$Score.text = str(score)



Quand le timer avance de 1 seconde (temps par défaut du wait time que nous n’avons pas changé !), on ajoute un au score et on met à jour le label score.
La méthode text n’accepte que des chaînes de caractères (string), notre score étant un entier, il faut le convertir en string ; str() s’en occupe.

Bloquer le joueur au bord de l’écran

Jusque-là tout va bien, seulement notre joueur peut facilement éviter une mort certaine en quittant l’écran.
Pour éviter cela , rien de plus simple : ajoutez ces deux lignes à la fin de la fonction process() du script du joueur :

Portion de code : Tout sélectionner

1
2
position.x = clamp(position.x, 0, screenSize.x-30)
position.y = clamp(position.y, 0, screenSize.y-30)



clamp(value, min,max) va bloquer la valeur value dans l’intervalle [min,max].

Renvoyer le joueur au menu en cas de défaite.

Pour finir, retournez dans le script de Enemy. Modifiez _on_Enemy_area_entered(area) en enlevant le queue_free() et en ajoutant ceci à la place :

Portion de code : Tout sélectionner

1
get_tree().change_scene("res://Menu.tscn")


Cela renverra le joueur sur le menu en cas de collision.


Bravo, vous avez fini votre premier jeu sur Godot. :sfrog


image



Falco - posté le 08/04/2021 à 09:36:25 (18072 messages postés) -

❤ 0

Indie game Developer

Merci beaucoup pour ces tuto c'est génial moi qui voulait m'y mettre prochainement...

Inexistence Rebirth - Inexistence - Portfolio


moretto - posté le 08/04/2021 à 12:01:27 (708 messages postés)

❤ 0

De rien :)

Hésite pas à me remonter des commentaires si il y a des trucs pas clair/si je suis allé trop vite sur certains points.

Je suis me motive assez, je ferais encore quelques tutos, notamment pour les tilemap/tileset qui sont un peu mal branlés.


Gari - posté le 08/04/2021 à 12:18:41 (4918 messages postés) - honor -

❤ 1

J'ai lu le tuto en même temps que la corrections de quelques coquilles, et pour moi c'est assez clair, malgré tous les termes de programmation.
Faire une interface a l'air beaucoup plus simple que sur rm en tout cas (où c'est plutôt barbant avec les problèmes de détection d'appui).


moretto - posté le 08/04/2021 à 13:15:07 (708 messages postés)

❤ 0

Merci du retour Gari.

Pour les interfaces, oui c'est vraiment facile à mettre en place, il y a même des logiciel qui ne sont pas du tout des jeux qui commencent à sortir. Un exemple (développé par un membre de la commu francophone) : https://pixelover.io/


Falco - posté le 09/04/2021 à 19:55:37 (18072 messages postés) -

❤ 0

Indie game Developer

Bordel ouais, tu peux créer des logiciels avec :o
Mon dieu faut vite que je passe à Godot, je vais pouvoir continuer de recréer pleins de tool et d'éditeurs comme je faisais pour Inex, mais en plus poussé !

Inexistence Rebirth - Inexistence - Portfolio


Nemau - posté le 09/04/2021 à 21:47:29 (47484 messages postés) - admin -

❤ 0

The inconstant gardener

Imho continue ton éditeur pour créer des Zelda-like 2D, c'était cool et je pense qu'il y a un gros public pour ça, d'autant qu'il n'existe pas d'équivalent d'RM (aussi simple et tout) pour les A-RPG. :3

Moretto : encore GG pour cette suite de tutos. :lei

Proposez vos news !TrombinoscopePolaris 03Planète Glutko • Doom Doom Doom Doom! I want you in my tomb!


Falco - posté le 10/04/2021 à 09:45:29 (18072 messages postés) -

❤ 1

Indie game Developer

J'étais bien avancé mais avec Clickteam Fusion j'avais des limites qui pour moi faisaient que c'était impossible de continuer... Mais si j'arrive à maîtriser Godot un jour c'est pas impossible que je m'y remette :p

Inexistence Rebirth - Inexistence - Portfolio

Suite à de nombreux abus, le post en invités a été désactivé. Veuillez vous inscrire si vous souhaitez participer à la conversation.

Haut de page

Merci de ne pas reproduire le contenu de ce site sans autorisation.
Contacter l'équipe - Mentions légales

Plan du site

Communauté: Accueil | Forum | Chat | Commentaires | News | Flash-news | Screen de la semaine | Sorties | Tests | Gaming-Live | Interviews | Galerie | OST | Blogs | Recherche
Apprendre: Visite guidée | RPG Maker 95 | RPG Maker 2003 | RPG Maker XP | RPG Maker VX | RPG Maker MV | Tutoriels | Guides | Making-of
Télécharger: Programmes | Scripts | Ressources graphiques / sonores | Packs de ressources | Midis | Eléments séparés | Sprites
Jeux: Au hasard | Notre sélection | Sélection des membres | Tous les jeux | Jeux complets | Le cimetière | RPG Maker 95 | RPG Maker 2000 | RPG Maker 2003 | RPG Maker XP | RPG Maker VX | RPG Maker VX Ace | RPG Maker MV | Autres | Proposer
Ressources RPG Maker 2000/2003: Chipsets | Charsets | Panoramas | Backdrops | Facesets | Battle anims | Battle charsets | Monstres | Systems | Templates
Ressources RPG Maker XP: Tilesets | Autotiles | Characters | Battlers | Window skins | Icônes | Transitions | Fogs | Templates
Ressources RPG Maker VX: Tilesets | Charsets | Facesets | Systèmes
Ressources RPG Maker MV: Tilesets | Characters | Faces | Systèmes | Title | Battlebacks | Animations | SV/Ennemis
Archives: Palmarès | L'Annuaire | Livre d'or | Le Wiki | Divers