'God of War Ragnarök': Building the UI for a AAA Sequel

[Music] hello and welcome everybody I really appreciate that you're all coming out to this talk and really climbing the stairs to the third floor this is building the UI for a triaa squl and I'm incredibly honored to be speaking because generally there's one maybe two UI talk even given a year so this is your quick reminder to silence some cell phones and to fill out the evaluation forms at the end because it really helps to ensure that our specific discipline continues to be represented at GDC finding UI talks on the Vault can be a little difficult sometimes this is my first GDC presentation so it's a little surreal for me to be on stage because just about 10 years ago or so I was just a game development student sitting in an audience like this so it's kind of kind

of crazy to think that I'm standing here right now today we're going to be broadly discussing what it took at Santa Monica for our team to create the UI for God of War Ragnarok the AAA sequel to The award-winning God of War which came out in 2018 and the goal today is to go indepth on the plan and process for how we tackled this enormous project specifically from a UI perspective to do that we're going to talk about three topics number one how do we build UI at Santa Monica number two we're going to step through specific screens and interfaces to better understand what it took to create them and then lastly as we dive into the pause menu in particular we're going to take a look back on 2018 and see what some of the lessons we had that we learned from but before we do all of that let me introduce myself my name is Zach bone

and I'm a senior staff technical designer responsible for building and maintaining the UI architecture as well as implementing nearly every UI element that you saw in game I worked on a lot of different types of games in my career first on Indie teams and then midsize studios in the mobile space but over the last seven years I've specifically worked as a user interface designer on these large AAA open world RPGs starting with Spider-Man as a UI designer back in 2018 then onto cyberpunk and now with God of War Ragnarok so this is your early warning that I may spoil some aspects of Ragnarok to better provide examples of the UI development process so let's break down how we build UI at Santa Monica by taking a quick look at the team that did this at the height of production we had 11 people working on the UI and for some of you I'm sure that number sounds totally

absurd 11 people just to work on the UI that's kind of like a mini studio in and of itself but that's actually the reality of working on these colossal projects it's just a bunch of independent teams all working and collaborating together and I honestly have no idea how many people worked on Ragnarok just before the pandemic we had about 300 people and we were beginning to put desks in the aisles but back to our team it's got a pretty wide range of talents with a team that split evenly between senior and Junior developers so this is me I'm the senior technical designer for the team and for as long as I've worked in UI it's generally been true that it takes about two people to build UI in our case it's a combination of TD support on the implementation end and 3D art support those who create the majority of our assets and at Studios of this scale we

actually need redundancy just because there is so much going on we have a couple of 2D artists on our team and they act as concept artists and they end up generating a lot of the initial assets that then get transitioned into a 3D workflow or a 3D environment we had a single ux designer who we stole from Naughty Dog and they came about Midway through production to specifically help the supporting all of our wide range of accessibility options and then lastly we have a gameplay engineer who acts as kind of this conduit between the UI script and then the rest of the game logic and this team was roughly the right size for ragnaroks fouryear development in truth we really could have used one more technical designer specifically at the very end of the project only because there was so much going on so I'm going to get technical just for a quick minute this is the 60-second explanation of how our engine works in short every everything in our game is

pre-allocated that nothing gets created at runtime dynamically so we do this for performance and stability reasons as a result everything in our game is owned by something called a wad def which you can think of as just a container of things like for for instance a level can be a wad there's a ton of levels in the game we don't support all of them simultaneously but we have the slots for a couple of levels to be loaded at any one time and if level ends up getting too large like some of our huge XL areas like the crater it can be split up into two or more Wads in order for for them to be loaded properly but some kinds of memory always need to be on these are permanent wads they manage progression and core systems and the UI is one of these permanent wads so everything we do has to fit really neatly into a specific memory budget and when the UI breaks the entire game breaks like full stop it's a full it's a P1 assert and that's never

fun at Santa Monica while nearly all of our assets are 2D we utilize a 3D workflow through Maya in game it's just all drawn in a screen space position relative to the camera prior to this every UI pipeline I had ever worked on was in 2D so this was new and really weird and there's naturally some big difficulties in trying to author UI in Maya which was never built to do like we have to hand author every layout in the entire game but we do take advantage of the materials and effect systems that are already really optimized for the game which unleashes the creative potential for a lot of our artists often specifically with 2D workflows you end up running into limitations when you hit the Polish phase when you want to start adding particles or you want to have supported specifically supported blend modes now we're able to access and man ulate individual Maya groups by just

marking them as game objects through a Santa Monico tool and then on the scripting end we have an API that allows us to globally search within a given WAD for a specifically named Maya object our Tech workflow is entirely run on Lua which is a typeless scripting system that Santa Monica has been using for ages for Ragnarok there was a major shift for a lot of other departments to start using a new visual scripting system and if you're interested in learning more Sam Stern clar's talk which was unfortunately was earlier today but you'll find it on the vault is specifically on this subject but both the camera and the UI teams continue to use Lua for the entire duration of Ragnarok now for any students that are in the audience or those watching I want to take a quick moment to touch on how the process for data is managed in AAA games because as a student you're probably familiar with unity and you're

