Greetings! Adam here, bringing another little behind the scene look at Foxhole. This Devblog is primarily focused on UI and a redesign of Fisherman's Row. Disclaimer: All of the content below is heavily work in progress and is subject to change. Viewer discretion is advised
UI Refresh
I have had the privilege to give our tired UI a much needed coat of paint. There were a few main goals that we wanted to focus on when we started re-evaluating our current UI:
Beautify our tired UI and unify the workflows between all structures
Have a modular system that is infinitely expandable
Utilize all the same Icons that we have already have
Improve the User experience, and discover new ways to teach players
We started thinking about what pain points do the users have with our current user interface, what features they have always wanted, and what content we can add to help clarify existing features. Ultimately we settled on a module system. When assembled, these series of panels constructed a more complex UI, with the focus on making every “Screen” reading from left to right. This ultimately :fingers crossed: is an easy to implement UI framework that is scalable for any new features or changes in the features.
Images below are potential mockups and NOT in game screenshots. Features in mockups are not guaranteed to be in game.
@HB and I began tackling this problem by grouping each facility by its commonalities. In doing so we found that there were essentially 3-4 major actions that every structure needed to perform. They needed to: store items, perform a major action, and show the current work. After doing so we surmised that every structure needed an order of operations that unified them. Generally users work by placing resources into a structure, then the structure processes it and spits out the desired product. In working this way, we realized that having the inventory always docked to the left side of the structure module served the player the best, and doesn’t mislead them about the order in which to do things.
We plan for this new UI to move dynamically based on screen resolution, with the design based around 16:9 and 21:9 monitors. Having the HUD out of the way on the sides of the screen keeps the center area of the screen uncluttered and does not get out of the way when immersing yourself into the world. It doesn’t take much effort to crane your head to the sides of the screen to check your vital information.
I personally love addressing player user experience as it is something that is of personal importance to me. I have quit many a game because of how bad it feels in your hand. I am terribly excited for Foxhole to be mature enough now to start scratching the surface of its user experience.
UI Assembly
I’ve been doing most of the UI work in regards to visuals for Foxhole since the beginning of the project and having Adam take over the design duties has been a pleasure, as has opened me up to focus on general game design and implementation. Besides, it’s great to have another set of trained eyes look over and update what's currently there.
When designing for the new UI we wanted to keep legibility and functionality our top priorities. Sure, we loved the whole “dirty look” of our old UI, but seemingly unobtrusive elements like the ragged borders of the inventory background created small problems we constantly have to compensate for. For instance, edge borders made it that much harder to have nice looking panels of different sizes. Scaling the panels resulted in very ugly results so we had to have several different backgrounds to account for the different sizes and elements.
That is why we slowly changed the UI to use a simpler background that allowed for a more efficient sizing technique. We still retained some of the grunge we like from the original design, but made it so we could tweak the sizes and re-utilize the same images. That is how we arrived at the “transitional” design we have in game at this moment (pre-0.17).
With details only on present very specific parts of the background images, we were now open to use a re-sizing technique called 9-slicing. Basically it means dividing an image into nine sections. This means that instead of changing the shape of the whole thing, this divided image, when resized is allowed to stretch it’s center parts while maintaining the edges and corners untouched. We will be utilizing this technique in the new UI revamp that Adam referenced above.
This is, of course, only one example of the methods that facilitate our UI development and allows both artists and programmers to save time and complexity in our workflow. Moving forward with the new UI, a big part of the impetus was not only that the visuals looked dated, but that the underlying code was a bit of a mess. With the revamp in visuals has come a revamp in the code. I might get into more details in the next Devblog if people are interested. For now, expect to see a more clever, clean and concise design. Always a great alliteration to strive for.
Fisherman's Row
The newly expanded Fisherman’s Row was designed at its onset to be an atoll with a traversable inland sea, while still preserving the spirit of the original map. This map takes a lot of the lessons learned from Oarbreaker Isles--from your feedback--and applies it to a setting that we hope will seem familiar, with just a few new challenges to keep things interesting.
Land and sea are married in this layout, with the inner body of water being surrounded by observation towers, so the more of the ring that either faction controls will directly affect the radio intelligence of their navy. Our hope is that this will lead to more pivotal naval engagements and exciting amphibious landings across the map’s many beaches.
One thing that will not be new this time around is the original Island. Many of you will remember the old Fisherman’s Row as being somewhat of a tournament map, and with it, comes a lot of old conventions that are now terribly outdated. The biggest challenge with this revamp was in preserving the original spirit of this map, while conforming it to a higher standard of level design.
That wraps up another Dev Blog. Be sure to check out our Foxhole Dev Stream for more information about upcoming features. If you have any burning questions you want answered be sure to tweet them to @Matt directly on Discord or Twitter, if your question gets selected it will be answered Live on stream!
Adam
Stepping onto the transporter platform, Adam begins to dematerialize...