Welcome to our new tutorial series on how to make 2048 in Unity. For this Lesson, we will set up the Unity project and create the UI system for our game.
Before you get started with this tutorial series make sure to sign up to become a member of our website to get access to the cut and paste code from this tutorial series and other series on our channel.
Now we need to build our main menu scene to keep things simple I will cover only the most necessary objects but if you want your menu scene to look a little more interesting you should copy most of the visual elements from the game scene only remove they scripts.
To get started let us create a new C# script. Add it to your Scripts folder and call MMController, then open it up. Inside this script, we need to add the SceneManagement namespace to the top. The add one public function of type void called Play. Inside this function load to scene 1. This function will be paired with the play button of our menu scene. The last thing you could do for this script is to add a way for players to quit your application. This will be done in the Update function and should be triggered with the press of the escape key.
using UnityEngine;
using UnityEngine.SceneManagement;
public class MMController : MonoBehaviour {
public void Play()
{
SceneManager.LoadScene(1);
}
void Update()
{
if (Input.GetKeyDown(KeyCode.Escape))
{
Application.Quit();
}
}
}
using Photon.Chat;
using Photon.Pun;
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
public class PhotonChatManager : MonoBehaviour, IChatClientListener
{
#region Setup
[SerializeField] GameObject joinChatButton;
ChatClient chatClient;
bool isConnected;
[SerializeField] string username;
public void UsernameOnValueChange(string valueIn)
{
username = valueIn;
}
public void ChatConnectOnClick()
{
isConnected = true;
chatClient = new ChatClient(this);
//chatClient.ChatRegion = "US";
chatClient.Connect(PhotonNetwork.PhotonServerSettings.AppSettings.AppIdChat, PhotonNetwork.AppVersion, new AuthenticationValues(username));
Debug.Log("Connenting");
}
#endregion Setup
#region General
[SerializeField] GameObject chatPanel;
string privateReceiver = "";
string currentChat;
[SerializeField] InputField chatField;
[SerializeField] Text chatDisplay;
// Start is called before the first frame update
void Start()
{
}
// Update is called once per frame
void Update()
{
if (isConnected)
{
chatClient.Service();
}
if (chatField.text != "" && Input.GetKey(KeyCode.Return))
{
SubmitPublicChatOnClick();
SubmitPrivateChatOnClick();
}
}
#endregion General
#region PublicChat
public void SubmitPublicChatOnClick()
{
if (privateReceiver == "")
{
chatClient.PublishMessage("RegionChannel", currentChat);
chatField.text = "";
currentChat = "";
}
}
public void TypeChatOnValueChange(string valueIn)
{
currentChat = valueIn;
}
#endregion PublicChat
#region PrivateChat
public void ReceiverOnValueChange(string valueIn)
{
privateReceiver = valueIn;
}
public void SubmitPrivateChatOnClick()
{
if (privateReceiver != "")
{
chatClient.SendPrivateMessage(privateReceiver, currentChat);
chatField.text = "";
currentChat = "";
}
}
#endregion PrivateChat
#region Callbacks
public void DebugReturn(DebugLevel level, string message)
{
//throw new System.NotImplementedException();
}
public void OnChatStateChange(ChatState state)
{
if(state == ChatState.Uninitialized)
{
isConnected = false;
joinChatButton.SetActive(true);
chatPanel.SetActive(false);
}
}
public void OnConnected()
{
Debug.Log("Connected");
joinChatButton.SetActive(false);
chatClient.Subscribe(new string[] { "RegionChannel" });
}
public void OnDisconnected()
{
isConnected = false;
joinChatButton.SetActive(true);
chatPanel.SetActive(false);
}
public void OnGetMessages(string channelName, string[] senders, object[] messages)
{
string msgs = "";
for (int i = 0; i < senders.Length; i++)
{
msgs = string.Format("{0}: {1}", senders[i], messages[i]);
chatDisplay.text += "\n" + msgs;
Debug.Log(msgs);
}
}
public void OnPrivateMessage(string sender, object message, string channelName)
{
string msgs = "";
msgs = string.Format("(Private) {0}: {1}", sender, message);
chatDisplay.text += "\n " + msgs;
Debug.Log(msgs);
}
public void OnStatusUpdate(string user, int status, bool gotMessage, object message)
{
throw new System.NotImplementedException();
}
public void OnSubscribed(string[] channels, bool[] results)
{
chatPanel.SetActive(true);
}
public void OnUnsubscribed(string[] channels)
{
throw new System.NotImplementedException();
}
public void OnUserSubscribed(string channel, string user)
{
throw new System.NotImplementedException();
}
public void OnUserUnsubscribed(string channel, string user)
{
throw new System.NotImplementedException();
}
#endregion Callbacks
}
Now save this script and go back to Unity.
Add the following objects to your menu scene hierarchy.
This is what your game view should look like
Now when you test your project you should be able to make a complete gameplay circle.
This concludes this short series on how to make the bear bones of Pong.
For this lesson, we will show you how to fix the flow of your pong game. Right now that ball we just start moving automatically, we want to fix this so the ball only starts moving once a player has given some input.
We need to add some code to the update function of our GameController script, so go ahead and open it up. First, we want to set the inPlay variable to true but we only want to do this if it is false and the gameOver variable is also false. We also only want to do this if the players click the mouse to start the ball moving.
void Update () {
if(inPlay == false && gameOver != true)
{
if(Input.GetButtonDown("Fire1") || Input.GetKeyDown(KeyCode.Space))
{
inPlay = true;
}
}
if (Input.GetKeyDown(KeyCode.Escape))
{
SceneManager.LoadScene(0);
}
Winner();
}
using Photon.Chat;
using Photon.Pun;
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
public class PhotonChatManager : MonoBehaviour, IChatClientListener
{
#region Setup
[SerializeField] GameObject joinChatButton;
ChatClient chatClient;
bool isConnected;
[SerializeField] string username;
public void UsernameOnValueChange(string valueIn)
{
username = valueIn;
}
public void ChatConnectOnClick()
{
isConnected = true;
chatClient = new ChatClient(this);
//chatClient.ChatRegion = "US";
chatClient.Connect(PhotonNetwork.PhotonServerSettings.AppSettings.AppIdChat, PhotonNetwork.AppVersion, new AuthenticationValues(username));
Debug.Log("Connenting");
}
#endregion Setup
#region General
[SerializeField] GameObject chatPanel;
string privateReceiver = "";
string currentChat;
[SerializeField] InputField chatField;
[SerializeField] Text chatDisplay;
// Start is called before the first frame update
void Start()
{
}
// Update is called once per frame
void Update()
{
if (isConnected)
{
chatClient.Service();
}
if (chatField.text != "" && Input.GetKey(KeyCode.Return))
{
SubmitPublicChatOnClick();
SubmitPrivateChatOnClick();
}
}
#endregion General
#region PublicChat
public void SubmitPublicChatOnClick()
{
if (privateReceiver == "")
{
chatClient.PublishMessage("RegionChannel", currentChat);
chatField.text = "";
currentChat = "";
}
}
public void TypeChatOnValueChange(string valueIn)
{
currentChat = valueIn;
}
#endregion PublicChat
#region PrivateChat
public void ReceiverOnValueChange(string valueIn)
{
privateReceiver = valueIn;
}
public void SubmitPrivateChatOnClick()
{
if (privateReceiver != "")
{
chatClient.SendPrivateMessage(privateReceiver, currentChat);
chatField.text = "";
currentChat = "";
}
}
#endregion PrivateChat
#region Callbacks
public void DebugReturn(DebugLevel level, string message)
{
//throw new System.NotImplementedException();
}
public void OnChatStateChange(ChatState state)
{
if(state == ChatState.Uninitialized)
{
isConnected = false;
joinChatButton.SetActive(true);
chatPanel.SetActive(false);
}
}
public void OnConnected()
{
Debug.Log("Connected");
joinChatButton.SetActive(false);
chatClient.Subscribe(new string[] { "RegionChannel" });
}
public void OnDisconnected()
{
isConnected = false;
joinChatButton.SetActive(true);
chatPanel.SetActive(false);
}
public void OnGetMessages(string channelName, string[] senders, object[] messages)
{
string msgs = "";
for (int i = 0; i < senders.Length; i++)
{
msgs = string.Format("{0}: {1}", senders[i], messages[i]);
chatDisplay.text += "\n" + msgs;
Debug.Log(msgs);
}
}
public void OnPrivateMessage(string sender, object message, string channelName)
{
string msgs = "";
msgs = string.Format("(Private) {0}: {1}", sender, message);
chatDisplay.text += "\n " + msgs;
Debug.Log(msgs);
}
public void OnStatusUpdate(string user, int status, bool gotMessage, object message)
{
throw new System.NotImplementedException();
}
public void OnSubscribed(string[] channels, bool[] results)
{
chatPanel.SetActive(true);
}
public void OnUnsubscribed(string[] channels)
{
throw new System.NotImplementedException();
}
public void OnUserSubscribed(string channel, string user)
{
throw new System.NotImplementedException();
}
public void OnUserUnsubscribed(string channel, string user)
{
throw new System.NotImplementedException();
}
#endregion Callbacks
}
Once inPlay is true we then need to switch over back to our BallController script and add some code. In the Update function of this script, we want to add another if statement around everything we’ve already added. This if statement will get the inPlay variable from the GameController instance and check to make sure it is true. This will make it so the ball will only start moving once a player has clicked the mouse, ultimately helping with the flow of the game.
Your new Update function for the BallController script should look something like this
void Update () {
if(GameController.instance.inPlay == true)
{
if(!setSpeed)
{
setSpeed = true;
xSpeed = Random.Range(-2f, 2f);
ySpeed = Random.Range(-2f, 2f);
}
MoveBall();
}
}
using Photon.Chat;
using Photon.Pun;
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
public class PhotonChatManager : MonoBehaviour, IChatClientListener
{
#region Setup
[SerializeField] GameObject joinChatButton;
ChatClient chatClient;
bool isConnected;
[SerializeField] string username;
public void UsernameOnValueChange(string valueIn)
{
username = valueIn;
}
public void ChatConnectOnClick()
{
isConnected = true;
chatClient = new ChatClient(this);
//chatClient.ChatRegion = "US";
chatClient.Connect(PhotonNetwork.PhotonServerSettings.AppSettings.AppIdChat, PhotonNetwork.AppVersion, new AuthenticationValues(username));
Debug.Log("Connenting");
}
#endregion Setup
#region General
[SerializeField] GameObject chatPanel;
string privateReceiver = "";
string currentChat;
[SerializeField] InputField chatField;
[SerializeField] Text chatDisplay;
// Start is called before the first frame update
void Start()
{
}
// Update is called once per frame
void Update()
{
if (isConnected)
{
chatClient.Service();
}
if (chatField.text != "" && Input.GetKey(KeyCode.Return))
{
SubmitPublicChatOnClick();
SubmitPrivateChatOnClick();
}
}
#endregion General
#region PublicChat
public void SubmitPublicChatOnClick()
{
if (privateReceiver == "")
{
chatClient.PublishMessage("RegionChannel", currentChat);
chatField.text = "";
currentChat = "";
}
}
public void TypeChatOnValueChange(string valueIn)
{
currentChat = valueIn;
}
#endregion PublicChat
#region PrivateChat
public void ReceiverOnValueChange(string valueIn)
{
privateReceiver = valueIn;
}
public void SubmitPrivateChatOnClick()
{
if (privateReceiver != "")
{
chatClient.SendPrivateMessage(privateReceiver, currentChat);
chatField.text = "";
currentChat = "";
}
}
#endregion PrivateChat
#region Callbacks
public void DebugReturn(DebugLevel level, string message)
{
//throw new System.NotImplementedException();
}
public void OnChatStateChange(ChatState state)
{
if(state == ChatState.Uninitialized)
{
isConnected = false;
joinChatButton.SetActive(true);
chatPanel.SetActive(false);
}
}
public void OnConnected()
{
Debug.Log("Connected");
joinChatButton.SetActive(false);
chatClient.Subscribe(new string[] { "RegionChannel" });
}
public void OnDisconnected()
{
isConnected = false;
joinChatButton.SetActive(true);
chatPanel.SetActive(false);
}
public void OnGetMessages(string channelName, string[] senders, object[] messages)
{
string msgs = "";
for (int i = 0; i < senders.Length; i++)
{
msgs = string.Format("{0}: {1}", senders[i], messages[i]);
chatDisplay.text += "\n" + msgs;
Debug.Log(msgs);
}
}
public void OnPrivateMessage(string sender, object message, string channelName)
{
string msgs = "";
msgs = string.Format("(Private) {0}: {1}", sender, message);
chatDisplay.text += "\n " + msgs;
Debug.Log(msgs);
}
public void OnStatusUpdate(string user, int status, bool gotMessage, object message)
{
throw new System.NotImplementedException();
}
public void OnSubscribed(string[] channels, bool[] results)
{
chatPanel.SetActive(true);
}
public void OnUnsubscribed(string[] channels)
{
throw new System.NotImplementedException();
}
public void OnUserSubscribed(string channel, string user)
{
throw new System.NotImplementedException();
}
public void OnUserUnsubscribed(string channel, string user)
{
throw new System.NotImplementedException();
}
#endregion Callbacks
}
Now save this script and go back to the GameController script.
The next thing we can add for the flow of our game is a mechanic to load to the main menu that we will be creating. To do this we will add a new if statement to the Update function. This if statement will check for the input of play when they do something like clicking the escape key. If this if statement is true then we will load scene 0.
We will then one more way for the players to load back to the main menu scene. This will be done with a new public void function called MainMenu. Inside this function, we will just load scene 0. This function will be used for a button on our game over panel.
Our Final script
using UnityEngine;
using UnityEngine.UI;
using UnityEngine.SceneManagement;
public class GameController : MonoBehaviour {
public static GameController instance;
public bool inPlay = false;
bool gameOver = false;
public int scoreOne;
public int scoreTwo;
[SerializeField] int scoreToWin;
public Text textOne;
public Text textTwo;
[SerializeField] GameObject gameOverPanel;
[SerializeField] Text winnerText;
private void OnEnable()
{
instance = this;
}
// Update is called once per frame
void Update () {
if(inPlay == false && gameOver != true)
{
if(Input.GetButtonDown("Fire1") || Input.GetKeyDown(KeyCode.Space))
{
inPlay = true;
}
}
if (Input.GetKeyDown(KeyCode.Escape))
{
SceneManager.LoadScene(0);
}
Winner();
}
void Winner()
{
if(!gameOver)
{
if(scoreOne >= scoreToWin)
{
gameOver = true;
winnerText.text = "Player 1 Wins";
gameOverPanel.SetActive(true);
}
if(scoreTwo >= scoreToWin)
{
gameOver = true;
winnerText.text = "Player 2 Wins";
gameOverPanel.SetActive(true);
}
}
}
public void MainMenu()
{
SceneManager.LoadScene(0);
}
}
using Photon.Chat;
using Photon.Pun;
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
public class PhotonChatManager : MonoBehaviour, IChatClientListener
{
#region Setup
[SerializeField] GameObject joinChatButton;
ChatClient chatClient;
bool isConnected;
[SerializeField] string username;
public void UsernameOnValueChange(string valueIn)
{
username = valueIn;
}
public void ChatConnectOnClick()
{
isConnected = true;
chatClient = new ChatClient(this);
//chatClient.ChatRegion = "US";
chatClient.Connect(PhotonNetwork.PhotonServerSettings.AppSettings.AppIdChat, PhotonNetwork.AppVersion, new AuthenticationValues(username));
Debug.Log("Connenting");
}
#endregion Setup
#region General
[SerializeField] GameObject chatPanel;
string privateReceiver = "";
string currentChat;
[SerializeField] InputField chatField;
[SerializeField] Text chatDisplay;
// Start is called before the first frame update
void Start()
{
}
// Update is called once per frame
void Update()
{
if (isConnected)
{
chatClient.Service();
}
if (chatField.text != "" && Input.GetKey(KeyCode.Return))
{
SubmitPublicChatOnClick();
SubmitPrivateChatOnClick();
}
}
#endregion General
#region PublicChat
public void SubmitPublicChatOnClick()
{
if (privateReceiver == "")
{
chatClient.PublishMessage("RegionChannel", currentChat);
chatField.text = "";
currentChat = "";
}
}
public void TypeChatOnValueChange(string valueIn)
{
currentChat = valueIn;
}
#endregion PublicChat
#region PrivateChat
public void ReceiverOnValueChange(string valueIn)
{
privateReceiver = valueIn;
}
public void SubmitPrivateChatOnClick()
{
if (privateReceiver != "")
{
chatClient.SendPrivateMessage(privateReceiver, currentChat);
chatField.text = "";
currentChat = "";
}
}
#endregion PrivateChat
#region Callbacks
public void DebugReturn(DebugLevel level, string message)
{
//throw new System.NotImplementedException();
}
public void OnChatStateChange(ChatState state)
{
if(state == ChatState.Uninitialized)
{
isConnected = false;
joinChatButton.SetActive(true);
chatPanel.SetActive(false);
}
}
public void OnConnected()
{
Debug.Log("Connected");
joinChatButton.SetActive(false);
chatClient.Subscribe(new string[] { "RegionChannel" });
}
public void OnDisconnected()
{
isConnected = false;
joinChatButton.SetActive(true);
chatPanel.SetActive(false);
}
public void OnGetMessages(string channelName, string[] senders, object[] messages)
{
string msgs = "";
for (int i = 0; i < senders.Length; i++)
{
msgs = string.Format("{0}: {1}", senders[i], messages[i]);
chatDisplay.text += "\n" + msgs;
Debug.Log(msgs);
}
}
public void OnPrivateMessage(string sender, object message, string channelName)
{
string msgs = "";
msgs = string.Format("(Private) {0}: {1}", sender, message);
chatDisplay.text += "\n " + msgs;
Debug.Log(msgs);
}
public void OnStatusUpdate(string user, int status, bool gotMessage, object message)
{
throw new System.NotImplementedException();
}
public void OnSubscribed(string[] channels, bool[] results)
{
chatPanel.SetActive(true);
}
public void OnUnsubscribed(string[] channels)
{
throw new System.NotImplementedException();
}
public void OnUserSubscribed(string channel, string user)
{
throw new System.NotImplementedException();
}
public void OnUserUnsubscribed(string channel, string user)
{
throw new System.NotImplementedException();
}
#endregion Callbacks
}
Now save all your script and go back to Unity. Inside Unity, all we need to do is set the OnClick event of our MenuButton object.
We also need to create a new scene and set up the build order for our game. Go ahead and save your game scene then go to File>New Scene. New will build this new scene in the next lesson but for now, just save it. We then want to go to File>Build Settings and add both your new scene and the game scene into the Scene In Build field with the new scene as scene 0.
To test your project you will not be able to do much yet with this new main menu scene but you should be able to see the ball start and stop and be able to load into the main menu scene.
