Les joueurs peuvent obtenir des commentaires sur le fait que leurs actions font ou non quelque chose avec des animations.Cela peut être un arbre secoué lorsqu'il est frappé, ou un animal de compagnie joyeusement rebondissant lorsqu'il est nourri.Dans ce cas, nous allons vous montrer comment faire un bouton qui se déplace lorsque le joueur le clique.
Tween avec des animations
Une façon d'animer des objets consiste à utiliser des tweens.Un tween , court pour entre deux, est le processus de changement d'une valeur de départ en une valeur finale sur une certaine période de temps.Les préadolescents peuvent être utilisés pour modifier des propriétés telles que la position, la couleur ou la rotation.
Lancement du projet
Pour ce projet, un adolescent déplacera un objet d'une position de départ à une position d'arrivée.
Déterminez quelle partie vous allez animer. Dans l'exemple ci-dessous, 1 est le bouton et 2 est le mur.
Dans la partie qui se mouvement, ajoutez un détecteur de clics et un script nommé TweenMove. Ne renommez pas le détecteur de clics.
Si vous utilisez un modèle avec de nombreuses parties, choisissez une partie à déplacer (comme le bouton dans cet exemple), et placez le script MoveTween comme enfant.
Ouvrez le script TweenMove. Ensuite, copiez et collez le script ci-dessous.
-- Adolescents un côté en arrière et en avant en fonction d'un axe choisi-- Le bouton a un état marche/arrêt qui déplace la partie vers l'avant ou vers l'arrièrelocal TweenService = game:GetService("TweenService")local button = script.Parentlocal clickDetector = button:FindFirstChildWhichIsA("ClickDetector")local buttonState = -1 -- Détermine la direction du bouton ; -1 signifie qu'il appuiera, 1 signifie qu'il sortiralocal inTween = false-- Variables personnalisableslocal TWEEN_TIME = 0.15local TWEEN_MOVE_DISTANCE = 1.5-- Variables d'adolescentlocal buttonTweenInfo = TweenInfo.new(TWEEN_TIME, -- TempsEnum.EasingStyle.Quad, -- Style d'aisanceEnum.EasingDirection.Out -- Direction d'allègement)local function buttonPress()-- Si le bouton est en train de disparaître, empêchez-le d'être à nouveau utiliséif inTween == true thenreturnend-- Calculer le nouveau CFrame pour la position du boutonlocal offsetCFrame = CFrame.new(0, TWEEN_MOVE_DISTANCE * buttonState, 0)local newCFrame = button.CFrame:ToWorldSpace(offsetCFrame)-- Créer un préadolescent et le jouerlocal tweenButton = TweenService:Create(button, buttonTweenInfo, {CFrame = newCFrame})tweenButton:Play()inTween = true-- À la fin de l'adolescence, rendre à nouveau le bouton utilisabletweenButton.Completed:Connect(function()inTween = false-- Inverser l'état du boutonbuttonState *= -1end)endclickDetector.MouseClick:Connect(buttonPress)Testez et cliquez sur l'objet.Pendant les tests, vous pouvez remarquer que l'objet se déplace dans la mauvaise direction ou à une distance incorrecte.Cela peut être personnalisé dans la section suivante.
Ajuster le déplacement tween
Avec le script ajouté, vous pouvez le personnaliser pour répondre aux besoins de votre jeu.Le bouton peut être déplacé pour se déplacer dans des directions comme vers l'avant et l'retour, ou vers le haut et le bas.
Changer de position
Rappelez-vous, les adolescents passent de une valeur de départ à une valeur d'objectif.Ce script utilise CFrames pour déplacer le bouton dans une direction relative à sa position actuelle.Cette direction est contrôlée dans ligne 28 du script.
Sur cette ligne, un nouveau cadre C est créé en utilisant les coordonnées X, Y et Z. Dans cet exemple, le bouton se déplace par rapport à son axe Y.
Pour que le bouton se déplace dans une direction différente de celle désirée , remplacez simplement l'une des coordonnées souhaitées par la ligne : TWEEN_MOVE_DISTANCE * buttonState .Définissez toutes les autres coordonnées à 0.
Par exemple, cette ligne le déplacera plutôt par rapport à son axe X.
Temps et distance d'adolescent
Le script inclut les variables suivantes qui affectent le mouvement du tween.Les noms capitalisés comme TWEEN_TIME sont écrits spécifiquement pour que ce script soit modifié.
Essayez de modifier la valeur d'une variable ci-dessous :
- Ligne 11 - TWEEN_TIME : Le temps en secondes qu'il faut pour que se produise un adolescent.
- Ligne 12 - TWEEN_MOVE_DISTANCE : La distance parcourue par le bouton en studs.
Transiter vers d'autres propriétés
La plupart des propriétés avec un type de données numérique peuvent être transitées.Cette section inclut certaines propriétés communes, comme la rotation, qui peuvent être utilisées pour amener plus de commentaires des joueurs dans votre jeu.Gardez à l'esprit que vous pouvez également comparer plusieurs propriétés à la fois.
Pour une liste complète des propriétés, voir la page TweenService.
Tourner
Pour la rotation, combinez tweening et CFrames au lieu d'utiliser simplement Vector3.Les tweens de rotation peuvent être utilisés pour faire bouger les créatures lorsqu'elles sont prises, ou faire tourner les pièces lorsqu'elles sont ramassées.
Dans l'exemple de script suivant, la position et la rotation de la créature sont toutes deux ajustées lorsqu'on clique pour montrer à quel point elle est heureuse lorsqu'elle est caressée.
Le code ci-dessous fera pivoter un objet en fonction du nombre de degrés dans TWEEN_ROT_ANGLES .
-- Utilise le tween pour faire tourner l'objet vers le haut et rebondir
local TweenService = game:GetService("TweenService")
local partToTween = script.Parent
local clickDetector = partToTween:FindFirstChildWhichIsA("ClickDetector")
local inTween = false
-- Variables personnalisables
local TWEEN_TIME = 0.25
local TWEEN_ROT_ANGLES = -45
local TWEEN_MOVE_DISTANCE = 3
-- Variables d'adolescent
local tweenInfo = TweenInfo.new(
TWEEN_TIME, -- Temps
Enum.EasingStyle.Quad, -- Style d'aisance
Enum.EasingDirection.Out, -- Direction d'allègement
1, -- RepeatCount (quand moins de zéro, le préadolescent s'enlèvera en boucle indéfiniment)
true -- Retours (tween reviendra une fois atteint son objectif)
)
local function activateAction()
-- Si l'objet est en transition, empêchez-le de se faire transitionner à nouveau
if inTween == true then
return
end
-- Calculer un nouveau CFrame pour la position et la rotation de l'objet
local offsetCFrame = CFrame.new(0, TWEEN_MOVE_DISTANCE, 0)
local rotatedCFrame = CFrame.Angles(math.rad(TWEEN_ROT_ANGLES), 0, 0)
offsetCFrame = offsetCFrame:ToWorldSpace(rotatedCFrame)
local newCFrame = partToTween.CFrame:ToWorldSpace(offsetCFrame)
-- Créer un préadolescent et le jouer
local tweenObject = TweenService:Create(partToTween, tweenInfo, {CFrame = newCFrame})
tweenObject:Play()
inTween = true
-- À la fin de l'adolescence, rendre l'objet à nouveau cliquable
tweenObject.Completed:Connect(function()
inTween = false
end)
end
clickDetector.MouseClick:Connect(activateAction)
Échelle
Changer la taille des objets en jeu peut également montrer qu'un joueur a interagi avec eux.Par instance, les récupérations comme les kits de santé ou les gemmes peuvent rétrécir lorsqu'elles sont touchées.Pour dimensionner les parties, modifiez l'objectif d'adolescent en un nouveau Vector3 de la taille souhaitée.
-- Faire varier la taille d'une partie lorsqu'elle est touchée, puis la détruire
local TweenService = game:GetService("TweenService")
local partToScale = script.Parent
local inTween = false
-- Variables personnalisables
local TWEEN_TIME = 1
local TWEEN_SCALE = Vector3.zero
-- Variables d'adolescent
local tweenInfo = TweenInfo.new(
TWEEN_TIME, -- Temps
Enum.EasingStyle.Exponential, -- Style d'aisance
Enum.EasingDirection.Out -- Direction d'allègement
)
local function onPartTouch(otherPart)
-- Si l'objet est en transition, empêchez-le de se faire transitionner à nouveau
if inTween == true then
return
end
local partParent = otherPart.Parent
local humanoid = partParent:FindFirstChildWhichIsA("Humanoid")
if humanoid then
-- Empêcher d'autres collisions sur l'objet puisqu'il a été récupéré
partToScale.CanCollide = false
-- Créer un préadolescent et le jouer
local tweenObject = TweenService:Create(partToScale, tweenInfo, {Size = TWEEN_SCALE})
tweenObject:Play()
inTween = true
-- À la fin de l'adolescence, détruire l'objet
tweenObject.Completed:Connect(function()
partToScale:Destroy()
end)
end
end
partToScale.Touched:Connect(onPartTouch)
Changement de couleur
Les parties peuvent transiter des couleurs en passant par des valeurs de couleur3.Par instance, les ennemis ou les objets destructibles peuvent éclairer les couleurs pour donner un retour sur les faits qu'ils ont été frappés ou cliqués.
-- Transférer la couleur d'un objet au clic et le détruire après 3 clics
local TweenService = game:GetService("TweenService")
local partToTween = script.Parent
local clickDetector = partToTween:FindFirstChildWhichIsA("ClickDetector")
local inTween = false
-- Variables personnalisables
local TWEEN_TIME = 0.2
local COLOR_ON_HIT = Color3.fromRGB(255, 0, 50)
local hitCount = 0
-- Variables d'adolescent
local tweenInfo = TweenInfo.new(
TWEEN_TIME, -- Temps
Enum.EasingStyle.Exponential, -- Style d'aisance
Enum.EasingDirection.InOut, -- Direction d'allègement
0, -- RepeatCount (quand moins de zéro, le préadolescent s'enlèvera en boucle indéfiniment)
true -- Retours (tween reviendra une fois atteint son objectif)
)
local function activateAction()
-- Si l'objet est en transition, empêchez-le de se faire transitionner à nouveau
if inTween == true then
return
end
-- Créer un préadolescent et le jouer
local tweenObject = TweenService:Create(partToTween, tweenInfo, {Color = COLOR_ON_HIT})
tweenObject:Play()
inTween = true
-- À la fin de l'adolescence, rendre l'objet à nouveau cliquable
tweenObject.Completed:Connect(function()
inTween = false
-- Augmentation du nombre de hits
hitCount += 1
-- Après 3 coups, détruisez l'objet
if hitCount == 3 then
partToTween:Destroy()
end
end)
end
clickDetector.MouseClick:Connect(activateAction)
Bien que ce script utilise une partie normale pour changer de couleur, il est également possible d'utiliser cela sur des parties de maillage avec une texture appliquée.Les parties de maillage sont souvent importées des modèles 3D, plutôt que des parties construites directement dans Roblox Studio.
Si vous travaillez avec une MeshPart entièrement texturée, nous vous conseillons ce qui suivre:
Utilisez un SpecialMesh au lieu d'un MeshPart. C'est parce que la texture d'un MeshPart remplace la couleur qui est teintée par le script.
Modifiez le script pour modifier la couleur du vertex de la maillage spéciale au lieu de la propriété couleur.
Exemple de projet
Affichez tous les exemples de scripts dans cet emplacementnon verrouillé. Obtenez tous les scripts à modifier également.
