Here are some of the recent interfaces made to catch up the increased complexity of the laboratory system. These interfaces are a lot of work. The software code is very specific and the visual need to be laid out for each type. I will show some inside work later on in this post.

First, take a look at the interface page in the options menu. In most of the options tab pages an interactive preview is placed on the right side allowing you to check the effect of the settings you are working on. Imagine in graphics tab, the quality result can be previewed. In this case, interface tab, you check the delay of the block panel and the colors. This block panel is the kind of interface popping out when mouse hovering a block. Some might want it be quicker or sensitive and less in the way.

These grade colors represent different levels of blocks. Some of you might remember the old coloration of blocks in a version in 2010. That kind of coloration made the block look like solid high-tech metal. This was changed to a more saturated version to represent if a block is powered and functioning in 2012. This custom color option will allow you to choose any color you like, except for the really dark ones. People with moderate and slight color-blindness can choose colors that they perceive better. But ultimately the colorblind mode is there.

The game levels were made into maps which are longer and more complex. This “Select Destination” will be the place to start a new map by departure selection for the base platform. It has thrusters to push around. In the future multiple base platforms can leave and combine together. This is what follows next:

ui_depart2

When the objective of the map is achieved, there is the completion dialog. That “Invention Database” as previously mentioned, will have the newly built structures displayed from the played session. Timeline is essentially a way to navigate the saved games by visualizing them as time line history, or a branch of events. More work is needed on this one yet. Also I did prefer not too much score metric, just like the older versions or the old demo. Because too much scores would be difficult to understand how the points are calculated.

And here we have the in-game pause menu. This is just needed to show the game will have help manuals embedded. It is done by a resizable web browser window. So the player can use it at corner of the screen in the middle of a game. Now in this particular example you can see it is even browsing this website! Well, just an offline copy actually. It will not require Internet for help documents. This browser also does not handle scripts at all. Who needs that in an embedded browser inside an ongoing game, and so no strange behavior from web pages. Overall this was a part that take took some time in development for integrating rendering CSS layout. And that is not including time making the actual documents.

For a window like this, the graphical assets are packed in a texture. Here is an example I put together for demonstration. For each piece it represents an interface component or a state. Information like the area, margin, etc of each are determined and put into the engine. The ones in the middle are the common components which I only need to care about them once. But the layouts of specific interfaces need some more attention. Because they also have different layer arrangement for engine rendering to obtain a very close look to the original concept.

ui_pack_demo

Update: Some polishing is done one the Options and Departure screens to make them less generic.