This week in Archmage Rises: User Interface Magic
The thoughts and opinions expressed are those of the writer and not Gamasutra or its parent company.
(Cross posted from my personal dev blog site)
This past week, I focused my development efforts on the user interface (UI) of Archmage Rises.¬† Proper software development methodology mandates that we should take on the highest priority, highest risk items first.¬† We should do this to save enough time and energy to deal with the truly dangerous issues: the unknowns :) Archmage Rises is a UI-heavy game, and the interface is core to the entire game experience.¬† Fortunately, I'm working with the very talented UI artist Rick Grossenbacher.
Note: We're only about a quarter of the way through the process, but I thought I'd share the approach and progress thus far.
UI Game Challenges
Archmage Rises‚Äôs art style ranges from bright and optimistic to subdued and dismal. This has resulted in a number of unique UI challenges‚ÄĒsuch as needing to find a color range we can use that isn't garish or that clashes across different scenes.
In my software background, I used Visio to mock up screens for clients.¬† Then I discovered Balsamiq.¬† This tool, made by a small company in Italy, is phenomenal.¬† It is specifically made for mocking up software UI in seconds‚ÄĒsomething that is impossible with Visio:
So I made about 30 different mockups of various screens‚ÄĒtrying to wrap my head around what I needed.¬† This is probably the best one.¬† So I sent this to Rick:
(Note: This mockup uses placeholder art i took off the internet.)
Rick then said that we would need to nail down a "feel" or style for the UI before he could really get going.¬† Like looking at hundreds of paint swatches at Home Depot, he pulled together 30+ game UIs from various RPG and strategy games.¬† We talked through what I did and didn‚Äôt like, and we narrowed it down to these two.¬† I recognize that they are totally incompatible with one another:
We don't actually know the name of this game, so we just call it "the Chinese game."
Archmage Rises is a serious game.¬† It is ‚Äúmature‚ÄĚ in the sense that it is morally complex‚ÄĒwith players weighing different choices.¬† I summarize by saying that it‚Äôs a game with gravitas.¬† Diablo 3 is too dark and gothic. The Chinese game is too bright and happy.¬† So I told him to just make something in between. :)¬† It ultimately came down to picking a color.¬† Diablo is red-based; the Chinese game is gold-based.¬† What would our color be?¬†
Thinking of the Dragonlance source material, I wondered what color Raistlin would use.¬† But then I remembered: Fistandantilus' spell books were midnight blue.¬† I like painting miniatures with that color, so I sent that to Rick as a possible starting point.
We are going for the complex layered look of Diablo 3.¬† So Rick made up this sample to show UI space verses content space:
It looked good to me!
Then we went through some iterations with midnight blue:
Before we went any further, the next step was to try it out in game. We haven't worked on the buttons so I just used some generic placeholders.¬† I was also working on tooltips that fade in and out at the time, so I tested it all together:
So far so good!
It will likely be several more weeks before we have a complete UI to share.¬† Here is a pic to show where we are going with it compared to Diablo 3:
Stay tuned for more on the development of Archmage Rises :)
You can follow the game¬†I'm working on,¬†Archmage Rises, by joining the¬†newsletter¬†or chatting with me about it on the daily¬†facebook page.
Or if you really want to call me out on something, you can tweet me¬†@LordYabo