Les joueurs peuvent obtenir des commentaires sur si oui ou non leurs actions font quelque chose avec des animations. Ceci peut être un arbre secoué lorsqu'il est touché, ou un animal de compagnie sautant joyeusement lorsqu'il est nourri. Dans ce cas, nous vous montrerons comment faire un bouton qui se déplace lorsque le joueur clique dessus.
Tweening avec des animations
L'une des façons d'animer les objets est d'utiliser les tweens. Un tween , court pour in-between, est le processus de changement d'une valeur de départ à une valeur d'arrivée au cours d'un certain lapse de temps. Les tweens peuvent être utilisés pour modifier des propriétés telles que la position, la couleur ou la rotation.
Configuration du projet
Pour ce projet, un tween déplacera un objet d'une position de départ à une position d'arrivée.
Déterminez la partie que vous animerez. Dans l'exemple ci-dessous, 1 est le bouton et 2 est le mur.
Dans la partie qui se mouvement, ajoutez un ClickDetector et un script nommé TweenMove. Ne renommez pas le ClickDetector.
Si vous utilisez un modèle avec de nombreuses parties, choisissez l'une d'elles pour déplacer (tel que le bouton dans cet exemple), et mettez le script MoveTween comme son enfant.
Ouvrez le script TweenMove. Puis, copiez et collez le script ci-dessous.
-- Tweens une partie de retour en arrière en fonction d'un axe choisi-- Le bouton a un état oui/non qui déplace la partie vers l'avant ou l'arrièrelocal TweenService = game:GetService("TweenService")local button = script.Parentlocal clickDetector = button:FindFirstChildWhichIsA("ClickDetector")local buttonState = -1 -- Détermine la direction des boutons ; -1 signifie qu'il appuiera dans, 1 signifie qu'il sortiralocal inTween = false-- Variables personnalisableslocal TWEEN_TIME = 0.15local TWEEN_MOVE_DISTANCE = 1.5-- Variables de dessinlocal buttonTweenInfo = TweenInfo.new(TWEEN_TIME, -- TempsEnum.EasingStyle.Quad, -- Style d'aérationEnum.EasingDirection.Out -- Direction de l'aération)local function buttonPress()-- Si le bouton est tweening, empêche-le d'être utilisé à nouveauif inTween == true thenreturnend-- Calculer une nouvelle position de bouton à l'aide de CFramelocal offsetCFrame = CFrame.new(0, TWEEN_MOVE_DISTANCE * buttonState, 0)local newCFrame = button.CFrame:ToWorldSpace(offsetCFrame)-- Créer un tween et le jouerlocal tweenButton = TweenService:Create(button, buttonTweenInfo, {CFrame = newCFrame})tweenButton:Play()inTween = true-- Lors de la fin du tween, rendre le bouton réutilisabletweenButton.Completed:Connect(function()inTween = false-- Inverser l'état du boutonbuttonState *= -1end)endclickDetector.MouseClick:Connect(buttonPress)Testez et cliquez sur l'objet. Pendant le test, vous remarquerez peut-être que l'objet se déplace dans la mauvaise direction ou distance. Cela peut être personnalisé dans la prochaine section.
Ajustement du tween de déplacement
Avec le script ajouté, vous pouvez le personnaliser pour qu'il soit à la hauteur de vos besoins. Le bouton peut être ajusté pour se déplacer dans des directions comme en avant et en retour, ou vers le haut et vers le bas.
Changer de position
Rappelez-vous, les adolescents passent d'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 CFrame est créé à l'aide des 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 , remplacez simplement l'un des coordonnées souhaitées par la ligne : TWEEN_MOVE_DISTANCE * buttonState. Définissez tous les autres coordonnées à 0.
Par exemple, cette ligne le déplacera plutôt par rapport à son axe X.
Temps de tweening et distance
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 nécessaire pour que se produise un tween.
- Ligne 12 - TWEEN_MOVE_DISTANCE : la distance que le bouton se déplace en studs.
Tweeter d'autres propriétés
La plupart des propriétés avec un type de données numérique peuvent être ajustées. Cette section inclut certaines propriétés courantes, telles que la rotation, qui peuvent être utilisées pour amener plus de commentaires des joueurs dans votre jeu. Gardez à l'esprit que vous pouvez également ajuster plusieurs propriétés à la fois.
Pour une liste complète des propriétés, voir la page TweenService.
Rotation
Pour la rotation, combinez le tweening et les CFrames au lieu d'utiliser simplement Vector3. Les tweens de rotation peuvent être utilisés pour faire trembler les créatures lorsque vous les avez sur le animal de compagnie, ou que les pièces tournent 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'elle est cliquée pour montrer à quel point elle est heureuse quand elle est animale de compagnie.
Le code ci-dessous va faire pivoter un objet en fonction du nombre de degrés dans TWEEN_ROT_ANGLES .
-- Utilise tween pour faire pivoter 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 de dessin
local tweenInfo = TweenInfo.new(
TWEEN_TIME, -- Temps
Enum.EasingStyle.Quad, -- Style d'aération
Enum.EasingDirection.Out, -- Direction de l'aération
1, -- RepeatCount (quand le tween est inférieur à zéro, il se répétera infiniment)
true -- Reverse (tween sera réversé une fois atteint son objectif)
)
local function activateAction()
-- Si l'objet est tweening, empêchez-le de tweening à nouveau
if inTween == true then
return
end
-- Calculer une nouvelle 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 tween et le jouer
local tweenObject = TweenService:Create(partToTween, tweenInfo, {CFrame = newCFrame})
tweenObject:Play()
inTween = true
-- Lors de la fin du tween, rendre l'objet cliquable à nouveau
tweenObject.Completed:Connect(function()
inTween = false
end)
end
clickDetector.MouseClick:Connect(activateAction)
Redimensionnement
Changer la taille des objets dans le jeu peut également montrer que quelqu'un a interagi avec eux. Par instance, les pickups comme les kits de santé ou les gemmes peuvent rétrécir lorsqu'ils sont touchés. Pour mettre à l'échelle les parties, modifiez la cible de tween à un nouveau Vector3 de la taille souhaitée.
-- Définir 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 de dessin
local tweenInfo = TweenInfo.new(
TWEEN_TIME, -- Temps
Enum.EasingStyle.Exponential, -- Style d'aération
Enum.EasingDirection.Out -- Direction de l'aération
)
local function onPartTouch(otherPart)
-- Si l'objet est tweening, empêchez-le de tweening à nouveau
if inTween == true then
return
end
local partParent = otherPart.Parent
local humanoid = partParent:FindFirstChildWhichIsA("Humanoid")
if humanoid then
-- Empêcher les collisions futures sur l'objet lorsqu'il a été ramassé
partToScale.CanCollide = false
-- Créer un tween et le jouer
local tweenObject = TweenService:Create(partToScale, tweenInfo, {Size = TWEEN_SCALE})
tweenObject:Play()
inTween = true
-- Lors de la fin du tween, détruire l'objet
tweenObject.Completed:Connect(function()
partToScale:Destroy()
end)
end
end
partToScale.Touched:Connect(onPartTouch)
Changement de couleur
Les parties peuvent transférer des couleurs en tweenant avec les valeurs de couleur3. Par instance, les ennemis ou les objets destructibles peuvent flasher des couleurs pour donner des informations sur ce qu'ils ont touché ou cliqué.
-- Tweetez la couleur d'un objet lorsqu'il est cliqué et détruisez-le 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 de dessin
local tweenInfo = TweenInfo.new(
TWEEN_TIME, -- Temps
Enum.EasingStyle.Exponential, -- Style d'aération
Enum.EasingDirection.InOut, -- Direction de l'aération
0, -- RepeatCount (quand le tween est inférieur à zéro, il se répétera infiniment)
true -- Reverse (tween sera réversé une fois atteint son objectif)
)
local function activateAction()
-- Si l'objet est tweening, empêchez-le de tweening à nouveau
if inTween == true then
return
end
-- Créer un tween et le jouer
local tweenObject = TweenService:Create(partToTween, tweenInfo, {Color = COLOR_ON_HIT})
tweenObject:Play()
inTween = true
-- Lors de la fin du tween, rendre l'objet cliquable à nouveau
tweenObject.Completed:Connect(function()
inTween = false
-- Augmenter le nombre de coups d'augmentation
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 un Part normal pour changer la couleur, il est également possible d'utiliser ceci sur MeshParts avec une texture appliquée. Les MeshParts sont souvent importés 3D modèles, plutôt que les parties construisent directement dans Roblox Studio.
Si vous travaillez avec une MeshPart pleinement texturée, nous vous conseillons les suivre:
Utilisez un SpecialMesh au lieu d'un MeshPart. C'est parce que la texture d'un MeshPart modifie la couleur qui est teint par le script.
Changez le script pour modifier la couleur du véritable maillage spécial au lieu de la couleur de la propriété Color.
Échantillon de projet
Affichez tous les exemples de scripts dans cet emplacementnon verrouillé. Obtenez tous les scripts à modifier également.
 | Inclut des scripts pour la rotation, l'échelle et le changement de couleur des adolescents. > |