Dans ce tutoriel, tu vas apprendre à déplacer une image vers le bas sur une interface du joueur en utilisant TweenService dans Roblox Studio.
Les animations sont très utiles pour rendre un jeu plus agréable et plus vivant. Par exemple, tu peux faire apparaître un panneau d’information, faire glisser un bouton ou afficher une récompense avec une animation fluide.
Pour réaliser cela, nous allons utiliser un LocalScript et le service TweenService
Dans Roblox, les éléments affichés à l’écran du joueur sont appelés des interfaces graphiques ou GUI.
Une interface est généralement composée de plusieurs objets :
- ScreenGui : le conteneur principal affiché à l’écran.
- Frame : une fenêtre ou une zone de l’interface.
- ImageLabel : un objet qui affiche une image.
- TextLabel : un objet qui affiche du texte.
- Button : un bouton sur lequel le joueur peut cliquer.
Exemple :
Pour positionner ta fenêtre (Frame) au milieu de l’écran :
Crée un LocalScript
Les interfaces appartiennent à chaque joueur.
Si tu modifies l’interface avec un script serveur classique (Script), cela peut entraîner des problèmes car le serveur gère tous les joueurs.
Un LocalScript s’exécute uniquement sur l’ordinateur du joueur :
- il est plus rapide ;
- il permet de gérer l’interface personnelle du joueur ;
- il évite d’envoyer des informations inutiles au serveur.
C’est donc le meilleur choix pour animer une interface graphique.
Tu pourrais déplacer une image en modifiant sa position directement :
image.Position = UDim2.new(0,0,0.5,0)Mais l’image apparaîtrait immédiatement à sa nouvelle position.
Avec TweenService, Roblox crée automatiquement une animation fluide entre la position de départ et la position d’arrivée.
Les avantages sont nombreux :
- animation plus agréable ;
- code plus simple ;
- contrôle de la durée ;
- possibilité d’ajouter différents effets de mouvement.
-- récupérer le service TweenService
local TweenService = game:GetService("TweenService")
-- récupérer l' du joueur
local screen = script.Parent
-- récupérer l'image
local image = screen.Frame.ImageLabel
-- créer l'animation
local tweenInfo = TweenInfo.new(3, Enum.EasingStyle.Sine, Enum.EasingDirection.InOut, -1, true)
-- définir l'objectif de l'animation
local objectif = {Position = UDim2.new(image.Position.X.Scale,0 , 0.8, 0)}
-- lancer l'animation
local tween = TweenService:Create(image, tweenInfo, objectif)
tween:Play()