|
1 | 1 | --- |
2 | 2 | title: The Defold scene editor |
3 | | -brief: Defold contains a number of editors, but the Scene Editor is the one used the most. This manual explains how to use it. |
| 3 | +brief: The Scene Editor is where you edit collections, game objects, GUIs, particle effects and other visual assets. This manual explains selection, tools, and how to navigate the scene view in 2D and 3D—including free camera mode and camera settings. |
4 | 4 | --- |
5 | 5 |
|
6 | | -# Defold scene editor |
| 6 | +# The Defold scene editor |
7 | 7 |
|
8 | | -This manual has been replaced by the [editor manual](/manuals/editor). |
| 8 | +The **Scene Editor** is the visual editor used to build and edit scenes such as collections, game objects, and other visual assets. |
| 9 | + |
| 10 | +By default, many visual scenes open with a **2D orthographic** view. For 3D work you can switch to a 3D-oriented layout, enable a 3D grid plane, and use a **perspective** camera. |
| 11 | + |
| 12 | +## Opening the Scene Editor |
| 13 | + |
| 14 | +Open the Scene Editor by double-clicking a visual resource in the *Assets* pane, such as: |
| 15 | + |
| 16 | +- **Collections** (`.collection`) |
| 17 | +- **Game objects** (`.go`) |
| 18 | +- **Atlas** (`.atlas`) |
| 19 | +- **Models** (`.model`, `.glb`) |
| 20 | +- **GUI scenes** (`.gui`) |
| 21 | +- **Tilemaps** (`.tilemap`) |
| 22 | +- **Tile sources** (`.tilesource`) |
| 23 | +- **Sprites** (`.sprite`) |
| 24 | +- **Particle effects** (`.particlefx`) |
| 25 | +- And others |
| 26 | + |
| 27 | +## Scene view navigation (camera controls) |
| 28 | + |
| 29 | +The Scene Editor camera can be controlled with mouse and keyboard. The available controls depend on whether you are using the standard camera navigation or **Free Camera Mode**. |
| 30 | + |
| 31 | +### Standard navigation (all visual editors) |
| 32 | + |
| 33 | +These controls are available in visual editors: |
| 34 | + |
| 35 | +- **Pan** |
| 36 | + - <kbd>Alt</kbd>/<kbd>⌥ Option</kbd> + <kbd>Left Mouse Button</kbd>, or <kbd>Right Mouse Button</kbd> |
| 37 | +- **Zoom** |
| 38 | + - <kbd>Mouse Wheel</kbd>, or |
| 39 | + - <kbd>Alt</kbd>/<kbd>⌥ Option</kbd> + <kbd>Right Mouse Button</kbd> |
| 40 | +- **Rotate (3D) around selection** |
| 41 | + - <kbd>Ctrl</kbd>/<kbd>^ Control</kbd> + <kbd>Left Mouse Button</kbd> |
| 42 | + |
| 43 | +You may also use **Frame Selection** (<kbd>F</kbd>) to focus the camera on the current selection. |
| 44 | + |
| 45 | +## 2D and 3D scene orientation |
| 46 | + |
| 47 | +The scene view can be used in both 2D and 3D workflows: |
| 48 | + |
| 49 | +- In **2D**, you typically work in an orthographic view with a 2D-oriented grid. |
| 50 | +- In **3D**, you typically: |
| 51 | + - Realign the view to a 3D orientation, |
| 52 | + - Use a **perspective** camera, |
| 53 | + - Choose an appropriate grid plane (often **Y** for “ground”). |
| 54 | + |
| 55 | +You can access these functions via the toolbar and the **View** menu. |
| 56 | + |
| 57 | + |
| 58 | + |
| 59 | +## Toolbar overview |
| 60 | + |
| 61 | +In the top-right of the scene view there is a toolbar with commonly used tools and view options (left to right): |
| 62 | + |
| 63 | +- **Move tool** (<kbd>W</kbd>) |
| 64 | +- **Rotate tool** (<kbd>E</kbd>) |
| 65 | +- **Scale tool** (<kbd>R</kbd>) |
| 66 | +- **Grid Settings** (`▦`) |
| 67 | +- **Align/Realign Camera 2D/3D** (`2D`) — toggles between 2D and 3D orientation (shortcut <kbd>.</kbd>) |
| 68 | +- **Camera Perspective/Orthographic** |
| 69 | +- **Visibility Filters** (`👁`) |
| 70 | + |
| 71 | + |
| 72 | + |
| 73 | +## Selecting and manipulating objects |
| 74 | + |
| 75 | +### Manipulating objects |
| 76 | + |
| 77 | +<kbd>Left Mouse Click</kbd> on objects in the main window to select them. The rectangle (or cuboid) surrounding the object in the editor view will highlight with cyan to indicate what item is selected. The selected object is also highlighted in the `Outline` view as in the picture above. |
| 78 | + |
| 79 | + You can also select objects by: |
| 80 | + |
| 81 | + - <kbd>Left Mouse Click</kbd> and <kbd>Drag</kbd> to select all objects inside the selection region. |
| 82 | + - <kbd>Left Mouse Click</kbd> objects in the `Outline`, and while holding <kbd>⇧ Shift</kbd> you can expand selection or while holding <kbd>Ctrl</kbd>/<kbd>⌘ Cmd</kbd> you can (un)select clicked. |
| 83 | + |
| 84 | +#### Move tool |
| 85 | + |
| 86 | +{.left} |
| 87 | + |
| 88 | +To move objects, use the *Move Tool*. You can find it in the Toolbar in the top right corner of the scene editor, or by pressing the <kbd>W</kbd> key. |
| 89 | + |
| 90 | +{.inline}{.inline} |
| 91 | + |
| 92 | +The gizmo changes and shows a set of manipulators - squares and arrows (selected manipulator will turn to orange color) that you can <kbd>Drag</kbd> to move: |
| 93 | + |
| 94 | +- one cyan center square handle to move the object only in the screen space, |
| 95 | +- 3 red, green and blue arrows along each axis to move the object only along the given X, Y or Z axis. |
| 96 | +- 3 red, green and blue square handles to move the object only on the given plane, e.g. X-Y (blue) and (visible if rotating the camera in 3D) X-Z (green) and Y-Z (red) planes. |
| 97 | + |
| 98 | +#### Rotate tool |
| 99 | + |
| 100 | +{.left} |
| 101 | + |
| 102 | +To rotate objects, use the *Rotate Tool* by selecting it in the Toolbar, or by pressing the <kbd>E</kbd> key. |
| 103 | + |
| 104 | +{.inline}{.inline} |
| 105 | + |
| 106 | +This tool consists of four circular manipulators (selected manipulator will turn to orange color) that you can <kbd>Drag</kbd> to rotate: |
| 107 | + |
| 108 | +- one cyan (outer, biggest circle) manipulator that rotates the object in the screen space |
| 109 | +- 3 smaller red, green and blue circle manipulators allowing rotation around each of the X, Y and Z axes separately. For 2D orthographic view, the two of them are perpendicular to the X- and Y-axis, so the circles only appear as two lines crossing the object. |
| 110 | + |
| 111 | +#### Scale tool |
| 112 | + |
| 113 | +{.left} |
| 114 | + |
| 115 | +To scale objects, use the *Scale Tool* by selecting it in the toolbar, or by pressing the <kbd>R</kbd> key. |
| 116 | + |
| 117 | +{.inline}{.inline} |
| 118 | + |
| 119 | +This tool consists of a set of square/cube manipulators (selected manipulator will turn to orange color) that you can <kbd>Drag</kbd> to scale: |
| 120 | + |
| 121 | +- one cyan cube in the center scales the object uniformly in all axes (including Z). |
| 122 | +- 3 red, blue and green cube manipulators scale the object along each of the X, Y and Z axes separately. |
| 123 | +- 3 red, green and blue square manipulators (outlined with a transparent fill) scale the object on the X-Y, X-Z or Y-Z planes separately. |
| 124 | + |
| 125 | +### Visibility filters |
| 126 | + |
| 127 | +Click on the Visibility Eye Icon (`👁`) in the Toolbar to toggle visibility of various component types as well as bounding boxes and guide lines (`Component Guides` or shortcut <kbd>Ctrl</kbd> + <kbd>H</kbd> (Win/Linux) or <kbd>^ Ctrl</kbd> + <kbd>⌘ Cmd</kbd> + <kbd>H</kbd>(Mac)). |
| 128 | + |
| 129 | + |
| 130 | + |
| 131 | +## Grid settings |
| 132 | + |
| 133 | +The grid can be customized to match your workflow (especially useful in 3D). Click the **Grid Settings** button (`▦`) to open the grid settings popup. |
| 134 | + |
| 135 | + |
| 136 | + |
| 137 | +Settings include: |
| 138 | + |
| 139 | +- **Grid size (X/Y/Z)** |
| 140 | + Sets the spacing between grid lines along each axis. Use smaller values for precise placement of small objects, or larger values for a broader overview. |
| 141 | +- **Active plane (X/Y/Z)** |
| 142 | + Selects which plane the grid is drawn on. In 2D workflows this is typically **Z** (the default X-Y plane). In 3D workflows, **Y** is common to represent a ground/floor plane. |
| 143 | +- **Grid color** |
| 144 | + Sets the color of the grid lines. Useful for contrast against different scene backgrounds. |
| 145 | +- **Grid opacity** |
| 146 | + Controls how transparent the grid lines are. Lower values make the grid less intrusive while still providing a reference. |
| 147 | +- A **Reset to Defaults** button |
| 148 | + Restores all grid settings to their original values. |
| 149 | + |
| 150 | +## Camera type: Perspective vs Orthographic |
| 151 | + |
| 152 | +The Scene Editor supports both: |
| 153 | + |
| 154 | +- **Orthographic** camera (common in 2D workflows) |
| 155 | +- **Perspective** camera (common in 3D workflows) |
| 156 | + |
| 157 | +Use the camera toggle in the toolbar to switch. In 3D scenes, perspective navigation usually feels more natural. |
| 158 | + |
| 159 | +## Free Camera Mode |
| 160 | + |
| 161 | +For fast 3D navigation, the Scene Editor provides **Free Camera Mode**, a first-person / “FPS-style” camera. |
| 162 | + |
| 163 | +### Activating Free Camera Mode |
| 164 | + |
| 165 | +- Hold <kbd>Right Mouse Button</kbd> — Free Camera Mode is active as long as the button is held |
| 166 | +- <kbd>Shift</kbd> + <kbd>`</kbd> (backtick) — toggles Free Camera Mode on, keeping it active after release |
| 167 | + |
| 168 | +::: sidenote |
| 169 | +On some keyboard layouts (e.g. Swedish) the backtick key is a dead key and may not trigger the shortcut as expected. You |
| 170 | +can rebind this shortcut in `File ▸ Preferences ▸ Keys` and enter a shortcut for `Scene -> Free Camera -> Activate` |
| 171 | +::: |
| 172 | + |
| 173 | +### Exiting Free Camera Mode |
| 174 | + |
| 175 | +- Release <kbd>Right Mouse Button</kbd> (when activated by hold), or |
| 176 | +- <kbd>Left Mouse Click</kbd>, <kbd>Right Mouse Click</kbd> (press and release), or <kbd>Esc</kbd> (when activated by toggle) |
| 177 | + |
| 178 | +### Looking around (mouse look) |
| 179 | + |
| 180 | +While Free Camera Mode is active: |
| 181 | + |
| 182 | +- Move the mouse to control **yaw** (left/right) and **pitch** (up/down) |
| 183 | +- Pitch is clamped to avoid flipping the camera |
| 184 | + |
| 185 | +You can also optionally invert the Y axis (see **Free camera settings** below). |
| 186 | + |
| 187 | +### Moving |
| 188 | + |
| 189 | +While Free Camera Mode is active: |
| 190 | + |
| 191 | +- <kbd>W</kbd> — forward |
| 192 | +- <kbd>S</kbd> — backward |
| 193 | +- <kbd>A</kbd> — left |
| 194 | +- <kbd>D</kbd> — right |
| 195 | +- <kbd>E</kbd> — up |
| 196 | +- <kbd>Q</kbd> — down |
| 197 | + |
| 198 | +::: sidenote |
| 199 | +All movement keys can be rebound in `File ▸ Preferences ▸ Keys`. |
| 200 | +::: |
| 201 | + |
| 202 | +Speed modifiers: |
| 203 | + |
| 204 | +- Hold <kbd>Shift</kbd> — move faster |
| 205 | +- Hold <kbd>Alt</kbd>/<kbd>⌥ Option</kbd> — move slower / more precisely |
| 206 | + |
| 207 | +### Walking mode (optional) |
| 208 | + |
| 209 | +Free Camera Mode supports **Walking Mode**. |
| 210 | + |
| 211 | +When enabled: |
| 212 | +- Up/down movement is constrained so navigation behaves more like walking on a ground plane. |
| 213 | +- This is useful when exploring a level and you want consistent “grounded” movement. |
| 214 | + |
| 215 | +## Camera settings popup |
| 216 | + |
| 217 | +The perspective camera button in the toolbar has a settings popup for camera-related preferences. |
| 218 | + |
| 219 | + |
| 220 | + |
| 221 | +The popup contains: |
| 222 | + |
| 223 | +- **Move Speed** |
| 224 | + Adjusts free camera movement speed. |
| 225 | + |
| 226 | +- **Look Sensitivity** |
| 227 | + Up/down movement is constrained so navigation behaves more like walking on a ground plane. This is useful when exploring a level and you want consistent “grounded” movement. |
| 228 | + |
| 229 | +- **Invert Y** |
| 230 | + Inverts vertical mouse look. |
| 231 | + |
| 232 | +- **Walking Mode** |
| 233 | + Constrains movement for ground-like navigation. |
| 234 | + |
| 235 | +- **Reset to Defaults** |
| 236 | + Restores default camera settings. |
0 commit comments