FGUI应用——制作聊天气泡

一、序

在制作游戏时，我们经常会使用类似微信聊天的气泡对话框，首先这里对聊天气泡的需求进行一个总结：

1. 气泡会有突出的拐角指向发言人，以此分辨是谁的发言
2. 气泡要根据文本自适应大小。当文本不足一行时，气泡宽度适应文本；当文本超过一行时，气泡宽度限制在最大宽度，气泡高度随文本行数增加
3. 聊天列表中每一项的高度随气泡高度自适应

思路：FGUI文本框的自动大小模式中，宽度和高度模式无法进行大小限制，而高度模式下当文本长度不到一行时不能进行宽度自适应。因此，我们使用代码控制自动大小模式，当文本长度不超过一行时使用宽度和高度模式，当文本长度超过一行时使用高度模式。

本文将使用FGUI和Unity游戏引擎进行示范

二、FGUI方面

首先使用FGUI制作聊天气泡组件，然后将其导入unity

美术资源处理

准备一张这样的气泡图片

拖入FGUI资源库中，双击图片打开，将缩放模式设置为九宫格，并将四条分割线如图设置，这样在缩放时就可以保证指向发言人的拐角不会形变

制作组件

在FGUI中新建组件，并将准备好的气泡放入组件中，然后新建一个文本框，放在合适位置

下面就是很重要的一步——设置关联：

1. 令气泡关联文字，宽->宽，高->高，这样气泡的大小就可以跟随文本框大小变化
2. 令文字关联气泡，右->右，上下居中，这样就保证在文字不超过一行时，向左延长

将组件发布到Unity工程文件Assets文件夹中并生成代码，接着我们来到unity补充一些代码

代码控制

脚本比较简单，不多解释了

using FairyGUI;
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class ChatBubbleTest : MonoBehaviour
{
    private UIPanel m_ui;
    private GTextField m_text;
    public string text;

    // Start is called before the first frame update
    void Start()
    {
	    //获取UI组件
        m_ui = GetComponent<UIPanel>();
        m_text = m_ui.ui.GetChild("m_text_content").asTextField;
    }

    // Update is called once per frame
    void Update()
    {
        m_text.text=text;
        AdaptiveSize();
    }

	//用于设置文本框自适应
    private void AdaptiveSize()
    {
        m_text.autoSize = AutoSizeType.Both;//将文本框自动大小设置为宽度和高度
        if(m_text.width>300)//当文本宽度大于300时
        {
            m_text.width = 300;//将文本框宽度设定为300
            m_text.autoSize = AutoSizeType.Height;//将自动大小模式改为高度
        }
    }
}

看看效果

三、结尾

制作聊天气泡的代码并不复杂，关键在于在FGUI中要设置好组件直接的关联关系，通常气泡旁边还会有头像、时间等组件，这时候组件间的关联关系就会变得相对复杂，需要注意。

在实际项目中，分别会有向左和向右的气泡，我本想制作一个组件，使用FGUI的控制器进行左右切换，但是关联关系过于复杂，导致切换方向后各个组件总是错位，最后我选择分别制作了向左和向右两个组件。

如果使用FGUI列表装载聊天气泡，请注意要将父组件大小关联文本框大小，列表开启自动元素大小，这样气泡在列表中就不会上下相互遮挡了。