generally storing data inside of an inspector window directly associating it with a particular script they're essentially runtime Associated script variables but in the AAA space this data is often stored as static data this is Quest equipment Journal data and it never changes throughout the whole game it's always static for designers it's often authored in Json or some simple markup language in a text file or maybe in Excel now the major difference is that in a text file you can have multiple people editing it and then it merges and diffs really nicely as it comes back together again what's also nice about static data is in a lot of instances it can be changed on the Fly while the game is running which gives designers this Lightning Fast iteration period that static data gets interpreted by the game engine or the code that you're running on this is often written in C+ plus especially if you're on the

AA side but it does require the game to be recompiled and the downside is this can take a really long time for the UI team we're actively working on a layer above that which gives us the flexibility as as as if we're acting like data the UI logic can either be updated on the fly or just rebuilt by rerunning the game and then we access all the static data through apis from C++ it is just give me all the quests that's all I need at the end of the day and then I'm going to be the one managing how that looks on a particular screen but before we dig into the UI I want to take a moment to step back and do a little bit of comparison Ragnarok ended up being this huge undertaking for every Department everything was expanded to give the Norse Saga this big epic proper conclusion and on the UI side that came in the form of maps skills and HUD elements the tech design team which is just me and one other guy oversees a

code base that over that is about twice the size of the previous game and the crazy thing is our memory budget never changed we had to do all of that in the exact same space which was a real challenge but it was also a huge accomplishment because over the last four years we've added and rebuilt a staggering number of features which we're going to dive into now to do so we're going to cover three distinct areas we're going to talk a lot about various utilities we're going to talk a little bit about the HUD and then we're going to dive into the menus and that's when we're going to look back on the previous title and have a little critique about it so first up our utilities which is what our outof boox experience or Ubie for short is part of this is the very first screen that players are going to encounter prior to any logos Splash screens or even the front end and God of War 2018 had a very

simplified image calibration screen in this place but our driving factor for an Ubie was really our commitment to accessibility we wanted to prioritize giving folks options from the very beginning so to do this menu uh to build this menu we took a lot of inspiration from what naughty dog had done over the last couple of games but we also innovated in some small ways this landing page is a really good example because we wanted to provide players with a really quick Choice as if they wanted to skip past this or take their time through a guided setup choosing the guided setup dropped players into the first of four pages this is just simply our common settings we wanted a place where all the standard options that you would expect would be chosen so language subtitles and UI Tex size which is actually super important so remember that it exists inside of the UB because I'm going to talk a little bit more about this later but as a quick aside we totally

underestimated the technical weight of our accessibility options and we ended up getting pinched by it in a couple of ways on the right hand side is a visualization of all of the Lua files owned by the UI and the largest one is our settings menu we had almost 8,000 lines of Lua logic just for the definitions of what these settings options are in an Ideal World Lua is really not where we should be storing this ideally it's an a static data Library similar to what I was talking about earlier the last Ubie page that I want to cover is our accessibility presets because one of the challenges we noticed with the ubis that na dog had begun to develop was that there were so many options it very quickly became overwhelming to players so to smooth out that user experience we ended up creating these presets which would change a wide variety of settings all in one go and

they served needs like Vision hearing motion and motor our front end is fairly standard it provides all the basics new game settings and like God of War 2018 it exists in the same screen space as our introductory cut scene and I personally love it when the front end gets set up this way because it gives you this opportunity to have a seamless cut directly into the start of the game instead of hitting a big loading screen which for a lot of players especially if it's a narratively driven game it can kind of ruin the excitement of starting that game up but it has a lot of extra overhead because it's a full scene it needs level designers it needs lighting it needs art Direction so the core creative team needs to be on board pretty early on but thankfully we knew what we were getting ourselves in for what we didn't expect were the challenges with the recap video the recap was an overview of the events of God of of War 2018 and our

challenge really ended up becoming how our engine deals with streaming video because remember our engine pre allocates everything that includes video and the overall need to play video is really limited as a result the max video size we actually support in game is only 1280 x 720 and now we were going to project this huge video along a wall knowing that some players were going to be playing on a 4K television the crazy thing is we ultimately didn't change anything this is actually a 720p video that is just stretched way out to fill the screen but the campfire aesthetic passes the low quality off as something that's almost genuine so I have a kind of a takeaway for you you got to pick your battles this one instance could have forced us to change the streaming video budget which would have had major me memory imp implications across the entire game but we end up finding a creative solution which turned a weakness into a strength

now when you start supporting a wide number of settings options we had 65 70 options or something like that it becomes difficult how you categorize all of these and we ended up settling with a mix of standard categories like gameplay as well as adding some new and very specific ones like text and color as well as accessibility and our audio cues but we ended up being really flexible on exactly what was contained inside of each category Auto pickup is in gameplay but it also appears in accessibility and this ended up being a combination of some of our opinions but also the result of a lot of play testing if we notied players struggling to find a particular setting we would end up just duplicating it into other categories with so many different settings and some of them are controlled by the player and some of them are being controlled through presets we needed a way to know if a setting had been changed from its default value which is where the blue text comes into

