Shulou(Shulou.com)06/03 Report--

This article mainly introduces Unity how to achieve Wechat chat box interface, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand it.

[principle]

A chat interface is mainly composed of three parts: content area, visible area and slider bar.

The visible area is above the content area, and the content area becomes very long with the chat content, but only the part located in the visible area can be seen, and the rest of the area is not visible. Move the content area up and down through the slider, and the content you see changes.

[steps]

Create a new UI- > Panel, rename it to ChatPanel, and add the Scroll Rect component

Create a new UI- > Panel under ChatPanel, rename it to ViewPort, and add Mask components

Create a new UI- > Scrollbar,Direction under ChatPanel and select Bottom To Top

Create a new UI- > Panel under ViewPort, remove the Image component, rename it to Content, and adjust its Anchor and Pivot

Adjust the Height consistency of ViewPort, Content, and Scrollbar

Copy the Scroll Rect component as follows

Create chat bubbles

The effect is as follows

Add ContentSizeFitter and Vertical Layout Group components to bubble to make the bubble size change with the text size. Add a LayoutElement to the Text. The effect is as follows

Create the chat bubble on the right, and the effect is as follows:

Create a new script, named ChatPanelManager, and hang it under ChatPanel

[script] using UnityEngine;using UnityEngine.UI; public class ChatPanelManager: MonoBehaviour {public GameObject leftBubblePrefab; public GameObject rightBubblePrefab; private ScrollRect scrollRect; private Scrollbar scrollbar; private RectTransform content; [SerializeField] private float stepVertical; / / Vertical interval between upper and lower bubbles [SerializeField] private float stepHorizontal; / / horizontal interval between left and right bubbles [SerializeField] maximum width of private float maxTextWidth;// text content private float lastPos / / half of the height of private float halfHeadLength;// avatar at the bottom of the previous bubble public void Init () {scrollRect = GetComponentInChildren (); scrollbar = GetComponentInChildren (); content = transform.Find ("ViewPort"). Find ("Content"). GetComponent (); lastPos = 0; halfHeadLength = leftBubblePrefab.transform.Find ("head"). GetComponent (). Rect.height / 2 } public void AddBubble (string content, bool isMy) {GameObject newBubble = isMy? Instantiate (rightBubblePrefab, this.content): Instantiate (leftBubblePrefab, this.content); / / set bubble content Text text = newBubble.GetComponentInChildren (); text.text = content; if (text.preferredWidth > maxTextWidth) {text.GetComponent (). PreferredWidth = maxTextWidth;} / / calculate the horizontal position of the bubble float hPos = isMy? StepHorizontal / 2:-stepHorizontal / 2; / / calculate the vertical position of the bubble float vPos =-stepVertical-halfHeadLength + lastPos; newBubble.transform.localPosition = new Vector2 (hPos, vPos); / / Update lastPos Image bubbleImage = newBubble.GetComponentInChildren (); float imageLength = GetContentSizeFitterPreferredSize (bubbleImage.GetComponent (), bubbleImage.GetComponent ()) .y; lastPos = vPos-imageLength / / update the length of content if (- lastPos > this.content.rect.height) {this.content.sizeDelta = new Vector2 (this.content.rect.width,-lastPos);} scrollRect.verticalNormalizedPosition = 0 public Vector2 GetContentSizeFitterPreferredSize / make the slider roller at the bottom} public Vector2 GetContentSizeFitterPreferredSize (RectTransform rect, ContentSizeFitter contentSizeFitter) {LayoutRebuilder.ForceRebuildLayoutImmediate (rect) Return new Vector2 (HandleSelfFittingAlongAxis (0, rect, contentSizeFitter), HandleSelfFittingAlongAxis (1, rect, contentSizeFitter);} private float HandleSelfFittingAlongAxis (int axis, RectTransform rect, ContentSizeFitter contentSizeFitter) {ContentSizeFitter.FitMode fitting = (axis = = 0? ContentSizeFitter.horizontalFit: contentSizeFitter.verticalFit); if (fitting = = ContentSizeFitter.FitMode.MinSize) {return LayoutUtility.GetMinSize (rect, axis);} else {return LayoutUtility.GetPreferredSize (rect, axis);} [Test script-add content by spaces] using System.Collections.Generic;using UnityEngine; public class test: MonoBehaviour {public ChatPanelManager cpm; private int count Private List dialogue = new List (); void Start () {cpm.Init (); dialogue.Add (Eternal Star); dialogue.Add (Eternal Star) Dialogue.Add (Eternal Star); dialogue.Add (Eternal Star); dialogue.Add (Eternal Star) Dialogue.Add (Eternal Star); dialogue.Add (Eternal Star) Dialogue.Add (Eternal Star);} void Update () {if (Input.GetKeyDown (KeyCode.Space)) {cpm.AddBubble (dialogue2) > 0) Count++; if (count > dialogue.Count-1) {count = 0;} [test results]

[supplementary note]

The core here is the addition of chat bubble content. As for avatar and name, it is relatively simple, and we can add our own implementation in the AddBubble method.

Thank you for reading this article carefully. I hope the article "how to implement the Wechat chat box interface with Unity" shared by the editor will be helpful to everyone. At the same time, I also hope you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.