The Menu Kit is a package that contains a complete menu for your game, is simple, flat and easy to customize to your taste, contains 4 ready menus, play, options, credits and exit. All working perfectly and with animations included, plus a dialog box, languages, transitions, animations that can be done easily with a few clicks. Functional options and is saved in json file.
- Demonstration scene
- Easy to use and customize
- Includes options settings (VIDEO, AUDIO and GAME)
- Language Control (EN, PT_BR)
- Audio System
- Custom Input (Suggestion sent in my Email)
- Pause Menu (RESUME, OPTIONS and EXIT) (Suggestion in the presentation video of the Main Menu Kit)
- Simple Player
- GUI flat and beautiful
- 2 Backgrounds
- Animation Transitions (Fade In, Fade Out, Swap In, Swap Out, Custom)
- Save settings to JSON file
- Custom Cursor
- 2 play type (Start direct play and game modes, level select under development)
- Animations in the Main Menu
- Scale animations, directions or both on the credits screen and in game modes
- Organized structure
- All C # code and commented in English (soon Brazilian Portuguese)
- Prefabs ready for use
- Custom Editor
- Organization of menus and modes according to position in the inspector
- Documentation in PDF
- Improvements in inspector and codes
- Work with Unity +2017
3.What to do first
Before importing the Kit menu I recommend you make a backup in your project and should create a new scene for the menu or create a new project to follow, execute the settings and not lose the project.
After that, you will not appear in the menu, next to the Wilgner’s Studio > MenuKit > Add > Main Menu window or press CTRL + SHIFT + M with your own already running menu.
You can choose the prefabricated patterns above and make changes so you do not have to make of zero.
5.Changing the Background
First let’s change the background, it’s nothing less than an image, its path is:
MenuKit > Canvas > MenuKit_Canvas > backgroundImage
Select the Source Image in inspetor and select the desired image, I created two flat backgrounds:
You can delete / deactivate the background image to use a custom scene or vide (like PUBG, Overwatch).
Basic settings is where the title and version are all screens (except for credits) contains these same settings, just access it and change in the inspector or add an image instead of the text.
I chose to repeat the elements to have greater control in case you want to animate them or make other configurations.
8.Creating a Dialog Box
To create a dialog box with yes and no buttons, take the prefab and drag it to the scene or use the custom tab, some important settings:
- This option automatically finds the entire hierarchy required for the Dialog working. You can turn it off and manually.
- This is the title of the Dialog Box
- The body of text / message
- All events that occur when you click the yes button
- All events that occur when you click the no button
After copying the existing dialog box I will change the title and message and delete the quitGame event.
Remember our menu created let’s change the click event, I’ll add it myself in the event and select the function Menu > EnableObject and I will define our new Dialog, thus:
Our new dialog box looks like this:
The exampleMethod method shows only one message in the console, after everything configured you can start your project, clicking on the new menu see what happens: Gif (Folders)
When clicking on the yes we have a message in the console, clicking on the:
The dialog box closes.
Very simple too, with that we finished the tour on the main screen. You can add as many functions as you want in Events.
9.Modifying the Credits Screen
To start with another screen I recommend that you disable the others, in this case I deactivated the MainScreen (which was active) in the inspector and it becomes cleaner / easier / more practical to work on, come on.
A CreditsScreen is found in MenuKit> Canvas> MenuKit_Canvas> CreditsScreen, to change the title let’s object title_c and change the TEXT, I put it as “MENU KIT2”.
In the hierarchy we have Subtitle_structure1 and 2, are two examples very used in the credits, feel free to change, in my case I will use them as an example and I will disable the object wilgner_credits.
I’ll make a small change in his animation, by default will come the direction animation, I’ll position the new CreditsScreen in the center:
That way, and now we go to MenuControl, in
Objects Settings I’ll put my new
CreditsScreen, I will disable the Anim Direction Credits and activate Anim Credits Scale by doing this:
You can set the Initial Scale, Maximum Scale and the speed of the scale to do the scale animation (Already set).
You can start the project or disable the CreditsScreen in the inspector (all screens are disabled at startup, minus the MainScreen).
10.Modifying the ModeScreen
Again, it deactivates the other screens and only activates the ModeScreen to work better without the others getting in the way. ModeScreen is in MenuKit > Canvas > MeniKit_Canvas > ModeScreen
Again we have the BasicSettings, you can change the title and version. I will copy the mode3 (name mode4) and position as I want, I will not change any information in it, we go to Modes, in background_mode we can change the background image of our background, I will leave default, a good example is the game Overwatch, we can see:
To change the title is simple, we go in the title_mode_text and change the TEXT component in the inspector the same thing in the description_text, the maskDisable object is if the mode is unavailable the maskDisable is activated and leaves the mode dark.
Be sure to check that all masks are in the correct mode position they belong to.
- Active case means the mode is active and can be interactive.
- Activate the mask in case it is disabled there will be a darkening in the mode.
- Standard Scale
- Scale when the mouse is on top
- Initial animation
- Direction of the animation
- Time to start the animation (I’m using 0.5 difference of each mode)
I will change the animation from mode4 to 1.5. In the EventTrigger in Pointer Click I will change the playmode3 to playmode4.
I go into mode2 and change the isActive to false.
Let’s configure the MenuControl:
If you have another screen of modes and you are not changing the one of the prefab do not forget to define the new one in Objects Settings as we did with Credits Screen.
In Play Settings disables No Modes.
Okay, test the project and see what happens.
Canvas Scaler: Canvas scaler set to canvas object
Panels Options: They are all options menu panels (video, audio and game) and Buttons are the buttons of these respective panels.
Color nomal: This is the default color (not selected) of the button
Color Selected: Is the color of when the respective button panel is selected.
Events: All events started along with the menu, for example changeResolution, this event changes the menu resolution according to json when starting the menu. You can add or remove actions to run at the beginning.
(Suggestion sent in my email)
Now let’s create a sample toggles (checkbox) and learn how to save in JSON.
You can copy a Toggle ready or create from the tab.
You can organize in Panel by adding a new element and clicking on “Organize Rows”, this applies to all panels
Remember to change the names to stay organized, let’s open the Script > GameConfig, this is the class where json is created/saved/stored, in //VIDEO below the VSYNC we will create a new variable:
public bool toggleTest;
Type bool because that is the value that the toggle stores.
Now let’s go to the MenuControl object (OptionsControl.cs) in toggles let’s add the toggle we created:
Now let’s go to the Script > OptionsConfig and go to the saveGameConfig method. In //Graphics let’s type:gameConfig.toggleTest = toggles .isOn;
The 2 is the position of it in the vector, in case 2 (Element 2), now it is already saving the value in the JSON file, now let’s do it when starting the game again loading the selected option. Let’s in the setValues method in // Graphics let’s type:
toggles .isOn = _gameConfig.toggleTest;
With this, the value of it is defined according to the value in our JSON.
To change something in the game when you click Apply you must create a change method, work the value of the toggle (example) inside and call the method in changeSettingsGame ().
With just that you already have a new option on the OptionsScreen running and saving, loading from a JSON file.
You can retrieve these values in other scenes by reading the json file (example in the other scene, YOURGAME).
The new version of MMK allows multiple languages.
Let’s start. Previously I taught how to create a new menu item, now let’s translate.
First the menu items are referenced in Menu Settings (MenuControl.cs) and not in LanguageControl.cs.
We already referenced it in creation.
Let’s go in the folder Scripts > Json Class > Languages > WS_MENUKIT
WS_MAIN_LANGUAGE.cs > This file contains the translations of the menu item (CONTINUE, PLAY, OPTIONS, etc).
WS_OPTIONS_LANGUAGE.cs > This file contains the translations for all elements present in the options screen
I am still developing, but the fundamental is already ready, for example missing translations within the dropdowns.
As we create a menu item we will use the WS_MAIN_LANGUAGE.cs as explained above.
After opening it we will insert two variables to represent the text in English and Portuguese (example, you can add another language), it will look like this:
After that save and we will open the LanguageControl (scripts folder or can open from the MenuControl object with right click and edit).
This script is used to check which language is selected and from there it updates the text according to our languages bank (The two scripts containing the languages).
Let’s find two functions:
SetMainLanguage: This function is used to update texts on the main menu.
SetOptionsLanguage: Updates the text of the options.
As this new menu item is in the main menu and not the pause menu we will put inside the IF inGame (or isPause).
Let’s reference the new menu index we created (in my case it’s 5)
Referencing the script in which the translation of this menu and the variable that we created above to reference it, like this:
Now, just save and you’re done. (test).
Let’s now translate the toggle we created. We follow almost our own steps.
Now let’s use the: WS_OPTIONS_LANGUAGE.cs
The toggle is in the video panel, then:
We already have the language bank ready, now we need to reference the text of the toggle for the MMK to know that it exists and for us to use in the codes.
Let’s reference our new variable (languages) to update the text correctly:
LanguageControl.cs and the method SetOptionsLanguage() this time.
Remembering that his index is 6 as the image above, then:
And now the other language (in case pt_br):
You can reference the GameConfig.language in the script
OptionsControl to be able to translate other parts of your game and into new languages.
Please leave a review on the Assets Store
This gives feedback to me on what to add / improve and others.