Isometric view with viewportframes

Help and Feedback Scripting Support
#1

I want all of my viewportframes to show a model perfectly


(chicken is how it should look, the blue guy is a little bit off, and the bear is completely wrong)

I can’t seem to figure out how to automate this, manually setting the offsets work but it’s time consuming and it isn’t perfect as it’s prone to human error

local function createViewport(item)

    local slot = slotTemplate:Clone()
    
    local viewPortFrame = viewPortTemplate:Clone()
    local camera = Instance.new("Camera")
    viewPortFrame.CurrentCamera = camera
    viewPortFrame.Parent = slot

    local model = item.Character:Clone()
    model.Parent = viewPortFrame
    
    local centerCF, size = model:GetBoundingBox()

    camera.CFrame = CFrame.new((centerCF * CFrame.new(3, 3, -3)).Position, model.PrimaryPart.CFrame.Position)
    camera.Parent = viewPortFrame
    
    slot.Parent = scrollingFrame
end

if anyone has any tips, or knows any post about it I’d appreciate the help, I’ve looked myself but the only thing I found was isometric drawnings/art

2 Likes
#2

Seems like you’re on a great start! Is the bear model bigger than the rest? If so you’d need to use its size to make the camera go farther out to see the whole model. Otherwise your position/rotation logic makes sense.

1 Like
#3

Have you tried something like

camera.CFrame = CFrame.new((centerCF * CFrame.new(size.X, size.Y, -size.Z)).Position, model.PrimaryPart.CFrame.Position)

i.e. using the size of the bounding box to determine the position of the camera, like Hellasius suggested.

#4

You can create the illusion of an isometric perspective by moving the camera to a far distance from the subject, and decreasing the field of view to a low number, for example:

A camera with a distance of about 200 studs away from the character, and an FOV of 70.

RobloxStudioBeta_JI1kA5ISbS
RobloxStudioBeta_JI1kA5ISbS635×574 227 KB

The same camera with an FOV of 10.

RobloxStudioBeta_1Vyx9vpPUl
RobloxStudioBeta_1Vyx9vpPUl635×574 270 KB

Notice how a lot of studs in front of and behind the character look almost similar in size, I say almost because it’s not a perfect technique, but for most situations, it should work well. It would be a good idea to play around with what FOV works for your situation as I haven’t tried this technique with ViewportFrames just yet, but I believe it should work the same.

It would also be a good idea to set the Camera.Focus property to the correct CFrame of the subject (Just in case the distance between the camera and the subject creates some kind of lower detail).

6 Likes