play it's this bright pop of color to help players know at a glance what's been affected whether they changed it or one of their presets did this is super cheap and immediately got a ton of results for us one of the single largest accessibility options we ended up supporting for Ragnarok was full controller remapping and I can't understate how colossal this was as it involved rearching major ways the game worked under the hood because up until this point designers had hardcoded specific buttons for every action in the entire game so changing that Paradigm took an entire village now when a designer sets up an interact they specify the action most suitable to the context of that action that could be aim it could be interact it could be evade so if you're looking to make major Headway into embracing accessibility and the community behind it Fuller full controller remapping is the single most requested feature by far and

way and not every team has the advantages of AAA to support dozens of accessibility options but there are some really great ways that we've seen Indies support players like this like Celeste which exposes just some basic gameplay options which gives players a variety of different ways they can tune in order to make the game more accessible to them or an Overland where you can swap out the core font for one that better serves players with dyslexia another aspect of utilities the UI group supported was tutorial we supported about 70 distinct tutorials in Ragnarok the vast majority of them all looked like this they were just utilizing our simple sidebar message and were happening in game but we also supported about 15 in menu tutorials which guided players through equipment skills transmog and more for Effective tutorial ization because we did a lot of this I've got a couple of tips for you

number one show tutorials in a very consistent space with consistent visualization so that players can learn where to look when they want advice number two please only teach one thing at a time from personal experience combining multiple tutorials in game really never gets you the results that you're looking for now this third one only be for sequels but slightly delaying the activation in case players have already discovered it or they remembered it from the previous title is a really great quality of life feature and it just streamlines and continues to immerse the player without pulling them out into a tutorial for successful in menu tutorials I recommend a couple of steps you want to support additional visualization such as the bouncing arrows that you saw earlier those really help guide the player where they're looking on the

screen you also need to architect your tutorial logic so that it ends up hijacking your input system to ensure that only specific actions allow players to go to the next step in the process but ultimately please keep your in menu tutorials brief no longer than seven steps because after this players just start mashing buttons they're like I'm done I want to get back to the game so as we wrap up this portion on utilities I want to do a really small breakout lesson specifically on fonts because I have a big passion for this and nobody else in the studio cares if you're new to fonts here's a rule that I follow just use two fonts your first is your header font it's going to be stylized and it's going to represent your artistic Direction you're going to use this fairly sparingly for Ragnarok we used a font called Berserker which was created inh house and it captured capes the feeling of the kind of the Norse runic like

patterns and we only used it in two places our title text and then our area announcement messages when you move from one realm to another or to a brand new area that you've never seen before it gives that moment kind of an epic space epic time for the second font it's going to be your body font and if there's one thing I want you to take away from this entire talk is that your body font should be readable our body font was gilland it's something we licensed from Adobe and this font covered us for eigs and for those unfamiliar with localization this stands for English French Italian German and Spanish this covers you for most of your Western regions however there's a number of regions that often require specialized fonts as your EIG font just doesn't have the glyphs Thai Arabic Japanese Korean Chinese often require en entirely separate fonts we actually looked out Gill Sands

already supports celic so we didn't need an additional font for Russian the single biggest way we saved memory on Ragnarok was by utilizing a custom icon font using applications like font Forge we loaded in black and white icons into a font sheet and then we recalling them in game by using a Unicode value and this was a huge savings for us instead of having material and texture cost for over 200 icons we could instead leverage a single font that was baked into a 2048x 2448 texture That Was Then compressed further down the additional advantage of using a font like this was that we ended up creating macros for our writers so they can embed in line specific icons into text Fields so with a tutorial use hack silver to purchase this instead of writing hacksilver they would use a macro for the hacksilver icon which then players recognize and use everywhere else in their game and that was totally

free that was awesome so for a quick minute I want to talk about the future of how we're going to approach fonts at Santa Monica because right now we actually scan through all of the text in the whole game and scrape every glyph into a texture packed sheet we do this for both the God of War icon font I showed you earlier as well as our header and body fonts these are generally 1024x 1024 our icon font has a lot more going on so it's twice that size each language in our game has its own wad every time you swap your language we're just reloading the same wad slot they each have about 10 megabytes but even with compression we actually ran dangerously close to our memory limit by just supporting three fonts which ended up limiting Us in some really weird and kind of painful ways so our initial plan is to start looking at some GPU based renders like slug so instead of creating texture

sheets at all we're just going to plug in an OTF or ttf file and then have that glyph get directly rendered on screen which gives us this huge advantage of supporting a wide variety of potential font Styles so you get a bunch of variety from your body font that you've created and this is a huge win from a graphic design perspective being able to support thin regular heavy or bold is something that artists ask for all the time but what's also really interesting is it unlocks emojis the implication is up until now all of our icons have been just in black and white but if we use emojis we get to add color to all of those same icons which is a huge Boon for our artists so we're pretty excited all right I'm going to stop talking about fonts because I'm going to talk a little bit about the HUD story comes first at Santa Monica and with it a clear cinematic direction

