Previewing items in a ViewportFrame

Hey there!

I am currently making an inventory system and I would like to use ViewportFrames to preview the items. What would be the best way to preview all of the (for example) swords in the same position/rotation as each other? This is similar to what I am trying to achieve.

download

Is there a way to do this?

Thanks!

7 Likes

Couldn’t you use the same camera for all of the ViewportFrames with swords?

1 Like

I’m not sure, I’m awful when it comes to ViewportFrames.

I just tried it, and it appears multiple viewport frames can use the same camera.

1 Like

Oh, fantastic! I’ll try it out. How would I position the models so that they all look the same in the different ViewportFrames? Sorry about these really basic questions, I honestly am dreadful with ViewportFrames.

Create the Camera in LocalScript, and change the CFrame of the Camera in the script.
Don’t forget to set the CurrentCamera of the ViewportFrames to the Camera.
https://developer.roblox.com/api-reference/property/Camera/CFrame
https://developer.roblox.com/api-reference/property/ViewportFrame/CurrentCamera

1 Like

You could keep the camera’s Z-offset together with the item’s data and add it to the camera’s CFrame.

1 Like

What item data specifically? CFrame?

Depends on what you want to be viewed. If every item’s preview has to be focused on the item model’s center, then you just need to store a single number which represents the camera’s distance from the object (the Z-offset). But if you want to focus on other parts of it, like the blade or the grip, then you’ll have to store a Vector3 value describing X,Y and Z offset.

1 Like

Alright, thank you all. I got a method going.

What exactly is the method you’re using? Others may have the same question and want to know how to resolve it. It’s also nice to, you know, include your answer as the actual solution over leaving us with a blank.

1 Like

Yes, that’s true. I usually leave how I did it at the end but I was in a bit of a rush this time around.

1 - Preparation
First, I give the model a PrimaryPart. I then give the model an IntValue which I call the “ZPosPreview” as it stores the Z value that we will use later to move the model forwards or backwards. I rotate the model how I want during this part. I then place the model in some container.
image image

2 - GUI Set up
You obviously don’t need to follow my way of setting up the GUI but if you’re just here to test this out then this is how I set it up:

image

3 - Code
Then, we start coding it. This code is quite messy as I was just testing this out.

wait(.3)

local fram1 = script.Parent.Frame.ViewportFrame
local fram2 = script.Parent.Frame2.ViewportFrame -- 'fram2' is a second ViewportFrame as I was testing several ViewportFrames using one camera.
local camera = Instance.new("Camera") -- Creating the camera.
camera.Parent = script.Parent -- Giving the camera a humble abode.
fram1.CurrentCamera = camera -- Setting the CurrentCamera of the ViewportFrame(s) to our now cozy camera.
fram2.CurrentCamera = camera
camera.CFrame = CFrame.new(Vector3.new(0,0,0)) -- Setting the Camera's CFrame to 0,0,0.

------- This code will depend on how you store your model/part -------
local ItemStorage = game.ReplicatedStorage.ItemStorage -- This is where I store my models.
local Shields = ItemStorage:WaitForChild("Shields") -- This is specifically where I store my shield models.
local Weapons = ItemStorage:WaitForChild("Weapons") -- This is specifically where I store my weapon models.

local ItemArray1 = Shields:GetChildren() -- I get all of the Shields
local ItemArray2 = Weapons:GetChildren() -- ...and all of the Weapons

local item1 = ItemArray1[math.random(1, #ItemArray1)]:Clone() -- I pick a random shield.
local item2 = ItemArray2[math.random(1, #ItemArray2)]:Clone() -- I pick a random weapon.
-------------------------------------------------------------------------

local PCF1 = item1.PrimaryPart.CFrame - item1.PrimaryPart.CFrame.Position -- I preserve the rotation of the model in order to, well, preserve the rotation.
local PCF2 = item2.PrimaryPart.CFrame - item2.PrimaryPart.CFrame.Position

-- Here below, I set the PrimaryPartCFrame of the cloned Model to 0,0, and then the Z value is whatever the value of ZPosPreview is (the value that we made earlier). I then multiply it by the rotation that we got earlier to give it the original rotation.
item1:SetPrimaryPartCFrame(CFrame.new(Vector3.new(0,0,item1.ZPosPreview.Value)) * PCF1)
item2:SetPrimaryPartCFrame(CFrame.new(Vector3.new(0,0,item2.ZPosPreview.Value)) * PCF2)
item1.Parent = fram1 -- Then, I give the model a nice cozy place to stay.
item2.Parent = fram2

And then voilà! Perfectly preserved rotation.

image

28 Likes