Plan
In this blog, we will be scripting the three buttons we created in the last part to their designated functions.
Scripting - Play Button
For the play button, we will have a fade-out/fade-in transition between scenes.
The first step is to create a separate canvas in the project called LoadingCanvas. This canvas will handle all of the scripting, transitions and loading screen.
Inside of this canvas, add a loading background (loading image) and a loading text. On the loading image and text add a canvas group, set the alpha to 0 and untick "Blocks Raycasts".
This allows for the image to be invisible and not interfere with any clicking events.
Now we can create the play script, go into your scripts folder and add a script called PlayLoading.
Open it up and we can start scripting!
The first step is to define some variable that we will need to use. A string called sceneName, Canvas Group called LoadingScreen and CanvasGroup called LoadingText, a Floadt called TimeToFade which equals 1f and finally a private bool called fadein that is equal to false.
[SerializeField] string sceneName;
[SerializeField] CanvasGroup LoadingScreen;
[SerializeField] CanvasGroup LoadingText;
[SerializeField] float TimeToFade = 1f;
private bool fadein = false;
As you can see I have defined them with SerializeField which essentially sets them to public.
Next inside of the start method, we will set both LoadingText and LoadingScreens alpha to 0 just to ensure that it is left on a value higher than 0.
void Start()
{
LoadingText.alpha = 0f;
LoadingScreen.alpha = 0f;
}
Now inside of the Update method, we will create an if statement to determine whether the bool value is true.
To set it to true when we click play ,we will create a public void method called PlayButtonClicked.
public void PlayButtonClicked()
{
fadein = true;
}
When we hook this up with the button function it will set fadein to true.
Now with that sorted we can finish the update method.
private void Update()
{
if (fadein == true)
{
LoadingScreen.alpha += TimeToFade * Time.deltaTime;
LoadingText.alpha += TimeToFade * Time.deltaTime;
Invoke(nameof(ChangeScenes), 4f);
if (LoadingScreen.alpha >= 1)
{
fadein = false;
}
}
}
Basically, what this code does is have an if statement to determine whether fade-in is true. If it is, we get the alpha for the LoadingScreen and LoadingText and add it to the TimeToFade times, Time.deltatime which essentially just runs the code at a reference to your frames per second to ensure a smooth finish
Then we invoke a method which we have not created yet which just changes the scene.
Finally, we check if, The Loading Screen alpha is equal to or more than 1 and we check fadein to false.
Now for the method we haven't created yet, we will create a void method called ChangeScenes
void ChangeScenes()
{
SceneManager.LoadScene(sceneName);
}
Inside there we will run this line of code which will change scenes to whatever scene name is provided in the string variable.
This is all the scripting required for the Play button and all we have to do now is hook everything up.
Back inside your unity project we will drag and drop the script into the mainmenu canvas.
Inside to the script you can procide to fill in the different variables that we have created. We can use the old scene as a demo to check if it works.
The last thing you have to do is go to your play button and create a new onClick function.
If you haven't already added the onClick function all you have to do is press the plus to create a new one. Now you can simply drag the mianmenucanvas into the script slot and then click on the function slot click on the script name and find the method name which should be PlayButtonClicked.
Now you should be all set.
When you click on your play button, the loading screen chould come up and then it should change scenes. But you will notice that when it changes scenes there is not fade out and it switches scenes in a not so nice way.
To fix this copy the Loading canvas to the other scene to have not difference in text, position and colour.
Now create a script called CheckSceneChanged. Inside of this script we will check if the scene has changed and if it has we will start the fade-in.
private string currentSceneName;
[SerializeField] GameObject LoadingImage;
public Image fadeImage;
public float textFadeSpeed = 1.0f;
public TextMeshProUGUI textToFade;
public float fadeSpeed = 1.0f;
The first thing is that we need to define are some variables.
Now inside of the Start method, we will have to set the default of everthing to ensure that nothing is set to active of the alpha is not what it should be.
private void Start()
{
Color textColor = textToFade.color;
textColor.a = 1.0f;
textToFade.color = textColor;
currentSceneName = SceneManager.GetActiveScene().name;
fadeImage.canvasRenderer.SetAlpha(1f);
FadeOutEffect();
}
Here you can see that we first set the colour to the colour that is already set, then we get the currentSceneName variable and set it to the current scene active. We set the fadeImage's alpha to 1 to make sure it is showing.
Next in the Update method, we check with an if statement if currentSceneName is equal to the current scene name and if it is we invoke a method called FadeOutEffect.
private void Update()
{
if (currentSceneName == SceneManager.GetActiveScene().name)
{
Invoke(nameof(FadeOutEffect), 0.1f);
}
}
The FadeOutEffect method is responsible for setting the alpha to 0 using the fadeSpeed.
private void FadeOutEffect()
{
fadeImage.CrossFadeAlpha(0, fadeSpeed, false);
textToFade.CrossFadeAlpha(0, fadeSpeed, false);
}
That is all for the scripting and now we have to assign the script.
Back in the unity project we can drag and drop the script into the Image in the LoadingInCanvas which is the LoadingCanva but inside of the other scene.
You can assign the variable that we created to their object.
Now when you go back to the MainMenu Scene and press play, you can see that there is a fadeout and then a nice trantision to the other scene then a fadein
This is everything for the Play Button.
Scripting - Settings
For the settings button we will have a simple clicking action where it will appear when clicked and disappear when the back button is clicked.
The first step is to create a Settings canvas. This canvas will consist of a background and a button.
You can choose to add aditional thing but in the next blog we will be designing and functioning the settings tab and outfit tab.
That is everything for the designing aspect of the settings tab and we can now move onto the scripting.
Create a new script called Settings button and open it up. This will be a very simple and easy piece of code that will do the job.
{
[SerializeField] GameObject SettingsTab;
void Start()
{
SettingsTab.SetActive(false);
}
public void SettingButtonPressed()
{
SettingsTab.SetActive(true);
}
}
As you can see we define a variable and inside of the Start method we set SettingsTab to false. Then we create a public function and inside of it we set SettingsTab to true.
Inside unity we can drag and drop the script in the main menu canvas.
You can then drag and drop the SettingsTab into the slot, next go to the SettingsButton and add a new onClick function. Drag and drop the main menu canvas into the script slot and select the SettingsButtonPressed inside of settingsbutton.
Now if you try it out you can see that if you press the setting button, the settings tab appears.
There is one small problem, you can't go back.
To fix that you have to create another button for going back which I have already done.
Then create a script called SettingsBackButton. Open it up and it is fairly simple to script. The first thing is to define a variable which is the SettingsTab.
{
[SerializeField] GameObject SettingsTab;
public void BackButtonClicked()
{
SettingsTab.SetActive(false);
}
}
Then we create a public void and set SettingsTab to false.
Now when you finish this, you can go back to unity and go to the back button. Create a new onclick function and make sure to drag and drop the script into the mainmenu canvas and then fill in the variable.
Inside of the script variable in the onclick function of the back button you can drag the mainmenu canvas into it and select the appropiate script.
Now that should be eerything for the settings button and if you press play you should be able to click on settings and see that it appears and the back button will close the settings tab.
Scripting - Outfit Button
The outfit button will be the exact same as the settings button until next blog where i will be giving it all the settings necessary.
The first thing to do is create a Outfit canvas and create all of the designs you want.
In this case I added a background and a back button but you can choose whatever designs you want.
The next step is to create the scripts. Create two scripts, one called OutfitButton and the other called OutFitBackButton.
Opening the OutFitButton, we can create a public gamobject variable called OutFitTab.
[SerializeField] GameObject OutFitTab;
void Start()
{
OutFitTab.SetActive(false);
}
Inside of the start method, we can use the new variable we created and set its visibility to false using SetActive.
We can create a public method called OutFitButtonPressed
public void OutFitButtonPressed()
{
OutFitTab.SetActive(true);
}
And set the OutFitTab variables visibility to true.
That is all for that c# script and we can now move onto the next one which is OutFitTabBackButton.
Heading inside of that script we are going to do the exact same thing as the OutFitTab script.
[SerializeField] GameObject OutFitTab;
public void BackButtonClicked()
{
OutFitTab.SetActive(false);
}
The only thing that is different is the name of the public method and that we don't use the start method here, unlike the other script.
That is all the scripting required and we can move back to Unity to attach these scripts.
Attach both scripts to the MainMenuCanvas.
Making sure you input the game object into the variable we created.
The next thing we can do is open up the OutFit button and create a new onClick function.
Filling in the required values we can move on the the OutFitBack button.
We can do the exact same thing as the OutFit button.
This should be everything you need for the OutFit button.
Conclusion
That is everything for this blog. In conclusion, you should have learned how to set up a play button, settings button, and outfit button using transitions like fading or instant popups. In the next blog, we will be diving into the settings button where we can add the necessary information and obviously settings that people can use and customize to make our game better and more user-friendly.