Chat GUI - Change Chat order?

Question

I'm using Photon's default chat script, and I'm trying to figure out how to have new messages that are sent go from the bottom UP, instead of appear at the top of the chat box.

Here is the script.

 using System.Collections.Generic;
 using UnityEngine;
 using System.Collections;
 
 [RequireComponent(typeof(PhotonView))]
 public class InRoomChat : Photon.MonoBehaviour 
 {
     public Rect GuiRect = new Rect(0,0, 250,300);
     public bool IsVisible = true;
     public bool AlignBottom = false;
     public List<string> messages = new List<string>();
     private string inputLine = "";
     private Vector2 scrollPos = Vector2.zero;
 
     public static readonly string ChatRPC = "Chat";
 
     public void Start()
     {
         if (this.AlignBottom)
         {
             this.GuiRect.y = Screen.height - this.GuiRect.height;
         }
     }
 
     public void OnGUI()
     {
         if (!this.IsVisible || PhotonNetwork.connectionStateDetailed != PeerState.Joined)
         {
             return;
         }
         
         if (Event.current.type == EventType.KeyDown && (Event.current.keyCode == KeyCode.KeypadEnter || Event.current.keyCode == KeyCode.Return))
         {
             if (!string.IsNullOrEmpty(this.inputLine))
             {
                 this.photonView.RPC("Chat", PhotonTargets.All, this.inputLine);
                 this.inputLine = "";
                 GUI.FocusControl("");
                 return; // printing the now modified list would result in an error. to avoid this, we just skip this single frame
             }
             else
             {
                 GUI.FocusControl("ChatInput");
             }
         }
 
         GUI.SetNextControlName("");
         GUILayout.BeginArea(this.GuiRect);
 
         scrollPos = GUILayout.BeginScrollView(scrollPos);
         GUILayout.FlexibleSpace();
         for (int i = messages.Count - 1; i >= 0; i--)
         {
             GUILayout.Label(messages[i]);
         }
         GUILayout.EndScrollView();
 
         GUILayout.BeginHorizontal();
         GUI.SetNextControlName("ChatInput");
         inputLine = GUILayout.TextField(inputLine);
         if (GUILayout.Button("Send", GUILayout.ExpandWidth(false)))
         {
             if(string.IsNullOrEmpty(this.inputLine))
             {
                 return;
             }
             this.photonView.RPC("Chat", PhotonTargets.All, this.inputLine);
             this.inputLine = "";
             GUI.FocusControl("");
         }
         GUILayout.EndHorizontal();
         GUILayout.EndArea();
     }
 
     [RPC]
     public void Chat(string newLine, PhotonMessageInfo mi)
     {
         string senderName = "anonymous";
 
         if (mi != null && mi.sender != null)
         {
             if (!string.IsNullOrEmpty(mi.sender.name))
             {
                 senderName = mi.sender.name;
             }
             else
             {
                 senderName = "player " + mi.sender.ID;
             }
         }
 
         this.messages.Add(senderName +": " + newLine);
     }
 
     public void AddLine(string newLine)
     {
         this.messages.Add(newLine);
     }
 }

I'm not to good with GUI's, so some help would be great!

Answer 1

Best Answer

Answer by Bunny83 · Mar 09, 2014 at 12:25 PM

Change line 52 from

     for (int i = messages.Count - 1; i >= 0; i--)

to

     for (int i = 0; i < messages.Count; i++)

edit
In addition you might need to implement some kind of "autoscrolling" since a ScrollView is used and new lines would appear off-view at the bottom. It might be enough to set

 scrollPos.y = 10000000;

inside the Chat method when a new line is added. This should force the ScrollView more or less to the end.

It looks like the chat history doesn't have a max-line-limit. Even when using a large one you always should implement one ;)

Something like this at the end of the Chat method:

     while (messages.Count > MAXLINES)
         messages.RemoveAt(0);

Add comment · Show 4 · Share

AwesomeX · Mar 09, 2014 at 10:47 PM 0

Share

Wow, I just got back home, and I see the perfect fixes, you're a great ol' chap.

Thank you kindly!

ankurpatel · Mar 25, 2014 at 07:09 AM 0

Share

this is great but i couldn'go up to check my histrory!!!

Bunny83 · Mar 25, 2014 at 09:12 AM 0

Share

@ankurpatel: Well, you can. Are you sure you don't execute the line

 scrollPos.y = 10000000;

every frame? It's only supposed to be called when you add a new line. I know that's not a nice way of scrolling down the chat. If a lot of people are chatting you almost don't have a chance to scroll up. That's why it's better to disable the autoscrolling when you scroll up. However that's all a bit difficult since that would require you to know the relative scrollposition so you know if your at the end or not. Unfortunately Unity doesn't tell us the max-scroll-pos so it's getting difficult how to handle this.

One solution could be, if you have a key to open and close the chat history is to enable the autoscroll function every time you open the chat. Now you only have to "detect" when you're scrolling up to disable the auto scrolling. One way would be to disable it when the user uses the scrollwheel on the mouse. If you show scrollbars the user can also use those to scroll up. So it's getting a bit harder.

One way would be to do a max-scroll-pos comparison. For that you would have to track the max scroll pos you reached until now. This can be done with a line like this after the scrollview:

Now you can check the scrollpos in OnGUI right after the scrollview. If it's significantly smaller than the max position you would disable the auto scrolling function.

Something like this:

 // C#
 float scrollThreshold = 40.0f; // make sure this is large enough or it might disable itself
 
 // [...]
 
 scrollPos = GUILayout.BeginScrollView(scrollPos);
 maxScrollPos = $$anonymous$$athf.$$anonymous$$ax(maxScrollPos, scrollPos.y);
 if (scrollPos.y < maxScrollPos - scrollThreshold)
 {
     autoScroll = false;
 }

ankurpatel · Mar 25, 2014 at 10:15 AM 0

Share

thanx bunny but i got the solution before it by putting

 scrollpos = mathf.infinity;

Chat GUI - Change Chat order?

1 Reply

Follow this Question

Related Questions