Os jogadores podem obter feedback sobre se suas ações estão fazendo algo com animações. Isso pode ser uma vibração de árvore quando acertado, ou um animal de estimação puxando alegremente quando alimentado. Neste caso, mostraremos como fazer um botão que se move quando o jogador clica nele.
Tweening com Animações
Uma maneira de animar objetos é usar tweens. Um tween , curto para em meio, é o processo de alterar um valor de partida para um valor de finalização em um determinado período de tempo. Tweens podem ser usados para alterar propriedades, como posição, cor ou rotação.
Configuração do Projeto
Para este projeto, um tween moverá um objeto de uma posição de partida para uma posição de destino.
Determine a peça que você estará animando. No exemplo abaixo, 1 é o botão e 2 é a parede.
Na peça que se movimento, adicione um ClickDetector e um script chamado TweenMove. Não renomeie o ClickDetector.
Se você estiver usando um modelo com muitas peças, escolha uma peça para movê-la (como o botão neste exemplo) e coloque o script MoveTween como sua filha.
Abra o script TweenMove. Em seguida, copie e cole o script abaixo.
-- Mova uma peça de volta e para a frente com base em um eixo escolhido-- O botão tem um estado de liga/desliga que move a peça para a frente ou para tráslocal TweenService = game:GetService("TweenService")local button = script.Parentlocal clickDetector = button:FindFirstChildWhichIsA("ClickDetector")local buttonState = -1 -- Determina a direção do botão; -1 significa que ele pressionará para dentro, 1 significa que ele sairálocal inTween = false-- Variáveis personalizáveislocal TWEEN_TIME = 0.15local TWEEN_MOVE_DISTANCE = 1.5-- Variáveis de Tweenlocal buttonTweenInfo = TweenInfo.new(TWEEN_TIME, -- TempoEnum.EasingStyle.Quad, -- Estilo de AplainarEnum.EasingDirection.Out -- Direção de fácil)local function buttonPress()-- Se o botão estiver vazando, impeça que seja usado novamenteif inTween == true thenreturnend-- Calcular novo CFrame para posição do botãolocal offsetCFrame = CFrame.new(0, TWEEN_MOVE_DISTANCE * buttonState, 0)local newCFrame = button.CFrame:ToWorldSpace(offsetCFrame)-- Crie um tween e jogue-olocal tweenButton = TweenService:Create(button, buttonTweenInfo, {CFrame = newCFrame})tweenButton:Play()inTween = true-- Na conclusão do tween, faça o botão novamente usáveltweenButton.Completed:Connect(function()inTween = false-- Inverta o estado do botãobuttonState *= -1end)endclickDetector.MouseClick:Connect(buttonPress)Teste e clique no Objeto. Durante o teste, você pode notar que o objeto move a direção ou distância erradas. Isso pode ser personalizado na próxima seção.
Ajustando o Tween de Movimento
Com o script adicionado, você pode personalizá-lo para se adequar às necessidades do seu jogo. O botão pode ser ajustado para se mover em direções como a frente e para trás, ou para voltare para baixo.
Mudando a posição
Lembre-se, os tweens fazem a transição de um valor inicial para um valor final. Este script usa CFrame para mover o botão em uma direção relativa à sua posição atual. Essa direção é controlada em Linha 28 do script.
Nessa linha, um novo CFrame é criado usando X, Y e Z coordenadas. Neste exemplo, o botão se move em relação à sua eixo Y.
Para ter o botão se mover em uma direção diferente , simplesmente substitua uma das coordenadas desejadas com a linha: TWEEN_MOVE_DISTANCE * buttonState . Defina todos os outros coordenados para 0.
Por exemplo, essa linha vai movê-lo em relação ao seu eixo X em vez disso.
Ajustando o Tempo e a Distância
O script inclui as seguintes variáveis que afetam o movimento do interseção. Nomes capitalizados, como TWEEN_TIME, são escritos especificamente para que este script seja modificado.
Tente alterar o valor de uma variável abaixo:
- Linha 11 - TWEEN_TIME : O tempo em segundos que leva um tween para acontecer.
- Linha 12 - TWEEN_MOVE_DISTANCE : A distância que o botão move em studs.
Controlando Outras Propriedades
A maioria das propriedades com um tipo de dado numérico pode ser transformada. Esta seção inclui algumas propriedades comuns, como rotação, que podem ser usadas para levar mais feedback do jogador ao seu jogo. Tenha em mente que você também pode transformar várias propriedades de uma vez.
Para uma lista completa de propriedades, see the TweenService página da API.
Girando
Para rotação, combina ajuste de tamanho e CFrame em vez de usar apenas o Vector3. Rotation tweens podem ser usados para fazer as criaturas se moverem quando o animal de estimação ou as moedas são pegas.
No próximo exemplo de script, a posição e rotação da criatura são ambos ajustados quando clicados para mostrar quão feliz ela está quando estiver sendo pet.
O código abaixo irá girar um objeto com base no número de graus em TWEEN_ROT_ANGLES .
-- Usa tween para fazer o objeto girar para cima e pular
local TweenService = game:GetService("TweenService")
local partToTween = script.Parent
local clickDetector = partToTween:FindFirstChildWhichIsA("ClickDetector")
local inTween = false
-- Variáveis personalizáveis
local TWEEN_TIME = 0.25
local TWEEN_ROT_ANGLES = -45
local TWEEN_MOVE_DISTANCE = 3
-- Variáveis de Tween
local tweenInfo = TweenInfo.new(
TWEEN_TIME, -- Tempo
Enum.EasingStyle.Quad, -- Estilo de Aplainar
Enum.EasingDirection.Out, -- Direção de fácil
1, -- RepeatCount (quando menor que zero, o tween vai ficar preso indefinidamente)
true -- Reverses (tween vai se tornar ao contrário quando alcançar seu objetivo)
)
local function activateAction()
-- Se o objeto estiver sendo contorcido, impeça que ele seja contorcido novamente
if inTween == true then
return
end
-- Calcular novo CFrame para a posição e rotação do objeto
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)
-- Crie um tween e jogue-o
local tweenObject = TweenService:Create(partToTween, tweenInfo, {CFrame = newCFrame})
tweenObject:Play()
inTween = true
-- Na conclusão do tween, tornar o objeto clicável novamente
tweenObject.Completed:Connect(function()
inTween = false
end)
end
clickDetector.MouseClick:Connect(activateAction)
Redimensionando
Alterar o tamanho de objetos no jogo também pode mostrar que um jogador interagiu com eles. Por instância, pickups como health packs ou gemstones podem encolher quando tocados. Para escalar peças, altere o tween goal para um novo Vector3 do tamanho desejado.
-- Ajusta o tamanho de uma peça quando é tocada, e depois destrói
local TweenService = game:GetService("TweenService")
local partToScale = script.Parent
local inTween = false
-- Variáveis personalizáveis
local TWEEN_TIME = 1
local TWEEN_SCALE = Vector3.zero
-- Variáveis de Tween
local tweenInfo = TweenInfo.new(
TWEEN_TIME, -- Tempo
Enum.EasingStyle.Exponential, -- Estilo de Aplainar
Enum.EasingDirection.Out -- Direção de fácil
)
local function onPartTouch(otherPart)
-- Se o objeto estiver sendo contorcido, impeça que ele seja contorcido novamente
if inTween == true then
return
end
local partParent = otherPart.Parent
local humanoid = partParent:FindFirstChildWhichIsA("Humanoid")
if humanoid then
-- Impedir colisões futuras no objeto desde que ele foi coletado
partToScale.CanCollide = false
-- Crie um tween e jogue-o
local tweenObject = TweenService:Create(partToScale, tweenInfo, {Size = TWEEN_SCALE})
tweenObject:Play()
inTween = true
-- Na conclusão do tween, destruir o Objeto
tweenObject.Completed:Connect(function()
partToScale:Destroy()
end)
end
end
partToScale.Touched:Connect(onPartTouch)
Mudando de Cor
As peças podem alternar cores ao passar com valores de Cor3. Por instância, inimigos ou objetos destrutíveis podem mostrar cores piscando para dar feedback de que foram atingidos ou clicados.
-- Tween a cor de um Objetoao clicar nele e destruí-lo após 3 cliques
local TweenService = game:GetService("TweenService")
local partToTween = script.Parent
local clickDetector = partToTween:FindFirstChildWhichIsA("ClickDetector")
local inTween = false
-- Variáveis personalizáveis
local TWEEN_TIME = 0.2
local COLOR_ON_HIT = Color3.fromRGB(255, 0, 50)
local hitCount = 0
-- Variáveis de Tween
local tweenInfo = TweenInfo.new(
TWEEN_TIME, -- Tempo
Enum.EasingStyle.Exponential, -- Estilo de Aplainar
Enum.EasingDirection.InOut, -- Direção de fácil
0, -- RepeatCount (quando menor que zero, o tween vai ficar preso indefinidamente)
true -- Reverses (tween vai se tornar ao contrário quando alcançar seu objetivo)
)
local function activateAction()
-- Se o objeto estiver sendo contorcido, impeça que ele seja contorcido novamente
if inTween == true then
return
end
-- Crie um tween e jogue-o
local tweenObject = TweenService:Create(partToTween, tweenInfo, {Color = COLOR_ON_HIT})
tweenObject:Play()
inTween = true
-- Na conclusão do tween, tornar o objeto clicável novamente
tweenObject.Completed:Connect(function()
inTween = false
-- Aumentar o número de acertos
hitCount += 1
-- Após 3 acertos, destrua o Objeto
if hitCount == 3 then
partToTween:Destroy()
end
end)
end
clickDetector.MouseClick:Connect(activateAction)
Embora este script use uma peça normal para alterar a cor, também é possível usar isso em MeshParts com uma textura aplicada. MeshParts são geralmente importados 3D modelos, em vez de peças construídas diretamente no Roblox Studio.
Se você estiver trabalhando com uma MeshPart totalmente texturizada, recomendamos o seguindo:
Use um SpecialMesh em vez de um MeshPart. Isso é porque uma textura de MeshPart substitui a cor sendo tingida pelo script.
Altere o script para modificar a VertexColor do SpecialMesh em vez da propriedade Cor.
Exemplo de Projeto
Exemplos de script em todos os lugares, neste localnão bloqueado. Obtenha todos os scripts para modificar também.
 | Inclui scripts para rotação, escalonamento e mudança de cor de tweens. > |