that drives everything that we do from a UI perspective we're always looking to minimize the onscreen presence to enhance that feeling but on the ux side we also need to support a wide array of information that we need to give to the player now compared to the rest of the UI the HUD visually didn't change very much since the last title however we did change the system that governs the notifications that are on screen most notably we put everything into a single Global cue only one notification type can be on screen at any time but the problem was feedback we got late in development was that players sometimes had to wait too long for some of these message messages to appear it was all in one giant queue and if you ever visited the well in vanaheim and had a ton of resources I'm sure you ran into this so moving forward we're going to be revising this system to to be more Regional we'd have a Q in the upper left

a q in the upper right and then we could either tie them together if we want to have a moment where a single UI message is really important like the area announcement ones or allow them to exist simultaneously in order to get through all of these different messages so the major HUD considerations we had for Ragnarok actually came in the form of supporting new and custom UI that all have a very specific gameplay use moose fim challenges The Raven AR and the Mystic Gateway are all good examples of this because for Ragnarok we knew a key feature was that players needed to travel freely between all of the all nine of the Realms as well as the realm between Realms and our goal was to make this as intuitive and as time-saving as possible and that actually meant a major departure from what we had done on the previous title to give you a little bit of context that was a while ago this was how realm travel functioned in god of for Kratos had to travel to a very

specific Place te Temple and interact with this physical element in order to change all various Realms and this felt epic you had to go through this huge process in order to change Realms and it made that feel really meaningful but it was also really limiting from a ux perspective players could only enter a realm from a single point which made backtracking and revisiting areas really time intensive so for Ragnarok all of that logic got moved directly onto the Gateway itself and this UI is a blend of both Lua logic as well as some visual scripting because there's a lot of animations that are going into supporting this it's a unique blend between screen space UI but also diagetic elements the realm icons their locked and unlocked states are all directly built into the doorway itself but Midway through production it became clear that players were starting to lose their their momentum when they hit a Mystic Gateway which was kind of

odd why were players spending so much time here in the videos captured during play tests we ended up seeing players jumping in and out of the pause menu trying to figure out where they needed to go so to solve this we brought the information the players were looking for to directly to them by just adding two elements the first was that Quest icons now appear on the door if one is present within a given Realm and then secondly we also keep a log of all of the available quests on the right hand side to give them a little bit more context for exactly what was being offered in each one of those Realms and immediately we saw a huge change in player engagement as well as exploration there are these natural breaks in the story where Kratos encourages you to go explore and this directly helped support all of that so some takeaways play tests and having video footage of players is invaluable because they may not tell you that they need help they will just suffer in

silence we only discovered this issue after watching through the footage ourselves and then anytime players open up the pause menu they break away from the story that's being told in this instance we actually empowered players with the right information order to in order to keep them in the flow which is really important if you have a narratively driven title another instance of custom UI requests that you're also going to see in a lot of different types of games uh are specific variations of known systems for us this was our boss health bars so early on we sat down with the combat team and we discussed bosses and what kinds of support they would need for their health bars and the News was great Kratos was only ever going to fight one boss at a time well there was this one unique instance where he fights two Valkyries but that fight's kind of unique because they share a health bar so we ended up only building a single self-contained element and we called it a day the thing

was a couple of months later the combat team came back around again and said well we have this instance where Kratos fights two water dragons can you support that of course of course we can support that but we actually don't have a great solution for more than two bosses because there's only so much screen space and the combat team said yep that's great and they went along their way in the last 5 months of velopment the combat team came back around again and said so we have this instance where Kratos fights three bosses all at once can you support this of course of course we can support this but we only have the room for two health bars so we ended up recycling the twin Valkyrie health bar in order to realize the Creative Vision of having this crazy challenging boss encounter which is probably a good thing because have fight three of those things would be just insane uh so some

takeaways when building UI you need to approach this from adaptability and scalability you never know when you need to expand a system or design to starts decides to keep going further than you first expected but you also need to be clear about some constraints a combat team fully understood the limitations of screen space there's only so much real estate to go around and ultimately it ended up in a better design so before we dive into the pause menu let's talk a little bit about how the team looked back at God of War 2018 it's a known fact that God of War 2018 te's development cycle had difficulties there's actually a great documentary out there if you're interested in learning more but when it came to the UI there were two core issues despite building a deep RPG that had an extensive progression and menu

structure the UI group had really limited resources at at the time as a result the whole UI that was shipped for the game was only built in 6 months which is an amazing feat but ends up coming at a cost because when you go fast you miss things so while God of War 2018 was universally celebrated there were aspects of the UI that held it back so didn't shy away from sitting down and having a hard critique about what worked and what just didn't work so starting on Ragnarok we had four specific goals from a UI perspective we wanted to let our pause menu characters have a greater visual impact we wanted to ensure that our font was always going to be readable this time we wanted to optimize our space as efficiently as possible and we wanted to make the UI really easy to navigate so looking back on cratus in the menus

