設計師的小玩具: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. 字體渲染處理方法
  4. 資料生成、設計師和工程師如何配合
  5. 動畫特效

(之後會慢慢補完內容,不想等我寫文的可以馬上自己動手玩看看唷!)

Study With Akane

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

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

Akane Lee

Akane Lee

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

Comments

wave
comments powered by Disqus

Press ESC to close