株式会社サイバーエージェント アメーバ事業本部 ソーシャルゲームDiv エンジニアG 小坂 和弘

1. SWFバージョン4においての
テキスト形式による
コンパイル結果の違い及び
JavaScriptでの
その描画方法に関する考察
株式会社サイバーエージェント
アメーバ事業本部
ソーシャルゲームDiv エンジニアG
小坂 和弘
@hyperdash

2. Summary.
・Swineにおけるテキスト描画方法の考察
・Flash Professionalで配置したテキストの
設定によるコンパイル結果のパターン
・パターン別描画戦略
・実際に実装した方法 (SVG Font)
・JSLint

3. じゃ、いきます。
が、
レポート見てください。
詳細は

4. Swine?
・内製SWF to HTML5変換エンジン
・iOS (iPhone) がメインターゲット
・サーバサイド (Java) でSWFをJSON中間コードに変換
・JavaScript, HTML5 (Canvas) + CSS3で再生
・ActionScript 1.0 (Flash Lite 1.1) = SWFバージョン4 対応
・ブーシュカ (iPhone版) で導入済み

5. Milestones.
・DOM操作の削減
・描画の完全Canvas化 (高速化)
・Android対応 (？)

6. SWF Text.
・2パターンのコンパイル結果
・DefineText (+ DefineText2) タグ
・テキスト形式が静的テキスト
・フォントが埋め込みフォント
・アンチエイリアス設定が
『デバイスフォントを使用』以外
・選択可能設定がオフ
・DefineEditText タグ
・さらに3パターンに分類する
・テキスト形式
・埋め込みフォント/デバイスフォント
・アンチエイリアス設定

7. パターン、いきます。

8. A
・デバイスフォント
(端末にインストールされているフォントを使用)
・HTMLのテキストとしてレンダリングする
・CSSに反映

9. B
・埋め込みフォント
(端末にインストールされていない・各Glyphのパス情報)
・CanvasでGlyphを描画
・レイアウト情報に従ってGlyphを配置

10. C
・パスワード入力
・アスタリスク以外のGlyphが不要
・埋め込みフォントもデバイスフォントで代替

11. D
・デバイスフォントと埋込みフォントが混在可能
・パターンAとパターンBを組み合わせる
・divでさらに1階層wrap

12. ここまでがレポートの内
容でした。
その後、
実装してみた。

13. Implementations in Action.
・デバイスフォントの場合は問題なし
・埋め込みフォントの場合 (Canvas)
・全Glyphのパス描画が必要
・ColorTransform時にパスの再描画が必要
・レイアウトがムズい

14. そこで、SVGフォントですよ。

15. SVG Font?
・Webフォントが対応するフォーマットの一種
・SVGフォーマットでフォントを定義
・Androidのブラウザでも利用可能
・ブラウザによって実装にバグが…
(missing-glyphの扱い etc)
・W3Cの仕様にブラウザが追いついていない
(pathエレメントでGlyphパス定義ができない etc)

16. SVG Font.
・SWFに埋め込まれたフォントのパス情報を
SVGフォントに変換
・BASE64エンコードして中間JSONに格納
・@font-faceのsrcにData URI Schemeで指定
(StyleSheetにinsertRuleする)
・あとは通常のテキストとして描画
・著作権に留意が必要

17. じゃ、結果、いきます。

18. 1
Original SWF Swine

19. 2
Original SWF Swine

20. 3
Original SWF Swine

21. うふふ、オッケー☆

22. ところで、
JSコーディングルールって
どうしてますか？

23. JSLint?
・JSコーディングルールチェッカー
・by Douglas Crockford
・JSの書き方は人によって結構違う
・Swineチームで試験的に導入
・とはいえパフォーマンス優先
・いくつかルールから除外
・他にGoogle JS Style Guideも参考

24. 情報交換&勉強会しましょう。

25. ありがとうございました。
20120420