it was clear that instead of coexisting he was competing with the UI for space from the tabs at the top to the info cards on the left and right he was giving this very narrow space to live in and he was Often overlapped by elements of the UI for Kratos to have the space to breathe we needed to slide him over to the right which gave us a much better separation between model and UI spaces because this one simple change had a whole Cascade of updates with the tab menu moving to the bottom the attribute panel being condensed and swapped over to the opposite side our menu pomps in the bottom right now react to the menu depth and adjust their position accordingly this allows us to zoom in and out have characters step forward and backward into frame and it ensures that Kratos is never covered by the UI one of the biggest weaknesses of the UI on the last project was that text was painfully unreadable from a distance and

while there was a post LOD patch which made things maybe a little bit better there's only so much that it could do this underlying system just straight up did not support this kind of content so we swore that this time around it was just not going to happen and in particular for small text these are the areas where players struggle the most early on we decided that our body font would never be smaller than 24 points and in fact we were going to offer a wide array of text scaling options so no matter how far players were sitting or if they had some kind of visual impairment we wanted everyone to be able to read what was on screen as a quick aside this text scaling was phenomenally successful our early metrics at the number of players who changed the font in initially did not seem readable seem

real as of today we're seeing nearly 60% of players change their setting which never happens too large which is one step up from our default once you make this commitment to having font scaling it means that you need to build the content and the technology that scales well with it and this is often called Dynamic layouts where the position of content shifts to accommodate other content so for instance when you have one text Fields y position being based on the height of the text field above it this seemingly simple concept is not supported out of the box by most UI systems and it needs to be built the card in the middle of the screen is a great example of this it is capable of reacting to a wide variety of possible components from attributes and descriptions to perks [ __ ] videos and lore entries no matter what kind of content we throw at this card we're capable of handling it which comes in

especially handy for localization where a simple description can easily become a paragraph in certain languages now in comparison for God of War 2018 all of the layouts were completely static we didn't even change or update to take advantage of the space that was available the stats card in the middle was built with the fullest possible layout in mind which looks pretty good at the end of the game but it looks really awkward at the start of a game when a piece of gear hasn't been fully uh hasn't been fully realized and then lastly from a pure graphic design perspective there were some inconsistencies with navigation while primary navigation was localized in the same general screen space what we considered a button was really different depending on the menu that you were in buttons end up being these large large sockets on the weapons menu they were a completely different

shaped socket on the armor menu they were a list on the enchantment screen and there were nodes on the skill tree so for Ragnarok we have a very consistent sidebar which shows up everywhere from the weapons and armor menus to the skill tree to the vendor we also visually transition anytime we dive deeper the menu slides to the right while ascending is always to the left instead our last section today is going to be on the menus for Ragnarok but instead of diving into each of the pause menus I'm going to take you through three specific case studies enchantments skill mods and the journal our first case study the enchantment screen is one that I see as one of the greatest Su success stories of the UI one of the core long-term progression

systems in 2018 was the enchantment system gear such as chest or waste equipment had some number of Enchantment slots and these slots were filled with enchantments that offered a wide variety of bonuses from simple attribute Buffs to some build defining perks that could fundamentally change combat in interesting and unique ways by having enchantment slots tied directly to gear it made that equipment really valuable but it also created a weird ux issue there was no way to view all of the players equipped enchantments all at once you needed to individually inspect every piece of gear making it difficult for players to understand their overall build and ultimately this ux issue led to a lower than desired percentage of players who would even interact with the system particularly on the deeper end side deeper side of things so but there is this Universal desire from the combat and the UI team to remedy this particular problem for

Ragnarok and th the Amulet of yrel was created it's a single place where all of the players nine enchantments could be viewed at once on the UI side this offered some challenges though our first iteration had this function like every other equipment screen in the game our goal was to have consistent navigation no matter where you were in the menus because uh where every slot is just a category that we dive into and then we show the list of all the possible items that can be equipped but this proved totally disastrous players and developers hated it because just like in 2018 you ended up losing track of every other enchantment you actually had socketed in so the solution ended up being that we had to break some of the conventions that we had stuck to our guns on for so long in this particular instance we decided that the user experience need was greater than the game fantasy so we put UI directly on top of Kratos and we

developed a new menu structure that allowed for two simultaneous lists the items on the left hand side and the slots on the right which is actually a another convention that we're breaking usually it's the other way around we start from the top and work down instead but in this instance players choose an item and then they choose a slot that it goes into and this was a total breakthrough all of a sudden people were really starting to engage with the system sorry but there was still some friction where players were beginning to reconceptualize their build so the next iteration was a context sensitive approach where we allowed players to directly navigate onto the menu list which would allow them to reverse their flow back into kind of our standard convention where players would then pick a slot and then choose which enchantment would go into it which ended up being a great way to

