Valee – Visual guide

This article is an introduction to the “Viewport and level editing enhancements” project which seeks to rethink the way 3d game scenes are edited. My goal with this workflow was to make the level editing process faster and more intuitive. It might feel weird at first but I hope it will all make sense at the end. I recommend following this article with the browser demo open.

We can move around in the viewport with mouse only, no need to touch the keyboard. Currently there are 3 navigation modes. The first, default one is called “Skate” and it will be familiar to Unreal engine users: Holding down the left mouse button allows us to move the camera forward and turn at the same time.

Right click drag looks around…

…while the middle mouse (or both left and right buttons) pans vertically and sideways.

We could think of it as instead of a mouse we’re holding the in-game camera in our hands.

The other two navigation modes can be accessed through the camera navigation pie menu which is called by the Alt and middle mouse button. There the blue labels indicate the camera modes. Highlight “Pull” by moving the mouse down and let go either the mouse button or Alt to select it.

Now it behaves much like what we’d expect on a touch screen: grab a point in the scene with left click then by moving the mouse move the scenery.

The right mouse button looks around in a similar fashion and just as before, the middle button is for vertical and horizontal movement.

The third navigation mode is “Drive”, intended for traversing larger distances. The left button is used for moving forward and turning just like in “Skate” mode, but with an important difference: motion is handled in a joystick like fashion.

Otherwise it behaves similar to the other modes: right click looks around, middle button moves up down and sideways. Holding down the right button while moving forward allows to leave the horizontal plane and fly around freely.

(The current hotkey layout is tailored for right-handed people but if this system ever gets implemented in an actual game editor, creating an left-handed layout should be trivial.)

The left hand hovers on the left side of the keyboard, above the “WSAD” keys as all hotkeys in VALEE can be reached from that position. The right hand will always be holding the mouse, never letting it go just to hit a key. Generally speaking the left hand picks a tool while the right operates it.

For example select an object by clicking on it and hold down W to pick the move tool. Now the three mouse buttons allow to use this move tool in three different ways: Left button drag moves it on the work plane, right mouse drag moves the camera along with it while middle button drag slides object and camera move forward and backward.

The current mouse button functions are indicated at the top of the screen when a tool is held.

The workplane adapts to the current view so the tool always behaves as expected.

The grid size can be adjusted with the mouse wheel.

Hold down E for the rotate tool and drag with the left mouse button to rotate around the two highlighted axis: moving the mouse sideways spins the mesh sideways, pushing forward does a similar rotation. The right mouse button is used to rotate around the remaining green axis.

The behavior of the tool also adapts to the current view, no matter how we’re looking at the mesh, things behave as expected.

The scale tool, R key, is a bit different. Here each of the mouse buttons scale on one, object relative axis. The reason for this is that a non object relative stretching is not supported in most game engines.

Right now uniform scale is only available in the quick transform tool: hold down Q and drag with the middle mouse button.

The right button rotates on the two indicated axes while the left one moves the item on the workplane.

Selecting things work as one would expect: left mouse button selects something, Ctrl plus left mouse button toggles selection. In future versions left mouse button drag with “Shift” held down will do a rectangle selection, while the right button equivalents are going to work on object groups.

When multiple items are selected, the pivot of the transformation is the pivot of the last selected object.

If you intend to manipulate a single item then you don’t even have to select it: if nothing is selected then the current tool will operate on the object under the cursor. The only exception is deletion which only works on a selection.

One can drop selection with Space or clicking on the background.

The clipboard can store meshes, materials, transformations or entire objects therefore both copy and paste have different modes, indicated at the bottom of the screen.

The default mode is “Object” which allows to clone an existing entity in the scene. It works as expected in a game editor: Select something and press C (or number 1 key) to copy the selection then hit V (or number 2) to paste it slightly offset from its original location.

The B and 3 keys paste the object to the spot under the mouse, snapped to grid.

As before, if we want to deal with a single object then we don’t have to select anything: we just move my mouse over an object and perform the copy.

Now let’s say we only want to copy the material from a given object. Hover over that mesh and hold down C. The copy mode selector pie menu pops up so choose “Material”. When the C button is let go then the highlighted slice gets executed: the copy mode is changed and a copy is performed too. So now that material is stored on the clipboard and for convenience the paste mode is also changed to material thus the material can be pasted onto other meshes right away.

The same idea works with meshes: switch to mesh copy mode, that copies the mesh reference, paste it on to another object replacing the mesh but keeping the material and transformations.

But copying things from the scene is not the only way to change the clipboard contents: The X key opens the favorite materials pie menu and the chosen material is placed on the clipboard.

The Z key is for a similar menu but for meshes.

The back quote key, just left of number 1, is used to toggle the orthogonal view. The direction of the view depends on the direction of the camera: for example if we’re looking down then we end up with a top-down view.

Alt and right mouse opens the view pie menu where the different views can be chosen directly.