ViewportFrame
ViewportFrame is a GuiObject that can render 3D objects inside its bounds, offering a way to display 3D objects in a 2D space like a ScreenGui. This object has the following caveats:
- No shadows or post-processing effects are rendered.
- Enum.Material.Neon and Enum.Material.Glass materials render at the lowest quality.
- Nested GuiObjects aren't supported.
- By default, lighting inside a ViewportFrame acts as if Lighting.EnvironmentSpecularScale and Lighting.EnvironmentDiffuseScale are both set to 0, so properties that rely on these fields, such as SurfaceAppearance.MetalnessMap, may look different.
- This object can use a Sky child as a cubemap for reflections, in which case only the Sky object's six Skybox[…] properties are used. Assuming these properties are valid, lighting inside the ViewportFrame acts similarly to if Lighting.EnvironmentSpecularScale and Lighting.EnvironmentDiffuseScale are both set to 1. For details, see 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.
Camera that is used to render children objects.
Determines how a rendered image will be colorized.
Determines the transparency of the rendered image.
The color of the emitted light.
A Vector3 representing the direction of the light source.
Determines whether this UI element sinks input.
Determines the origin point of a GuiObject, relative to its absolute size.
Determines whether resizing occurs based on child content.
Determines the GuiObject background color.
Determines the transparency of the GuiObject background and border.
Determines the color of the GuiObject border.
Determines in what manner the GuiObject border is laid out relative to its dimensions.
Determines the pixel width of the GuiObject border.
Determines if descendant GuiObjects outside of the bounds of a parent GUI element should render.
Determines whether the player's mouse is being actively pressed on the GuiObject or not.
Determines whether the GuiButton can be interacted with or not, or if the GuiState of the GuiObject is changing or not.
Controls the sort order of the GuiObject when used with a UIGridStyleLayout.
Sets the GuiObject which will be selected when the gamepad selector is moved downward.
Sets the GuiObject which will be selected when the gamepad selector is moved to the left.
Sets the GuiObject which will be selected when the gamepad selector is moved to the right.
Sets the GuiObject which will be selected when the gamepad selector is moved upward.
Determines the pixel and scalar position of the GuiObject.
Determines the number of degrees by which the GuiObject is rotated.
Determine whether the GuiObject can be selected by a gamepad.
Overrides the default selection adornment used for gamepads.
The order of GuiObjects selected by the gamepad UI selection.
Determines the pixel and scalar size of the GuiObject.
Sets the Size axes that the GuiObject will be based on, relative to the size of its parent.
A mixed property of BackgroundTransparency and TextTransparency.
Determines whether the GuiObject and its descendants will be rendered.
Determines the order in which a GuiObject renders relative to others.
Describes the actual screen position of a GuiBase2d element, in pixels.
Describes the actual screen rotation of a GuiBase2d element, in degrees.
Describes the actual screen size of a GuiBase2d element, in pixels.
When set to true, localization will be applied to this GuiBase2d and its descendants.
A reference to a LocalizationTable to be used to apply automated localization to this GuiBase2d and its descendants.
Customizes gamepad selection behavior in the down direction.
Customizes gamepad selection behavior in the left direction.
Customizes gamepad selection behavior in the right direction.
Customizes gamepad selection behavior in the up direction.
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
- 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 descendant GuiObjects.
Properties
Ambient
This property determines the lighting hue applied to the area within the ViewportFrame. Defaults to Color3.fromRGB(200, 200, 200) (ghost grey).
CurrentCamera
Camera instance that is used to render children objects. Defaults to nil.
The Camera object does not replicate so the ViewportFrame.CurrentCamera won't replicate either. When you set this property, Camera.CFrame and Camera.FieldOfView will be saved and replicate with ViewportFrame internally so the client can render the frame without a Camera object.
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.
LightDirection
A Vector3 representing the direction of the light source from position Vector3.new(0, 0, 0). Defaults to Vector3.new(-1, -1, -1).