rapidly unsocket all of your build if you wanted to make change changes which was really important for our power players particularly towards the end of the game where things got really difficult and you need to hypers specialize in order to complete the game our director Eric Williams loved this navigation flow so much he wanted us to use the same framework for all of our companion accessories as well so this system and this interface is seen by the UI team as a great Triumph it's a great system that ends up Blending Systems design and great ux and we know it's successful because nobody mentions this UI at all instead they talk about their builds and their excitement and the possibility space that enchantments provide so you know you've created great UI when it becomes totally invisible so the two takeaways that I have for you are if it's a core system that's fun fundamental for long-term player engagement and it's just not clicking keep iterating but please build

time into your schedule we did not do this uh it was a lot to finally get there but it was totally worth it in the end but you also need to break know when to break your own rules in our case the ux rule one out over our own artistic pillars so the second case study I want to take a look at is our skill mods and how another system that ended up lacking a lot of Engagement in 2018 was reconceptualized so in the previous title there was a system in the Skil Tre called bonuses it's down there on the bottom right and probably not a lot of you remember it this bonus system was really interesting from a combat perspective and it opened up a lot of new possibilities for players the system was intended to continually keep combat fresh during the end portion of the game after the players have already unlocked a lot of their skills but nobody engaged in the system at all because it was a mismatch of player

priorities on this menu we had been training players for hours just worry about your skills this is the only thing you need to do but the thing was all of these bonuses were gated by attributes which is something they did on a totally separate screen so this mismatch in player priorities basically made the system that we spent all this time building totally useless so for Ragnarok we wanted to take another stab at this for the same reasons as before we wanted to keep combat fresh during the end portion of the game after players have unlocked a bunch of skills already but to drive engagement we end up doing an unusual thing we hid the system away entirely players don't unlock skill mods until they've completed a chain of quests tied to a particular skill once they complete it the next time they open up the skill menu we introduce the system with the tutorial instead of having a passive bonus that simply activates this system now takes

active participation from the player players have to purchase a skill mod from a curated list of possibilities which allows a lot of experimentation on the player end but gives us a little bit of context and a little bit of constraints to ensure they can't get overly powerful in a particular way they then sck at that into place and this tangible nature of upgrading the skill went a really long way we're seeing massive player engagement and player enthusiasm for the system across the board for something that is uh pretty hardcore in a lot of instances so some takeaways presentation matters especially for systems that require active engagement but hiding progression systems especially if they're T targeted towards high-end or endgame players can be really valuable because it makes them novel but don't forget to tutorial it because you want to really introduce the fact fact that this is something brand new you've never seen this before uh and then they know it's a brand new

system our last case study that I want to discuss is a feature that I think we failed to properly deliver on and this was the journal for reference here's what it looked like in God of War 2018 because the pages are flat you can't tell that we're totally faking it all the assets are rendered on top of the book and here's the journal for Ragnarok in a lot of ways it's totally identical but this time the content is directly rendered onto the page and you can see some evidence of that with some highlights and some of the background effects that kind of like Contour to the page but we were like we're AAA we want to take this a little further so we wanted to provide we really wanted to prove that the content was physically present or diagetic so to do this we were determined to get the book to flip pages oh man we had no no idea what we're getting ourselves in for at first things are pretty

straightforward you get these elements to show up on a page something uh using something called a custom render Target or custom RT anything sharing a custom RT texture would render together as a single flat texture that was just texture ma to a page cool we have content on a page this is great when a book is flipped you have to flip uh you have the left and right pages but when you're flipping a page you also have the left and right pages of the next upcoming page to deal with as well now a page flip happens anytime we change categories and some categories have similar UI elements like headers descriptions or lists but because we're page flipping we can't recycle any of it any possible combination of categories could be opened at any time like labors and the treasure maps so instead we ended up supporting unique unique assets for every category what further complicated this

was that we decided to flip pages between tabs which was a really bad idea because despite the fact that they look the same to the user these are entirely different scripting classes under the hood so between the complexities of page flipping and our ability to render all of these Assets in a really limited way the scope of what should have been the simplest menu in the entire game ballooned and ultimately it came into a head during the fining period of Ragnarok because testers were able to break this in so many ways it took a long time the journal is stable is but to this day you can still put it into a broken state where no UI will render it all it does fix itself I assure you most of the time uh but please do not try pushing this harder than it should be so while aesthetically pleased pleasing most players will actually never notice this effect so the

takeaways from the journal should really be don't change something just because you can or you feel like you should please evaluate what the change brings to the experience as our producer likes to say is the juice worth the squeeze this was not worth the squeeze I spent a lot of time on this uh I'm really glad that I don't have to do that again so we've covered a lot of ground here ranging from the ways that we build UI at Santa Monica to deep Dives on specific UI as well as how the UI for God of War has evolved over time to provide a better user experience for players which really brings this to the end my name is Zach bone and I really thank you for coming out and coming out to GDC we've got 13 minutes left for questions if anybody wants to ask

