To anybody who's curious, putting all the parts under a WorldModel makes the viewport have physics and much more - meaning that you can code characters and animate them in a ViewportFrame! It's really awesome stuff :)
@@citizenfoffie7605 As Far as I know viewport frame is quite limited at the moment, and might not nesacarrily be able to show chat bubbles. (I am not sure myself however, maybe there is a way but I'm doubtful there is tho).
Bro I know this sounds stupid but I've been trying to understand how to do this for like a year and you just solved my problem instantly. Thank you soooo much.
I wouldn't really say that ViewportFrames are particularly easy to use; The only way to make a part show up is to move it into one, then it feels like the part went to another dimension, making it harder than it should be to line it up with the viewport's camera. Another thing that makes ViewportFrames an intermediate difficulty instance is Team Create. For some reason, cameras are removed automatically if you use this feature (which Roblox really wants people to use). If you're making a game that uses it, you pretty much have to create the camera using a script and guess where it's going to point during play-testing. I've used one of these myself without issues since I kind of know how to, but these gotchas may throw some developers off. (I used a ViewportFrame for my loading screen, which shows the player's character posing on a platform while it loads the next place.)
You don't need to guess where the camera is pointing. You just need to set the CFrame of where you want to position and looking at. or a hacky way to do it is to create a "Reference" Part to where the camera should be placed and looking. You can visualize the camera look direction by just enabling the the reference part's "Show Orientation Indicator" on the Context Menu.
I am don't know much about coding but this is really awesome this gives more opportunities to thoses who are willing to make games on roblox. I am trying to figure it out but, I am excited for what the future holds.
they could be better but its better than nothing, before them i would use a module nexus the avenger had created for his roblox battle remake, it would display the 3d models as if it was on UI while it wasn't, viewport are a life saver for now
Hey! If anyone is wondering why their avatar isn't appearing with clothes, it is because the shirts/t-shirts/pants doesn't get copied as they won't get detected by "GetPartBoundsInBox" To fix it, you need to handle characters seperately from the other parts and create a character model containing all the local players character objects. Here is my script that I made (different from the tutorial but can easily be edited) --[[ Game objects ]] local gui = script.Parent local char = game.Players.LocalPlayer.Character -- Creates a model that will contain the childrens of the local character. local Character1 = Instance.new("Model") Character1.Name = "CharacterModel" Character1.Parent = script.Parent.ViewportFrame game:GetService("RunService").RenderStepped:Connect(function()
-- Creates the viewport camera local viewportCamera = Instance.new("Camera") viewportCamera.CFrame = gui.Adornee.CFrame viewportCamera.FieldOfView = 80 gui.ViewportFrame.CurrentCamera = viewportCamera Character1:ClearAllChildren() -- Clears everything in the character model -- Clone and update the character parts (contained in the character model) for _, v in pairs(char:GetChildren()) do if v:IsA("BasePart") or v:IsA("Accessory") or v:IsA("Humanoid") or v:IsA("Shirt") or v:IsA("Pants") or v:IsA("CharacterMesh") then local bodyPartClone = v:Clone() if bodyPartClone:IsA("Humanoid") then bodyPartClone.DisplayDistanceType = Enum.HumanoidDisplayDistanceType.None end bodyPartClone.Parent = Character1 end end -- Clear all other children except the character model for _, child in ipairs(script.Parent.ViewportFrame:GetChildren()) do if child ~= Character1 then child:Destroy() end end
-- Kinda janky but stores all the parts in the workspace (excluding the terrain) in a table local parts = {} for _, v in pairs(workspace:GetChildren()) do if v:IsA("BasePart") and v.Name ~= "Terrain" then print(v.Name) table.insert(parts, v) end end
-- Puts all the parts from the "parts" table to the viewport frame excluding the character parts (Bad code but still works I guess) for _, part in pairs(parts) do if not char:FindFirstChild(part.Name) then local clone = part:Clone() clone.Parent = script.Parent.ViewportFrame end end end)
Hey! If anyone is curious why their avatar appears naked in the ViewportFrame, it is because there isn't any Humanoid/Character model I made a little script that fixes this problem. Feel free to edit it to your liking! //////////////////////////////////////////// --[[ Game objects ]]-- local gui = script.Parent local char = game.Players.LocalPlayer.Character -- Creates a model that will contain the childrens of the local character. local Character1 = Instance.new("Model") Character1.Name = "CharacterModel" Character1.Parent = script.Parent.ViewportFrame game:GetService("RunService").RenderStepped:Connect(function()
-- Creates the viewport camera local viewportCamera = Instance.new("Camera") viewportCamera.CFrame = gui.Adornee.CFrame viewportCamera.FieldOfView = 80 gui.ViewportFrame.CurrentCamera = viewportCamera Character1:ClearAllChildren() -- Clears everything in the character model -- Clone and update the character parts (contained in the character model) for _, v in pairs(char:GetChildren()) do if v:IsA("BasePart") or v:IsA("Accessory") or v:IsA("Humanoid") or v:IsA("Shirt") or v:IsA("Pants") or v:IsA("CharacterMesh") then local bodyPartClone = v:Clone() if bodyPartClone:IsA("Humanoid") then bodyPartClone.DisplayDistanceType = Enum.HumanoidDisplayDistanceType.None end bodyPartClone.Parent = Character1 end end -- Clear all other children except the character model for _, child in ipairs(script.Parent.ViewportFrame:GetChildren()) do if child ~= Character1 then child:Destroy() end end
-- Kinda janky but stores all the parts in the workspace (excluding the terrain) in a table local parts = {} for _, v in pairs(workspace:GetChildren()) do if v:IsA("BasePart") and v.Name ~= "Terrain" then print(v.Name) table.insert(parts, v) end end
-- Puts all the parts from the "parts" table to the viewport frame excluding the character parts (Bad code but still works I guess) for _, part in pairs(parts) do if not char:FindFirstChild(part.Name) then local clone = part:Clone() clone.Parent = script.Parent.ViewportFrame end end end)
Hey, is there a way for this to work as a server script? So other people could see you displaying yourself on the screen with like a camera someplace else
@@Roufoxx i found out, I just made it loop duplicate so everyone sees the same thing regardless like a mirror, but I'm gonna use it like a remote holographic display
So it could be possible to have a camera system without having to move the character's cam to the position and simply displaying it on some kind of part (like a screen) ? (ofc with bad quality bu why not)
yeah, if you want a camera system to display on a part via surface GUI however, lots of viewport frames can start to cause performance issues, and it wouldn't make sense to use viewport frames to replace an on-screen camera system
Because character clothing is stored in separate instances like Shirt and Pants, so in order to copy everything in a character, including clothing, you'd have to copy the whole character model instead of individual parts.
Adornee is a property that refers to the object that the GUI is going to be adorned onto. Adorn means "to enhance the appearance of", so the object that is having its appearance enhanced is the adornee. The main utility of the property is the ability to place the SurfaceGui anywhere in your game without it needing to directly be a child of a certain part. This allows us to place SurfaceGuis in StarterGui. If there is no adornee property set, the SurfaceGui will adorn onto it's parent (if it's a part) by default.
do you know how to make something similar to how cart ride for corn dog did their 8 directional sprites for players? i've been trying to figure this out for a while to no avail..
it copies only the parts over and the clothing instances are not parts, so you would need to detect if its a character, and if so, just copy the whole character (and delete any scripts inside of the copied character)
*How would one make a disposable camera, or just a normal camera, with this?* How would I incorporate the movement and the fact that it’s being held? And, how would I make it capture more then just a small portion of the nearby area?
This would have been so helpful to me if I didn’t already know how ViewportFrames work. 😢 Also I think it’s really stupid that we can’t have Lighting Effects for ViewportFrames. But what isn’t stupid is this video. 👍
To anybody who's curious, putting all the parts under a WorldModel makes the viewport have physics and much more - meaning that you can code characters and animate them in a ViewportFrame! It's really awesome stuff :)
Is there a way to have it show chatbubbles?
@@citizenfoffie7605 As Far as I know viewport frame is quite limited at the moment, and might not nesacarrily be able to show chat bubbles. (I am not sure myself however, maybe there is a way but I'm doubtful there is tho).
@@citizenfoffie7605use the chat service i guess
Bro I know this sounds stupid but I've been trying to understand how to do this for like a year and you just solved my problem instantly. Thank you soooo much.
@@scratchyboiiii166 Glad that this inexperienced me was able to help you. 🤞
that is very cool! cant wait till ur a multi-million youtuber
you might die before that happens 🤨
@@crusherfire1 the cooler part is that it WILL happen
rip to sysyphus people who used viewportframes as highlights 💀
box handle adornment:
that does not highlight through object and it looks ugly@@alex342gwsturk8
Wdym?
wydm?
@alex342gwsturk8 this doesn't go through walls and different effect overall.
Genuinely one of the best tutorials I've seen on viewport frames. They were such a mystery to me, but this fully cleared it up. Thanks! :D
Woah, this is a really good video. I learned more than I was supposed to.
Thanks! I would pay for help on advancing this mechanic
Whoa! Thank you for your support!
thank you i have been waiting for this all the other youtubers have over complicated things
ew
I was literally wondering some minutes ago how to use viewport frames and then you suddenly upload a video about these.. howwwwwwww?!?!???
very cool coincidence
big data
@Haze_Nexus_realno they uploaded just as he was wondering
Omg code assist helped me while typing the script
I like it, lol did catch me off guard that it didn't clone the clothes on the player 💀
You should make a tutorial on inverse kinematics
I wouldn't really say that ViewportFrames are particularly easy to use; The only way to make a part show up is to move it into one, then it feels like the part went to another dimension, making it harder than it should be to line it up with the viewport's camera.
Another thing that makes ViewportFrames an intermediate difficulty instance is Team Create. For some reason, cameras are removed automatically if you use this feature (which Roblox really wants people to use). If you're making a game that uses it, you pretty much have to create the camera using a script and guess where it's going to point during play-testing.
I've used one of these myself without issues since I kind of know how to, but these gotchas may throw some developers off. (I used a ViewportFrame for my loading screen, which shows the player's character posing on a platform while it loads the next place.)
You don't need to guess where the camera is pointing. You just need to set the CFrame of where you want to position and looking at. or a hacky way to do it is to create a "Reference" Part to where the camera should be placed and looking. You can visualize the camera look direction by just enabling the the reference part's "Show Orientation Indicator" on the Context Menu.
Bro can't cook
6:31 i just tested and i had no clothes what do I do 💀
Because it puts every single part in the portframe without the full model and humanoid
tysm, this will be used for good gaems
Bro this is definitely the best video about viewportframes.
Compliments for your voice too.
(subscribed)
I am don't know much about coding but this is really awesome this gives more opportunities to thoses who are willing to make games on roblox. I am trying to figure it out but, I am excited for what the future holds.
love ur content dude u need more subs
they could be better but its better than nothing, before them i would use a module nexus the avenger had created for his roblox battle remake, it would display the 3d models as if it was on UI while it wasn't, viewport are a life saver for now
Hey! If anyone is wondering why their avatar isn't appearing with clothes, it is because the shirts/t-shirts/pants doesn't get copied as they won't get detected by "GetPartBoundsInBox"
To fix it, you need to handle characters seperately from the other parts and create a character model containing all the local players character objects.
Here is my script that I made (different from the tutorial but can easily be edited)
--[[ Game objects ]]
local gui = script.Parent
local char = game.Players.LocalPlayer.Character
-- Creates a model that will contain the childrens of the local character.
local Character1 = Instance.new("Model")
Character1.Name = "CharacterModel"
Character1.Parent = script.Parent.ViewportFrame
game:GetService("RunService").RenderStepped:Connect(function()
-- Creates the viewport camera
local viewportCamera = Instance.new("Camera")
viewportCamera.CFrame = gui.Adornee.CFrame
viewportCamera.FieldOfView = 80
gui.ViewportFrame.CurrentCamera = viewportCamera
Character1:ClearAllChildren() -- Clears everything in the character model
-- Clone and update the character parts (contained in the character model)
for _, v in pairs(char:GetChildren()) do
if v:IsA("BasePart") or v:IsA("Accessory") or v:IsA("Humanoid") or v:IsA("Shirt") or v:IsA("Pants") or v:IsA("CharacterMesh") then
local bodyPartClone = v:Clone()
if bodyPartClone:IsA("Humanoid") then
bodyPartClone.DisplayDistanceType = Enum.HumanoidDisplayDistanceType.None
end
bodyPartClone.Parent = Character1
end
end
-- Clear all other children except the character model
for _, child in ipairs(script.Parent.ViewportFrame:GetChildren()) do
if child ~= Character1 then
child:Destroy()
end
end
-- Kinda janky but stores all the parts in the workspace (excluding the terrain) in a table
local parts = {}
for _, v in pairs(workspace:GetChildren()) do
if v:IsA("BasePart") and v.Name ~= "Terrain" then
print(v.Name)
table.insert(parts, v)
end
end
-- Puts all the parts from the "parts" table to the viewport frame excluding the character parts (Bad code but still works I guess)
for _, part in pairs(parts) do
if not char:FindFirstChild(part.Name) then
local clone = part:Clone()
clone.Parent = script.Parent.ViewportFrame
end
end
end)
so that's how those snapblox systems work
thanks for tutorial keep up the good work
is there any way to add the clothes too? would "if part:IsA("Shirt") or ("Pants") then" work?
bro went from scp to development
Cool, now can you save that viewportframe picture to player’s inventory?
can u plz tell us how to include the clothing
idea: put this inside of a sniper scope and render whats in front in the frame to have the scope zoomed in but the rest of the screen not zoomed in
How do you get your script panel looking like that
Can you save the studio file for us? This will fit my horror game so well!
what u usin to make script editor look like that share w me pls
remember the time someone made a script that transformed your character into a literal viewport frame making you unkillable
How can i make it update everytime the player moves?
i think that it is possible to do realistic reflections
definitely possible
Perhaps make it an option so poopy computers don't die
Hey!
If anyone is curious why their avatar appears naked in the ViewportFrame, it is because there isn't any Humanoid/Character model
I made a little script that fixes this problem. Feel free to edit it to your liking!
////////////////////////////////////////////
--[[ Game objects ]]--
local gui = script.Parent
local char = game.Players.LocalPlayer.Character
-- Creates a model that will contain the childrens of the local character.
local Character1 = Instance.new("Model")
Character1.Name = "CharacterModel"
Character1.Parent = script.Parent.ViewportFrame
game:GetService("RunService").RenderStepped:Connect(function()
-- Creates the viewport camera
local viewportCamera = Instance.new("Camera")
viewportCamera.CFrame = gui.Adornee.CFrame
viewportCamera.FieldOfView = 80
gui.ViewportFrame.CurrentCamera = viewportCamera
Character1:ClearAllChildren() -- Clears everything in the character model
-- Clone and update the character parts (contained in the character model)
for _, v in pairs(char:GetChildren()) do
if v:IsA("BasePart") or v:IsA("Accessory") or v:IsA("Humanoid") or v:IsA("Shirt") or v:IsA("Pants") or v:IsA("CharacterMesh") then
local bodyPartClone = v:Clone()
if bodyPartClone:IsA("Humanoid") then
bodyPartClone.DisplayDistanceType = Enum.HumanoidDisplayDistanceType.None
end
bodyPartClone.Parent = Character1
end
end
-- Clear all other children except the character model
for _, child in ipairs(script.Parent.ViewportFrame:GetChildren()) do
if child ~= Character1 then
child:Destroy()
end
end
-- Kinda janky but stores all the parts in the workspace (excluding the terrain) in a table
local parts = {}
for _, v in pairs(workspace:GetChildren()) do
if v:IsA("BasePart") and v.Name ~= "Terrain" then
print(v.Name)
table.insert(parts, v)
end
end
-- Puts all the parts from the "parts" table to the viewport frame excluding the character parts (Bad code but still works I guess)
for _, part in pairs(parts) do
if not char:FindFirstChild(part.Name) then
local clone = part:Clone()
clone.Parent = script.Parent.ViewportFrame
end
end
end)
Hey, is there a way for this to work as a server script? So other people could see you displaying yourself on the screen with like a camera someplace else
@@lemurboi723 Hmm... I'm not home right now but there should be a way to do it
@@Roufoxx i found out, I just made it loop duplicate so everyone sees the same thing regardless like a mirror, but I'm gonna use it like a remote holographic display
@@lemurboi723 Ok cool!
By the way, you can actually parent a Sky object to a viewport frame, and it will render it as if there was a sky!
Awesome video! Maybe a tutorial on CharacterController instances soon?
maybe?!?! 🤔
you have the same colors as my roblox outfit lol
how do i clone cloths XD
So it could be possible to have a camera system without having to move the character's cam to the position and simply displaying it on some kind of part (like a screen) ? (ofc with bad quality bu why not)
yeah, if you want a camera system to display on a part via surface GUI
however, lots of viewport frames can start to cause performance issues, and it wouldn't make sense to use viewport frames to replace an on-screen camera system
YOOO YOUR 10 SUBS AWAY FROM 2K!!!
yooo!!!
Why does my character appear not to have clothing?
Because character clothing is stored in separate instances like Shirt and Pants, so in order to copy everything in a character, including clothing, you'd have to copy the whole character model instead of individual parts.
I have an idea of part 2 for this: portals
Ive seen advanced ppl use them to create Portals and Functional reflections
This would be neat to use for realtime wanted posters lol
I think that would be better with just images
it can actualy can be used in FPS weapon system to make scopes lens'es show the far away and not the original camera decreases the FOV
i Like this video how you maked Perfect Camera
what are youre Studio settings? I really like them
Check out this plugin for some script editor presets:
create.roblox.com/store/asset/3617323299
@@crusherfire1 thanks
can i do it with 2d not 3d?
Help. What is adornee?
Adornee is a property that refers to the object that the GUI is going to be adorned onto.
Adorn means "to enhance the appearance of", so the object that is having its appearance enhanced is the adornee.
The main utility of the property is the ability to place the SurfaceGui anywhere in your game without it needing to directly be a child of a certain part. This allows us to place SurfaceGuis in StarterGui.
If there is no adornee property set, the SurfaceGui will adorn onto it's parent (if it's a part) by default.
@@crusherfire1 Thanks!
Thx bro
np
butch
why is my avatar naked when i take a photo
because clothing is based on instances that are not decals, so you would have to copy the entire character models rather than the parts individually
@@crusherfire1 how can i do that
Scripts dont run idk why
do you know how to make something similar to how cart ride for corn dog did their 8 directional sprites for players? i've been trying to figure this out for a while to no avail..
mirror system is good
u can make their camera into mirror but it has issue, u can see ur own inside so yea is sad
Can't you technically make a mirror if you make it a while loop?
Uh script broken?
Textures are bugged in ViewportFrames.
You just need to copy the whole character model (which contains instances like Pants and Shirt)
@@crusherfire1 or just copy the pants and shirts along with the others parts
@@crusherfire1 Oh, right, shirt and pants aint a part.. whoops.. But textures are broken. I tested that.
@@potolog101 Won't work, it has to be a model with a humanoid.
@@Idiskjsjsjjsjsjsbhshshshsh keyword : OTHER parts (referring as in instances)
why did it made my character naked?
it copies only the parts over and the clothing instances are not parts, so you would need to detect if its a character, and if so, just copy the whole character (and delete any scripts inside of the copied character)
@crusherfire1 what does the script look like with the problem because it threw me an error.
*How would one make a disposable camera, or just a normal camera, with this?*
How would I incorporate the movement and the fact that it’s being held?
And, how would I make it capture more then just a small portion of the nearby area?
imagen making tik tok or youtube shorts in roblox
It's bigger on the inside! great for creating TARDIS'es
why does only my head show instead of my whole body
we making real working monitor with this one 🔥🔥
AYEEE HE USED MY VIDEO IDEA
it deleted all my clothes, i guess i need to fix it
how to make particles work in viewport model
I have a problem! xD It thinks my character is naked.
8 Months, Lol!
ok
The must shitty thing about this feature is that surface gui wont work on viewportframe
You can put the surfacegui in playergui and putting the adornee to the part you want to display it
This would have been so helpful to me if I didn’t already know how ViewportFrames work. 😢
Also I think it’s really stupid that we can’t have Lighting Effects for ViewportFrames.
But what isn’t stupid is this video. 👍
maybe in the future when Roblox improves their engine
@@crusherfire1 That’s assuming they ever will. (They won’t, but they will make it worse ☺️)
I got an error: Players.Aiden714T.PlayerGui.SurfaceGui.LocalScript:3: attempt to index nil with 'CFrame'
Where the fuck is the link
New title how to make a camera in game
do you have a discord?
I have a server, but it's not public