.

Nota: para aprender mais conheça a METABLOX

Se você quer aprender Roblox Studio, programação no Roblox e criação de efeitos visuais para games, este tutorial é um ótimo ponto de partida. Aqui você vai entender, passo a passo, conceitos importantes para começar a criar VFX no Roblox, como detecção de entrada, comunicação entre cliente e servidor, debounce, detecção de dano e geração de efeitos visuais.

E se você quer ir além dos tutoriais e aprender criação de games, programação, Roblox Studio, inteligência artificial, design de mundos e outras habilidades criativas de forma mais completa, conheça a Metablox: https://www.metablox.com.br. A Metablox é um ecossistema educacional para crianças e adolescentes que transforma o interesse por Roblox e games em aprendizado, criatividade e projetos reais.

Agora vamos ao guia de iniciante sobre scripting de VFX no Roblox.

[details = “Mostrar”]
Fire Fist and Flame Commandment (streamable.com)
Light Bombardment (streamable.com)
Blackhole (gyazo.com)
Thunderclap and Flash (gyazo.com)
Light Speed Fists (gyazo.com)
[/details]

Este é um guia para iniciantes, e ao longo do tutorial você aprenderá o conhecimento básico de como scriptar efeitos visuais de forma eficaz, bem como uma bola de fogo básica que este tutorial seguirá. Observe que isso cobrirá:

1. Recebendo entradas
2. Comunicação Cliente-Servidor
3. Debounce
4. Detecção de dano
5. Geração de VFX (Servidor (Fácil, mas não recomendado), Replicação no Cliente (Não muito amigável para iniciantes, mas eu recomendo muito; as razões estão dentro do artigo))

Importante: Você deve ter alguma experiência em scripting anteriormente, ou algumas partes deste guia podem te confundir.

[details = Passo 1: Recebendo Entradas]
Existem duas maneiras principais de detectar entradas:

• UserInputService
• ContextActionService

Para este “Guia do Iniciante”, eu estarei usando o UserInputService, pois é mais fácil de entender.
Vamos primeiro obter o serviço em si.

Agora que temos o serviço, vamos criar uma função para nos ajudar a disparar servidores e o que mais precisarmos mais tarde.

Agora vamos usar o evento InputBegan para detectar entradas do jogador e conectá-lo à função DetectInput() que acabamos de criar.

Até agora, ele aceita toda entrada – e não queremos isso. O que queremos é detectar uma entrada específica, então vamos verificar a entrada que o InputBegan retornou.

O que fizemos aqui foi pegar a Input e GameProcessedEvent que foram retornados pelo evento InputBegan. GameProcessedEvent é verdadeiro se as entradas foram observadas pelo jogo (por exemplo, digitando em uma caixa de texto, digitando no chat), então retornaremos da função se isso for verdadeiro. Em seguida, estamos verificando se a Input é o keycode que queremos especificamente (neste caso, é Q), se corresponder, o script imprimirá (Você pode visitar aqui para mais informações sobre esses dois parâmetros).

Parabéns, você agora tem uma detecção de entrada funcionando! Vamos passar para o passo 2 
[/details]

[details = “Passo 2: Comunicação Cliente-Servidor”]
Agora vamos criar um evento remoto para nos ajudar a comunicar entre o cliente e o servidor.

Crie uma variável para o evento e vamos disparar o servidor a partir do script local.
O código deve agora parecer com isso:

Agora vamos criar uma função em um script do servidor e conectá-la a um evento OnServerEvent que escuta o FireServer() chamado de um script local.

Agora, se você testar, deve funcionar assim:

Parabéns! Você agora tem uma maneira de se comunicar entre o cliente e o servidor.
[/details]

[details = “Passo 3: Debounce”]
Existem geralmente duas maneiras principais de criar debounces:

• Usando um bool assim:
  

• Usando tempo assim:
  

As duas maneiras mencionadas acima são debounces do lado do cliente, que são fáceis de entender para iniciantes, mas são facilmente exploráveis, então, a menos que você esteja apenas praticando, eu recomendo fortemente que você leia o artigo que fiz sobre como criar debounce do lado do servidor abaixo.

[details = “Debounce do lado do servidor”]
Isso é incrivelmente útil quando se trata de entrar em contato com exploradores. Exploradores podem fazer qualquer coisa que um script local pode fazer, o que inclui disparar servidores e, com debounces do lado do cliente, eles têm a capacidade de spamar FireServer(), o que ninguém quer. Nesse caso, há uma solução simples; usar debounces do lado do servidor.

Devido à simplicidade do primeiro método, estarei usando o bool debounce neste guia. Primeiro, precisamos construir uma tabela no script do servidor que atua como um debounce (Como pode haver vários jogadores em um servidor, não podemos usar uma única variável – como fazemos em um script local).

