SWF バージョン 4 においてのテキスト形式によるコンパイル結果の違い及びJavaScript でのその描画方法に関する考察

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

@hyperdash

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

じゃ、いきます。

詳細はレポート見てください。が、

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

Milestone.・ DOM 操作の削減・描画の完全 Canvas 化 ( 高速化 )・ SAP 提供・ Android 対応 ( ？ )

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

パターン、いきます。

A

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

B

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

C

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

D

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

ここまでがレポートの内容でした。実装してみた。

で、

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

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

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

じゃ、結果、いきます。

1

Original SWF Swine

2

Original SWF Swine

3

Original SWF Swine

概ねイケてるｗ

ところで、どうしてますか？

JS コーディングルール、

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

せめて、読みやすく。

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