A Study about the differences between compiled byte codes depending on the text formats of SWF version 4 and how to draw them on JavaScript

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

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

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. Milestone.
・DOM操作の削減
・描画の完全Canvas化 (高速化)
・SAP提供
・Android対応 (？)

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

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

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

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

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

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

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

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

17. 1
Original SWF Swine

18. 2
Original SWF Swine

19. 3
Original SWF Swine

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

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