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] 使用莞荽字型的長恨歌 |
哈！古字要認得可能要花一點力氣才行。想玩玩看，認認古字，可以按底下的連結
發表文章
沒有留言:
張貼留言