Nosso próximo passo é obter o jogador do OnServerEvent, então adicione um parâmetro de jogador na função ServerReceived que criamos anteriormente.

Agora precisaremos de uma maneira de verificar se eles estão em cooldown ou não. Para isso, podemos adicionar uma instrução if para ver se o jogador está em cooldown, simplesmente adicionando seu nome na tabela. Se eles estiverem na tabela, eles estão atualmente em cooldown, caso contrário, não estão.

O código deve agora ser algo semelhante a isso:

Parabéns mais uma vez! Você agora tem um debounce extremamente confiável, que exploradores de forma alguma podem abusar!
[/details]

[/details]

[details = “Passo 4: Detecção de Dano”]
Estamos chegando mais perto do final! Neste passo, você aprenderá como lidar com o dano. Primeiro de tudo, vamos começar criando uma hitbox, que não apenas nos ajudará visualmente, mas também ajudará na detecção de alvos.

Eu criei uma hitbox simples para a bola de fogo:

[details = “Propriedades se você estiver interessado”]
Cor = [255, 0, 0]
CastShadow = false
Material = Neon
Transparência = .5
Tamanho = 2, 2, 2
Ancorado = false
PodeColidir = false
PodeTocar = true
[/details]

Você pode colocá-la onde o script do servidor pode acessar, e para meu gosto, coloquei logo abaixo do script do servidor com o nome “Hitbox”. Vamos começar criando uma variável para a hitbox.

Para este tutorial para iniciantes, usaremos o evento Touched para detectar alvos. Vamos para a detecção principal!
Onde o servidor é recebido, primeiro obteremos o personagem do jogador, em seguida, clonaremos essa hitbox e a lançaremos para frente (com base no personagem do jogador), e adicionaremos um evento Touched para que ele escute as partes que são tocadas. O código deve parecer assim:

E atualmente, ela aparece na frente do personagem do jogador!

Para lançá-la para frente, usaremos o TweenService com o único propósito de ser amigável para iniciantes. Para lançá-la para frente em relação à posição do personagem, usaremos o cframe do HumanoidRootPart e multiplicaremos por um vetor Z negativo. No entanto, o evento Touched não detectará movimentos feitos por cframes, então transformaremos os cframes em posição, simplesmente fazendo .Position; que deve parecer algo assim:

Lembre-se de deletar a hitbox uma vez que o tween esteja concluído! (No meu caso, 1 segundo)

Agora que está funcionando, é hora de conectar um evento Touched à hitbox para que ela possa ouvir as detecções.

Podemos ver que está funcionando bem, no entanto, vamos apenas adicionar um pequeno filtro para que nunca toque no personagem que lançou a bola de fogo, usando IsDescendantOf().

Depois disso, vamos fazer com que ele detecte apenas alvos humanoides viáveis e cause dano. Para isso, usaremos :FindFirstChild(). Primeiro, verificaremos se Hit.Parent (Hit é uma basepart e provavelmente é uma parte do corpo, então Hit.Parent refere-se ao personagem inimigo) contém um humanoide. Se houver, então causaremos dano, caso contrário, não faremos nada.

Ótimo, estamos mais uma vez mais perto do passo principal! No entanto, após testar algumas vezes, você pode notar que o dano real causado não equivale ao que você realmente queria causar!

Neste caso, está sendo causado 25 de dano (adicionamos 5 no parâmetro de dano!). Você pode ou não estar se perguntando – por que isso está acontecendo? É simplesmente porque foi detectado várias vezes. Esta é uma correção incrivelmente fácil; pelo uso de valores e debounces. Existem várias maneiras de abordar isso, mas estarei usando valores para que os iniciantes possam entender.

Precisaremos verificar se um valor existe no humanoide ou não, para verificar isso, usaremos FindFirstChild e verificaremos o nome do debounce (no meu caso, fiz com que usasse o nome do jogador e concatenasse com uma “chave especial”; FireballDebounce) – o código deve ser semelhante a isso:

Para que funcione de fato, vamos criar um valor sob o take damage para agir como nosso debounce, que, claro, precisaremos concatenar o nome do jogador com FireballDebounce. Isso é para evitar que jogadores diferentes sejam debounced por apenas 1 debounce.

Nota Importante: Se você estiver fazendo ataques diferentes, desejará mudar o nome para nomes diferentes ou movimentos diferentes detectarão debounces diferentes.

E finalmente, vamos deletá-lo após 1-4 segundos para que o debounce realmente seja redefinido. Eu prefiro usar o serviço Debris, mas você pode deletá-lo como quiser.

