soundtylermorgan

[soundtylermorgan]

From watching this video I have seen how huds and Ui can be very vital to a game and make the player have an easier time digesting impormation with it being very simple and shown on screen.

This video goes very in depth on how ui works where and when it should be used and what makes certain Ui good. Below here I will go over some of the things spoke about in the video.

Gauges:

These are the most default kinds of hud we are used to where they get numbers and information from the game that would normally be invisible and show it to the player. these numbers could be ammo healthbar minimap what mode your on and so on. 

Previews:

Previews are about showing the player something that will happen in the future if you do something. A very simple version of this is the classic overlay that shows you that button x opens door. However more complicated examples of this would be the angle a grenade would go if the player threw it. These are useful as they can help the player make a more tactical approach to the game.

Sacrificing Ui for the sake of realism (and workarounds):

Some games that are going for a very realistic approach of a game decide to remove certain piece of the ui but there are better methods that help show the ui and keep realism at the same time.

[soundtylermorgan]

Figma / Graphic Designers

Now I’ll be looking into websites for Ui design and some Designers aswell to understand how these websites make it easier and how actual designers use these softwares and other things to help there work.

Figma: This is a website for people Ui designers mainly website and app focused. The app keeps things basic and makes creating a website easy and simple by using simple buttons on the side that do exactly what they are needed to on top of this they make it very clear where each button click will go with its flow chart sort of system.

Zander Whitehurst: Zander is a Designer Who not only uses figma but also does mini tutorials on how to improve as a graphic designer and I will be using some of his tutorials if I do more menu ui design stuff as it will be very useful to have as much knowledge as possible next time.

[soundtylermorgan]

Colour in Games Menus

Looking into more Ui in games I am now looking further into Colours used in menus and why they have chosen certain colours for it. this blog post will go into many different things about why colours are chosen.

Primary Colours:  A primary color is the color displayed most frequently across your Menu’s screens and components. You can use this colour to make a whole colour theme if you use the darker and lighter variants of it 

Secondary Colours: A secondary color has more ways to distinguish your product. Having a secondary color is optional, and should be used sparingly to bring out select parts of your UI. You do not always have to use a secondary colour and if it is used use it sparingly.

Secondary colours are used for:

Floating action buttons

Selection controls, like sliders and switches

Highlighting selected text

Progress bars

Links and headlines

Source: https://material.io/design/color/the-color-system.html#color-theme-creation

[soundtylermorgan]

User experience Regarding Menus

Now after looking into Ux I now am going to talk about how this is used and can make a player enjoy a game alot more instead of giving them a headache trying to navigate between the menu.

To start with a example of bad Ux is in warframe the button to skip text is also the same as restarting a mission. So when players were dying and retrying missions with text they had already read they would naturally skip it spamming the x button in return after the text it would restart the mission again as restart is the same button and the text had ended. If they wanted to fix this they could of either changed the button entirely or made the button a hold input instead of a instant one.

Next talking about how to make Ux better for game menus the main thing is to keep things simple and make the things that matter stand out so that all player get what is important and where to find it. With this you also dont want too much on one screen as it can over complicate the menu and make people get lost inside of it.

[soundtylermorgan]

What is Ui / Ux design

Ui (User Interface):

For user interface it mainly focuses on the looks and design / layout side of making a menu. By this I mean button, image, text, font, size and any other thing that that a user will interact with.

Ux (User Experience):

User experience is the focus of making the user overall experience as pleasant and easy as possible good Ux is decided by how easy someone can get through a menu or screen without having to think to hard about it or get confused.

How they Work together:

Ui and Ux really go hand in hand to each other meaning that if you can perfect both of them you will have a really nice looking and well made menu / website.

A good Ui can look amazing but really messy to work around if no Ux is taken into consideration thats why when Designing Ui you must be constantly thinking about the Ux to make sure the customer is happy with going round your site with no issues.

Source: https://webflow.com/blog/ux-vs-ui-design?utm_source=google&utm_medium=search&utm_campaign=general-paid-workhorse&utm_term=keyword-targeting&utm_content=dynamic-search-ads-t1&gclid=Cj0KCQiAu62QBhC7ARIsALXijXQreF-JIpHW7ktvFs_kzN3CHdA7pEav9Zi5eAdlvtIGXKL6CKxjE2MaAr2jEALw_wcB

[soundtylermorgan]

Evaluation

What went well:

In this project I think quiet alot went very well As I was able to learn alot of new thing not only about settings but about unreal Widgets as a whole. First off I really enjoyed learning about all these different settings and how they actually change in unreal engine, Some of my favourites include Re Binding keys and changing player frame rates and sensitivity. 

Secondly I am really glad that I know alot more about the widget tool in unreal like scroll wheel boxes, Horizontal boxes, ComboStrings and so on as these are useful for future things that I will be making with widgets.

Finally I am happy with making my menu able to work with not only mouse but keypad and controller aswell. This is something I didn't think I could figure out but it was surprisingly simple enough to do.

What could of gone better:

