 Hello guys, welcome back to another idle game tutorial. This is part of the idle game tutorial series with unity C sharp This is episode 9 Previously I did by max and today I'm gonna be doing some general good UI practices So if you're looking at my user interface right here, it's not very good. Excuse me Um, so we're not gonna be going off of this today. We're going. Oh my gosh. What do you want? We're going to be going off of my game Crypto clickers. So if you've heard of crypto clickers, I've been let's ignore this error. It's I'm I have unity 2018 19. It's a buggy Um So I've been remodeling this I've been changing the UI. I've been learning some new things about how to manage UI How to do a good job how to make it display? Well, and I'm still improving it may not be perfect my advice may not be perfect and some people may May I agree with my or agree to disagree with my advice? but my goals is to Uh Just give you some tips that could make life a lot easier, I guess and make it easier to read on the eye All right, so first we're gonna start with colors. So make sure you have a really consistent color theme So you can see my buttons here are really consistent We're gonna play the game. Just so you guys can see Since I really don't want to like disable all the canvas groups So yeah, we have purple We have a yellowish just to give it a more vibrant color, I guess not vibrant, but a different color Do we have an error? Yeah, I had a feeling we had an error Oops Sorry, it's really lucky All right Okay, we fix maybe Ignore the errors, but basically What I try to do is keep the game on the main page and then keep menu stuff to the side So we have like our achievements. We can access to the menu. It's really fast and easy You don't want slow and sluggish animations that go from left to right, which is what the old crew clickers do We need quick stuff so you can just access that boom boom boom settings. Okay. I want to go to that Um, yeah, so see how my color theme is really consistent. It looks nice at the same time There's nothing too much going on so that's kind of the whole goal and Page changing there should be no transitions Kind of hard to see when I have things unlocked or things locked but Keep color a key of unlocking something so For example, oh Why is it doing this? This is really annoying. I can't show you but basically Okay, this is embarrassing honestly Okay, so anyways basically if you are able to unlock something you have enough currency to buy upgrade Make sure like you change like that like notify the user like how they supposed to know without looking at the tabs instead of Just jamming everything on one page make the text for the generators light up green and So then the user like oh, I can buy a generator with my whatever points I don't do that with upgrades because that's pretty much one of the most common pages. You are on so you're just out of here here a lot and The same can be done With anything else honestly if you've unlocked something notify the user put like an explanation mark or a tool tip or change color of text or something like that So prestige system now I like to display my number is big So you're like ah, this is what it looks like makes you Loud and proud basically This is not what supposed to look like this is supposed to be green But what I like to do is instead of sticking to the color theme Just use the generic red and green whenever the multiplier on reset is red Don't reset it if it's green then reset it it really depends on your prestige mechanic though But what I do is if this stat on hard fork Which is the prestige system is greater than the current stat it's red if it's greater than it then it's green Which means it's safe to prestige I Always use a confirmation on stuff that you could potentially use value For example prestige there should be a confirmation no matter what Because you can just act like that boom diggers your progress Regardless if this multiplier here is less than your current stat, please user your confirmations It's really useful and people will love it And if they don't then settings, it's really useful. So I have my prestige animations To be confirmations. I have all that good stuff All right What's next? What's next? What's next? Yeah, back to the pages make sure everything's not crammed on one page It just makes it easier to read because it makes everything complicated I don't know if you saw it earlier, but there's a server button here This is unlocked by completing a challenge Let's show it why not See based on see again back to the color theme. I haven't used any of this color So I was like, you know what why not use it for the server? I thought it turned out pretty good So when an upgrade is completed, we want to again alert the user that we can't buy any more All right, so we're gonna do this we're gonna turn this off Oh wrong thing. We need to change this to zero change just the one Canvas group basically just toggles everything without disabling all the screws inside See we need to change our color In my code it changes to this color. So this is what it looks like on max so whenever an upgrade is completed it changes to this color and All the text changes as well So this is a good way to just know that to the new blah, blah, this is a good way to show the user that you completely bought all the possible upgrades for that certain Also, sorry if I'm talking really fast or if my voice kind of sounds weird I got a spring in my braces a week ago and Yeah, it's just hard to talk So yeah, that's just a really good recommendation to make sure people know that their upgrades are but Anyways, let's turn everything back to normal You know what since while Matt it I can show you the generators and stuff Drones is nothing really special. So I'm not gonna show that Generators is just another list of upgrades See, it's pretty easy to read the cost is Cost is there See You I have my buy max. I have my buy if you remember the previous episode I was talking about drones. I have this other buy max in this page It's very helpful, but I Don't like to display everything on one button kind of like how We've been doing here. This doesn't look nice honestly and tabs for buttons, honestly, they don't look nice to me either. I think Just as long as it looks like you can click on these texts Then it should be good to go But I need to work on that because these look like text honestly less more like buttons But yeah, I use buttons that look good not too bulky and colorful something basic and something that opposes the generic Theme so also another thing Please stick to a thought a darker theme. No one likes bright games. Just shine bright in your fight right in your face Late at night sucks, okay, so I suck to a dark purplish tint And all my text is completely opposite. It's all white. It's easy to read. It's not too irate You know, so don't do a white background with dark text. It's just not good at all. That's just one of my major recommendations for you It's kind of like if you're on discord and everyone's playing about the light theme. You'll see why Give you a headache Okay, so this is not really user interface I need to go back to my game But this is good for mobile users For battery saving make sure you have a target FPS. So I have 30 I have 15 This basically just changes the v-sync to that and your options are 16 30 15 120 and I'm not sure but I think there's 144 But that doesn't matter so make sure you have those Also, you could see that there's this little bar for wherever I go to page These are also good to indicate. Oh, this is where I'm at Either change the color or just have something to indicate that you're currently on the prestige page These are some minor things but The it'll it'll really make things look a lot better in general And make sure you don't have too many numbers clamped together because it makes it just gets really a loss and confusing Spacings out you have a whole screen of space Don't do it too much where You know, you have the claim button on the upgrades or you know the claim value and stats It's just you know use your space efficiently. That's the number one key for using your user interface As good as you can and if you need to add more buttons here Go ahead just don't add too many because I have a sixth one And I'm starting to consider making like, you know an arrow right here an arrow right here Or you can just click the next one or another drop-down drop-downs are also a good idea But yeah, don't cram everything into one page it just doesn't look good But you want to space things out, but you want to make it fast. It's simple. You want to be like, okay upgrades boom Boom, you know, you want to be you know Fast about it. You can change pages fast Click upgrade by max there. Yeah, I'm playing upgrades by max. You know, it's pretty easy to like navigate I was gonna say something about the speed. Oh, yes So in my game I have improving where once it hits level 10, you can reset it to give a two times boost But you still keep your value. It's just the cost doubles or whatever it is Same for value to speed one. However, there's 38 upgrades Splans 10 for some reason And whenever it reaches 38th, you can reset it to get 10 times boost But you lose your speed So that is a good Factor or a good time to add a confirmation because you're losing speed instead of clicking super fast Once you improve you're clicking really slow again, but you get that boost So you just add a confirmation people like them and again, you can disable them in settings if you add them Anyways, I think that's all the tips I have make sure you have a thick a bold fonts nothing too thin I wouldn't go any lighter than what I have because it It's hard to read for some people But yeah, that's pretty much all I have for user interface tips and stuff like that anyways Hope you enjoyed this video. I will see you in episode 10. Make sure you subscribe and you Turn on notifications so you know when I upload the next tutorial and thanks for watching peace My mama just can't get you off me keep it moving They ain't worth it yet. That's what my father taught me. But for now, I'm going through the motions of letting go My mind's telling me yes, but my heart really don't know your heart when I gotta know it yet I still see a glow so we have the hottest love why'd you leave me in the