[置顶] 【Unity3D游戏开发】基于NGUI的表情图文混排解决方案 (二二)

使用 unity3d也有两年时间了，最近比较闲，有功夫梳理一下去年一年来学到以及用到的知识，分享给大家，顺便方便自己查阅。如有错误以及不当的地方，欢迎各位指正。谢谢。

    去年五月份的时候，刚加入项目不久，老大交给我一个关于聊天系统任务，期初觉得应该很容易，但是看了文档之后，瞬间头都大了_(:з」∠)_，因为需要支持表情！当时Unity3D版本4.3.x，NGUI版本3.5x，当时版本的NGUI已经支持动态字体，我们的项目也不例外，赶忙就用上了。但是，表情的 问题要怎么解决？总不能用颜文字吧(╯‵□′)╯︵┻━┻。如果不用动态字体而使用自己制作的图集字体，倒是可以将表情图片打进字库解决。但是既然我们已经用了动态字体，我就只能另想办法了。

    经过两天的研究实践，最终找到一个能够实现的解决办法。主要思路是：

    1.定义一个标准行宽度，以此作为基准对文字以及表情进行分行处理；

    2.使用特殊符号标记表情（例如：#e001），遍历字符串，凡遇到表情标记则将之与位置记录下来，并使用“ ”（空格，具体数量视表情大小而定）将特殊标记替换。

    3.使用Vector3记录以上信息，x为表情的横坐标，y为表情所在行数（即纵坐标），z为表情的ID，即刚才的001，以此确定是哪个表情。使用一个List将所有表情信息存放起来，显示时遍历List即可。

    有了以上基本思路，下面只要编码实现，但是在编码过程中还是不可避免的问题——如何得到一段文字的长度？这时，就需要用到一个NGUI封装的一个方法NGUIText.CalculatePrintedSize传入参数为string，返回一个Vector2，表示这段文字的长和宽。下面是核心代码。

[code]csharpcode：

protected void CalculateExpressionPos(ref string text)
{
   NGUIText.finalSize = m_chatInput.label.defaultFontSize;//设置当前使用字体大小
   lineList.Clear();
   int row = 0;
   int textWidth = 0;
   int lastStartIndex = 0;
   string curLine = "";
   int length = text.Length;
   for (int i = 0; i < length; i++)
   { 
      if (text[i] == '#' && i + 4 < length && text[i + 1] == 'e')
      {
         string eName = text.Substring(i + 2, 3);
         int eIndex = 0;
         Vector3 ePos = Vector3.zero;
         if (int.TryParse(eName, out eIndex))
         {
            float fx = 0;

            text = text.Remove(i, 5);
            text = text.Insert(i, space);//space = "       ";
            length = text.Length;
            //这里的CalculatePrintedSize是重载过的，
            //与原本方法相比多的一个参数自定义行款，替换原方法中的rectWidth即可
            textWidth = Mathf.RoundToInt(
               NGUIText.CalculatePrintedSize(
               text.Substring(lastStartIndex, i - lastStartIndex),
               BASELINEWIDTH + 30).x);
             //BASELINEWIDTH为标准行宽度，30是根据表情大小确定的，
             //这里的表情大小是30*30
             if (textWidth > BASELINEWIDTH - 30)         
             {
                curLine = text.Substring(lastStartIndex, i - lastStartIndex + 1);
                lineList.Add(curLine);

                if (textWidth <= BASELINEWIDTH - 15 ||
                    textWidth >= BASELINEWIDTH)//行末尾不够需换行
                {
                   fx = 0;
                   row++;
                   lastStartIndex = i;
                   ePos.x = fx - m_offsetX;
                   ePos.y = row;
                   ePos.z = eIndex;
                }
                else   //行末尾足够不需换行
                {
                   fx = textWidth;
                   lastStartIndex = i + space.Length;
                   ePos.x = fx - m_offsetX;
                   ePos.y = row;
                   ePos.z = eIndex;
                   row++;
                }
             }
             else
             {
                fx = textWidth;
                ePos.x = fx - m_offsetX;
                ePos.y = row;
                ePos.z = eIndex;
             }
         }
         if (eIndex != 0)
         {
            eList.Add(ePos);
         }

         if (!expInLine.ContainsKey(row))        //有表情无表情行,以此确定行间距
         {
            expInLine.Add(row, true);
         }
      }
      else      //记录换行起始Index
      {
         if (i - lastStartIndex < 0) continue;

         float curWidth = Mathf.RoundToInt(
            NGUIText.CalculatePrintedSize(
            text.Substring(lastStartIndex, i - lastStartIndex + 1),
            BASELINEWIDTH + 30).x);
         if (curWidth > BASELINEWIDTH)
         {
            curLine = text.Substring(lastStartIndex, i - lastStartIndex + 1);
            lineList.Add(curLine);
            lastStartIndex = i + 1;
            row++;
         }

         if (i == length - 1)
         {
            if (i - lastStartIndex < 0) continue;

            curLine = text.Substring(lastStartIndex, i - lastStartIndex + 1);
            lineList.Add(curLine);
         }
      }
   }
}

      经过以上处理，输出的lineList即为聊天内容，eList为表情信息，expInLine字典存放每行是否存在表情信息。将表情图标打入一个图集，命名为001_1、001_2。。。在显示表情时使用UISpriteAnimation脚本可实现动态表情。最终效果如下：

                                                                                         

原文链接: http://www.manew.com/blog-3649-2595.html

参考文章: NGUI研究院之有点坑爹的图文混排（十四）