Hi everyone! I am Boyan Ivanov, Co-Creative Director on JA3, and this time we will talk about a topic that is often overlooked when discussing the development of a particular game – User Interface. It is an all-engrossing topic as UI and UX (user experience – how you the player interact with the game) covers a variety of game elements. From aspects like controlling hiring your mercs, controlling them in battle, getting the right information for a specific situation, to the ways you as players interact with the game world and even things like having the proper video settings for Ultrawide monitors.
UI with character
Our journey with the UI/UX of Jagged Alliance 3 has been a tough one and this part of the game has gone through the most iteration and experimentation by far. Early on our initial take on the UI was to focus on a typical modern minimalistic UI and that is what we built for our very first playable version. This was quickly called out by the team as it lacked the Jagged Alliance feel.
Although a more modern approach would have made the whole journey of creating the UI easier we understood that this would come at the expense of capturing the unique feel of the second game.
As many of you know the UI of Jagged Alliance 2 while not particularly easy to use (even for 1999) or consistent, had a unique character that not only immersed you in the game world but also showed a fun and entertaining side of the game. Everyone remembers sending Deidranna flowers via the web shop or using the IMP website to make a merc.
Though these look like small details, having the SirOS laptop with the browser and all the websites really made you feel like the
man behind the screen. The mastermind that plans and executes the mission away from the actual fighting. To this day this is one of the most memorable elements of Jagged Alliance and we knew we had to replicate that experience.
Party like it’s … 2001
We knew we wanted to make a direct sequel in terms of story and that firmly set the time frame somewhere in the early 2000s. That meant that to get the character of the UI we had to look back… way back. It was a trip we had lots of fun with – we remembered the old days of ICQ, mIRC and a very young Internet with non-functional sites, bad connections and popup adds. Ah, the good old days!
Some time had passed since the story in Arulco, so we upgraded the laptop to a very early handheld PDA device. Our initial inspiration was the Palm devices that were somewhat popular in the early 2000s. I even dug out my Palm TX but unfortunately couldn’t charge it anymore. Even the name of our PDA – the OAK II is a reference to the Palm devices.
The PDA is where you manage and command your squads on the Satellite map. You can also access different apps like an email client or a notes app to track your goals and tasks (a quest log, in a way). Of course, there’s also a browser where you can visit different web sites like AIM and IMP and some other fun easter eggs we managed to squeeze in.
One particularly fun part of making the UI was our chat client – Snype. While the AIM web site shows a listing of mercs, contacting them for a job opens the Snype window. There you can offer them work and define the duration of the contract. The mercs will react with different fully voiced messages if they accept or reject your offer on certain grounds or even if they have a counteroffer – demanding more money.
UI and the game world
We began to apply the same visual style and “
man behind the screen” idea with UIs while exploring the game world and tactical combat. You can see this in the style of the action icons, how the action bar auto hides like a task bar to allow you view more of the game world, the Command button that is reminiscent of a Start button. The portraits of the mercs and even some of the gameplay elements like enemy silhouettes when behind obstacles have subtle effects to emulate a bad connection. Even the tutorial hints have a bit of an old school OS vibe to reinforce this theme.
One place where the device metaphor didn’t seem to work however was when working with the inventory. In one early mockup we had OS style icons of physical items and it looked and felt very strange. We decide to instead go with something physical which fit the task of managing items – a crate where mercs store their items and inventory. At different points of development the device vs crate aesthetic took over different UI screens but ultimately I believe we’ve settled on a good balance between the two.
The Mercs
I’ve already talked about the portraits and visual style of the mercs in DevDiary 3 – making a mercenary. Recreating the original cast and adding even more new faces was very important for us. This time we also wanted to show the mercs not only as small portraits but give them a chance to shine in a full-sized artwork in conversations, the inventory and even their merc evaluation page. One key aspect of these full-sized artworks is how the mercs are posed to best convey the unique character of each mercenary. I must give our animation lead all the credit for getting this extra layer of immersion that compliments the character’s unique visuals and aesthetic.
The Struggle
Creating the UI and UX of a game is always one of the biggest challenges of developing games. Many games fail or succeed based on this crucial aspect. It is a topic that everyone has a strong opinion on, and feedback can vary greatly. It is no surprise then that Jagged Alliance 3 went through a lot of iteration. Some screens have been reworked multiple times over the years. As a conclusion to this DevDiary I think it is fun to share some of the steps of the journey we went through. Do keep in mind that some of these are 3-4 years old and very early mockups.
.thumb.png.cbc7d7cc98a3cf07afdf1ce200fc1c00.png "OldUIs(1).thumb.png.cbc7d7cc98a3cf07afdf1ce200fc1c00.png")
.thumb.png.fadb722c92162394e0597efbc3afb427.png "OldUIs(2).thumb.png.fadb722c92162394e0597efbc3afb427.png")
.thumb.jpg.a133135a4bb3c8eb4ff8ffb6b5fc30d5.jpg "OldUIs(3).thumb.jpg.a133135a4bb3c8eb4ff8ffb6b5fc30d5.jpg")
.thumb.jpg.d6789f249a31cfb4337588433172e1da.jpg "OldUIs(4).thumb.jpg.d6789f249a31cfb4337588433172e1da.jpg")
.thumb.jpg.7c1cb31bd71afb4a22f0bbbef5841f9a.jpg "OldUIs(5).thumb.jpg.7c1cb31bd71afb4a22f0bbbef5841f9a.jpg")
.thumb.jpg.2047667685e7070ac509a3a6dda230da.jpg "OldUIs(6).thumb.jpg.2047667685e7070ac509a3a6dda230da.jpg")
That’s it from me for today! Jagged Alliance has some of the most memorable UI elements and while it was a tough journey, we had fun going back the nostalgia lane back to the early 2000s. Join us on stream and upcoming DevDiaries uncovering more of Jagged Alliance 3’s key mechanics and gameplay.
One last thing!
We have a small surprise for you. Our Art Director Nelson has made a
fantastic wallpaper inspired by our loading screens. You can find it here:
Click me!
PS: If you have any further questions, or simply wish to chat about Jagged Alliance 3, feel free to join us in our
DevStream on Thursday, 18th of May on the THQ Nordic channel:
http://twitch.tv/thqnordic
Until then, commander!
.png.64bc8ab85691e42b120337981f8fe9b6.png "OldUIs(1).thumb.png.cbc7d7cc98a3cf07afdf1ce200fc1c00.png")
.png.97880fbe1ce8c7240b9c1ea144b8c105.png "OldUIs(2).thumb.png.fadb722c92162394e0597efbc3afb427.png")
.jpg.45d8c0b51fcb04cb550ea818669fc0aa.jpg "OldUIs(3).thumb.jpg.a133135a4bb3c8eb4ff8ffb6b5fc30d5.jpg")
.jpg.458282b9c7e03c1055f8b161d7c3e8ff.jpg "OldUIs(4).thumb.jpg.d6789f249a31cfb4337588433172e1da.jpg")
.jpg.f7f120f5bba3da4ec516861dca7eaa0c.jpg "OldUIs(5).thumb.jpg.7c1cb31bd71afb4a22f0bbbef5841f9a.jpg")
.jpg.39d2068a2b00ee21149564418e0dfeec.jpg "OldUIs(6).thumb.jpg.2047667685e7070ac509a3a6dda230da.jpg")
