Unity使用TextMeshPro實現聊天圖文混排

多见多闻發表於2024-09-19
Unity

本文來自：https://developer.aliyun.com/article/1066623

1.文字自適應問題。
2.圖文混排問題。

UI介面

1.建立滑動列表

首先建立一個可以上下滑動的列表，命名為chat_scroll
image.png

2.建立聊天預製

因為聊天是兩人以上的，自己的聊天顯示在右側，別人的聊天訊息顯示在左側。因此需要製作兩個聊天框，分別代表自己的其他人，如下圖的me和other。
建立的聊天預製如下：
image.png

3.使用TextMeshPro

注意：為了能實現表情加文字的效果，我們需要使用TextMeshPro作為訊息顯示
image.png

4.新增Layout Element

為聊天預製item新增Layout Element元件，如下：
image.png

Layout Element的Preferred Width和preferred Height值與me和other的長寬保持一致：
image.png

6.設定錨點

接著，我們需要設定遊戲物件的錨點，如下圖：
34.gif
345.gif

程式碼控制顯示

1.獲取遊戲物件

首先我們需要獲取到需要用到的聊天item的遊戲物件：

local render = {}
    render.go = poolManager.AddObj("Modules/friendchat/worldChatItem.prefab", ui.world_content)
    local trans = render.go.transform
    --我
    render.me = utils.findobj(render.go, "me")
    render.me_headFrame = utils.findimage(render.me, "head/headFrame")
    render.me_headImg = utils.findimage(render.me, "head/headImg")
    render.me_lv = utils.findtext(render.me, "level/lv")
    render.me_name = utils.findtext(render.me, "topDes/name")
    render.me_sectionImg = utils.findimage(render.me, "topDes/sectionImg")
    render.me_sectionDes = utils.findtext(render.me, "topDes/sectionImg/sectionDes")
    render.me_msgTxt = utils.findtmp_text(render.me, "msgBg/msgTxt")
    --對方
    render.other = utils.findobj(render.go, "other")
    render.other_headFrame = utils.findimage(render.other, "head/headFrame")
    render.other_headImg = utils.findimage(render.other, "head/headImg")
    render.other_lv = utils.findtext(render.other, "level/lv")
    render.other_name = utils.findtext(render.other, "topDes/name")--名字
    render.other_sectionImg = utils.findimage(render.other, "topDes/sectionImg")--段位img
    render.other_sectionDes = utils.findtext(render.other, "topDes/sectionImg/sectionDes")--段位秒速
    render.other_msgTxt = utils.findtmp_text(render.other, "msgBg/msgTxt")

2.遊戲物件重新整理

重新整理每個item的資訊：

if message:GetUid() == playerDataManager.GetUid() then--判斷訊息是否是本人傳送
        --自己
        local sender = message:GetSender()
        local friend = friendData:New(sender)
        render.me_headFrame.sprite = utils.loadsprite("frame", friend:GetFrame())
        render.me_headImg.sprite = utils.loadsprite("head", friend:GetHead())
        render.me_lv.text = friend:GetLevel()
        render.me_name.text = friend:GetName()
        render.me_sectionImg.sprite = utils.loadsprite("friendChat", friend:GetFrameImg())
        render.me_sectionDes.text = friend:GetSectionName()
        render.me_msgTxt.text = message:GetContent()
        CalcWorldChatWidthHight(render.me)
        render.me:SetActive(true)
        render.other:SetActive(false)
    else
        SetActive(render.other_addRoom_Btn,message:GetSType() == 102)--邀請按鈕是否顯示
        local sender = message:GetSender()
        local friend = friendData:New(sender)
        render.other_headFrame.sprite = utils.loadsprite("frame", friend:GetFrame())
        render.other_headImg.sprite = utils.loadsprite("head", friend:GetHead())
        render.other_lv.text = friend:GetLevel()
        render.other_name.text = friend:GetName()
        render.other_sectionImg.sprite = utils.loadsprite("friendChat", friend:GetFrameImg())
        render.other_sectionDes.text = friend:GetSectionName()
        render.other_msgTxt.text = message:GetContent()
        CalcWorldChatWidthHight(render.other)
        render.me:SetActive(false)
        render.other:SetActive(true)
    end

3.文字自適應

注意上面程式碼中，使用到了CalcWorldChatWidthHight方法，CalcWorldChatWidthHight方法如下：

--世界聊天計算寬高
local function CalcWorldChatWidthHight(obj)
    local htext = utils.findtmp_text(obj, "msgBg/msgTxt").preferredHeight --22
    local wtext = utils.findtmp_text(obj, "msgBg/msgTxt").preferredWidth--445
    local bg = utils.findobj(obj, "msgBg")
    local msg_rect = utils.findrect(obj, "msgBg/msgTxt")
    local parent_rect = obj.transform.parent
    if wtext < 470 then --一行
        bg:GetComponent("RectTransform").sizeDelta = Vector2.New(wtext+30, 47)
    else
        printlog(utils.findtmp_text(obj, "msgBg/msgTxt").text,"內容")
        local num = math.ceil(wtext/470)--行數
        local hight = (num-2)*30+60
        bg:GetComponent("RectTransform").sizeDelta = Vector2.New(491,hight)--503
    end
    local sizeDelta = bg:GetComponent("RectTransform").sizeDelta
    msg_rect.sizeDelta = Vector2.New(sizeDelta.x-30,sizeDelta.y)
    obj:GetComponent("RectTransform").sizeDelta = Vector2.New(sizeDelta.x-15,sizeDelta.y+40)
    parent_rect:GetComponent("LayoutElement").preferredHeight = sizeDelta.y + 40
end

說明：
470：一行的Text最大寬度為470
30：聊天內容背景寬度= Text實際寬度+30（30是為了讓文字兩邊留有間隙，看著美觀）
47：一行文字時，背景高度（可根據實際情況調整）
...
注意：程式碼中用到的資料都可以根據實際情況調整！

CalcWorldChatWidthHight方法的作用是實現文字寬高隨著文字內容的變化而變化。支援一行顯示文字是，文字寬度自適應；支援多行時，高度也能自適應。

純文字聊天預覽效果

image.png

加入表情

1.製作表情圖集及配置

開啟TexturePackerGUI，拖進所有表情，修改Framework為Json（Array）並設定Trim Model為None,輸出路徑按照實際情況設定：
image.png

2.匯入表情

將步驟1生成的兩個檔案放入工程新建資料夾Emoji中：
image.png

3.生成Assets資源

選中Emjoji—emoji—選中所有表情資源—Create—TextMeshPro—SpriteAsset
image.png
生成的Assets資源如下：
image.png

4.為TextMeshPro指定預設資源

將生成的Assets資源指定給TextMeshPro預設資源，如下：
image.png

5.表情實現

當點選某個表情時，顯示方法如下：

_input.text = string.format("<sprite=%s>",dx)

6。執行，完美。

相關文章