In this article, our art team details the development of the new UI.
Posted by realmsource on Aug 15th, 2013
Greetings Realm Explorers!
Everyone has been working really hard and we've got a lot of momentum going so we're happy to take a quick break to show off some completely new stuff!
In addition to continuously working on terrain improvements and the new Main Menu screen we started implementing a brand new User Interface (UI).
As is often the case with games in Alpha development the existing Realm Explorer UI had a definite programmer-bent to it. That's because we created it without coordinating with the art team at the time just so we could get things going sooner rather than later. This UI was lacking in a lot of ways and we haven't had a chance to make a much needed overhaul ... until now!
Our art director ArmedBee has put together some details on some of the recent work on Realm Explorer:
Today we are going to share the development process of making the new UI.
Step1: The Dream
It was early morning when Zeruel (Matt) was sleeping. In his dream he saw some strange letters: "H", "5", and "TML". Later that day we had a meeting where Zeruel told us about his dream and it became clear that he saw HTML5 support for UI in Unity. Can you imagine how surprised we were when a day or two later we discovered a new HTML5 UI technology from Coherent Labs? Actually we were shocked!
HTML5 lets us utilize all of the cool stuff from web design and enables quick and easy creation, placement and adjustment of UI elements. Moreover it gives the power of CSS styles, which means awesome flexibility for localizations, speed of development, performance and so on. It also lets us enable players to "skin" their own UI if our designs aren't to your liking!
Being able to use a rich and widely supported technology like HTML5 for making UI in the game was the first sign of things to come.
Step2: The Idea
We are a small development team and a lot of work is done after discussions or Skype talks without much formal documentation. That is why it was really great to have our alpha working. Many people tried it, found bugs or design mistakes and let us know. For example, in alpha all we had was a basic character creation screen; it was a simple window with parameters we wanted to get from players to create their avatars.
As we got a lot response about it we decided to change some parameters, add new information components and so on. We actually developed our new character customization window scheme based on user response and feedback!
Thank you very much for your support and advice!
Step3: Just do it!
Taking Step 1 (technology) and Step 2 (idea) there was no other choice but to create an awesome result. After two weeks working with a great concept artist and UI designer we finally came to the final look.
It is the first time we are showing it off, so please let us know how you feel about it!
There are still a few more details to clear up but we're pretty excited about the way things are going.
Right now Gabriel and Zeruel are finishing up the first phase of our new UI setup in-game so be prepared for the next patch and the first release of our new HTML5-based interface design!