Interface

Viewport

Introduction

The viewport window is an interactive interface used for selecting, positioning, and modifying various types of entities and components within the current scene.

There are two modes for navigating the scene: standard mode and flight mode. Standard mode rotates around a central viewpoint, while flight mode is suitable for browsing large scenes, allowing the scene camera to move forward, backward, left, right, up, and down in 3D space.

ModeOperationShortcut Keys
Standard ModeOrbitalt + left mouse button
Panalt + command + left mouse button, or press the mouse scroll wheel
Zoomalt + control + left mouse button, or scroll the mouse wheel, or swipe with two fingers on the trackpad
Flight ModeOrbit around cameraalt + right mouse button
Move forwardUp arrow key, or right mouse button + W
Move backwardDown arrow key, or right mouse button + S
Move leftLeft arrow key, or right mouse button + A
Move rightRight arrow key, or right mouse button + D
Move upRight mouse button + E
Move downRight mouse button + Q
Change flight speedRight mouse button + mouse scroll wheel

Toolbar

The toolbar is located at the top of the viewport window. Hovering over each item will display its shortcut keys or description.

image-20240131181207870
IconNameDescriptionShortcut Keys
DragDrag the view


Move
Rotate
Scale
Transform operations on selected entitiesW
E
R
Rectangle Edit ToolDrag and scale sprites, GUI elementsT

Pivot Point/AnchorToggle the anchor point of selected entities

Local/Global CoordinatesToggle the coordinate system of selected entities
FocusFocus the scene camera on the selected entityF
Scene CameraThe scene camera menu includes options for configuring the scene camera, mainly used to solve the issue of clipping planes being too far or too close, causing objects to be invisible. These adjustments do not affect entities with camera components in the scene.
SettingsThe settings menu includes options for adjusting auxiliary displays in the view, such as grids, auxiliary icons (graphics associated with specific components in the scene, including cameras, directional lights, point lights, spotlights), and auxiliary wireframes.

Scene Camera TypeToggle between perspective/orthographic camera

ModeEasily toggle between 2D/3D scene modes. In 2D mode, navigation components, orthographic/perspective switching are disabled, and orbiting in navigation is no longer effective.
Fullscreen/RestoreMaximize the viewport window, minimize hierarchy, assets, and inspector
PlayPlay all particles and animations in the scene
ScreenshotTake a snapshot of the current scene. Only user-created entities in the scene are displayed; auxiliary display tools like icons, grids, and gizmos are not included. After taking a screenshot, it will be used as the project thumbnail on the homepage.

Scene Camera Settings Interface

AttributeDescriptionDefault Value
Field of View (FOV)The field of view of the scene camera60
Dynamic ClippingIf enabled, the near and far clipping planes of the scene camera will be automatically calculated.on
Near PlaneManually adjusts the nearest point relative to the scene cameraHide when dynamic clipping is checked
Far PlaneManually adjusts the farthest point relative to the scene cameraHide when dynamic clipping is checked
SmoothIf enabled, the camera's movement, rotation and rotation will be smootheron
EaseIf enabled, the camera will ease at the beginning and end of the tour.on
AccelerationIf enabled, the camera's roaming speed will be increased at a fixed ratio during roaming. Otherwise, it will always move at the set speed.On
SpeedThe movement speed of the camera in flight mode10

Auxiliary Elements Settings Interface

AttributeDescription
GridWhether the grid in the view is displayed
3D IconsWhether auxiliary icons will increase or decrease as the camera moves closer or further away
Navigation GizmoDisplays the current direction of the scene camera and allows for quick modifications of the view (orthographic/perspective) via mouse operations. It appears in the lower-right corner of the screen when enabled.
Outline DisplayWhether to show an outline when an entity is selected. The selected entity's outline is orange, and the child node outlines are blue.
CameraWhether to show the frustum auxiliary function when the camera node is selected
LightWhether to display light auxiliary lines when selecting a light source node
Static ColliderDisplays the shape of static colliders
Dynamic ColliderDisplays the shape of dynamic colliders
Emission ShapeDisplays the shape of particle emitters

Preview

When an entity with a camera component is selected, a real-time preview of that camera is displayed in the lower-left corner of the viewport window. This helps users adjust the camera and scene position in real-time. The preview window can be dragged, locked, and switched to different device aspect ratios.

image-20250515105414407
AttributeDescription
1. DragFreely drag the preview window
2. PositionPosition the camera in the scene
3. Switch Aspect RatioSwitch to different device and aspect ratio windows
4. LockLock the camera preview window

In the hierarchy tree, objects containing camera components can directly synchronize the relevant properties of the scene camera in the view, facilitating position and view angle adjustments.

Was this page helpful?