PixiJS 筆記 – level – 3 關於文字

從原生PIXIjs 的試寫來理解RM MV的一些架構與程式


今天來看一下PIXI 裡面的文字處理,依照前面幾篇的觀念。我們要再畫面上多顯示東西,都是把物件丟到app.stage 中進行繪製。

這次的範例相當簡單, 只要 new 出一個 PIXI.Text(‘繪製的文字內容’, style)就可以了,
pixijs

關於style 的部份,不輸入的話基本上就是使用預設文字來繪製

要記得一樣把它加入stage中就可以正常繪製了。

接下來一下如果帶入style的參數
RMMV

不得不說,其實還滿漂亮的!!
PIXIJS

但是問題來了,在RM中的系統文字繪製本身是跑 Bitmap.prototype.drawText 來進行繪製

追一下code 可以看到下圖
RMMV

drawText 本身是利用context去繪製文字內容。

RMMV

在註解中他寫了 type CanvasRenderingContext2D

所以是另外一個世界的東西,跟PIXI沒有關係。但CanvasRenderingContext2D的文字也可以針對css做調整,所以即使不用pixi.js的文字也可以做出同樣效果

RMMV
#這東西看起來也要找時間研究,rm中有非常多地方使用到他

就結論來說,你想要在遊戲中做出花樣多的文字,可以參考這邊的Doc ,看看他有哪些文字控制效果來做處理。
傳送門

那如果我還想是用PIXI繪製文字怎麼辦?

嗯哼~ 其實還滿簡單的,在pixi 的 doc底下可以看到他是PIXI.Sprte的擴充。
PIXI

那就單純多啦!!!

你只要在RM中的Sprite or Scene or Window 底下 自己 new 一個PIXI.Text, 然後addChild, 一樣可以利用PIXI的形式進行文字繪製,這樣就可以取代圖片上文字有時候與系統文字字體差太多的問題了

稍微實驗一下,在眼中的世界中的秘技房間做一下繪製

因為是測試,所以隨便塞個地方就好。
RMMV

效果是一模一樣的
RMMV

這樣推論的話,其實也可以自己建立一個class 繼承(鏈接)PIXI.Text 專門用來作文字效果。或是自定一些特殊形式的文字設定擋讓context 去接資料,讓遊戲中的文字美化。

發表迴響