Pixel Art Class - Intro to Game UI

people love to scan they love to move faster than they have to think and allowing your interface to be as scannable as possible is really really important [Music] so if you're going to be doing UI in your pixel art game there are a few things that you want to understand and take stock of there's UX and there's UI these are sort of separate concepts so if you're thinking about like a like a house the architect does the stuff that UX it relates to and the interior decorator does the UI stuff right so they're both design UI relates more to things like appearance this sort of informs that right you sort of derive your UI once your UX is determined when it comes to pixel art your pixel art games are going to be running into the same challenges as any other kind of game or any other kind of application right even though your players players they're still users of your interface and that's what the U in UX and UI stands for its user there's a whole back catalog of design methodology that you can use to fall back on but I'm gonna give you a really quick kind of insight into sort of the way I think about this stuff having a UX background and specifically how I do it with pixel art games the main thing you're gonna be thinking about first is you've got your game you know how it plays you've got your user interface for the actual game itself to the HUD and then you have your menus and the UI that relates around that if you check any kind of boilerplate you are you've done any kind of web development or app development if you've even used a computer you know what all of these components are right these are really common interface elements that allow you to engage with your application design is really like a language and if you speak the same language as the user then there's less for them to interpret and to learn and it's something that's cultural it changes over time different cultures might have different ways of thinking about things for example you know some cultures their language is read right to left instead of left to right as far as how this applies to your game and what I advise you to do so in this tutorial we're just going to keep things really really basic so I'm gonna just cover some of these core components I'm gonna explain how they work and I'm gonna show you some examples now you won't necessarily need all of these in your game right it's really dependent on what you need and the effort of doing a UI should always start with your requirements right the job of providing a user interface we're designing a user interface starts with the actual needs the user needs for the sake of the game you know allowing them to do whatever they need to do so text input this is called like a field this is a checkbox this is a radio button this is a regular button drop-down slider and I want to focus on these ones today text fields obviously it requires some sort of text input so you're assuming that the player has a keyboard or some sort of text entry and the point of it is to assign a string to whatever it is you want to do so in insignia I have a text box for when the player is writing their name into the save file it's basically the only text box in the game but it's a way that I need the plane to be able to differentiate themselves or their save file from the other save files in the game how do we do that I've got an input something that's you know likely to be unique so text fields that tend to be a good way to do that a check box what do we use checkboxes for checkboxes are for when we have multiple options that can be true or false or enabled or disabled independently of each other so if you want this and this that's check boxes on the other hand radio buttons come from basically the old cars so the way these work is you can only push one in at a time the others pop out so that's where the name radio button comes from tabs are very similar to radio buttons you can only pick one at a time but they tend to change the display in some way so basically if you have your tabs you got you know a B C you'll have some information below clicking a tab changes which information is shown below so buttons are pretty simple buttons take you places they let you choose options you're moving forward you're pressing ok you're confirming something the button label is often called the call to action CTA for short it's the text that describes what it is you're going to be doing when you do it oftentimes it's an encouragement to do that thing and in apps maybe a little bit less so in games but with apps specifically oftentimes there is a primary and a secondary or tertiary option and so we style things differently based on that sliders for scale values when you want to pick between two things and your number can be somewhere between them you can have free sliding scales or you can have sliders with breakpoints up to you I just wanted to take a second to talk about a few different input types and how they change UI a little bit so you notice that on a PC we have a cursor and that lets us sort of hover over anything that we want and it means that some things that are clickable don't look clickable until you hover over them and then they change state on mobile this is something that you don't really have the luxury off because there is no cursor right you just click things so we have these free sort of input modes on you know when we have a mouse and we have a finger but a lot of games specifically games that use controllers basically have this idea of what's called like point-to-point interaction and this idea of a focus or the focus state is a really important one some sort of UI indication an element that shows up on screen to tell you where you are right with a cursor you know where you are because you can just see the pointer on the screen you know where you're clicking phone but with a game with a gamepad you need to know which element is being focused before you can select it generally speaking this becomes a huge point of design and something that we spent a lot of time thinking about when you have multiple elements that you can select between if I'm here on this element and I want to move to this element do I press up which one do I go to is it this one or this one a lot of thinking goes into that it's something that you're going to be you know spending a lot of time dealing with so looking at some of these examples you can see here basically the way that it works in our boy the focus being shown by these little corners on the current element and you can see that the elements on each of the each of the components are actually arranged in a like in an aligned way it makes sense to expect to be able to move between these in a way that's clear downward and a cross in a way that's clear horizontally because it's aligned in a kind of a grid there's also a difference in color in the options color is a huge aspect of UI design because it tells you what the game expects you to press at any given time so the primary options versus secondary options options that might do permanent effects things you should be careful of and options that are less important may be there in the background so here's a really good example of all three of those in each of these it's clear the primary example is the one that's got the most contrast we've got a light color here for this continue option for the background whereas erase has a more warm color it's tinted towards red that tells you that there's something that you know is potentially hazardous behind this button likewise we've got in transparent this back to main menu option it's still readable but it's clear because of the arrow even if you don't read it that we're gonna go back in I chronic lasts we have a kind of a cursor the option gets outlined there's a little bit of a pointer that appears there the further lengths that you go to embellish your UI and specifically to communicate to the player about what's selected how things move what's going to happen when you do X Y all said all of this refers to what we call feedback feedback is the way that when a user interfaces with the system it's the way the system communicates back to the players feedback so your game is gonna have some kind of an art style and there is I think a benefit in being able to achieve a UI sort of aesthetic that matches the theme of your game right you're making a pixel art game that's already quite stylized in and of itself so there's definitely advantages and reasons why you want to you know push that this leads me to this idea right of what we call skill morphism so skeuomorphism is a concept kind of like a visual metaphor okay this is something that I lean on a lot with insignia it's definitely not something that you need to that you need to do in your games style is such a inherent part of what it means what it means to make a pixel art game skeuomorphism sort of is a way of leaning into that so let's look at some examples here and I think this is moonlighter we've got a chest right and the actual contents of the chest are being displayed in a visual chest so you could imagine I'm not sure if it animates in the game but you could imagine this literally opening up from the top from the bottom up and actually showing you the items likewise you know we have like pages right the idea of actually putting pages on the screen this is very similar to what we've got here in our boy where the save the saves are actually on pieces of paper now skeuomorphism is something that you can definitely have sliding scales for so not everything needs to be fully secured morphic for example you know the text on this paper it's not it doesn't look like it's written in it's a scale sometimes you know you need to be mindful of practicality and sometimes you can be more stylistic this is a back and forth the I think biggest example that I could pick from any kind of recent modern software is the way the I think it's Apple books or Apple library on the iPhone works where if you have like your ebook you turn the page in the exact same way you turn a page in real life right and it looks like you could turn the page because there's a little lifted corner on the screen so this idea that you use your real world knowledge of how to interact with something the the UI tells you that you can do it that way by way what we call affordances as a way of sort of helping your intuition understand what you're supposed to do with it that's peek skeuomorphism so in this example in Insignia you have these tabs and in a real book the tabs break up sections of a book and in my in my UI the tabs also break up sections when you press the left and right trigger buttons they actually skip through the sections of the game so that's just a fun little thing it doesn't have to be that way and oftentimes if you lean too far into this you get stuck in sort of an obscure territory where players don't really know how to do the thing that you're trying to tell them to do Insignia my save files are books and every time you start a new save file the stack of books gets one book bigger so there's sort of this metaphor is something that I use a lot in the game of books where the red book is your journal it's actually an in-game item that appears as the user interface as the menu and it's the save file and so it's all sort of one metaphor it's really hard to do that in games and most of the time it'll be lost on your players but I think sometimes those little things they some aspect of it sort of creeps through so let's say we're coming up with a really simple UI and say we've got an option that we want the player to be able to interface with I'm gonna pick a really simple font here because I want it to be readable so I'm gonna pick the Armin font from insignia and I'm just gonna say we have an instruction right it's just floating in space let's think about how we can make this something that the player knows they can click and how do we communicate that it's the thing that we want them to click so first of all it doesn't look like a UI element yet right right now it just looks like text on the screen it's not particularly legible because it contrasts pretty poorly with this stuff here so it also doesn't give us any kind of indication of where we should press on it and actually to do anything so let's first give it a stronger color against this background this makes it a little more readable we can also define an area around which the button exists so we can come over here and give it an outline this is very simple not very stylized yet but it's very clear now that there is a region associated with this if we want to go one step further we can give that region a background at least now we know that there is a label it's clear it's very easy to read we have full control over the contrast and we can explain to the player now that we want them to be able to press it so the first sort of very very entry-level skeuomorphism that you'll be sort of introduced to or familiar with when it comes to things like buttons is the idea of depth and a shadow so currently we've got something that's very flat if we want it to look like it's pressable we give it some depth because buttons get pushed down right so this allows us to immediately just a couple pixels below lets us know oh this can be pushed down into a state that is more like this so we know that we could push something down if it sits above the base layer of the UI and we've got some of that depth to show there are more things you can do for sure to communicate that something is pressable you can give it any kind of embellishments that you want sometimes you know stylizing with rounded corners that things like that help you can give it a sort of like a like a Bey that it sits inside of right to really communicate the fact that it's gonna go down into something and now it's like abundantly clear right it should be that you can press this so that's a button very very simple very straightforward so we can evaluate this really quickly I think it's clear that it's a button and it's got good contrast it's worth considering whether or not the label is a good label so not every you know not all labels are made equal if this said just the word game is that enough you know what does what does game do on its own if I push the game button maybe the game starts but definitely a verb is far far more helpful as far as when you are doing any kind of copywriting if there's a button giving it an action word in front of the thing that it's relating to what helps the player really understand what the thing's gonna do so start game begin game play if it's obvious that you're in a game just having the action can be enough very clear assuming I'm in a game this plays the game now if we wanted to sort of create a secondary button here say there was another option something like settings right and we wanted to help the player understand which button they want to press first I know that sounds like almost condescension like I know that when I'm speaking in this way it sounds like I'm treating the player someone whose sake silly or doesn't understand there's two things the first thing is that all different kinds of people could be playing your game maybe then they don't speak natively the language that you have written the game in maybe they're very young and they're just learning to read they could have very poor eyesight all right so there's a lot of different demographics and you want to make sure that your interface speaks to as many people as possible but the other side is that even very very intelligent people don't spend a lot of time on interfaces people love to scan they love to move faster than they have to think and allowing your interface to be as scannable as possible is really really important so being able to clearly identify which button I should be looking at just when I load up the screen rather than having to read every item that's really really important so it's not really about like laziness it's it's really just that people move quickly that's just what it is let's just say we had two buttons and we wanted to sort of communicate that one of them was the main button and the other one was like a secondary button or not you know not as important we could do styling stylistic differences we could make this one look less clickable but I don't think that's necessarily the way you always want to go so our options are we've talked about contrast we bought we want them both to have some sort of contrast you can like I said you can knock it back so make it less less selectable or less salient right less clarity but this then could be confused with say for example the button being disabled so if you wanted to have a secondary option we've talked about contrast and brightness talked about alpha the next one is color so hue and saturation so what I would do is if I had like a primary button you know I would consider like giving it a color and this would become like really clear if we had like three options having an option that was less saturated less of a color with it immediately this one stands out a lot more because our eyes are designed to look for brighter colors it's just part of that sort of low-level psychological kind of wiring that we're all built into we've talked about showing that these are buttons we've talked about just making them distinct from each other but there's also another layer to this you can think about which is grouping so you have like a lot of buttons and some of the buttons have similar functionality or relate to one thing and other buttons relate to something else you can use we've talked about Gestalt principles on the string before you can use those principles to help guide the player around so for example these three buttons are separate from this button even if they have different labels the fact that they're next to each other gives you some sort of indication that they belong together and especially even if you don't have a title but especially if you do have a title above them it helps really explain to the player that there's a relationship between them you know maybe even giving it sort of like an underline that runs along to the button to the other buttons it's a really really useful way of creating hierarchy so all of this stuff is about hierarchy it's about again telling the player what's important versus what's not important and allowing them to sort of do that visual sorting as quickly as possible it's not always about just whether they'll get to the finish line it's like how how easily did they get to the finish line and we will use this word intuitive everyone knows what that word means not everyone can explain why something is intuitive why especially users will very rarely be able to explain in clear terms why something is intuitive but they know that it is and so as designers our job is to sort of help them get around Internet in a way that's as invisible as possible I think the next most important thing to talk about is style and talking specifically about how to bring your game style into your UI so so far all we've been really doing is adding elements for the sake of clarity but obviously your games gonna have a style at some point unless your style is like very simple computer style like an operating system in your game you're going to want to bring some of that flavor into your UI so I like to do fantasy stuff and I'm gonna give this kind of like a fantasy skin now obviously buttons didn't really exist back in the day but we can sort of take some of the things that we know about the tools and things that people interacted with back in the Middle Ages or whatever and sort of bring them forward to hear sort of like how in the Insignia UI I've got these like pegs and sliders we've got ideas from things that we used on weights a lot of different gadgets and tools that were still used there were still interfaces that's been around as long as there have been tools so we can bring some of that in here as well so if we want to go for something like paper I mean that's pretty straightforward you can really really easily just do things like break break stuff up a little bit if you want to think about you know ink maybe this is a bit of little imperfections here and there you can give a very soft sort of shadow so you could start thinking about giving the gimme giving you your UI some some texture maybe you've got like a little bit of a lip on it and you want to sort of create like like an outline now this is this is a pretty like pretty gross example here obviously we're going a bit overboard but you know now this looks more like a piece of paper we're having fun with it at the moment you can always rein it back in if you want and I'm just making an example obviously so you know even things like adding like a tear here and there you know maybe you've got a little bit missing this is sort of still in the world of aesthetics not quite skeuomorphism yet but we have some opportunities right so let's just say we had a text field and we one of the plants and know they could write in a specific area you know maybe we would use like a pen tip so I know I said we were going fantasy we might be able to get there like a quill that's a really common one in games like Final Fantasy but you see like a little feather to let you know that you can write in a specific area and maybe that's like our that would give that a bit of an outline maybe that's our cursor right and that moves around as we're working so paper quill yeah it's like a scroll right we can reinforce that too we can give it like more of like a rounded bit here and come over this way come up underneath nice and easy not quite that dark so already we've got a little bit of a style coming along that's not a bad idea too so we could have some sort of like X to tell you where to sign if I was to do that I'd be really careful to make sure it was something more knocked back but it didn't look like it was a piece of UI so I would make it a really light X you know not quite as clear because if you use like a phone X next to a text field usually means clear so keeping a nice separation between the things that are stuff you can interact with and things that you can't is a really important thing you always want to be careful of that balance and definitely if you do any kind of testing of your app or game with anybody you'll straightaway notice when players do and don't understand certain things this is like not something that you'll need to like put a lot of effort finding out whether or not players understand what's going on as soon as you test it in any capacity you'll know immediately because they just won't get it and they'll tell you when they don't get it so really simple stuff like from here we could skim this a completely different way it picks a lot police are coming to take me away the next thing that I want to show you is just an example of feedback and how you can sort of use animation to extend the feedback of your game or really create a sense of feedback that's strong tends to be pretty easy to shift things around whether in an interface more so than if you're doing any kind of animation for characters or things like that so it's a good idea to start breaking things up into the base sort of components so here I've got like the button face I've got our sort of housing and then I'm gonna do a background here as well in a sprite you can do what's called linking cells so you can drag a bunch of stuff and then link them together and anything that's not going to move you can do that so housing will link that as well and then I'll just take the play button and then we'll animate that so obviously this is like the default state the states of buttons is something that you'll notice in unity or any kind of system that you're into you'll probably notice that there are different points where you want the button to look a certain way depending on how the user is interacting with it so let's just say whether you've got like a controller or a mouse this is something that's it's in fact all three of our inputs have this idea of holding so this would be the default state this would be the depressed state or the down state so the buttons down down if you just leave it there sometimes you have like a bit of a color feedback that it's being pushed down right if we were like on say the PlayStation or something and you just had like a controller you could again give it some sort of hotline when it was selected or some sort of visual thing to say that we're hovering you can also do a hover by you know giving an outline so we can go and we give it a very slight outline to say that we're hovering over it it doesn't need to be a lot it just needs to be something that's different so hava is a very soft form of a focus state but if we're talking about the point-to-point systems like game controllers you generally do want the selected item to be quite distinct from the other items having there be some sort of like really clear like something to say oh this is the button that it's being selected right now over the other things is really important we want to do like a button press animation or a series of states so we've got the default state press state you can have a release animation to give feedback that the play actually pressed the thing oftentimes if you have systems that have any kind of delay between pressing the thing and seeing the result of what you pressed it's really important and can be very helpful to tell the player visually that their input has actually done something so let's just say you're about to load a level and at the level takes three seconds to load you can do a bunch of different things to communicate but that's happening so let's first just give some feedback and we can do some fun stuff here we can just do a little bit of a maybe maybe there's like a little splash of something that bounces out all right so maybe we just have some sort of visual flair obviously this is very rough to say hey you press the button good job there's also if there is something that's loading that's beyond the fact that they've pressed the button but now you want to tell them that hey I know you've pressed the button thank you very much now please be patient while something happens you can give feedback for that too so you could have a little look I do a very good job of this but a little spinner telling them hey you know it's loading just just be patient please so what I've shown you today is very simple stuff it's very rudimentary UI design and there's way more than we could go into about navigation and hierarchy it's really a deep area but I hope this was a nice introductory episode for you and I hope you stick around hey pal thanks for watching and thanks most especially to the patrons and twitch subs who support this channel and my game dev project insignia to find out more click the links in the description below and if you liked this video tell youtube by clicking the like button and then YouTube will tell me and then I'll make more videos that's nice

Channel: AdamCYounis

Views: 53,516

Keywords: game development, pixel art, game dev, game, video game, indie games, stream

Id: o3VHJ7g7M08

Length: 32min 16sec (1936 seconds)

Published: Fri Jun 26 2020