ViewportFrame
A ViewportFrame is a type of GUI that can render 3D objects inside its bounds. This is a great way to display 3D objects/models in a 2D GUI space like a ScreenGui. At the moment, no shadow or post effects are available. Neon and Glass materials will be rendered on lowest quality. Nested GUIs aren't supported, which means GuiObjects don't work as expected under ViewportFrame.
For a step-by-step walkthrough, see the Frames.
Code Samples
local Players = game:GetService("Players")
local player = Players.LocalPlayer
local playerGui = player:WaitForChild("PlayerGui")
local screenGui = Instance.new("ScreenGui")
screenGui.Parent = playerGui
local viewportFrame = Instance.new("ViewportFrame")
viewportFrame.Size = UDim2.new(0.3, 0, 0.4, 0)
viewportFrame.Position = UDim2.new(0, 15, 0, 15)
viewportFrame.BackgroundColor3 = Color3.new(0, 0, 0)
viewportFrame.BorderColor3 = Color3.new(0.6, 0.5, 0.4)
viewportFrame.BorderSizePixel = 2
viewportFrame.BackgroundTransparency = 0.25
viewportFrame.Parent = screenGui
local part = Instance.new("Part")
part.Material = Enum.Material.Concrete
part.Color = Color3.new(0.25, 0.75, 1)
part.Position = Vector3.new(0, 0, 0)
part.Parent = viewportFrame
local viewportCamera = Instance.new("Camera")
viewportFrame.CurrentCamera = viewportCamera
viewportCamera.Parent = viewportFrame
viewportCamera.CFrame = CFrame.new(Vector3.new(0, 2, 12), part.Position)
local Players = game:GetService("Players")
local player = Players.LocalPlayer
local playerGui = player:WaitForChild("PlayerGui")
local screenGui = Instance.new("ScreenGui")
screenGui.Parent = playerGui
local TweenService = game:GetService("TweenService")
local viewportFrame = Instance.new("ViewportFrame")
viewportFrame.Size = UDim2.new(0.3, 0, 0.4, 0)
viewportFrame.Position = UDim2.new(0, 15, 0, 15)
viewportFrame.BackgroundColor3 = Color3.new(0, 0, 0)
viewportFrame.BorderColor3 = Color3.new(0.6, 0.5, 0.4)
viewportFrame.BorderSizePixel = 2
viewportFrame.BackgroundTransparency = 0.25
viewportFrame.Parent = screenGui
local part = Instance.new("Part")
part.Material = Enum.Material.Concrete
part.Color = Color3.new(0.25, 0.75, 1)
part.Position = Vector3.new(0, 0, 0)
part.Parent = viewportFrame
local viewportCamera = Instance.new("Camera")
viewportFrame.CurrentCamera = viewportCamera
viewportCamera.Parent = viewportFrame
viewportCamera.CFrame = CFrame.new(Vector3.new(0, 2, 12), part.Position)
task.wait(2)
local cameraGoal = {
CFrame = CFrame.new(Vector3.new(0, 6, 4), part.Position),
}
local tweenInfo = TweenInfo.new(2, Enum.EasingStyle.Quad, Enum.EasingDirection.Out)
local tween = TweenService:Create(viewportCamera, tweenInfo, cameraGoal)
tween:Play()
Summary
Properties
The lighting hue applied to the area within the ViewportFrame.
- not replicatedread parallel
Camera that is used to render children objects.
- read parallel
Determines how a rendered image will be colorized.
- read parallel
Determines the transparency of the rendered image.
- read parallel
The color of the emitted light.
- read parallel
A Vector3 representing the direction of the light source from the position 0, 0, 0.
Determines whether a UI element sinks input.
- read parallel
Determines the origin point of a GuiObject, relative to its absolute size.
- read parallel
Determines whether resizing occurs based on child content.
- read parallel
Determines aGUI's background color.
- read parallel
Determines the transparency of the GUI's background and border.
- read parallel
Determines the color of a GUI's border.
- read parallel
Determines in what manner the GuiObject border is laid out relative to its dimensions.
- read parallel
Determines the pixel width of a GuiObject border.
- read parallel
Determines if descendant GUIs outside of the bounds of a parent GUI element should render.
- read onlynot replicatedread parallel
- read parallel
- read parallel
Controls the sort order of a GUI when used with a UIGridStyleLayout.
- read parallel
Sets the GuiObject which will be selected when the Gamepad selector is moved in this direction.
- read parallel
Sets the GuiObject which will be selected when the Gamepad selector is moved in this direction.
- read parallel
Sets the GUI which will be selected when the Enum.Gamepad selector is moved in this direction.
- read parallel
Sets the GuiObject which will be selected when the Gamepad selector is moved in this direction.
Determines the pixel and scalar position of a GUI.
Determines the number of degrees by which a UI element is rotated.
- read parallel
Determine whether the GUI can be selected by a gamepad.
- read parallel
Overrides the default selection adornment used for gamepads.
- read parallel
The order of GuiObjects selected by the gamepad UI selection.
Determine the pixel and scalar size of a GUI.
- read parallel
Selects the GuiObject.Size axes that a GUI will be based relative to the size of its parent.
- hiddennot replicatedread paralleldeprecated
A mixed property of BackgroundTransparency and TextTransparency.
Determines whether a GuiObject.GUI and its descendants will be rendered.
Determines the order in which a GUI renders relative to other GUIs.
- read onlynot replicated
Describes the actual screen position of a UI element, in pixels.
- read onlynot replicated
Describes the actual screen rotation of a UI element, in degrees.
- read onlynot replicated
Describes the actual screen size of a UI element, in pixels.
- read parallel
When set to true, localization will be applied to this GuiBase2d and its descendants based on the GuiBase2d.RootLocalizationTable specified for this GuiBase2d.
- read parallel
A reference to a LocalizationTable to be used to apply automated localization to this GuiBase2d and its descendants.
- read parallel
Customizes gamepad selection behavior in the down direction.
- read parallel
Customizes gamepad selection behavior in the left direction.
- read parallel
Customizes gamepad selection behavior in the right direction.
- read parallel
Customizes gamepad selection behavior in the up direction.
- read parallel
Allows customization of gamepad selection movement.
Methods
Methods inherited from GuiObject- TweenPosition(endPosition: UDim2,easingDirection: Enum.EasingDirection,easingStyle: Enum.EasingStyle,time: number,override: bool,callback: function):bool
Smoothly moves a GUI to a new UDim2.
- TweenSize(endSize: UDim2,easingDirection: Enum.EasingDirection,easingStyle: Enum.EasingStyle,time: number,override: bool,callback: function):bool
Smoothly resizes a GUI to a new UDim2.
- TweenSizeAndPosition(endSize: UDim2,endPosition: UDim2,easingDirection: Enum.EasingDirection,easingStyle: Enum.EasingStyle,time: number,override: bool,callback: function):bool
Smoothly moves a GUI to a new size and position.
Events
Events inherited from GuiObjectFired when a user begins interacting via a Human-Computer Interface device (Mouse button down, touch begin, keyboard button down, etc).
Fired when a user changes how they're interacting via a Human-Computer Interface device (Mouse button down, touch begin, keyboard button down, etc).
Fired when a user stops interacting via a Human-Computer Interface device (Mouse button down, touch begin, keyboard button down, etc).
Fires when a user moves their mouse into a GUI element.
Fires when a user moves their mouse out of a GUI element.
Fires whenever a user moves their mouse while it is inside a GUI element.
Fires when a user scrolls their mouse wheel back when the mouse is over a GUI element.
Fires when a user scrolls their mouse wheel forward when the mouse is over a GUI element.
Fired when the GuiObject is being focused on with the Gamepad selector.
Fired when the Gamepad selector stops focusing on the GuiObject.
Fires when the player starts, continues and stops long-pressing the UI element.
- TouchPan(touchPositions: Array,totalTranslation: Vector2,velocity: Vector2,state: Enum.UserInputState):RBXScriptSignal
Fires when the player moves their finger on the UI element.
- TouchPinch(touchPositions: Array,scale: number,velocity: number,state: Enum.UserInputState):RBXScriptSignal
Fires when the player performs a pinch or pull gesture using two fingers on the UI element.
- TouchRotate(touchPositions: Array,rotation: number,velocity: number,state: Enum.UserInputState):RBXScriptSignal
Fires when the player performs a rotation gesture using two fingers on the UI element.
Fires when the player performs a swipe gesture on the UI element.
Fires when the player performs a tap gesture on the UI element.
- SelectionChanged(amISelected: bool,previousSelection: GuiObject,newSelection: GuiObject):RBXScriptSignal
Fires when the gamepad selection moves to, leaves, or changes within the connected GuiBase2d or any descendent GuiObjects.
Properties
Ambient
This property determines the lighting hue applied to the area within the ViewportFrame. This property defaults to 200, 200, 200 (ghost grey).
CurrentCamera
This property is a Camera instance that is used to render children objects. Defaults to nil.
The Camera object will not replicate so the ViewportFrame.CurrentCamera won't replicate either. If you save a Camera in the server, it will not appear in the client. When you set this property, Camera.CFrame and Camera.FieldOfView will be saved and replicate with ViewportFrame internally so the client can render ViewportFrame without a Camera object. If you want to change the client's Camera, you have to create a new Camera using a LocalScript at runtime.
Code Samples
local Players = game:GetService("Players")
local player = Players.LocalPlayer
local playerGui = player:WaitForChild("PlayerGui")
local screenGui = Instance.new("ScreenGui")
screenGui.Parent = playerGui
local viewportFrame = Instance.new("ViewportFrame")
viewportFrame.Size = UDim2.new(0.3, 0, 0.4, 0)
viewportFrame.Position = UDim2.new(0, 15, 0, 15)
viewportFrame.BackgroundColor3 = Color3.new(0, 0, 0)
viewportFrame.BorderColor3 = Color3.new(0.6, 0.5, 0.4)
viewportFrame.BorderSizePixel = 2
viewportFrame.BackgroundTransparency = 0.25
viewportFrame.Parent = screenGui
local part = Instance.new("Part")
part.Material = Enum.Material.Concrete
part.Color = Color3.new(0.25, 0.75, 1)
part.Position = Vector3.new(0, 0, 0)
part.Parent = viewportFrame
local viewportCamera = Instance.new("Camera")
viewportFrame.CurrentCamera = viewportCamera
viewportCamera.Parent = viewportFrame
viewportCamera.CFrame = CFrame.new(Vector3.new(0, 2, 12), part.Position)
local Players = game:GetService("Players")
local player = Players.LocalPlayer
local playerGui = player:WaitForChild("PlayerGui")
local screenGui = Instance.new("ScreenGui")
screenGui.Parent = playerGui
local TweenService = game:GetService("TweenService")
local viewportFrame = Instance.new("ViewportFrame")
viewportFrame.Size = UDim2.new(0.3, 0, 0.4, 0)
viewportFrame.Position = UDim2.new(0, 15, 0, 15)
viewportFrame.BackgroundColor3 = Color3.new(0, 0, 0)
viewportFrame.BorderColor3 = Color3.new(0.6, 0.5, 0.4)
viewportFrame.BorderSizePixel = 2
viewportFrame.BackgroundTransparency = 0.25
viewportFrame.Parent = screenGui
local part = Instance.new("Part")
part.Material = Enum.Material.Concrete
part.Color = Color3.new(0.25, 0.75, 1)
part.Position = Vector3.new(0, 0, 0)
part.Parent = viewportFrame
local viewportCamera = Instance.new("Camera")
viewportFrame.CurrentCamera = viewportCamera
viewportCamera.Parent = viewportFrame
viewportCamera.CFrame = CFrame.new(Vector3.new(0, 2, 12), part.Position)
task.wait(2)
local cameraGoal = {
CFrame = CFrame.new(Vector3.new(0, 6, 4), part.Position),
}
local tweenInfo = TweenInfo.new(2, Enum.EasingStyle.Quad, Enum.EasingDirection.Out)
local tween = TweenService:Create(viewportCamera, tweenInfo, cameraGoal)
tween:Play()
ImageColor3
This property determines how a rendered image will be colorized, allowing you to change the image color without directly modifying the rendered object. The default colorization value is Color3.new(1, 1, 1) (white) at which no color modification occurs.
See also ImageTransparency which determines the transparency of the rendered image.
ImageTransparency
This property determines the transparency of the rendered image, allowing you to change the image transparency without directly modifying the rendered object. A value of 0 (default) is completely opaque and a value of 1 is completely transparent (invisible).
See also ImageColor3 which determines how a rendered image will be colorized.
LightColor
The color of the emitted light. This property defaults to 140, 140, 140 (silver flip/flop).