This is only the first part in the process of overhauling the UI. It updates the HUD-like components and changes a few things how interaction with the game happens, but none of the actual layouts for buildings/markets/… are finished.

Date & Cash

The informational display of the current date and cash position (+ its changes in form of a bar graph) are combined into a single UI element. It also displays the last price of your company’s shares.

This UI element contains a new text-field, which primary use is for searches. Those searches are tag-based and still very much subject to change. Right now the tags ‘research’, ‘seaport’ and ‘facility’ are supported. This opens up a second way of navigating the world in Margin Magnate, instead of navigating the camera and physically finding certain facilities or items in the world (or layouts) this search-box can be used.

Secondly this text-field allows for commands like /addbookmark (more about this later) or cheats (/idkfa to unlock all research items and /helicopter_ben for a money boost).

Thirdly the text-field can be reused for, what used to be the dedicated feedback bar at the bottom of the screen. By pressing the green comment button on the right of the search bar the text-field enters ‘feedback-mode’ and can be used to send feedback. Sending the feedback message or clicking the search button on the left returns the text field to regular search mode.

Buttons

Not much has changed in regards to the buttons on the left. They extend to the very edge of the game now, so according to Fitt’s Law they extend to infinity and are much easier to hit.

Minimize/Maximize

This is a new cluster of two buttons to minimize and maximize (or restore) the game’s window. Maximizing the window through this button does a few things differently than the operating system’s maximize/fullscreen button. On Windows the game becomes a borderless fullscreen window, while under macOS the native fullscreen mode is enabled but the dock and menubar are hidden to not interfere with the game while the cursor is close to the screen’s edges.

Notification Area

Notifications replace the ticker on top of the screen. This way important information can be displayed instantly instead of having to wait for other messages scroll through in the ticker. They are icon-only instead of a long message, making the information easier to read at a glance. Further more notifications belonging to companies have a border in the company’s color. This allows to quickly see, which ‘construction finished’ notifications belong to certain companies and whether they are of importance to you (your own or a fierce competitor), for example. More detailed information of a notification is displayed in its tooltip.

Bookmarks

Bookmarks are the final addition to the UI system and open yet another way to navigate the world. Currently it is only possible to add a bookmark through the search-field by entering /addbookmark, which adds the top-most layout to the list of bookmarks. In one of the later releases there will be buttons in the tabs of the open layouts to bookmark them.

They can be added for any layout you wish. So if it is the control layout for one of your facilities or just the regular build menu you can put a one-click button to go that layout right at the bottom of your screen.

Navigational Update

With all the buttons extending to the edges of the screen, edge-scrolling became a problem. Should it only work where no buttons touch the edge of the screen, or where there is no UI element at all? What worth is edge scrolling if on needs to ‘find’ a free spot at the edge, especially when those areas change constantly because the number of bookmarks or notifications change. And with that I removed edge-scrolling altogether, but improved panning the camera with the middle mouse-button. While it used to be ‘grab and drag’-style movement, it is now like a browser’s scroll functionality when pressing and holding the middle mouse-button.

In other words: press and hold the middle mouse button and move the cursor to the direction you want the camera to pan. The farther you move the cursor the faster the camera will pan.

Next Up

Updating the regular layouts and implementing scaling of the UI are the top items on my list in regards to the UI overhaul. Other than that I still have natural resources on the top of my list.