2. Editor basics
After having created a new Hiber3D project, you should now be greeted by the Hiber3D Editor.
To toggle it on-or-off, use [CTRL]+[E] on Windows or [CMD]+[E] on Mac.
Let’s briefly go through the different parts of the editor.
Panels
Engine panel
In the center of the editor is the engine panel: the canvas onto which your 3D project is rendered. As you can see, a new project comes with a default starting scene of a simple cube on a flat plane.
You can easily select entities in your scene by clicking on them in the engine panel.
Editor camera movement
To move the editor camera around in the scene, first hold down [RMB] and then press [W], [A], [S], or [D]. To move quicker, also hold [SHIFT].
To focus on the selected entity, press [F].
Scene hierarchy panel
Another way of selecting entities in your scene is by clicking on them in the scene hierarchy panel. In it, you can see all entities present in your scene.
By pressing the plus icon, you can create more entities to your scene.
If you right click on an entity, you get a context menu with different options.
Above the scene hierarchy panel there is also a button for saving your current scene.
For more information on scenes see the dedicated scenes page.
Inspector panel
When selecting different entities in your scene, notice that you can view the contents of the selected entity over to the right of the editor, in the entity inspector.
The inspector shows the selected entity’s name and its ID (which is useful for debugging).
There are two inspector tabs: components and scripts.
Components tab
In the components tab, you can both add components to your entity and modify values of those present. You can expand or collapse all components by pressing the vertical arrows in the top right.
Increment dragging
For numerical input, you can drag on the input box to easily increment or decrement its value. While doing so and holding [SHIFT], the increment intervals are increased. Additionally, for input fields such as the Scale of the EditorTransform, you can lock the different dimensions to maintain their relation while incrementing.
Scripts tab
Scripts work similar to components in that they can be added using a searchable dropdown.
For an introduction to scripting see the dedicated scripting page.
In addition to the searchable dropdown, a script can also be added to an entity by dragging a script onto the scripts tab in the inspector from the assets panel.
Assets panel
The assets panel can be found in the bottom left of the editor. It displays the contents of your assets/ folder within your project directory.
Similar to a script, a scene or a .glb asset can be dragged out of the assets panel for easy access.
Resizability
All these editor panels we’ve discussed are resizable and your panel layout is remembered between sessions.
Top bar
At the top of the editor is the play button.
Play button
By pressing the button, we leave edit mode and instead enter play mode.
Play vs edit mode
In play mode:
- Any changes done in the editor will be purged when exiting again
- Only in play mode will your scripts execute (However, when writing custom C++ modules, you can schedule your ECS systems to run in either or both modes)
- The active camera will change from the editor camera to the play camera
Play vs editor camera
To toggle between the play and editor camera, no matter which mode you’re in, you can press the camera toggle in the right of the top bar.
This means you can access the editor camera to fly around and inspect entities around your scene, even in play mode.
Conversely, you can preview the play camera in edit mode to test specific camera angles. Additionally, while the play camera is active, you can no longer click to select entities in the engine panel.
If the current scene contains multiple play cameras, only the one with the highest priority value is considered.
UI toggle
While in play mode, the UI toggle button becomes pressable. For debugging or authoring purposes, this button toggles the visibility of any web UI. In a fresh project, there is no web UI.
QR code
Pressing the rightmost button in the top bar shows a QR code. By scanning it with a separate device on the same network, you can live test your project. When accessed this way, any changes to any asset, including scripts and scenes, will be hot reloaded onto your device mid-session - no manual refresh needed.
Closing statement
That was a short run through of the Hiber3D editor interface. If you’re new to Hiber3D and want to a practical introduction, a recommended next step is to follow the tutorial.