Let’s create a game menu with a navigation bar like google and app Zero. The main thing we will focus on in this post is getting the navigation bar setup with buttons to corresponding panels. The navigation bar on the app Zero has buttons labeled Timer, Fasts, History, Learn. Here is a picture of the Google and Zero app side by side with the navigation bar highlighted in red for reference:
Many other games and applications use this menu system for its minimal design, easy navigation, and easy setup. Some drawbacks are that the bar runs out of space quickly and double stacking the bar most of the time isn’t an option because of limited screen space.
Goals For This Lesson
Set panels to active/visible and nonactive/nonvisible with SetActive(True) or SetActive(False).
Creating a grid for an easier layout.
Condensing the code with an array and for loop.
Development for mobile.
In the next lesson, we will work on implementing some design and color/size-changing of the active icons.
Please Become A Member Today
Before we get started I always have to make a plug to join our membership at https://www.infogamerhub.com/memberships/ It helps us out a lot and we are adding new stuff all the time. We want to be able to help others out in the future with their coding and unity skills. There are many benefits to being a member and having the code being visible can be very useful.
[/wcm_nonmember]
Unlock Code and Member Content
Example 1 – “That’s alot of damage, I mean SetActives”
Example 2 – “Shortening it with an array and a forloop”
This is a quick video on setting up your own sprite sheet with Photoshop. If you continue down the post there will be a sprite sheet for download for members only. We are adding to this sprite sheet over time so come back to download an updated sprite sheet in the future.
The next lesson I was going to do was on how styling and adding icons with the color and size-changing effect on the navigation bar makes the project look more professional. If you want us to do a lesson on other menu setups and navigation bars let us know in the comments on the YouTube video for this post.
For this lesson on how to make your games multiplayer with Photon PUN in Unity, we will teach you how to fix the camera so that the local player is always at the bottom of the screen. To do this we want to open up the PaddleController script. In this script, we want to use the rotation of the paddle object to rotate the main camera to be the same. This can be done in the Start function as this function will be executed after this paddle is instantiated.
Now we do need to add one condition to the script and that is we only want to rotate the camera if we are the owner of the current paddle. Without this condition, the camera would just rotate to the rotation of the last paddle instantiated into the scene, which for the first player would be wrong. Add this condition around where you set the rotation of the camera.
Once the camera is rotated to be the same a the local player’s paddle we then need to fix the controls for moving the paddles. Right now the paddles are set to move in world space but we need to change this so that the paddle moves in relation to its local space or in relation to itself. To do this go to where we are moving the paddles with translate then just change where it says World to Self.
Now save this script, go back to Unity and test your project.
Unlock Code and Member Content
PaddleController.cs
using UnityEngine;
using Photon.Pun;
public class PaddleController : MonoBehaviour
{
private PhotonView myPV;
public string leftKey, rightKey;
public float speed;
private void Start()
{
myPV = GetComponent<PhotonView>();
if (myPV.IsMine)
{
Camera.main.transform.rotation = transform.rotation;
}
}
void Update()
{
if (myPV.IsMine)
{
PaddleMovement();
}
}
void PaddleMovement()
{
if (Input.GetKey(leftKey) && transform.position.x > -4)
{
transform.Translate(Vector3.left * Time.deltaTime * speed, Space.Self);
}
if (Input.GetKey(rightKey) && transform.position.x < 4)
{
transform.Translate(Vector3.right * Time.deltaTime * speed, Space.Self);
}
}
}
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
}
For this lesson of our series on how to make your games multiplayer with Photon’s PUN plugin, we set up the ball prefab so it is networked and synchronized for all connected clients. To get started we want to go to the folder where we have our ball prefab saved and then we want to double click on the ball prefab to open it up. Now like the paddle prefab the first thing that we do is add a photon view component to this object. Next, we will move this ball prefab to inside the Resources folder just in case we decide we want to instantiate more balls into our game.
Now let’s work on synchronizing the movement of our ball and since the ball is moved using physics we want to attach a Photon Rigidbody2d View. Click on add component and then with Photon typed into the search I’m going to click on photon rigidbody2d. We want to have only synchronized velocity selected and will drag this component into the observe component of our Photon View.
Now objects that are owned by the scene are controlled by the master client and so we need to add some conditions to our ball control the script and so open that up. Once this script is opened, add a namespace up at the top which will be using Photon.PUN. Now we’ll add one condition to the beginning of our update function and will check to see if we are not the master client. If we are not then return before doing anything else. This will make it so only the master client moves the ball and that movement will then be synced by the Photon Rigidbody2D View. Save your script and go back to Unity.
