1. 程式人生 > >基於Unity外掛NGUI的富文字功能的一些實現思路

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

    目前能想到的主要問題就是上述那些了,明天準備寫這部分程式碼,有遇到新問題再補充。
    到最後,我會把所有原始碼都放在碼雲上
    希望能遇到對的人,提供一些更好的實現思路

    相關推薦

    基於Unity外掛NGUI文字功能一些實現思路

    嘿嘿,我又回來了,不知道有沒有關心我的朋友在找我呢? 做遊戲開發的,真的很累。累,不僅僅只有在工作上,還有的是在政策限制上,以及心靈上;做遊戲,真的會揹負一些罵名。前段時間,我就聽到一些幼師在說現在的小朋友很多都帶眼鏡,整天都玩手機,玩遊戲,導致成績不好云云。

    RichEditor——一款基於RecyclerView實現文字編輯器實現方案(支援圖文、轉義生成MarkDown、粗體、斜體、下劃線、刪除線、超連結、標題等)

    前言 對於富文字編輯器的實現,首先我們肯定會想到實現的編輯器需要支援的幾個必要特性: 1.涉及大量文字,圖片,文字樣式的展示與編輯。 2.涉及極其複雜的使用者互動。 目前Github上我所瞭解的富文字編輯器基本上實現方式基於兩種: * 1.基於WebView

    Vue基於vue-quill-editor文字編輯器使用心得

    vue-quill-editor的guthub地址,現在市面上有很多的富文字編輯器,我個人還是非常推薦Vue自己家的vue-quill-deitor,雖然說只支援IE10+,但這種問題,帥給別人吧! 那麼我們直擊正題,在vue中使用quill呢,我們需要npm進行安裝,安裝命令如下: npm ins

    Unity外掛NGUI實現技能冷卻效果

                    二十一 技能CD冷卻效果 1 建立一個Sprite1作為技能圖示,建立一個文字子物體作為快捷鍵 2 再建立一個Sprite2作為Sprite1的子物體,設定成Sprit

    防禦XSS攻擊:基於白名單的文字XSS後端過濾(jsoup)

    簡介: 跨站指令碼攻擊(Cross Site Scripting),為了不和層疊樣式表(Cascading Style Sheets, CSS)的縮寫混淆,故將跨站指令碼攻擊縮寫為XSS。  攻擊原

    外掛開發】觸屏裝置專用文字編輯器實現

    前言 觸屏裝置上面由於空間狹小而有時候又有圖文混編的需求,所以,移動端尤其是web上面的富文字編輯器一直是一個空白,這段時候就做一個觸屏版的富文字–當然不可能像pc端那樣有數十個按鈕,控制粒度也不可能

    Unity外掛NGUI製作血條--HUD的基本使用

    一.利用NGUI製作 血條。 1.在2d場景中 先拖一個BG進去。然後建立一個 sprite。修改名字為LifeBar. 在inspector面板中 uisprite屬性值。如下: 2.在lifebar下建立一個sprite,用於當做血的顯示。 屬性修改同上。把顏色

    summernote文字編輯器實現圖片新增上傳和刪除圖片

    summernote的基本使用 HTML程式碼 //div添加個id就可以 <div id="summernote" ></div> 然後JS操作 //例項化呼叫 var $summernote = $('#summernote').summernote(

    bbs專案文字編輯器實現上傳檔案到media目錄

    media目錄是在project的settings中設定的,static目錄是django自己使用的靜態檔案的上傳目錄,media目錄是使用者自定義上傳檔案的目錄 # Django使用者上傳的檔案都放在media目錄下 MEDIA_URL = "/media/" MEDIA_ROOT = os.pat

    基於iframe+form偽造ajax提交功能實現頁面不重新整理提交資料

    直接貼程式碼看ajax4程式碼就行: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Ajax請求的幾種方式</title

    仿簡書APP文字編輯器實現

    <RelativeLayout android:id="@+id/rl_layout_editor" android:layout_width="match_parent" android:layout_height="wrap_content"

    1、使用文字編輯器實現檔案的上傳和下載

    1、環境配置                                                                                             需要用到的檔案包:          ckeditor_3.6.2   

    基於 Redis 的全域性唯一性ID生成器的一些實現思路

    前段時間正值開發ID生成中心,看到很多業界大神分享了自己公司的ID生成器的設計思路。現在分享一下自己的思路,供大家參考、吐槽。 業務需求及業內方案,在許多文章中都有介紹,我在這裡就不多介紹了。現在直入主題,談談自己的設計思路。 基本介紹 1.MySQL記錄註冊的應用服

    Android Intent分享檔案|分享圖片|分享文字|功能實現

    Android Intent 實現分享功能。可分享圖片,檔案,文字給QQ好友,微信好友,簡訊聯絡人。 如我所知:網上已經有一大堆這樣相關的資料。但是有些不幸的是:沒有看到一個完整的,比較全面的,可以直接拿來使用的工具類。於是,我結合網上找的這些資料,做了一個簡

    基於時間序列的異常檢測系統的實現思路之一

    技術方案:Spark、kafka、opentsdb、Yahoo的egads 模型靜態訓練:採用兩種演算法進行模型的訓練:指數移動平均和HotWinters,模型一天訓練一次,即每天0點開始訓練,每天凌晨0:5分根據訓練好的模型進行異常檢測,具體包括點的預測以及點的異常檢測;

    基於字符界面的收銀臺操作系統實現思路

    ffffff datetime 集合 tip image 代碼 統計分析 lda 知識 1. 寫在前面 基於字符界面的收銀臺操作系統的開發主要是為了對JavaSE基礎知識的鞏固,同時練習通過對現實問題分析,匯總,抽象,設計,最終通過代碼實現。 Tips:普通程序員與優秀程

    HTC vive基於unity的凝視互動功能(帶HTC 外掛

    提供幾個 HTC 外掛  1.SteamVR 2.VRTK - SteamVR Unity Toolkit 3.HTCUnity 連結:http://pan.baidu.com/s/1mhSt83Q 密碼:0e2p 帶上HTC眼鏡後盯住物體幾秒,然後彈出一個縮減時間的U

    基於NGUI文字解決方案模型

    今天富文字功能已經按既定的計劃動手施工了, 目前已經將解決思路的模型給搭建出來了, 今天就說說我寫的那些程式碼,全權當做一個使用說明 程式碼中主要的類有三個 RichLabelMgr RichLabelCtrl RichLabelComponen

    Unity外掛NGUI學習(5)—— 建立Label圖文混排及文字點選

    建立一個新的Scene,並按 Unity外掛之NGUI學習(2)建立UI Root。 準備工作,製作Font,現在Project視窗建立一個Font資料夾,然後從系統自帶字型資料夾中選擇自己需要的字型,我選擇了黑體,然後拖到Font資料夾中去。選擇剛匯入的字型。 Font

    vue文字編輯器Tinymce,功能齊全,對圖片等媒體資源操控性好,非常推薦!

    使用步驟: 1.在index.html中引入js檔案: <body> <script src="./static/tinymce4.7.5/tinymce.min.js"></script> <div id="app"></div