Unity — Text Mesh Pro 教學

更新於 發佈於 閱讀時間約 4 分鐘

Text Mesh Pro 是 Unity 內自置的 UI 文字系統。如果你已經用了 Unity 很多年的人會好奇,它和 Text 有甚麼的分別。總括來講 Text Mesh Pro 更加的靈活和可以做更多不同的變化。

Sprite Asset

Sprite Asset 以簡單來說是 emoji,可以做出自己的 emoji。

使用方法

用做一個自已的 emoji,如下圖。

raw-image

1. 輸入自已的圖片,圖片最好是去背。
2. 點擊輸入的圖片,然後點擊 Open Sprite Editor。
3. 左上角有一個名為 Slice ,這裏要按實際情況,如果我只有一個圖片,所以自動就可以了,如果確定好就按 Slice。
4. 如果全部都做對的話,會有一個框出現在你的圖片中,如下圖。

raw-image

5. 點擊圖片,會出現有一個新的名叫 Sprite 的界面,以後最重要的要改名字。退出保存。
6. 點選你的圖片,右鍵 Create > TextMeshPro > Sprite Asset。
7. 點擊剛新建的檔案,然後按 Sprite Glyph Table,會出現如下圖的狀況。

raw-image

8. 預設的 emoji 都不會在正中間,所以要調整一下位置,更改 BX 和 BY 的數值。
9. 在你的 TextMeshPro — Text(UI) Component 的 Extra Setting 中的 Sprite Asset,要將掛載上你的 Sprite Asset。之後在 Text Input 打上以下的內容,就完成了。

<sprite name=Token>

Style Sheet Asset

Style Sheet Asset 以簡單來說是一個 CSS 檔,可以利用這個方法做出一些新奇的效果。

使用方法

我利用 Style Sheet 做一個放大粗體的示範。下面是完成的效果

raw-image

  1. Create > TextMeshPro > Style Sheet

raw-image

  1. 點擊 Style Sheet, Inspector 會出現以下的畫面。
  2. 改一個新的名字,名 Bold。
  3. Opening Text 打上以下的內容
<b><size=130%>

5. Closing Text 打打上以下的內容。

</b></size>

6. 在你的 TextMeshPro — Text(UI) Component 的 Extra Setting 中的 Style Sheet,要將掛載上你的 Sprite Asset。之後在 Text Input 打上以下的內容,就完成了。

abcd<style=Bold>efghijk</style>lmnop

常用的變化

斜體

<i> a </i>

粗體

<b> f </b>

Color

可以更改文字顏色。

<color=Red> Red </color>

Size

可以更改某一個字串的大小。

<size=110%>A</size>

Font

這是一個相對較複雜的的做法,首先要創建一個名為 Resources 的資料夾,在 Resourcres 中創建一個名為 Fonts & Materials 的資料夾,在放上你的字型,你的字型一定要 TMP_Font Asset。

<font="YourFont"> Your Content </font>

其他

還有其他的代碼,可以參考以下的網站。http://digitalnativestudios.com/textmeshpro/docs/rich-text/

如何顯示中文

1. 輪入你要用的字體
2. 點擊 Window > TextMeshPro > Font Asset Creator
3. 更改 Character Set: ASCII > Custom Character,之後會出現一個名 Custom Character List 文字框,將要新增文字輸入到文字框。
4. 以後點擊 Generate Font Atlas,完成生成後,按 Save,就完成了。

