iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 11
2
Modern Web

PixiJS,方便好用的 WebGL 內容產生工具系列 第 11

[PixiJS - Day-11] PIXI.Text 與 PIXI.TextStyle

官網裡關於文字的範例有兩個:

BASICS - Text
http://pixijs.io/examples/#/basics/text.js
alt

DEMOS - Text
http://pixijs.io/examples/#/demos/text-demo.js
alt

PIXI.Text 繼承自 PIXI.Sprite, 而 PIXI.Sprite 繼承自 PIXI.Container,
所以可以設定 x、y、alpha、也可以點與變形
也可以拿來當容器

在此不建議拿來當容器,
即使有文字內容,但 PIXI.Text 實體若沒放元件,
呼叫 PIXI.Text 實體的 children 時,仍會回傳 []


Demo 裡的 Text 範例看起來很豐富
我直接講幾個我覺得特別的部份:

上色:
可填漸層色,但目前漸層方向似乎只有水平垂直
PIXI.TextStylePIXI.TEXT_GRADIENT
alt

陰影:
可設定陰影顏色與角度、距離等

遮罩:
與之前範例不同的是,這次使用文字當作遮罩,遮住紅色方塊
alt
由於文字的邊框不是純黑,做為遮罩時可看到些微透明的邊框
文字的陰影用的是純黑,做為遮罩時不會顯示

alt
將陰影改成白色時,做為遮罩時會顯示

遮罩的微妙行為可參考前文: 遮罩

Web Fonts、中文字:
官方範例:使用 Google Fonts Api 讀取字型使用
alt

我在頁面上的 CSS 匯入思源黑體,在 PIXI.TextStyle 裡使用 'Noto Sans TC' 字體,並指定不同 font-weight
alt


PIXI.Text 的使用時機
由於 PixiJS 不容易使用 HTML Dom 架構的方式處錯,控制文字也沒有 CSS 方便直覺.
如果考慮SEO優化、文字能讓使用者複製時,用HTML 的文字蓋在 PixiJS 上也許比較適合

使用 PixiJS 開發遊戲時,文字做在遊戲裡 (例如遊戲分數)
有儲存圖片功能 (例如遊戲內拍照)
就適合將文字做在 PixiJS 裡


我在做合成圖片上傳的功能時有使用 PIXI.Text 來做動態字
在後端測試時,送出的圖片包含了生成圖片的時間
除錯上很方便
alt


上一篇
[PixiJS - Day-10] Ticker 與 動態製作
下一篇
[PixiJS - Day-12] PIXI.extras.AnimatedSprite
系列文
PixiJS,方便好用的 WebGL 內容產生工具31

尚未有邦友留言

立即登入留言