hello oh uh I was wondering if you guys localized your header font since you said they made that in-house and uh we had a lot of fonts for your other languages did you guys localize that inhouse or what was your solution there so the question is do we localize our header font the answer is no if you are not one of the western regions you do not get this font we instead swap it for your body font instead uh which is a real bummer but that's kind of the limitation when you end up building something by hand if we had someone on staff who was a graphic designer it could continue building out all those glyphs that's awesome but that's also a huge skill set uh I don't know if I would feel comfortable trying to author a Chinese glyph and making sure that it appears correctly so that's just kind of a limitation we live with thank you go ahead hi thank you for talk it was um very good uh I just wanted to know um what are your most recommended um places

to find fonts and um what are The Telltale things to know if it's readable so the question is where do we often find fonts and what what was the second part um and what are some signs that um are going to let you know that it's going to be a readable font it's going to be a readable font so the advantage of working for a really large company uh and some of the downsides too is that we are very Lim where we can find fonts from a licing perspective uh Sony has access to a huge variety of adobe style fonts so basically they're like you can pick whatever you want but it needs to be on the Adobe side uh as for readability uh we tested a lot of different fonts in the past with a bunch of users where we just put a bunch of like lur mips on text and we put them side by side and eventually kind of pick down to the one that we that we're looking for what I did do for for a lot of other languages was I was given a font for Arabic for instance and they're

like just go ahead and use this but I ended up turning back around to Native Arabic speakers particularly through our localization QA and said what do you think about this font and I'm really glad I did because they came back and they said it just looks like a textbook it's fine whatever but ultimately I then basically sat them down next to me as we went through adobe's huge library of Arabic fonts and we picked out one that we just liked and it worked out nice thank you so much mhm go ahead hi Zach thank you for the talk uh I'm a uh technical UI designer and uh you mentioned in the beginning that there aren't many talks on UI so with it being such a huge part of games why do you think that is so why do I think there's not a lot of UI talks I think it's because it's a really specialized skill set still uh you don't see a lot of UI positions for the most part or it's kind of a that only developed over the last 3 to 5 years the industry is going to catch on

uh but it's also one that's really limited on a title like Ragnarok we have 40 level designers uh where we only have a couple of UI folks so the need is always going to be smaller it's just like at a studio you may only need one writer so that is just kind of how it goes I I hope it does change over time though thank you yeah awesome talk super informative for all of us I think uh my question actually comes down to the connection between combat design and UI um as a combat designer I would love to know any tips or like Insight you have to what we could do to help UI and reduce pain points late in development when we realize that we have limitations um and any tips you have okay so question is like what how can you better foster a relationship between and the UI teams uh this is something we talk about a lot at Santa Monica uh the combat team drives a lot of design for us uh so the biggest thing is on the UI side being in

the room when decisions are being made that's probably the biggest thing we can just be a fly on thewall and kind of listen for when something needs an an extra piece of user interface or potentially another set of years uh that's probably the best thing to get started with anytime there's a new system being part of that the ideal setup is that you have a big kickoff and you have a bunch of people from a lot of different disciplines and having UI included as part of that just means they're kind of in the loop going forward awesome thank you so much yeah uh Hey thank you that was really good um my question is uh what was the process for you guys like uh when you do the UI and then knowing that you have to support a lot of different languages um it and with with fancy features like the font scaling uh did you guys experience a lot of problem s when you uh work on the UI and then everything is working well but only realized that it doesn't

really work in another language at all um was there a lot of back and forth or um did you guys do anything special throughout the uh throughout the production to to help solve this sort of issues so kind of a good culmination of that question is how do we make sure that we don't get bit later on for localization uh for me it came from experience uh I ran into that exact issue on Spider-Man and I spent 3 months fixing Korean and I was like I'm never doing this ever again so when I came on at Santa Monica my goal was like we're doing Dynamic layouts and this is how it's going to be uh so super early on into every system I built this expectation that it needed to have a dynamic layout and as we moved forward with every layout we would do all the way down to the wire framing we were always asking the question how does this how is this going to be supported in other languages how are we going to make sure that it doesn't have overlap or

have too too long of a space so unfortunately for a lot of localization it comes online really late sometimes maybe in the last five or six months where you actually get meaningful amounts of localization in and you can kind of test your UI at scale and it came online and it was crickets and I was like oh my gosh the world is exploding like why am I not getting any bugs like I did for Spider-Man and it was because the dynamic layouts worked which was really weird so you got a pre-plan for it right thank you yeah go ahead hey uh thanks for the talk I was wondering how the conversation went between you and your team um how it was when you were kind of talking about breaking your own rules specifically about overlap putting overlap on Kratos and was there any like disagreements and how did you kind of manage that conversation so how do we finally realize that we needed to break our own rules specifically around the enchantment screen uh it was through