Se você chegou até aqui e tudo está funcionando bem, Parabéns mais uma vez!

O próximo passo é o final e também o mais importante! Certifique-se de entendê-lo completamente. Se você não entender, tudo bem! – sinta-se à vontade para me perguntar nos comentários 
[/details]

[details = “Passo 5: Gerando VFX (Muito Importante!)”]

Como iniciantes, você (provavelmente) gerou VFX do lado do servidor (Isso significa gerar o vfx em um script do servidor, o que aumenta a carga do servidor e, portanto, aumenta o ping tremendamente)! Como alguém que tem feito principalmente efeitos visuais no Roblox, não é exagero dizer que efeitos do lado do servidor são um pecado ()! No entanto, se a replicação no cliente for muito difícil para você, é compreensível. Eu mesmo fiz VFX do lado do servidor por mais de um mês até aprender essa técnica de replicação no cliente.

[details = “Geração de VFX do lado do servidor para iniciantes”]
Eu criei esta bola de fogo artisticamente bonita para servir como nosso efeito principal.

Você pode colocá-la em qualquer lugar que o script do servidor possa acessar, então estou colocando-a diretamente abaixo do script. Vamos dar uma variável a ela:

Agora vamos cloná-la bem onde clonamos a hitbox para que fiquem alinhadas.

Vamos também fazer com que ela faça o que a hitbox faz – claro, exceto o evento Touched.

Scripting Practice Place – Roblox Studio (gyazo.com)

Ótimo! Agora está em sincronia com a hitbox. Para apimentar algumas coisas, você poderia:

• Fazer com que ela apareça em outro lugar (por exemplo, bolas de fogo caindo do céu, bolas de fogo saindo dos seus olhos)
• Fazer com que ela exploda quando tocada
• Adicionar partículas ou trilhas à bola de fogo

Parabéns! Você terminou a parte 1 do guia para iniciantes sobre scripting de efeitos visuais por SushiInASuit/SushiScripter.
[/details]

[details = “Geração de VFX de Replicação no Cliente (difícil de entender para iniciantes, mas altamente recomendada)”]
Primeiro, você precisará entender como a ideia de replicação no cliente funciona.

Um jogador disparará o remoto para o servidor:

O servidor recebe esse sinal, e as posições de onde gerar o vfx são definidas aqui, que são então disparadas para todos os clientes com essa informação:

Como a posição enviada é a mesma para todos os clientes, o vfx será posicionado no mesmo lugar para todos (reduzindo a carga do servidor, o que resulta em carregamento mais rápido do vfx e não sobrecarrega mais o servidor).

Como precisaremos que eles estejam em sincronia, os cframes devem ser os mesmos, então em vez disso:

precisaremos fazer isso:

Também precisaremos substituir o objetivo do tween, que será alterado de isso:

para isso:

Agora que substituímos isso, é hora da estrela do show – FireAllClients().
Esta é a função principal para replicação no cliente, então vamos começar!

Vamos chamar essa função logo abaixo da criação da hitbox, para que ela fique sincronizada o máximo possível. Também adicionaremos CF e Pos para que o cliente saiba onde gerar e onde tweenar.

Agora que isso está feito, vamos criar uma função para nos ajudar a gerar os efeitos.

Adicione os parâmetros CF e Pos que foram enviados pelo servidor – estes são incrivelmente importantes.

Eu fiz esta bola de fogo artisticamente bonita para usar:

Coloque-a onde o cliente pode acessá-la (eu gosto de colocá-la no ReplicatedStorage) e dê uma variável a ela.

Agora vamos cloná-la e definir o cframe para o cframe enviado pelo servidor para que ela se alinhe com a hitbox (Não se esqueça de deletá-la depois!).

E vamos usar a posição enviada pelo servidor para tweenar a bola de fogo em sincronia com a hitbox.

E…tambores
Você deve agora ser capaz de alcançar algo assim:

Scripting Practice Place (gyazo.com)

Se você chegou até aqui, então parabéns! Você pode ou não ter scriptado seu primeiro vfx de replicação no cliente, que desempenhará um papel enorme mais adiante, especialmente se você estiver focado em criar efeitos visuais. Você terminou a parte 1 do guia para iniciantes sobre scripting de efeitos visuais por SushiScripter/SushiInASuit.
[/details]

[/details]

Importante: Esta é a parte 1 do guia para iniciantes, ela cobre apenas a estrutura básica do scripting de vfx. A parte 2 apresentará uma estrutura mais complicada de efeitos visuais, abrangendo raycasting, como a trigonometria pode ser usada, funções matemáticas úteis e muito mais.

Sinta-se à vontade para me fazer qualquer pergunta nos comentários!