設計師的小玩具:DIVOOM PIXOO 64「字體渲染」

高科技電子產品用多了,很難理解什麼叫「不支援字體渲染」,我腦子整個卡住沒反應過來,RD 解釋半天我才想通。

如果電子看板沒辦法顯示字體,那我是要怎麼串 Google Calendar 行程日期時間?

遇到的問題

DIVOOM PIXOO 64 (之後都稱 64)沒有字型渲染功能,當然也沒有內建字體。我們看到的所有「字」其實都是圖片。1px、1px 一格一格拼出「像字的圖案」。

64 在尺寸上非常吃緊,就是 64x64,1px 就是 1 個格子,只能顯示 1 種顏色,沒有 0.5px 這種,1 個 px 格子也不能顯示漸層,所以字級(字的大小尺寸)很吃緊。

為了要在 64 上字體也要清晰乾淨銳利,筆劃數量少的英文和阿拉伯數字會比中文漂亮。

最簡單的方法就是,去找「Pixel 字型」,有專業人士設計好的像素字體,一格一格的非常容易對齊 PS 網格。

解析度記得開 72dpi,否則乾脆把字級單位設成「px」。使用 PT 當單位可能會因為解析度設定導致格字數量數錯。(實際在製圖的時候其實都在數格子)。

解法

設計師在繪圖軟體上處理完,工程師搞不定怎麼辦?

我家 RD 在 64 上用了 3 種字型字級,用了 3 種不同的解法,各位可以參考參考。

別人的 Library 裡的字體

之前的文章裡有提到,GitHub 上有位大大放出 Library,他用的是 PICO-8 字體。
這個 Library 裡不能自訂字級,所以想調大縮小文字尺寸是不行的。

尤於文字顯示尺寸較小,我們用在現在日期、時間顯示。

手刻數字

64 在我們家用來顯示現在行程,提醒自己不要摸魚用的自律工具,所以「倒數計時」數字希望能明顯一點。

Library 內建的 PICO-8 字型太小,高度只有 5px,所以我在 PS 上把 PICO-8 放大到 13px。

這時候千萬不要去管 PS 的字元是 ?PT,在我的截圖可以看到,高 13 格的字型大小是 10pt。還是自己數格子比較不會出錯。

我們要在意的是字型怎麼在 64 顯示正常又漂亮,而不是 10pt 的字為什麼佔了 13 個格子。

當然,64 無法顯示 10pt 的 PICO-8 字型,它沒有字體渲染功能,所以要把文字轉成圖片。

倒數計時只需要 10 個數字和中間的「:」,所以自己手刻 「0123456789:」的 bitmap 來控制「為了兜出一個字的圖案、哪些 px 要亮燈、哪些 px 要關燈」。

手刻 bitmap 這次用上 2 種不同作法,其中一種比較簡單,看上圖大概猜得出來。

0=關燈,1=亮燈,寫碼的同時可以看到拼出來的「數字」長什麼樣,比較直覺。

至於數字陰影,只是在同樣文字的下方再疊一層文字、調深灰色、往右往下移動 1px 而已。

別人的等寬字型

另外一種手刻 bitmap 作法,刻出來的程式碼長這樣:

以下為 RD 說明

「Monogram 這個字型有提供 monogram-bitmap.json。」

「打開這個檔案可以看到組成每個字母的點座標,這些座標是用十進制去表示每個點。」

「只要寫個小程式把十進位座標轉換成 0 和 1,0 代表沒上色,1 代表有上色,就可以在畫面上把文字畫出來。」

(Akane:工程師看得懂就好,設計師不懂沒關係,不是我們的專業。)

簡單來說,0= 關燈,1=亮燈,用這 2 種方式來設定 64 每一小格的燈要不要亮。(至於亮起的燈要什麼顏色再另外寫 code 設定。)

64 中間的行程名稱字級不能太小,本來想偷懶沿用 PICO-8 字型,雖然這個字型是等寬字,但它太小啦!我們想要大一點的字型。

64 連字體渲染都沒有,當然更沒有置中對齊這種功能,所以要算出每一個行程名稱長度、佔幾個 px,然後計算文字置中之後距離左邊有多少 px。

不同的行程名稱長度當然都不一樣,所以每換一次文字都要重算行程名稱到最左邊的 px 數量。

如圖,64 每更新一次行程名稱,就要重算一次間距(紅線)。

等寬字最大的特性,不管是 W 這種很寬的字母、還是 I 這種很瘦的字母,每個文字的寬度都相同(藍線)。所以只要計算行程名稱有幾個字母,乘上寬度,在拿 64 去減掉算出來的結果,除以 2,就知道要距離左邊多少 px 文字會像置中對齊一樣。

小提醒:64 是座標系統,左上角第一個 px 是(0,0)。


首頁那張比特幣是內建樣板,64 內建很多樣板可以用,也只能直接用,沒辦法自訂內容。頂多為了天氣定位自訂城市區域,彈性很小。

所以別看好像有字體渲染的樣子,沒有,那是別人做好現成的動不了。
也不知道啥時 DIVOOM 肯開放,支援更多自己動手做的功能。


話說,你買了 DIVOOM PIXOO 64 了嗎?這真的是款不管工程師還是設計師都能玩得很開心的小玩具。

趁過年在家玩玩很有趣的,我也看膩紫色的底圖,想換個新的,晚點要去盧我家 RD 了。

祝大家新年快樂!

相關連結

官方產品網站 https://divoom.com/products/pixoo-64

字體

工程師用的資源

請去這篇文下載 設計師的小玩具:DIVOOM PIXOO 64「產品限制與資源」

DIVOOM PIXOO 64 DIY 系列

這是個系列文章,我分成幾個部份來說。都不是什麼很難、但自己摸索會覺得麻煩的事。

  1. 產品限制與資源
  2. 圖片設計與座標尺寸
  3. 字體渲染處理方法

Study With Akane

影片右下角,桌上那個小電腦是 DIVOOM 另一個產品DITOO PLUS 像素藍牙喇叭
音質不怎樣,但好玩!擺在桌上也漂亮,我非常喜歡。如果你對電子看板沒興趣,可以瞧瞧這款。

這是我開的另一個頻道,逼自己念書用的,一次一個小時(下班後還要擠一小時出來讀書不容易啊)。
如果你覺得一個人讀書學習有點無聊,可以開這個影片出來喔!我也是一個人在讀書學習,有人陪就不孤單寂寞啦。

Akane Lee

Akane Lee

如果設計師能和工程師順利合作,那麼老公也就能準時下班了吧!因此努力分享 UI 和 UX 方面的知識、技術、各種踩過的坑與心得。

Comments

wave
comments powered by Disqus

Press ESC to close