Sailaway page header image

User Interface

Buttons and text

Unity comes with build in controls for input fields, buttons, list boxes, etc. The Sailaway user interface is far bigger than the few controls that an average game needs. There are windows, scroll selectors, scroll bars, menus, and much more. All those controls need to look good on a 1024x768 screen and on a 4K monitor.

A complete new set of controls is created for Sailaway III. These controls scale non-linear with the size of the screen so a button that takes up 1/16th of the screen on a 1024x768 monitor will consume less that 1/16th of a 4K monitor.
The components are positioned relative to each other, which works much better for scaling and resizing windows.

Minimalistic design

There is as little in the screen as possible. The text font is very thin. All windows, buttons and input fields are nothing more that a few very thin lines. Everything is 100% transparent. To make the UI readable and usable, a few tricks have been implemented. When a window is touched or handled, the background becomes darker to make the texts better readable. The dark shadow fades away when the controls are not used. When a window is covered by another window it becomes semi-transparent, making the top window stand out.

The only fixed element in the screen is the access to the main menu in the top-left corner. But even that button fades away when not used.

Mouse clicks

Sailaway II made a distinction between the left and right mouse button and single and double clicks. This distinction is now gone. A click is a click, but the function depends on the screen location of that click.

Camera control

Click-drag and Shift WASD were used to look around and move around. This is now changed to a standard WASD, mouse look mode that you also see in most FPS games. To operate buttons and windows you need to press the Alt key (configurable)

Popup menus

When you click anywhere in the screen a context sensitive popup menu will appear. When you click in the sky, the popup menu will tell you wind conditions and give access to functions like "show constellations" or "adjust conditions". When clicking on the sea the popup menu will show the clicked coordinates and give access to "teleport here". There are popup menus for the sky, sea, land, boat and the map.

Scroll selector

The horizontal scroll selector is made faster and has better search and filter options. It is now used for many things like finding another sailor, switching boats, finding a sailor suggestion or a race.

orbcreation b.v. - dr. schaepmanstraat 66 - 2982ag ridderkerk - the netherlands - terms and conditions