Put a GUI on That Surface!

In mid-November, we released GUI rotation, which allows you to rotate a GUI for such purposes as a clock or compass, among other things. Now, we’ve taken GUI functionality one step further with the release of SurfaceGUIs, which give you the ability to place a GUI on the surface of a part. This is a small piece of functionality with big potential, as it opens up the possibility of creating interactive vehicle dashboards, virtual computers, and elevator buttons, and better 3D integration of menus and important player information.

SurfaceGUI exampleTo use SurfaceGUIs, we recommend you first create your GUI as a standard ScreenGUI object in ROBLOX Studio. Once it’s created, you add a new SurfaceGUI object to the part on which you want to project the ScreenGUI. This can be accomplished by selecting the part and double-clicking the new SurfaceGUI object (View > Basic Objects). Finally, you add the components of your ScreenGUI to the SurfaceGUI by nesting them beneath the SurfaceGUI object. The SurfaceGUI will then appear on the part.

Continue reading
     
 

New Font Engine Makes GUI Text Clearer Than Ever

spritesheetWe recently updated our font engine to make it easier for developers to create high-quality GUIs with legible and sharp text, and implement them in their games. Our previous font engine code was very limited–only two text sizes rendered without extra scaling, so the majority of text looked slightly out of focus. Rendering Engineer Arseny Kapoulkine explains these changes, and what you can do to utilize them.

What’s New

ROBLOX’s updated font engine is more robust, both in Studio, and in game. Join any game that you love playing and take a look at the letters in the text of any GUI–they are sharper and easier to read. That’s because we’ve upped the number of natively rendered font sizes from two to six. Other sizes will still be scaled during rendering and appear blurry–keep reading for guidelines on maintaining crisp text.

Along with six native font sizes, our font engine now performs kerning, which is a process that adjusts spacing between characters. This makes long sections of text more readable as letters are properly spaced based on the width, length, and shape of each character.

Continue reading
     
 

ROBLOX GUI Design: Z-index and Best Practices

Snowmobile Customization GUIPart of our performance and memory optimization for ROBLOX Mobile was a transition from drawing graphic user interface (GUI) elements individually to in batches (read the details in this previous article). This change dramatically reduced the number of rendering commands sent from ROBLOX to your graphics chip, but in a small fraction of ROBLOX games it caused user-created menus to render in an undesired order. Today, Game Engineer Ben Tkacheff and Content Team Lead Deepak Chandrasekaran (Sorcus) help owners of existing games fix their menus, in the rare instance it’s necessary, and provide useful guidance and best practices for new GUI designers.

What changed?

In the past, we rendered user-created GUIs according to the hierarchy of individual elements in your ScreenGui object. It often worked out that the order you built each piece of your GUI was the same order ROBLOX rendered it, and your layers of buttons and text just fell into place.

Continue reading
     
 

Engineering ROBLOX for the iPad, Part 5 (User Interface)

Future UI on an iPadThroughout the development process of ROBLOX for the iPad, many people across a wide variety of disciplines have focused their efforts on a single goal: build a world-class mobile ROBLOX product that matches (and in the sense of being a tight, unified app exceeds) the quality of its desktop counterpart. We’ve heard about fast-loading in-app web pages, smart optimization of memory and performance and touch-friendly controls. Today, in the last entry of the ongoing Engineering ROBLOX for the iPad series, the Content Team talks about the importance of a high-quality and cohesive user interface (UI).

Some of the UI changes we’ve been developing have already rolled out to users. Regardless of the platform on which you’re playing, you’ll see refreshed versions of a couple of ROBLOX’s key UI elements: the toolbar, backpack and chat (with an updated playerlist and scrollable chat coming soon). While these elements already have a new look, the Content Team is continuing to work toward its ultimate vision for ROBLOX’s UI. You can see one of the mock-ups of the team’s vision below.

Continue reading
     
 

Engineering ROBLOX for the iPad, Part 2 (Memory Optimization)

CrossroadsOne of the most important parts of developing a high-quality ROBLOX experience for the iPad is ensuring smooth, stable, steady game-play performance. iPads are not as powerful as almost any modern-day desktop computer or laptop, which means our developers have to dig deep into ROBLOX’s code, uncover problem areas and tune them to run more efficiently, while keeping game-play quality in mind. The end goal is to have quality and performance exist in harmony; the challenge is pushing performance optimization to its limit without noticeably degrading the experience.

For the past month, the Client Team has been neck-deep in ROBLOX’s source code, identifying inefficiencies and re-engineering them in exchange for quantifiable and positive impacts on performance. One of the best benchmarks for illustrating their collective progress is Crossroads, a classic level the team has been using as an iPad testing ground since September. When we first launched the ROBLOX code stack on an iPad, Crossroads with eight players ran at an unplayable five frames per second (FPS). Today, it runs at a cool 30+ FPS.

Continue reading
     
 

Hack Week: Implementing Rotatable GUIs

During our annual Hack Week, ROBLOX developers shifted gears, working tirelessly to devise and present ideas fueled more by creativity than priority. This week, we’ll be featuring some of the most innovative ideas to come out of Hack Week. Our second story is about some changes that will be implemented to ROBLOX’s robust GUIs (graphical user interfaces), by Software Engineers Deepak Chandrasekaran and Tyler Mullen.

GUI text boxes

Continue reading