{"id":181,"date":"2014-09-18T23:43:52","date_gmt":"2014-09-19T03:43:52","guid":{"rendered":"http:\/\/defiancegamestudio.com\/?p=181"},"modified":"2014-09-18T23:48:13","modified_gmt":"2014-09-19T03:48:13","slug":"archmage-rises-dev-blog-7-user-interface-magic","status":"publish","type":"post","link":"http:\/\/defiancegamestudio.com\/index.php\/archmage-rises-dev-blog-7-user-interface-magic\/","title":{"rendered":"Archmage Rises Dev Blog #7: User Interface Magic"},"content":{"rendered":"

\"\"This past week, I focused my development efforts on the user interface (UI) of\u00a0Archmage Rises<\/em>.\u00a0 Proper software development methodology mandates that we should take on the highest priority, highest risk items\u00a0first<\/em>.\u00a0 We should do this to save enough time and energy to deal with the truly dangerous issues: the\u00a0unknowns<\/em>. \u00a0Archmage Rises\u00a0<\/em>is a UI-heavy game, and the interface is core to the entire game experience.\u00a0 Fortunately, I’m working with the very talented UI artist\u00a0Rick Grossenbacher<\/a>.<\/p>\n

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.<\/p>\n

UI Game Challenges<\/strong><\/p>\n

Archmage Rises\u2019s<\/em>\u00a0art style ranges from bright and optimistic to subdued and dismal. This has resulted in a number of unique UI challenges\u2014such as needing to find a color range we can use that isn’t garish or that clashes across different scenes.<\/p>\n

Mock Up<\/strong><\/p>\n

In my software background, I used Visio to mock up screens for clients.\u00a0 Then I discovered\u00a0Balsamiq<\/a>.\u00a0 This tool, made by a small company in Italy, is phenomenal.\u00a0 It is specifically made for mocking up software UI in seconds\u2014something that is impossible with Visio:<\/p>\n

\"\"<\/p>\n

So I made about 30 different mockups of various screens\u2014trying to wrap my head around what I needed.\u00a0 This is probably the best one.\u00a0 So I sent this to Rick:<\/p>\n

\"\"<\/p>\n

(Note: This mockup uses placeholder art i took off the internet.)<\/p>\n

References<\/strong><\/p>\n

Rick then said that we would need to nail down a “feel” or style for the UI before he could really get going.\u00a0 Like looking at hundreds of paint swatches at Home Depot, he pulled together 30+ game UIs from various RPG and strategy games.\u00a0 We talked through what I did and didn\u2019t like, and we narrowed it down to these two.\u00a0 I recognize that they are totally incompatible with one another:<\/p>\n

\"\"<\/p>\n

\"\"<\/p>\n

We don’t actually know the name of this game, so we just call it “the Chinese game.”<\/p>\n

The Feel<\/strong><\/p>\n

Archmage Rises<\/em>\u00a0is a serious game.\u00a0 It is \u201cmature\u201d in the sense that it is morally complex\u2014with players weighing different choices.\u00a0 I summarize by saying that it\u2019s a game with\u00a0gravitas<\/em>.\u00a0\u00a0Diablo 3<\/em>\u00a0is too dark and gothic. The Chinese game is too bright and happy.\u00a0 So I told him to just make something in between. \ud83d\ude42\u00a0 It ultimately came down to picking a color.\u00a0\u00a0Diablo<\/em>\u00a0is red-based; the Chinese game is gold-based.\u00a0 What would our color be?<\/p>\n

Thinking of the\u00a0Dragonlance<\/em>\u00a0source material, I wondered what color Raistlin would use.\u00a0 But then I remembered: Fistandantilus’ spell books were\u00a0midnight blue<\/em>.\u00a0 I like painting miniatures with that color, so I sent that to Rick as a possible starting point.<\/p>\n

The Iterations<\/strong><\/p>\n

We are going for the complex layered look of\u00a0Diablo 3<\/em>.\u00a0 So Rick made up this sample to show UI space verses content space:<\/p>\n

\"\"<\/p>\n

It looked good to me!<\/p>\n

Then we went through some iterations with midnight blue:<\/p>\n

\"\"<\/p>\n

\"\"<\/p>\n

\"\"<\/p>\n

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.\u00a0 I was also working on tooltips that fade in and out at the time, so I tested it all together:<\/p>\n

\"\"<\/p>\n

So far so good!<\/p>\n

It will likely be several more weeks before we have a complete UI to share.\u00a0 Here is a pic to show where we are going with it compared to\u00a0Diablo 3<\/em>:<\/p>\n

\"\"<\/p>\n

Stay tuned for more on the development of\u00a0Archmage Rises<\/em>\u00a0\ud83d\ude42<\/p>\n

SGD<\/p>\n

You can follow the game\u00a0I’m working on,\u00a0Archmage Rises<\/a>, by joining the\u00a0newsletter<\/a>\u00a0or chatting with me about it on the daily\u00a0facebook page<\/a>.
\nOr if you really want to call me out on something, you can tweet me\u00a0@LordYabo<\/a><\/em><\/p>\n","protected":false},"excerpt":{"rendered":"

This past week, I focused my development efforts on the user interface (UI) of\u00a0Archmage Rises.\u00a0 Proper software development methodology mandates that we should take on the highest priority, highest risk items\u00a0first.\u00a0 We should do this to save enough time and energy to deal with the truly dangerous issues: the\u00a0unknowns. \u00a0Archmage Rises\u00a0is a UI-heavy game, and […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_s2mail":"yes","footnotes":""},"categories":[3],"tags":[14,19,4,8,49,22,37,17,16,21,6,15,61],"class_list":["post-181","post","type-post","status-publish","format-standard","hentry","category-news","tag-archmage","tag-archmage-rises","tag-fantasy","tag-game","tag-game-design","tag-game-dev","tag-indie","tag-magic","tag-pc","tag-programming","tag-rpg","tag-strategy","tag-user-interface"],"_links":{"self":[{"href":"http:\/\/defiancegamestudio.com\/index.php\/wp-json\/wp\/v2\/posts\/181","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/defiancegamestudio.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/defiancegamestudio.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/defiancegamestudio.com\/index.php\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/defiancegamestudio.com\/index.php\/wp-json\/wp\/v2\/comments?post=181"}],"version-history":[{"count":0,"href":"http:\/\/defiancegamestudio.com\/index.php\/wp-json\/wp\/v2\/posts\/181\/revisions"}],"wp:attachment":[{"href":"http:\/\/defiancegamestudio.com\/index.php\/wp-json\/wp\/v2\/media?parent=181"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/defiancegamestudio.com\/index.php\/wp-json\/wp\/v2\/categories?post=181"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/defiancegamestudio.com\/index.php\/wp-json\/wp\/v2\/tags?post=181"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}