As well as this project went there is still so much more I could of done as there are millions and millions of other options and things I could of done. One of the main things I wanted to do was Add a bunch of different audio options. I sadly never go around to doing this as I was focused on other things and never really came back to the idea of finishing it.

On top of this I also wish I could of added more key bindings to change however that would of needed me to change the whole movement of the default third person character and that lead me to choose to do other things instead of that.

Finally I feel like I Could of Done a bit more If I didn't take too long finding out harder things that ended out to not work and that made my final work a bit less as of what it could of been.

What will I do differently next time:

Next time I think I should try and stop doing something after it has taken me way to much time as I found out I lost alot of time that I could of used to make many other options that I didn't get to add. 

I also would like to do more at home next time as if i have worked more at home I maybe could of added many things that didn't get added On top of this I want to do more blog work at home as I always end up leaving a big chunk till the end and from there end up having to rush them all at the end.

Finally I think I could of planned this better and If I could of stuck to my plan a bit better than I did. I believe that I could of made more progress than I ended up doing. I think my issue is getting to stuck up on one thing and taking that idea further to a point where I forgot and leave behind the plan I made.

Conclusion:

Overall I am actually really happy with the menu I was able to create Even If it didn't make it into the final menu I learned alot of thing about unreal engine to do with settings and the unreal widget menu. Ive wanted to make something like this for a while and I'm glad I could make something I think is really cool.

[soundtylermorgan]

Making A Video Of My Project

For our project we need to make a video with audio in it luckily I have sound effects in my menu and in my game making audio already in the video from the start. 

As of how I'm going to make the video instead of having a stop and start from obs I'm actually gonna record each part of the menu singularly then edit them together Inside of After effects as I am similar with the software.

Link to video here:

https://youtu.be/ASJR0OcHxxA

[soundtylermorgan]

Making the Main Menu

For making A main menu as my Focus is the settings I just rushed to put one together that leads to the game itself so that you can access the menu and so you can exit the game.

Simple code that leads to the next level and closed on clicked.

[soundtylermorgan]

Restore to Default Settings

Now I have Added a restore to default option for all of my Widget menus When ever this button is clicked it will have a line of code that will set everything to its default settings that I have decided 

[soundtylermorgan]

Further Progress on the actual Menu

For progress I have now made on the Menu I have now fully completed the layout and have put all setting into there widget on top of that I have also nearly completed coding it all so all the settings actually change something Now the only Issue I am having is actually getting the menu to save what the options looked like instead of reverting to there default option

Options Menu:

Display Settings:

,Audio Settings:

Mouse Settings:

Key bindings:

[soundtylermorgan]

Changing the games default setting to match my setting at launch

Through making this menu I have found out that the defaults I put into it actually don't match my game until I apply the settings this means that the settings showing are not correct. My fix to this will be to put a bit of code on start up that will change all of the games graphics to match my default ones I have placed in the Menu.

[soundtylermorgan]

Turning volume on and off

I wanted there to be a tick box to make the player able to turn on and off there audio if they need to. But trying this for the first time was not working as I was checking with if the slider was locked or not at first which did not work.

To fix this I changed out to use the check mark and see if that was ticked or not to make my code work from there and made the code of the volume work.

[soundtylermorgan]

Changing Gamma in a slider

For my menu I needed to have my gamma change in a different way to a bung of different buttons as it would look messy and ruin my menu. So i decided to try and get it to work in a slider to make it easier and more compact. To get Gamma to work in sliders in I decided to go for a simple branch path that would check whenever the slider changed what number it was on and if the slider was on that number the gamma would be changed to that.

[soundtylermorgan]

Using step size on sliders

Looking at sliders on my menu I wanted a way for them to lock into certain number like how other games have done. To do this I found a seeting in the sliders menu called the step size that will now make that option available this will help with gamma sliders and also some audio aspects.

[soundtylermorgan]

Controller and Keypad Support

A main thing that my menu was missing was the option to be able to use it with more than 1 device so now i have made it not only compatible with keypad but also controller.

How I did this was very simple but all it required was at the event construct of the widget set a keyboard focus to ones of your buttons from there your controller / keypad will automatically snap to the next button on its own and work with switching settings aswell

The Only issue I have right now would be the ability to clearly see that I am switching options as the highlight indicating this is very hard to see as of right now and just changing the hovering itself didn't change a thing that is what I will be trying to do as of next week.

[soundtylermorgan]

Using Sound Effects For My Menu

For my menu I also need to have sound effects so the player actually feels like he is actually clicking and changing things instead of having complete silence. As I do not have the time to create sound effects on my own I will be Using some of the default sound effects in unreal as i think some of them do fit very well into the menu itself.

To do this all you have to do is look into each buttons settings and they should have sounds for pressed and hovered and from there you pick the sound you want.

Preview of what the sound effects are like:

[soundtylermorgan]

Making a pause menu

For my menu I not only want a options menu but also a pause option to get there for this I just created a very simple menu for when our player wants to pause the game.

This code shows how the animations that i have made will play when the widget is created 

this code is for the Resume button that will revert all the decisions that the widget first created.

this is the options button widget that will close this menu and take you to the options menu.

This is the main menu button and as said it will take you to the main menu of the game.