I giocatori possono ottenere feedback su se le loro azioni stanno facendo qualcosa con le animazioni. Questo può essere un tree shaking quando colpito, o un pet che si arrampica felice quando alimentato. In questo caso, mostreremo come fare un pulsante che si muove quando il giocatore lo clicca.
Tweening con Animazioni
Un modo per animare gli oggetti è utilizzare i tweens. Un tween , corto per in-between, è il processo di cambiare un valore di partenza in un valore di destinazione in un certo periodo di tempo. I tweens possono essere utilizzati per modificare le proprietà come la posizione, il colore o la rotazione.
Configurazione del progetto
Per questo progetto, un tween sposterà un oggetto da una posizione di partenza a una posizione di destinazione.
Determina quale parte animerai. Nel esempio seguente, 1 è il pulsante e 2 è il muro.
Nella parte che si Sposta, aggiungi un ClickDetector e uno script chiamato TweenMove. Non rinomina il ClickDetector.
Se stai usando un modello con molte parti, scegli una parte da spostare (come il pulsante in questo esempio), e posiziona lo script MoveTween come suo figlio.
Apri lo script TweenMove. Quindi, copia e pasta lo script sottostante.
-- Ritaglia una parte all'indietro e all'indietro in base a un asse scelto-- Il pulsante ha uno stato on/off che sposta la parte in avanti o indietrolocal TweenService = game:GetService("TweenService")local button = script.Parentlocal clickDetector = button:FindFirstChildWhichIsA("ClickDetector")local buttonState = -1 -- Determina la direzione del pulsante; -1 significa che premerà in, 1 significa che spunteràlocal inTween = false-- Variabili personalizzabililocal TWEEN_TIME = 0.15local TWEEN_MOVE_DISTANCE = 1.5-- Variabili Tweenlocal buttonTweenInfo = TweenInfo.new(TWEEN_TIME, -- TempoEnum.EasingStyle.Quad, -- Stile di facilezzaEnum.EasingDirection.Out -- Direzione di facilezza)local function buttonPress()-- Se il pulsante è tweening, impedirlo di essere utilizzato di nuovoif inTween == true thenreturnend-- Calcola una nuova CFrame per la posizione del pulsantelocal offsetCFrame = CFrame.new(0, TWEEN_MOVE_DISTANCE * buttonState, 0)local newCFrame = button.CFrame:ToWorldSpace(offsetCFrame)-- Crea un tween e giocarlolocal tweenButton = TweenService:Create(button, buttonTweenInfo, {CFrame = newCFrame})tweenButton:Play()inTween = true-- Al completamento del tween, rendi nuovamente il pulsante utilizzabiletweenButton.Completed:Connect(function()inTween = false-- Inverti lo stato del pulsantebuttonState *= -1end)endclickDetector.MouseClick:Connect(buttonPress)Provalo e fai clic sull'oggetto. Mentre testi, potresti notare che l'oggetto muove la direzione o la distanza sbagliata. Questo può essere personalizzato nella prossima sezione.
Aggiustamento del Move Tween
Con lo script aggiunto, puoi personalizzarlo per adattarti alle esigenze del tuo Gioco. Il pulsante può essere trascinato per muoversi in direzioni come avanti e Indietro, o su e giù.
Posizione di cambiamento
Ricorda, i tweens pass da un valore di partenza a un valore di destinazione. Questo script usa CFrame per spostare il pulsante in una direzione rispetto alla sua posizione attuale. Quella direzione è controllata in Linea 28 della script.
Su quella linea, viene creata una nuova CFrame utilizzando X, Y e Z coordinate. In questo esempio, il pulsante si muove rispetto al suo asse Y.
Per avere il pulsante che si muove in una diversa direzione, semplicemente sostituisci uno dei desiderati coordinati con la linea: TWEEN_MOVE_DISTANCE * buttonState . Imposta tutti gli altri coordini su 0.
Ad esempio, questa linea lo sposterà rispetto al suo asse X invece.
Tempo di Tweeting e Distanza
Lo script include le seguenti variabili che influenzano il movimento del gemellati. I nomi capitalizzati come TWEEN_TIME sono scritti specificamente per questo script per essere modificato.
Prova a cambiare il valore di una variabile di seguito:
- Linea 11 - TWEEN_TIME : Il tempo in secondi richiesti per l'avvenimento di un tween.
- Linea 12 - TWEEN_MOVE_DISTANCE : La distanza in cui il pulsante si muove in studs.
Tweening altre proprietà
La maggior parte delle proprietà con un tipo di dati numerico può essere tweaked. Questa sezione include alcune proprietà comuni, come la rotazione, che possono essere utilizzate per portare più feedback del giocatore nel tuo Gioco. Tieni presente, puoi anche tweaked più proprietà contemporaneamente.
Per un elenco completo delle proprietà, vedi la pagina TweenService dell'API.
Rotolamento
Per la rotazione, combina il tweening e i CFrame invece di utilizzare solo Vector3. I tweening della rotazione possono essere utilizzati per far muovere le creature quando si fa compagnia, o le monete che ruotano mentre vengono raccolte.
Nell'esempio di script successivo, la posizione e la rotazione della creatura sono entrambe tweened quando viene cliccata per mostrare quanto è felice quando viene accarezzata.
Il codice seguente ruoterà un oggetto in base al numero di gradi in TWEEN_ROT_ANGLES .
-- Usa tween per fare girare l'oggetto e saltare
local TweenService = game:GetService("TweenService")
local partToTween = script.Parent
local clickDetector = partToTween:FindFirstChildWhichIsA("ClickDetector")
local inTween = false
-- Variabili personalizzabili
local TWEEN_TIME = 0.25
local TWEEN_ROT_ANGLES = -45
local TWEEN_MOVE_DISTANCE = 3
-- Variabili Tween
local tweenInfo = TweenInfo.new(
TWEEN_TIME, -- Tempo
Enum.EasingStyle.Quad, -- Stile di facilezza
Enum.EasingDirection.Out, -- Direzione di facilezza
1, -- RepeatCount (quando meno zero il tween si ripetrà indefinitamente)
true -- Roves (tween si invertirà una volta raggiunto il suo obiettivo)
)
local function activateAction()
-- Se l'oggetto è in tweening, impediscila dal essere tweening di nuovo
if inTween == true then
return
end
-- Calcola una nuova CFrame per la posizione e la rotazione dell'oggetto
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)
-- Crea un tween e giocarlo
local tweenObject = TweenService:Create(partToTween, tweenInfo, {CFrame = newCFrame})
tweenObject:Play()
inTween = true
-- Al completamento del tween, rendi nuovamente clickabile l'oggetto
tweenObject.Completed:Connect(function()
inTween = false
end)
end
clickDetector.MouseClick:Connect(activateAction)
Scaling
Cambiare la dimensione degli oggetti in gioco può anche mostrare che un giocatore ha interagito con loro. Ad esempio, i pickup come pacchetti di salute o gemme possono ridursi quando toccati. Per ridimensionare le parti, cambia l'obiettivo tween a un nuovo Vector3 della dimensione desiderata.
-- Twee la dimensione di una parte quando viene toccata, poi distruggila
local TweenService = game:GetService("TweenService")
local partToScale = script.Parent
local inTween = false
-- Variabili personalizzabili
local TWEEN_TIME = 1
local TWEEN_SCALE = Vector3.zero
-- Variabili Tween
local tweenInfo = TweenInfo.new(
TWEEN_TIME, -- Tempo
Enum.EasingStyle.Exponential, -- Stile di facilezza
Enum.EasingDirection.Out -- Direzione di facilezza
)
local function onPartTouch(otherPart)
-- Se l'oggetto è in tweening, impediscila dal essere tweening di nuovo
if inTween == true then
return
end
local partParent = otherPart.Parent
local humanoid = partParent:FindFirstChildWhichIsA("Humanoid")
if humanoid then
-- Impedisci ulteriori collisioni sull'oggetto poiché è stato raccolto
partToScale.CanCollide = false
-- Crea un tween e giocarlo
local tweenObject = TweenService:Create(partToScale, tweenInfo, {Size = TWEEN_SCALE})
tweenObject:Play()
inTween = true
-- Al completamento del tween, distruggi l'oggetto
tweenObject.Completed:Connect(function()
partToScale:Destroy()
end)
end
end
partToScale.Touched:Connect(onPartTouch)
Cambio di colore
Le parti possono passare colori con i valori Color3. Ad esempio, i nemici o gli oggetti distruttibili possono flash colori per fornire feedback che sono stati colpiti o fanno clic.
-- Tweet il colore di un oggetto dopo averlo cliccato e distruggerlo dopo 3 clic
local TweenService = game:GetService("TweenService")
local partToTween = script.Parent
local clickDetector = partToTween:FindFirstChildWhichIsA("ClickDetector")
local inTween = false
-- 变abili personalizzabili
local TWEEN_TIME = 0.2
local COLOR_ON_HIT = Color3.fromRGB(255, 0, 50)
local hitCount = 0
-- Variabili Tween
local tweenInfo = TweenInfo.new(
TWEEN_TIME, -- Tempo
Enum.EasingStyle.Exponential, -- Stile di facilezza
Enum.EasingDirection.InOut, -- Direzione di facilezza
0, -- RepeatCount (quando meno zero il tween si ripetrà indefinitamente)
true -- Roves (tween si invertirà una volta raggiunto il suo obiettivo)
)
local function activateAction()
-- Se l'oggetto è in tweening, impediscila dal essere tweening di nuovo
if inTween == true then
return
end
-- Crea un tween e giocarlo
local tweenObject = TweenService:Create(partToTween, tweenInfo, {Color = COLOR_ON_HIT})
tweenObject:Play()
inTween = true
-- Al completamento del tween, rendi nuovamente clickabile l'oggetto
tweenObject.Completed:Connect(function()
inTween = false
-- Aumenta il numero di colpi
hitCount += 1
-- Dopo 3 colpi, distruggi l'oggetto
if hitCount == 3 then
partToTween:Destroy()
end
end)
end
clickDetector.MouseClick:Connect(activateAction)
Mentre questo script utilizza un Part normale per cambiare il colore, è anche possibile utilizzarlo su MeshPart con una Strutturaapplicata. MeshPart sono spesso importati 3D modelli, piuttosto che parti costruiscono direttamente in Roblox Studio.
Se stai lavorando con una MeshPart completamente texturata, ti consigliamo di seguire quanto Seguendo:
Usa un SpecialMesh invece di un MeshPart. Questo perché la texture di un MeshPart sovrascrive il colore che viene tintato dallo script.
Cambia lo script per modificare il colore del VertexColor anziché la ProprietàColor .
Campione del progetto
Visualizza tutti gli script in questo Postonon bloccato da copia. Prendi tutti gli script per modificare anche.
 | Include script per la rotazione, l'aggiustamento e il cambio di colore dei tweens. > |