<\/p>\n
These are all the settings I currently have working; toggle-fullscreen<\/a>, screen width<\/a> and height<\/a>, anti-aliasing level<\/a> and vertical-sync<\/a>. (Playmaker actions for accessing them are here <\/a>and here<\/a>). Settings Menu Update<\/em>, Settings Menu<\/em> and Resolutions<\/em> are empty objects at 0,0,0, everything else is a menu button. (You can ignore everything from <\/em>Main Camera 60 down to <\/em>Field_Guide in the hierarchy<\/em>) At the moment all the buttons are just Text Meshes, it made them easy to edit and I could just set the font to bold and back to indicate button state, I\u2019ll be changing most of them to icons at some stage but it should be pretty straight forward to swap them out for any kind of set up.<\/p>\n As well as being able to accept new settings, the menu should indicate what the current settings are, if this is the first time the game has been run there also need to be some defaults already in place, it also should have a temporary method of storing choices before hitting the Apply button, this should only become active when the player has made changes. Here it is in action:<\/p>\n The Saving and loading of values is handled by the Settings IO<\/em> FSM on Settings Menu Update<\/em>:<\/p>\n On starting, IO<\/em> checks to see if there is a settings file already available, if there is it loads the relevant values, updates the local variables and the actual quality settings themselves. If there is no file available it creates one out of a set of default values, then<\/em> loads\/updates. The red state on the left is where updated values from the various menu buttons\u00a0are dealt with. The variables should mostly be self explanatory, the setting for screen size takes an integer but at various time’s we’ll need to find the aspect ratio as a float so we’re storing Screen Width <\/em>\/ Height<\/em> as both.<\/p>\n There are quite a few things being updated simultaneously and from various different places, Check Settings File Exists<\/em><\/strong> broadcasts an IO Busy<\/em> event, the individual FSMs on buttons are paused and wait for the IO Idle<\/em> event we’ll send when we’re done, this should help make sure events are firing in the order we want. We then check for a playerSettings file using the Easy Save action<\/a> Exists<\/em>.<\/p>\n If no file exists we need to set some defaults, getting the Screen Width<\/em> and Screen Height<\/em> here will take the current screen dimensions as floats, this should give you the native resolution providing you have that set to default in your build settings. We convert and store them as integers as well.<\/p>\n Save Defaults<\/em><\/strong> and Save New Settings<\/strong><\/em> are series of save actions to store relevant settings in the newly created playerSettings file. Save Defaults<\/strong><\/em> only runs if the initial check doesn’t find a settings file, it uses pre-set values from the state rather than stored variables, by default I have fullscreen set to true, anti-aliasing set to zero, v-sync set to every v-blank, resolution set to the native width\/height we got in the previous state. After a settings file is created we use Save New Settings <\/strong><\/em>instead, this will overwrite values in the file with the values from our local variables, this state is only entered via the Apply New Settings IO<\/em> global event.\u00a0Load Settings<\/em><\/strong> is then the equivalent load actions from the same file and Apply Settings<\/em><\/strong> uses the quality settings actions to apply these values to their respective property. Finally, Idle<\/em><\/strong> broadcasts an IO Idle<\/em> event and waits for further input…<\/p>\n <\/p>\n <\/p>\n Every button has its own FSM to handle input, deal with on\/over\/selected states and to store pertinent, pre-set values. Settings are changed by replacing the current values stored on Settings IO<\/em> with these pre-sets before triggering Save New Settings <\/em>to update the actual playerSettings<\/em> file.<\/p>\n This is the FSM on the Fullscreen<\/em> button, it stores a boolean and acts as a toggle. The highlighted Self<\/em> variable is a Unity Object of type UnityEngine.TextMesh, when using Get Component on a GameObject, Unity will take the first one it finds of the set type, so it’s a good idea to set that here.<\/p>\n Wait for IO Idle<\/em><\/strong> is empty and waits for an IO Idle<\/em> event from Settings Menu Update<\/em>, note that in addition to the START<\/em> event the first state can be entered via the global event IO Busy<\/em>. Initialize <\/em><\/strong>finds objects and components and store them as local variables.<\/p>\n Get Current Fullscreen<\/em><\/strong> gets the Fullscreen<\/em> boolean value from the Settings Menu Update <\/em>FSM storing\u00a0it locally as Current Fullscreen<\/em>, this allows us to compare the two and automatically select or deselect the button to begin with, without requiring a click.<\/p>\n (At this point, a lot depends on how you’re handling input, I have a slightly odd cursor set up, in order to tell when the player is hovering over a button with a mouse I compare the Owner to a globally determined <\/em>Hovered_Object. You could alternatively use an OnMouse<\/a> event or another equivalent.<\/em>)<\/p>\n When a button is first selected, the local Fullscreen<\/em> boolean is set to true and the font style is changed to bold. Idle Selected <\/em><\/strong>checks every frame for a mouse over, when it detects one it triggers the Over<\/em> event and switches to Over\u00a0Selected <\/em><\/strong>which checks every frame for a click event as well. Selected Cursor Over<\/em><\/strong> state is the equivalent for non mouse input and is entered and exited via the global events Cursor Over <\/em>and Cursor Off<\/em>, sent from elsewhere. Both Over<\/em><\/strong> states also scale the parent button up slightly, Idle Selected<\/strong><\/em> scales it back.<\/p>\n Upon detecting a Click<\/em> event, Update Changes Selected<\/em><\/strong> first sends an event to the Apply Settings<\/em> button to indicate that a change has taken place before swapping over to Deselect<\/em><\/strong>, all the states here work identically to their selected counterparts except the text style is set to regular and the Fullscreen<\/em> boolean is set to false.<\/p>\n No values are actually sent to\u00a0Settings IO <\/em>FSM until Update Settings<\/em><\/strong> receives the Update Settings IO<\/em> global event from the Apply Settings<\/em> button.<\/p>\n The FSM templates used on most of the other buttons are extremely similar to the one for Fullscreen<\/em>, the Unselected<\/em> states all work exactly as before. For resolution, AA-Level and V-sync, however, there always has to be a value selected, what’s more it can’t be deselected without simultaneously choosing a new one, they behave more like standard radio buttons. The differences can be seen in the Select<\/strong><\/em> state which broadcasts a de<\/span>select event to all the other FSMs on buttons of the same type, this makes sure only one is selected at a time. (Make sure you check the Exclude Self<\/em> box in the Send Event<\/em> action or the button will trigger its own Deselect<\/em> event!) The Update Settings IO<\/strong><\/em> state has been moved so as to be available only while the button is selected, and the scaling has been removed from both Selected Over<\/strong><\/em> and Selected Cursor Over <\/strong><\/em>states. These states no longer check for click events either.<\/p>\n The templates for resolution, AA and V-sync are identical except they check for and set their relevant variables instead of width<\/em>\/height<\/em> and the Deselect<\/em> event is named differently. The Aspect<\/em> ratio buttons do a slightly different job and have a few extra elements…<\/p>\n <\/p>\n <\/p>\n Aspect ratio isn’t something that can be set directly but it’s helpful if you have a large number of resolution options you want to narrow down.<\/p>\n The Aspect<\/em> FSM keeps track of all the same objects and values the resolution button did plus\u00a0Selector<\/em>, a blue quad which is the child of the owner button, and Resolution<\/em>, a Game Object which is parent of all the resolution buttons. When an Aspect<\/em> is selected it translates the Resolutions<\/em> object left or right to show only those buttons that match the relevant ratio, effectively creating three sub-menus on the same row.<\/p>\n Rather than have a separate aspect variable associated with each and every resolution, it’s simpler to just work it out on the fly and store the result, this also makes it a bit quicker to add new resolutions later on. We get the Screen Width<\/em> and Screen Height<\/em> values from Settings IO<\/em>, and divide the former by the latter, the resultant float Current Aspect<\/em> is compared to the local Aspect<\/em>. Selection works as before but additionally, activates or deactivates the Selector<\/em> quad, sets a string value in the Menu Cursor<\/em> FSM and moves the Resolution<\/em> object to a preset position.<\/p>\n The Menu Cursor<\/em> FSM handles non-mouse input, it keeps track of button positions and places the cursor accordingly based on input, I’m just using keys at this stage but the principals should remain the same regardless. Each row of buttons is stored in an Array List Proxy<\/em> on the Settings Menu Update<\/em> object, each entry in the array represents a single button and column.<\/p>\n The arrays are all labelled with a number, those containing resolutions also get a letter. This letter is just a short way of referencing the three different aspect ratio sub-menus. I haven’t shown them all, but array #3 has just the Fullscreen<\/em> button in it, #4 just Apply<\/em>, #5 is V-sync<\/em> and #6 the AA-levels<\/em>.<\/p>\n We only use this system with non-mouse input so after Initialize<\/em><\/strong>, we wait for a Key Up<\/em> event on WASD in Check Input<\/em><\/strong>. The arrays all have numbers to identify them but Array List<\/em> actions require a string for reference so we need to store the Current Row<\/em> integer as a string as well. The resolution buttons are spilt into sub menus depending on aspect ratio, each has its own letter, but they all effectively inhabit the same row (I’m calling this kind of row a Multi<\/em>), the row letter is added on to the Current Row String<\/em> but it’s only the Current Row Int<\/em> that’s used for the switch. All the Single<\/em> rows behave the same way and don’t require an offset so we can set it to zero, we can ignore the Row Letter<\/em> for these rows as well so only the fist character of Current Row String<\/em> is required.<\/p>\n Our sole Multi<\/em> row, the resolutions, requires an offset because it’s shifted left or right depending on the current aspect ratio. The translation is performed on the parent object Resolutions<\/em> but here we’re getting the individual button positions from their Self<\/em> space, so we just have to offset by the same amount we moved the parent.<\/p>\n Once the offset is figured out all the rows work the same way, Check Column Fits in Row <\/em>uses the Current Row String<\/em> as a reference and makes sure the Current Column<\/em> is no higher than the last entry in the specified Array List<\/em> (Arrays start at zero, hence the minus one!), if it is it will Loop Right<\/em>, jumping back to the first entry, zero. Check if Less than Zero<\/em> makes sure the Current Column<\/em> never turns negative but instead will Loop Left<\/em>, jumping to the last entry in the current array, which will be the same as the Current Array Length<\/em> (Now already including the minus one!).<\/p>\n Get Current Button<\/strong><\/em> uses the Current Row String<\/em> and Current Column<\/em> as Reference and Index in an array list get, Get Button Position<\/em><\/strong> takes its position and adds any necessary offset, before Move Cursor<\/strong><\/em> updates the cursor position and sends the Cursor Over<\/em> event to the Current Button<\/em>.<\/p>\n (We haven’t actually set up the actual, visible cursor during this tutorial and you can just leave it out, the button text will still scale up and go bold to indicate which one you have selected, this is just what works with mine. If you wanted to you could add in an extra sphere or sprite or whatever at the same z<\/strong> translation as your buttons, and just pass the <\/em>Current Button x<\/strong>\/y<\/strong> positions to that.<\/em>)<\/p>\n Idle<\/strong><\/em> waits for Keys Ups<\/em> and then either adds or minuses one from Current Row<\/em> or Current Column<\/em>, before Check Top<\/em><\/strong> and Check Bottom <\/strong><\/em>make sure the rows loop just like we did previously with the columns. We finish up back in Check Row<\/strong><\/em> and the process starts again.<\/p>\n After all this we still haven’t actually changed any settings, we still need to click the Apply Settings<\/em> button…<\/p>\n <\/p>\n <\/p>\n The various parts of the Apply Settings<\/em> button should be pretty familiar by now:<\/p>\n Unlike the other buttons though, Apply<\/em> is unclickable in its Idle Unselected<\/em><\/strong> state, unable to do anything until the Changes<\/em> event is sent from one of the other buttons.<\/p>\n Once Changes <\/em>have occurred, the button checks every frame for a Click<\/em>, and then an Apply Settings IO<\/em> event is broadcast, any button FSM currently in its Idle Selected<\/em> state will send its local values to Settings IO<\/em>. Finally, Apply Settings IO<\/em> <\/strong>then triggers an event on the Settings IO<\/em> saving the currently set values to the playerSettings<\/em> file. If only some of the settings have been changed the previously set ones will simply persist, buttons in an Unselected<\/em> state don’t send any new values.<\/p>\n At this stage the menu is working pretty much how I want it, as I said I’ll probably be changing some of the text for icons, I might reduce the number of options as well depending on their actual usefulness, this was mostly an exercise to see if I could get them all functioning! The next step is a similar setup for user created Save Games and possibly for customizing input, both of which I’m imagining will be more complex…<\/p>\n As always, comments, crits and corrections are all welcome.<\/p>\n \n","protected":false},"excerpt":{"rendered":" This month I’ve been straying well outside my comfort zone to work on an in-game menu allowing players to change various quality settings during runtime. Unity offers a standard, built-in menu that appears when a game starts up but it hides several settings under “Quality Levels”, has a rather confusing input editor and requires the … Read more<\/a><\/p>\n","protected":false},"author":2,"featured_media":2862,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"ngg_post_thumbnail":0,"footnotes":""},"categories":[55,12],"tags":[64,88,75,89,76,90,57,46],"class_list":["post-2852","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-game-development","category-tutorials","tag-dev-diary","tag-easy-save","tag-playmaker","tag-settings","tag-toryanse","tag-tutorial","tag-unity","tag-wip"],"_links":{"self":[{"href":"https:\/\/www.holyfingers.co.uk\/main\/wp-json\/wp\/v2\/posts\/2852","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.holyfingers.co.uk\/main\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.holyfingers.co.uk\/main\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.holyfingers.co.uk\/main\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.holyfingers.co.uk\/main\/wp-json\/wp\/v2\/comments?post=2852"}],"version-history":[{"count":104,"href":"https:\/\/www.holyfingers.co.uk\/main\/wp-json\/wp\/v2\/posts\/2852\/revisions"}],"predecessor-version":[{"id":3010,"href":"https:\/\/www.holyfingers.co.uk\/main\/wp-json\/wp\/v2\/posts\/2852\/revisions\/3010"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.holyfingers.co.uk\/main\/wp-json\/wp\/v2\/media\/2862"}],"wp:attachment":[{"href":"https:\/\/www.holyfingers.co.uk\/main\/wp-json\/wp\/v2\/media?parent=2852"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.holyfingers.co.uk\/main\/wp-json\/wp\/v2\/categories?post=2852"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.holyfingers.co.uk\/main\/wp-json\/wp\/v2\/tags?post=2852"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}![\"Menu_1\"](\"https:\/\/www.holyfingers.co.uk\/main\/wp-content\/gallery\/quality-settings-tutorial\/Menu_1.png\")
<\/a><\/p>\n![\"\"](\"https:\/\/i.imgur.com\/3Sh3c8Q.gif\")
<\/p>\n![\"SettingsIO_FSM_Main\"](\"https:\/\/www.holyfingers.co.uk\/main\/wp-content\/gallery\/quality-settings-tutorial\/SettingsIO_FSM_Main.png\")
<\/a><\/p>\n![\"SettingsIO_FSM_Annotated\"](\"https:\/\/www.holyfingers.co.uk\/main\/wp-content\/gallery\/quality-settings-tutorial\/SettingsIO_FSM_Annotated.png\")
<\/a><\/p>\n![\"Fullscreen_FSM_Main\"](\"https:\/\/www.holyfingers.co.uk\/main\/wp-content\/gallery\/quality-settings-tutorial\/Fullscreen_FSM_Main.png\")
<\/a><\/p>\n![\"Fullscreen_FSM_Annotated\"](\"https:\/\/www.holyfingers.co.uk\/main\/wp-content\/gallery\/quality-settings-tutorial\/Fullscreen_FSM_Annotated.png\")
<\/a><\/p>\n![\"Button_FSM_Main\"](\"https:\/\/www.holyfingers.co.uk\/main\/wp-content\/gallery\/quality-settings-tutorial\/Button_FSM_Main.png\")
<\/a><\/p>\n
\n<\/em>
\n![\"Button_FSM_Annotated\"](\"https:\/\/www.holyfingers.co.uk\/main\/wp-content\/gallery\/quality-settings-tutorial\/Button_FSM_Annotated.png\")
<\/a><\/p>\n![\"Aspect_FSM_Main\"](\"https:\/\/www.holyfingers.co.uk\/main\/wp-content\/gallery\/quality-settings-tutorial\/Aspect_FSM_Main.png\")
<\/a><\/p>\n![\"Aspect_FSM_Annotated\"](\"https:\/\/www.holyfingers.co.uk\/main\/wp-content\/gallery\/quality-settings-tutorial\/Aspect_FSM_Annotated.png\")
<\/a><\/p>\n![\"MenuCursor_FSM_Main\"](\"https:\/\/www.holyfingers.co.uk\/main\/wp-content\/gallery\/quality-settings-tutorial\/MenuCursor_FSM_Main.png\")
<\/a><\/p>\n![\"Inspector_Arrays\"](\"https:\/\/www.holyfingers.co.uk\/main\/wp-content\/gallery\/quality-settings-tutorial\/Inspector_Arrays.png\")
<\/p>\n![\"MenuCursor_FSM_Annotated_1\"](\"https:\/\/www.holyfingers.co.uk\/main\/wp-content\/gallery\/quality-settings-tutorial\/MenuCursor_FSM_Annotated_1.png\")
<\/a><\/p>\n![\"MenuCursor_FSM_Annotated_2\"](\"https:\/\/www.holyfingers.co.uk\/main\/wp-content\/gallery\/quality-settings-tutorial\/MenuCursor_FSM_Annotated_2.png\")
<\/a><\/p>\n![\"MenuCursor_FSM_Annotated_3\"](\"https:\/\/www.holyfingers.co.uk\/main\/wp-content\/gallery\/quality-settings-tutorial\/MenuCursor_FSM_Annotated_3.png\")
<\/a><\/p>\n![\"Apply_FSM_Main\"](\"https:\/\/www.holyfingers.co.uk\/main\/wp-content\/gallery\/quality-settings-tutorial\/Apply_FSM_Main.png\")
<\/a><\/p>\n![\"Apply_FSM_States\"](\"https:\/\/www.holyfingers.co.uk\/main\/wp-content\/gallery\/quality-settings-tutorial\/Apply_FSM_States.png\")
<\/a><\/p>\n