Inside Cloud Imperium Games: Developing the HUD

Transcript — every row opens the video at that moment

1. 00:00:00

   [Music] hey everybody I'm here with Johnny lyans our UI designer Johnny would you like to introduce yourself to everybody I'm John lyans I'm a UI designer and I've been brought on to the project to uh head up all the design and and UI elements uh inside the ships that you'll be interacting with when you're playing the game can you tell us how you came to Cloud Imperium games so my background is in film and television and uh I got a call from Travis who uh was referred to me from my work on Iron Man 3 where I did a bunch of the HUD design and and UI work in that film and uh it was at that point he explained to me what Star

2. 00:00:49

   Citizen is all about and and how the work that I was doing in in the film world you know could directly be applied to what's happening in the game world so you work with Zane and a bunch of the other guys in the office what is the workflow that you work on for the hood specifically so when I start a project like this I think it's really important to to become quite familiar with whatever it is that you're designing the interface graphics for for example The Hornet you know I'm creating the the HUD and all the interface sort of design elements for it and I believe that you know it should be cohesive and feel like it's part of the same system you know the design aesthetic of the ship should

3. 00:01:37

   be reflected in the UI I started out by just sort of flying around the ship getting a sense for some of the the design work and the the line work that's already been built into the ship you know just taking notes from some of the the forms and shapes that have already been created for this this particular asset from from there I'll just do a lot of sketches and uh I'll be very loose and very fast paced with sort of getting a lot of ideas out on paper and then I'll just like Loosely either scan in those sketches from the book or I'll just come in here and and draw you know freehand on top of the plate and vectorize it and make everything clean and and nice and work with a grid and do all my type face exploration in

4. 00:02:26

   illustrator and solidify all those ideas that were executed in in the sketching process it's different just because in film you know all the UI and stuff it's all just fake and we get to sort of you know make it up as you go but in the game environment all these things have to have a purpose and they have to have meaning and they have to sort of you know function as an aid to the player so I worked on the the design for about a week and a half and then worked on the the animation for a few days and that's kind of brought us to where we're at but there's also been a lot that's kind of gone into it just to get to this point for example if you see this reticle is actual 3D object and so taking that Vector design that you saw

5. 00:03:17

   over here knowing that we wanted to fly in and be threedimensional and then eventually end up looking like this taking that design that I created that 2D Vector art and illustrate uh I can then bring it into uh Cinema 4D and and extrude all the pieces and place them in their own depth and and animate them accordingly and uh and then I'll be able to export that out for the developers to to work it into the game so what Johnny's focus is in this whole workflow is to come up with a high level visual concept of the HUD which includes uh the animation of the bootup squids and also um sort of like the damage States and how that sort of animates and what my focus is in this workflow is to

6. 00:04:05

   take that and then animate it so that it gets translated into an in-game asset which I can then hand over to Brandon Zane hands that flash file off to me and I plug it into the engine and make sure that the uh C++ code is interfacing with it properly so the cool thing about how we're developing this game uh is that we're releasing it piece by piece and so this for this first dog fighting module the work that we're doing on this HUD we'll be able to put put it out there to the players and get feedback on that what things could be improved uh what sections of the HUD are readable or not readable and then we'll be able to fold that feedback into future iterations of the HUD on different ships and even the Anvil HUD in Star Citizen uh there's not a lot of abstraction in how the ships function everything is a real part that actually exists in the

7. 00:04:53

   system and all of those parts need to actually communicate with each other so I've been doing a lot of work to make sure that there's interconnectivity between all of the various ship systems and making sure that those have a way to communicate with all the various output devices like the player's HUD so our goal is to create a really cool HUD a really immersive experience and one of the ways that we're doing this is to actually diversify the visual style of Hud uh by ship manufacturer so right now we're sort of initially concepting the uh visual look and feel and design language for the Hornet or anvil space rather so you'll see the same style in the uh Hornet and Gladiator but later on when we actually get this workflow going and and we start fleshing out more HUD

8. 00:05:41

   designs they're actually going to be way different so for in a trading ship like uh the moushi ships you'll be able to you're going to be able to expect a whole different experience because the visuals language will be different well there's a lot of systems that are going to be uh brought in to star a citizen and you're going to need to interface face into all of those so uh we're thinking about things like navigation star Maps things like that uh possibly trade interfaces uh all of that is going to be done in World there won't be any sort of game abstract UI so there's a lot of stuff to look forward to doing going forward one thing what we're doing is we're defining different color spaces that'll be applied to different things for example customizability of these different color spaces so user can take

9. 00:06:30

   the red color space Or the critical alert color space and assign a different uh RGB value or color to that so that it's more readable to them coming from you know my background not really being much of a gamer or anything I sort of offer a fresh perspective and maybe like a new set of eyes and I would maybe approach problems and tasks in a in a different way than regular designers in the game industry would because they sort of know the limitations and and they know sort of the boundaries of you know where they need to be working in but for me I don't really know anything about that so I'm just kind of you know doing my thing and then we'll work to to incorporate it into a you know a usable state for gamepl