Hello guys! I’m Pew, and I’m a VFX artist on the Roblox platform. Today I want to cover an effect I made, inspired by the 20-20-20 dropkick from the KJ series and The Strongest Battlegrounds.
Without further ado, this is the showcase video:
First, how did I get the animations for these two rigs to sync?
I’m no animation expert, so I make my animations in Blender, but I know many people also use Moon Animator, so that’s what we’ll use for this.
To make the animation, you have to create 2 rigs and place them in the same CFrame. Name them something like “Player” and “Opponent”.
Create a Moon file with the two rigs and simply animate it like you normally would. Once you’re done, go to the file tab and press “Export Rigs”. You’ll find the exported individual keyframe sequences inside the respective rigs. You can then save those animations to Roblox like normal.
Step 2: Playing the animations
This is fairly simple, just put the exported animations’ IDs into Animation objects, then get your victim, that could’ve been selected by a hitbox, raycast, or something else, and position their HumanoidRootPart at the player. Make sure to do that on either the Victim’s client or the server. You’ll then have to play both animations at the same time. You could send a message to both the Opponent and the Player and play their respective animations on their clients, but I think it’s fine if you just let the server play their animations.
About the camera:
Last time, I made a cutscene by welding a part to the player and constantly positioning the camera at the part, but one of the comments mentioned how exporting rigs also exports the camera keyframes, so I chose to do that for this instead. I know many people just want a quick answer, so this is the script I have for playing the cutscene
local function Cutscene(Cam : Camera, Char : Model, origin : CFrame, CutsceneData : Folder)
local RS = game:GetService("RunService")
Cam.CameraType = Enum.CameraType.Scriptable
local HRP : Part = Char:FindFirstChild("HumanoidRootPart")
local CFrames = CutsceneData.Frames:GetChildren()
local FOV = CutsceneData.FOV:GetChildren()
table.sort(CFrames, function(a, b) return tonumber(a.Name) < tonumber(b.Name) end)
table.sort(FOV, function(a, b) return tonumber(a.Name) < tonumber(b.Name) end)
local frame = 1
local accumulator = 0
local FRAME_TIME = 1/60
local connection
connection = RS.RenderStepped:Connect(function(dt)
accumulator = accumulator + dt
while accumulator >= FRAME_TIME do
local data = CFrames[frame]
if not data then
Cam.CameraType = Enum.CameraType.Custom
Cam.FieldOfView = 70
connection:Disconnect()
return
end
local frameCFrame = data.Value
local offset = origin:ToObjectSpace(frameCFrame)
local CF = HRP.CFrame:ToWorldSpace(offset)
Cam.CFrame = CF
Cam.FieldOfView = FOV[frame].Value
frame = frame + 1
accumulator = accumulator - FRAME_TIME
end
end)
end
In short, you need to provide the player’s camera, the CFrame of the rig the cutscene was exported in, and the exported camera folder.
All that aside, I also want to quickly go over the effects.
Making this ability seriously made me realize just how useful beams are. It’s quite similar to the mesh flipbooks I mentioned in the previous post, but it’s way easier at the cost of creative flexibility. If you stack multiple beams together, you can create the illusion of a 3D mesh with a scrolling texture.
If you’re wondering how I made that funky distortion sphere on the hit, you can create one by making a glass object and then making its transparency higher than 1. You then need to add a disabled highlight to the object, and it should be visible despite technically being more than transparent.
I know a lot of people want to learn how to make those animated mesh rings you can see on the hit. I made a module for myself that lets me create part animations in Moon Animator and then use the exported Moon files to create complex tweens. This module is currently unstable, so I’m not going to share it just yet. However, there are alternatives.
I got a slight look at how TSB makes their rings. They create 2 clones of a mesh, then name them like “Start” and “End” and modify them accordingly. Then, when coding the ability, they clone the start mesh and tween its properties into the end mesh.
Regarding the rocks, I made my own OOP rock module for this and future abilities, and I’m planning to release it soon! It’s full of useful and unique properties, like flying rocks or custom meshes for debris to create effects like ice stomps with zero coding knowledge. I still need to optimize it and add a few more features, but hopefully I’ll be able to make a first release soon.
Lastly, I know a lot of people would like to use the assets from the effect, so you can find all of the beams and particles I used for this in this model, open source:
assets.rbxm (44.1 KB)
I hope you learned something new or found this post useful in any way. I’d love to hear feedback about this style of post and the ability I made. Also, if you have any questions or suggestions for me, I’d be glad to help.
Check out the other posts if you’d like!
Thanks for reading!