基于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回收管理和重复利用

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

    猜你喜欢

    转载自blog.csdn.net/biospc/article/details/80500284