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.

Navigation

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.

Left button skate move visual guide Valee – Visual guide ValeeIntro01

Right click drag looks around…

Right button look visual guide Valee – Visual guide ValeeIntro02

…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.

Middle button skate strafe visual guide Valee – Visual guide ValeeIntro03

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.

Movement mode switch visual guide Valee – Visual guide ValeeIntro04

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.

Left button pull move visual guide Valee – Visual guide ValeeIntro05

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.

Left button drive move visual guide Valee – Visual guide ValeeIntro06

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.

Left and right buttons free fly visual guide Valee – Visual guide ValeeIntro07
The move tool and the workplane

(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.

Move tool visual guide Valee – Visual guide ValeeIntro08

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

The grid size can be adjusted with the mouse wheel.

The workplane visual guide Valee – Visual guide ValeeIntro09
The rotate, scale and quick transform tools

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.

Rotate tool visual guide Valee – Visual guide ValeeIntro10

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

Quick transform adapts visual guide Valee – Visual guide ValeeIntro11

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.

Scaling visual guide Valee – Visual guide ValeeIntro12

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.

Scaling uniformly visual guide Valee – Visual guide ValeeIntro13
Selection

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.

visual guide Valee – Visual guide ValeeIntro15

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.

Quick select & transform visual guide Valee – Visual guide ValeeIntro16
The clipboard

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.

Copy and paste visual guide Valee – Visual guide ValeeIntro17

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.

Paste under the mouse visual guide Valee – Visual guide ValeeIntro18

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.

Copy and paste material visual guide Valee – Visual guide ValeeIntro19

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.

Copy and paste mesh visual guide Valee – Visual guide ValeeIntro20

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.

Pick and paste material visual guide Valee – Visual guide ValeeIntro21
Views

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.

Adaptive orthogonal view switch visual guide Valee – Visual guide ValeeIntro22

Notice: ob_end_flush(): failed to send buffer of zlib output compression (1) in /home/zoltanec/public_html/pages/wp-includes/functions.php on line 4552

Notice: ob_end_flush(): failed to send buffer of zlib output compression (1) in /home/zoltanec/public_html/pages/wp-includes/functions.php on line 4552