Cela fait longtemps que je veux me perfectionner en UI dans Godot et surtout enfin oser apprendre à faire un peu de tech art. En d’autres termes, j'aimerais perfectionner les prototypes de ce que Figma ne me permet pas de réaliser. Donc, j'ai commencé par enfin prendre le temps d'aller sur la page itchio de Christophe que je suis depuis plusieurs mois sur Bluesky.
My interactive tween guide for Godot is out ! If you have trouble using tweens, adding "Juice" or picking the right transition, it should hopefully help! The guide is free and will always be 🩵 qaqelol.itch.io/tweens #Godot #GameDev #Animation #Tutorial #Guide #Tweens
Le guide est vraiment très bien et explique les bonnes pratiques à avoir, comme s'assurer de penser à reset les différentes valeurs dans le code pour éviter les bugs d'animation (ci-dessous, on parle de barres animées avec un son) :
## Ensure everything is back to initial values
func reset_all():
if tween: tween.kill()
sound.stop()
sound.pitch_scale = 0.8
for bar in get_children():
bar.value = bar.min_value # reset progress bar value
bar.pivot_offset = bar.size/2.0 # center pivotÀ ce moment là du tutoriel, je suis allée voir une vidéo pour me rafraichir la mémoire sur l'ensemble des possibilités qu'offre le node ProgressBar ou TextureProgress :
Node Control => Node Progress Bar
Node Control => Timer (car pas de jeu et permet de tester)
Ajouter un script à Progress Bar
Dans Script : Timer, Node signal timeOut dans notre script de la Progress Bar
$ProgressBar.value+=1
Timer : Wait time : 0.1 et Autostart
En avançant de nouveau dans le guide, la notion de courbes personnalisées est utilisée donc à nouveau un tutoriel (qui ne part pas dans des explications trop complexes) :
En comparaison des Animations réalisées par le player, il est rapide d'associer les tween à un autre Sprite si besoin.
Des démos plus complexes illustrent l'utilisation des tween, je note de consulter la documentation des RichLabelText : https://docs.godotengine.org/en/latest/tutorials/ui/bbcode_in_richtextlabel.html#text-effects.
La scrollBar est également mentionnée (à préférer au panel node si on veut une liste), compliqué de trouver un tutorial court spécifiquement sur le container mais en voici un :
Les dernières démos peuvent être réellement complexes quand on débute, mais elles sont intéressantes à explorer, même si le code n'est pas compris entièrement. Je me note pour un prochain jour le tutoriel sur les masques réalisés aussi par Christophe ; https://qaqelol.itch.io/svg-gradient/devlog/1308040/usage-tutorial-inkscape-godot
Voici son itchio si vous voulez explorer ses différentes productions :