avatar-img
0會員
7內容數
這裏分享我遊戲開發的記錄,亦會分享開發的小技巧。
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
夏葉 的其他內容
緣由 生成一個格子是一件十分之簡單的事,但我不知道為甚麼每一次重新寫的時候,都會忘記如何寫。所以我在這裏記錄一下。 代碼 public float num; public GameObject currentGameObject; void Update() { if(Input.G
這篇文章深入探討如何利用 Lerp 來實現物體的移動,並介紹透過 Slerp 來獲得更流暢的移動效果。以簡化移動的實現過程。文章將比較 Update 和 IEnumerator 兩種方案,並指導讀者如何設定速度、加速度及移動時間,提供全面的學習資源以助於更佳理解,尤其是對於遊戲開發者。
緣由 生成一個格子是一件十分之簡單的事,但我不知道為甚麼每一次重新寫的時候,都會忘記如何寫。所以我在這裏記錄一下。 代碼 public float num; public GameObject currentGameObject; void Update() { if(Input.G
這篇文章深入探討如何利用 Lerp 來實現物體的移動,並介紹透過 Slerp 來獲得更流暢的移動效果。以簡化移動的實現過程。文章將比較 Update 和 IEnumerator 兩種方案,並指導讀者如何設定速度、加速度及移動時間,提供全面的學習資源以助於更佳理解,尤其是對於遊戲開發者。
你可能也想看
Google News 追蹤
Thumbnail
嘿,大家新年快樂~ 新年大家都在做什麼呢? 跨年夜的我趕工製作某個外包設計案,在工作告一段落時趕上倒數。 然後和兩個小孩過了一個忙亂的元旦。在深夜時刻,看到朋友傳來的解籤網站,興致勃勃熬夜體驗了一下,覺得非常好玩,或許有人玩過了,但還是想寫上來分享紀錄一下~
Thumbnail
在這篇文章中,我們將探討如何製作章節轉場動畫,讓您的作品更具吸引力。本文包含了準備素材、定義圖片、製作簡易動畫等步驟,適合初學者進行學習和操作。我們提供了必要的資源和範例,讓您能輕鬆上手。期待透過這篇教學,能讓您在創作中達到更高的境界!
Thumbnail
【Premiere 教學】製作綜藝字卡 這篇文章介紹了使用 Premiere 製作文字卡的方法,包括文字的層次調整、修飾圖樣的跟隨文字進行增減、位移、遮罩效果的製作。最後還教你如何將字卡存成模板並使用。
Thumbnail
最近在嘗試使用不同的AI生圖方式混合出圖的方式,採用A平台的優點,並用B平台後製的手法截長補短,創造出自己更想要的小說場景,效果不錯,現在以這張圖為例,來講一下我的製作步驟。
Thumbnail
介紹Unreal Sequencer鏡頭工具,CG動畫的學習經驗,並提供相關教程,適合想學習Cinematic Designer的人。
Thumbnail
這篇文章將介紹 Renpy 中常見的文字造型,包括抗鋸齒、加粗文字、控制文字顏色、文字字體、斜體、間距控制、製作文字外框、控制文字大小、畫線、文字方向等效果。並提供了建立文字造型的方法和應用範例。
Thumbnail
AnyText是一款先進的圖像AI工具,利用深度學習技術,根據你輸入的文字描述生成圖像,更棒的是,它能生成繁體中文,而且能指定文字生成的位置。
Thumbnail
設計海報文宣或編輯影片時,想要添加一句醒目的特效文字,TextStudio 是一款功能強大的線上特效文字產生器,提供大量 3D 文字樣式和自定義編輯器,讓使用者創建獨特的文字圖片。
Thumbnail
AI圖形工具 今天分享一些常用的AI圖形工具。現在的圖形工具非常多,不可能全部都熟悉,因為真的太多了。所以介紹幾個比較常用的工具來供參考。算是我工作室的員工。 取代部分繪圖的工作 AI圖形工具基本上可以取代一部分繪圖的工作。就像速寫一樣,本身長年在畫速寫,但再怎麼說速度也不會比AI生成圖片來得
Thumbnail
創作邦創作邦精選工具資源-第 31 期,我們每週分享創作邦精選的工具資源合集,從設計資源、AI 工具、生產力工具、影像後製等等內容都涵蓋,如果你想找好用資源或工具,追蹤我們的內容準沒錯。
Thumbnail
軟體版本:CLIP STUDIO PAINT Ver.1.12.0 這裡預設讀者知道電腦繪圖的基本常識,並且有能力繪製一張彩色插畫,所以不會介紹任何基本概念,例如:圖層是什麼、色相環如何使用...等,也不會提到 CSP 繪圖環境設置(因為我就直接使用預設XD),如果需要基本教程,可以試試看 CLI
Thumbnail
嘿,大家新年快樂~ 新年大家都在做什麼呢? 跨年夜的我趕工製作某個外包設計案,在工作告一段落時趕上倒數。 然後和兩個小孩過了一個忙亂的元旦。在深夜時刻,看到朋友傳來的解籤網站,興致勃勃熬夜體驗了一下,覺得非常好玩,或許有人玩過了,但還是想寫上來分享紀錄一下~
Thumbnail
在這篇文章中,我們將探討如何製作章節轉場動畫,讓您的作品更具吸引力。本文包含了準備素材、定義圖片、製作簡易動畫等步驟,適合初學者進行學習和操作。我們提供了必要的資源和範例,讓您能輕鬆上手。期待透過這篇教學,能讓您在創作中達到更高的境界!
Thumbnail
【Premiere 教學】製作綜藝字卡 這篇文章介紹了使用 Premiere 製作文字卡的方法,包括文字的層次調整、修飾圖樣的跟隨文字進行增減、位移、遮罩效果的製作。最後還教你如何將字卡存成模板並使用。
Thumbnail
最近在嘗試使用不同的AI生圖方式混合出圖的方式,採用A平台的優點,並用B平台後製的手法截長補短,創造出自己更想要的小說場景,效果不錯,現在以這張圖為例,來講一下我的製作步驟。
Thumbnail
介紹Unreal Sequencer鏡頭工具,CG動畫的學習經驗,並提供相關教程,適合想學習Cinematic Designer的人。
Thumbnail
這篇文章將介紹 Renpy 中常見的文字造型,包括抗鋸齒、加粗文字、控制文字顏色、文字字體、斜體、間距控制、製作文字外框、控制文字大小、畫線、文字方向等效果。並提供了建立文字造型的方法和應用範例。
Thumbnail
AnyText是一款先進的圖像AI工具,利用深度學習技術,根據你輸入的文字描述生成圖像,更棒的是,它能生成繁體中文,而且能指定文字生成的位置。
Thumbnail
設計海報文宣或編輯影片時,想要添加一句醒目的特效文字,TextStudio 是一款功能強大的線上特效文字產生器,提供大量 3D 文字樣式和自定義編輯器,讓使用者創建獨特的文字圖片。
Thumbnail
AI圖形工具 今天分享一些常用的AI圖形工具。現在的圖形工具非常多,不可能全部都熟悉,因為真的太多了。所以介紹幾個比較常用的工具來供參考。算是我工作室的員工。 取代部分繪圖的工作 AI圖形工具基本上可以取代一部分繪圖的工作。就像速寫一樣,本身長年在畫速寫,但再怎麼說速度也不會比AI生成圖片來得
Thumbnail
創作邦創作邦精選工具資源-第 31 期,我們每週分享創作邦精選的工具資源合集,從設計資源、AI 工具、生產力工具、影像後製等等內容都涵蓋,如果你想找好用資源或工具,追蹤我們的內容準沒錯。
Thumbnail
軟體版本:CLIP STUDIO PAINT Ver.1.12.0 這裡預設讀者知道電腦繪圖的基本常識,並且有能力繪製一張彩色插畫,所以不會介紹任何基本概念,例如:圖層是什麼、色相環如何使用...等,也不會提到 CSP 繪圖環境設置(因為我就直接使用預設XD),如果需要基本教程,可以試試看 CLI