NGUI聊天动态表情

貌似从NGUI 3.0版本开始就支持图文表情，实现文字与表情并存，但是该功能只支持静态图片，还无法实现动态表情，于是烦人的策划又给我出了个让我想打人的需求：让聊天内容上的表情动起来。好吧，我还能说啥，今天就给大家讲一下我是怎样让表情动起来的。

其实想法也很简单，每个动态表情都做成两张图片，文字内容准备两份，其中一份包含表情的第二张图片，然后每隔一定时间切换两个文字内容，这样看起来表情就能动啦。

(1)    BitMap字体与表情图集：做好表情图集与BitMap字体，在字体UIFont的symbols and emoticons下添加表情转换符。在这里，表情的第一张图片我都采用一个希腊字母来作为转化符，第二张图片则在字母前边加个‘-’。

用UIInput的时候会发现一个问题，Label下面的BBCode的勾被取消掉了，即使运行前把勾打上，一旦工程运行这个地方就会被取消掉，也就无法显示表情和其他特殊效果。

其原因是包含转化符的Label实际字符数要比显示出来字符数要多，如果表情转化符超过一个字符，就会造成在输入文字的时候光标会远离最后一个文字n个字符，为避免这个现象，保证输入框光标的正常位置，建议将表情转化符限制在一个字符上，可用生僻的字母代替，例如希腊字母、罗马数字等。

(2)激活输入框编码转换：由于工程开始运行的时候会把Input下的Label编码转换功能取消掉，因此在激活输入框的时候用代码把它打开。

代码展示：

/// <summary>

    /// 输入框点击

    /// </summary>

    public void InputClick()

    {

        uiinput.label.supportEncoding = true;//激活输入框支持编码转换

    }

(3)输入框内添加表情：选中某一表情后获取SriptName，再从UILabel.bitmapFont.symbols中查找对应的转化符，将其写入输入框内。

代码展示：

string sprName = UIButton.current.GetComponent<UISprite>().spriteName;//获取图集名字

        foreach (BMSymbol symbol in uiinput.label.bitmapFont.symbols)

        {

            if (symbol.spriteName == sprName)

                uiinput.value += symbol.sequence;//转化符写入输入框内

        }

(4)替换文本：每次输入完成发送后，都先保存在一个string里面，然后再检测替换掉表情第二张图片的转化符保存添加到另一个string内，这样我们就有了两个表情文本，一个string包含表情的第一张图片转化符，另一个string包含表情的第二张图片转化符。

代码展示：

private string _symbols = "αβ";//表情转化符

    private string _oldStr = "";//原文本

    private string _replaceStr = "";//替换内容

    /// <summary>

    /// 输入框提交

    /// </summary>

    public void InputSumbit()

    {

        string str = "[消息：]" + uiinput.value;

        _oldStr = _oldStr + "\n" + str;//保存原内容

        contentLabel.text = _oldStr;

        table.repositionNow = true;

        string inputStr = str;

        //是否有表情

        for (int i = 0; i < _symbols.Length;i++ )

        {

            string symbolStr = _symbols.Substring(i, 1);//表情转化符

            if (uiinput.value.Contains(symbolStr))

                inputStr = inputStr.Replace(symbolStr, "-" + symbolStr);//替换文本

        }

        _replaceStr = _replaceStr + "\n" + inputStr;//保存替换后的文本

        uiinput.value = "";

    }

(5)动态切换文本：设置切换间隔时间来回替换两个内容填充Label。

代码展示：

private float _spaceTime = 0.5f;//间隔时间

    private float _nextTime = 0.0f;

    private int _count = 0;          

        // Update is called once per frame

        void Update () {

        //每隔0.5秒切换一次

        if (Time.time > _nextTime)

        {

            _nextTime = Time.time + _spaceTime;

            if (_count % 2 == 1)

                contentLabel.text = _oldStr;

            else

                contentLabel.text = _replaceStr;

            _count++;

        }

        }

以上便是自己的制作想法与过程，或许大家还有更好的想法，欢迎给我留言，后期还会与大家分享其他的UI效果，谢谢大家的阅读。