Ruffle 是一個開源且積極發展中的 Adobe Flash Player 模擬器,詳情可以參考官網 https://ruffle.rs/。最近我透過它,讓十幾年前分享的互動式 Flash 教具及學具,重新在網頁瀏覽現蹤;甚至利用新發展的「Flash:SWF 遊戲啟動器」幫一些尚未改版為 HTML5 的工具,可以搭配 Google 試算表,來客製化自己的 Flash 遊戲 (詳見「雄:Flash:SWF 遊戲啟動器」)。
Ruffle 目前有一個問題,無法讓載入的 Flash 程式使用系統的字型,像我的互動式 Flash 教具及學具,最大的特色是可以讓使用者自訂文字內容,所以文字大部份都會使用到系統字型;所以在 Ruffle 的環境中,大部份的中文字都看不到了。
那「SWF 遊戲啟動器」是怎麼讓中文能正常顯示的?
在 Ruffle GitHub Wiki 的 FAQ 中有參考資料:
簡單的整理一下重點:
- Ruffle 可以自行指定要載入的字型檔案(支援 TTF、OTF、TTC、OTC 字型檔,和內嵌在 .swf 中的字型),並讓系統字型名稱去對應載入的字型名稱。
- 使用 window.RufflePlayer.config.fontSources 來指定要載入的字型檔案
- 使用 window.RufflePlayer.config.defaultFonts 來指定系統字型 sans 對應到前面那個字型檔的字型名稱。
1. 使用 TTF 字型
例如我使用「芫荽」字型,將「芫荽」字型的檔案放到網站中,讓 sans 去對應「芫荽」字型的名稱 "Iansui Regular" :
window.RufflePlayer.config.fontSources = ["https://gsyan888.github.io/fonts/Iansui-Regular.ttf"];
window.RufflePlayer.config.defaultFonts = {
sans: ["Iansui Regular"]
};
因為「芫荽」字型的名稱為 "Iansui Regular" ,所以我們指定系統預設字型可以用它
sans: ["Iansui Regular"]
除了使用 「芫荽」字型也可以試試 Google 的思源黑體字型( "Noto Sans TC Regular")。
會卡關的地方是,所有的字型檔都能使用嗎?
哈!會這樣說,肯定不是所有字型檔都能拿來使用!(我拿教育部的楷書、隸書......玩了好久,玩不出所以然來)。雖然 Ruffle FAQ 中說到它支援 TTF、OTF、TTC 和 OTC 字型,但是我試半天,卡很久,最後選擇了「芫荽」字型,主要是它的檔案大小最適中(不知道以後支援的字數變多以後,是不是也會長大)。
2. 使用內嵌字型的 .swf
另外有一個方法一定會成功的,就是製作一個 Flash 字型檔,必須是 AS3 格式(ActionScript 3),並將想使用的字型嵌入後,儲存為 .swf 檔案。
但是像我的電腦中只有舊舊的 Flash 8,它根本不支援 AS3 啊!
真的想自己玩一下,有個開源的好工具 JPEXS Free Flash Decompiler (FFDec):
雖然不如 Adobe 的 Flash 工具華麗,但是夠強悍,可以編輯 Flash 的檔案,也支援 AS3。
底下來記錄一下,如果利用 JPEXS Free Flash Decompiler 來將電腦中的 TTF 字型,包在 .swf 中,讓 Ruffle 可以載入它,解決中文顯示的問題。不過,可別拿有版權問題的字型放到網路了!
2-1 新增空白檔案
啟動 JPEXS Free Flash Decompiler 以後
- 主選單 [File] 裡按 [New empty]
- [Compression] 選 [LZMA] (個人觀察這種壓縮方式好像可以讓檔案小一點)。
- [Script type] 選 [ActionScript 3]。
- 按 [OK]
[圖1] 開新檔案 |
2-2 新增 DefineFont3 Tag
- 展開 [frames],對準 [frame1] 按右鍵。
- 選 [add tag inside] , [others], [fonts], [DefineFont3]
[圖2] 新增 tag |
2-3 確認新增 tag
- 按 [OK]
[圖3] 確認新增 tag |
2-4 修改 Font name in tag
- 在右側欄的 [Parameters] 按 [Edit]
- 在 [Font name in tag] 的輸人區中,輸入這個字型的名稱(可以自訂,但在 Ruffle 中要用這個名稱,截圖中是改為「全字庫說文解字」)。
- 改好了就可以按 [Save] 鈕。
[圖4] 更改字型名稱 |
2-5 嵌入字型
- 按 [Embed]
[圖5] 準備內嵌字型 |
2-6 選擇字型
- 出現檔案開啟的對話框,按右上角的資料夾圖示來選擇未安裝過的字型檔案,或是從 [installed] 的清單中選擇已安裝在系統中的字型(請自行斟酌版權的問題)。
- 如果是選擇檔案的,就按 [open] 鈕。
[圖6] 選擇要內嵌的字型 |
2-7 選擇要嵌入的字集
- 在字集清單中選擇要嵌入的字有哪些,最懶的方式是選 [All characters] ,這樣就全選了,但是字愈多,檔案愈大哦!當然也可以在 [Idividual characters] 的輸入區中,輸入想選的字有哪些。
- [重要] 千萬記得一定要勾選 [Set ascent descent and leading],不然會像我卡關好久,swf 使用時字有出現,但是整個偏上,只能看到下半部。因為 ascent、descent 和 leading 三個參數的值會影響字顯示的位置,想自己設定嗎?太累了,讓程式自己設定就好了。
- 都設定好了,就按 [OK] 鈕。
[圖7] 選擇要使用的字集或字 |
2-8 儲存檔案
- 按 [File] 中的 [Save]
- 檔案不建議使用中文的,以英文及數字來命名。截圖中是使用字型檔原來的檔名,變成「font-ebas927.swf」,這樣子比較好對應。
[圖8] 儲存檔案 |
製作好內嵌字型的 .swf 字型檔以後,只要修改一下 RufflePlayer 的設定,搭配前面製作時的「swf 檔名」(步驟 2-8) 及「Font name in tag」(步驟 2-4),變成這樣:
window.RufflePlayer.config.fontSources = ["https://gsyan888.github.io/fonts/font-ebas927.swf"];
window.RufflePlayer.config.defaultFonts = {
sans: ["全字庫說文解字"]
};
來看一下使用「全字庫說文解字」字型以後,我的 Flash 唐詩三百首作品中,七言古詩裡的長恨歌變成這樣:
[圖9] 使用全字庫說文解字字型的長恨歌 |
[圖9] 紅色方框的地方就是說文解字中沒有的字。用芫荽字型的版本對照一下(圖10):
[圖10] 使用莞荽字型的長恨歌 |
哈!古字要認得可能要花一點力氣才行。想玩玩看,認認古字,可以按底下的連結