How can you recreate the Phighting MVP UI?

Help and Feedback Art Design Support
#1

I LOVE how Phighting uses the MVP screens and I’ve wanted to try something similar. Only problem is that I am new to making UI and I got no idea how to do any of this. I’ve found some things such as 3D UI which can help a bit. The main part I want help understanding is how they manage to get the character model animated on the MVP screen.

That is the main thing I’d want help understanding, but feel free to explain any other cool details about the UI so I can understand them more in depth.

2 Likes
#2

Probably a lot of ImageLabels overlayed correctly over each other and some UI animations (you need to script those)

#3

It is impossible to run an animation inside a ViewportFrame unless you run it in a separate rig in the workspace, and every render stepped replicate the position to the rig inside the viewport frame.

local WorkspaceRig = workspace.Rig
local ViewportRig = ViewportFrame.Rig
RunService.RenderStepped:Connect(function()
    for i, v in WorkspaceRig:GetDescendants() do
        if v:IsA("BasePart") then
            ViewportRig:FindFirstChild(v.Name, true).CFrame = v.CFrame
        end
    end
end)
#4

You do not need a ViewportFrame to do this, only ImageLabels.

#5

Up to your preference. I have noticed the character in the video is slightly animated to so I suggested using viewport frames, and max size for images are 1024x1024 so the character would be pixelated (unless you put 4 cropped images together)

1 Like
#6

Correct , maybe the text used viewport frame to be 3D and scalable like an SVG

#7

I’ve slowed the video down, and the player appears to move very smoothly, so I highly doubt it uses images. They most likely just used a ViewportFrame with a WorldModel inside it, as rigs inside WorldModels inside ViewportFrames are the only way to play animations inside a ViewportFrame. The fact that it’s all monochrome is probably intended to conceal the lack of proper lighting. Then there’s just a bunch of tweening with text, images, and colors on the screen.

#8

It is possible to do that with the use of WorldModels