基于Unity插件NGUI的富文本功能的一些实现思路

嘿嘿，我又回来了，不知道有没有关心我的朋友在找我呢？

做游戏开发的，真的很累。累，不仅仅只有在工作上，还有的是在政策限制上，以及心灵上；做游戏，真的会背负一些骂名。前段时间，我就听到一些幼师在说现在的小朋友很多都带眼镜，整天都玩手机，玩游戏，导致成绩不好云云。不论怎么诡辩都好，其实现在的游戏确实得为此承担一部分责任。

这段时间有点迷失自己了，找不到前进的动力，前几天去图书馆里喝了几碗鸡汤，好好反思了下人生，和人生的意义。这两天才在迷失中找回了自己，并决定不能再继续消沉下去了。我的人生应该更加精彩才对！



废话不多说，开始今天的主题吧！
先来解释一下什么是富文本，我的富文本又是怎么样子的以及说说实现思路；
先声明一下，我做的这个富文本是基于NGUI的。
其实这个富文本不是很一种新的东西，而是在上家公司任职的时候使用过的一个部件，当时没有看过相关的源码，只是现在想想那个东西确实很好用，所以用自己的思路来实现一遍。
NGUI的Label也能够支持图文混排，可是有很大的局限性。
比如，我想在Label里面插入一张图片呢？这个图片不能有图集的限制，我想在Label里卖弄插入一张Texture呢？
NGUI的UILabel是做不到这么灵活的，而这些功能就是富文本是实现功能。

我想了一想，在实际应用当中，在一个富文本中要用到的功能，可能会有：

UI元素：

• label
• sprite
• spritamintor
• texture

• 
  事件元素
  

• url | onclick

• 结合以前使用的经验，可行的一种简单的实现思路就是：
  利用一种类似于html元素，里面标明是label还是sprite
  如果是label那么就创建uilabel,如果是sprite那么就创建sprite…

  为此开发简单，参考记忆中的组件使用方法，定了一个基本的元素格式：
  
"<lab color = '', size = '', text = '' />"
"<spr spraltername = '',sprname = ''/>"
"<lab color = '',size = '', text = 'sdkfjhkdsjhf' />"
"<texture texturename = ''/>"
"<url id = ''>"


  仔细想想开发的难点应该是以下这些
  1.UI元素和事件元素可以同时并存还是属性？
  如果有事件，那么应该在元素配置里面给我个事件的id,当触发ui元素点击事件的时候，再根据这个id寻找所有相同id的元素的颜色设置为点击后的颜色，再调用点击的回调方法，并且传入id
  "<spr id = '' , spraltername = '',sprname = ''/>"

  2.统计字符长度和换行
  换行有高度问题，也有宽度问题。还存在一个text切割为两个text

  首先RichiLab有一个宽高的限定
  也还有对齐方法
  
  为此，应该设置一个统一的调用入口，如果丢失掉其中一个参数就创建失败
  @param mnt 挂载点，父物体
  @param size 宽高
  @param alignment 对齐方式
  @param text 文字内容
  @param call_func url的回调 回调时候会将url 的 id回传
  CreateRichLab(mnt,size,alignment,text,call_func)
  
  影响行数的因素
  1.自动换行
  2.字符串里面有换行的符号
  
  实现的步骤应该是：
  1.按照元素，一个个创建UI元素并且设置元素的各种属性
  2.计算长度，先定义为只有一行UI元素列表，并且进行遍历lable查看是否有Line > 1 的行，如果有就切割开label，
  
  仔细想想应该有两个List<List<元素>> 元素二维表
  
      // 解决调用者自定义分行
      元素二维表1
      大概的思路是：
      for i < 元素总数
          检查 元素总数[i] 是否有换行
              有：行数 = 对元素总数[i]进行切割
                  元素二维表1[cur_line] << 行1
  
                  //其余行数，一行就是一个新的
                  for line = 1 ,line < 行数; ++line
                      元素二维表1.CreateNewLine();
                      元素二维表1[cur_line] << 行line
  
      // 这里是解决字符串超长导致的换行的问题           
      二维表2 // 映射出UI元素位置
      再对元素二维表1进行分割，调用API查看是不是溢出width了。
      如果遇到表1分行，则对元素二维表2进行分行
      如果超出width，也要对表2进行分行
      // 检查字符串长度的方法：//https://blog.csdn.net/fenrir_sun/article/details/54342313
  
      最终的结果就是一行二维表中的元素对应的UI也是一行
  

  3.层级管理
  因为它们都不会重叠，实现上只要一层就能全部显示了，但是又因为全部都在同一层级会增加不少drawcall，所以得分层
  暂定为：所有相同的UI都设置为同一个depth

  4.回收管理
  UI回收管理和重复利用

  目前能想到的主要问题就是上述那些了，明天准备写这部分代码，有遇到新问题再补充。
  到最后，我会把所有源码都放在码云上
  希望能遇到对的人，提供一些更好的实现思路