feedback and through testing we had gone through two different play sessions with the enchantment system in the game and the first set of play tests we kind of ignored the feedback and we're like yeah it can't possibly be that bad and then once it repeats you know it's a real problem so at that point we started wire framing at the very beginning of like how can we redo this system but we were also under this really intense period of time where we needed to make sure whatever we did we could Implement fairly quickly and with a low amount of bugs so I actually ended up leading that wire framing to say what if we did this instead and people were like yep let's run with it which was great so we we had a great team with a lot of great communication cool thank you so much yep hi um I can see that you have very tight memory budget and I would like to know how you manage to support cjk in font sheet because um it tends to get

pretty big and we usually tend to narrow the use of character sets but I would like like to know how you um tackle this okay so you're asking how did we support Chinese uh languages specifically on the localization side yes yeah so this is kind of the sad truth is that we downscaled our god of War icon font down to 1024 x 1024 in order to upscale for 2048 x48 to give the body font which from a ux perspective is the most important thing the game The Players need to read that text uh that is more important than our icons despite the fact we put so much effort into making them look good that's how we did it uh that is a painful thing decision to make and I made that decision that's why we're looking at other solution iions to avoid having to make that decision ever again we ended up making that for Chinese for Japanese for Korean and for

Thai all the other languages kind of miraculously worked we were so close that it was fine and we get we could get away with that thank you very much y go ahead hey um a lot of the a lot of was answering a previous question but um just wanted to bring up um I work as a uiux designer um and I appreciated your insight into having the different panels be scalable to fit the content rather than the content having to be adjusted um I was wondering for like the max use cases of uh in got War Ragnarok like having Max font size and you know longer localizations like in Japanese and Korean that uh use like a larger width um are there like specific like fallbacks that your team had used to to do that did the panels um you know still adjust dynamically to fit it did you have to like work to like shrink any

particular lines of text did you have to like scroll it a big problem um for me as I work in a live service game and like the localization comes in late it comes in for a lot of different things it switches all the time and we have problems with it you know posterizing scrolling back and forth and bringing a lot of you know players like eye attention just to that text so I'm going to tryy to summarize a little bit of how do we make sure that our largest font size Works in all of our Dynamic uh layout conditions so we design from a perspective of the default layout that's the one we want to have looking the nicest from a pure graphic design perspective and we accept the fact that if you are pushing it all the way up to the highest text size it may not look great in all of the instances uh there are resources in the upper right hand corner which track your hacksilver and

some of your XP uh that kind of overrides or overlaps some UI in specific instances and we're like yep that's fine don't worry about it so you kind of have to figure out what you care about and what you don't care about we have a scrolling Solution on the cards and in a lot of places we made sure that we had scrolling uh in the future and this is kind of a time int I thing you get the uh ticker tape like you would see on CNN or something like that where the text will go off screen and then slowly like March on screen and this is really good when your text field can't go multi-line and has to stay inside of a very specific box and you see that a lot specifically in the settings menu where you have all of these settings listed down and you don't want to support multi-line because now your buttons are offset and because you're not actually scrolling your list uh smoothly that you run into problem s there so the ticker tape is ultimately like the sweet spot if you can do it right uh but it takes a lot of time to

make sure you can build that correctly thank you so much y hi there uh my name is Andrew um sounds like your team is a very supportive generous uh collaborative UI team uh as a UI designer and maybe others here we dread having to say no to something uh always want to be helpful and support what the user needs what the teams um were there any instances where you did have to push back a little more at something or had to say no to something and how did that go were there any places where we needed to say no uh I try not to say no a lot there are definitely places where I want to say no a lot uh the goal is it should be a conversation of like here are the limitations that we're running up against and if we feel like this feature or this piece is really important we now need to have a production conversation about what needs to get bumped next that

is not always how it goes but that is ideally the conversation about how we kind of handle it and there's a couple of instances a lot of his content that's cut I don't know if I can talk about uh that we ran into for that sure yeah I appreciate that thank you yep go ahead hi Zach thank for the thanks for the awesome talk I I to ask a question about what do you think about like building uh building visual effects into a UI UI element what do you think like the positive side on that negative side on that or do just like don't like to do that and just treat VFX as VFX especially for like onc screen like a not like nonusing gameplay uh style overlay stuff so how do I view VFX specifically in UI and kind of its role and its place uh vfxs are awesome they are the super extra polish element that you not always have the time to do uh the VFX team at Santa Monica gets pulled

in a lot of different ways so we end up being the ones who author most of the visual effects uh particularly if they're particles on our side so our team is looking for opportunities where we can learn some of this from that VFX team and bring that knowledge back and then we just do it all inhouse uh one of the reasons why our UI team is so diverse and it skill set compared to a lot of other teams where we have designers and we have programmers and we have artists is that we do so much of our stuff inh house inside of our own team in order to not change the trajectory or the scope or scale of other teams anytime we go out and do that it could be weeks before we get an answer or the answer could just be nope they are totally booked because they're doing something else so and a lot of times our artists are generalists and they actively go out and learn more about other techniques or other things in order to bring that back to the UI team in order to build read the polished UI elements thank you

y cool we are actually a little bit over time thank you so much for coming out uh we'll see you [Music] around