SWFバージョン4においての テキスト形式による コンパイル結果の違い及び JavaScriptでの その描画方法に関する考察
?
4 likes?3,823 views
株式会社サイバーエージェント アメーバ事業本部 ソーシャルゲームDiv エンジニアG 小坂 和弘
SWFバージョン4においての テキスト形式による コンパイル結果の違い及び JavaScriptでの その描画方法に関する考察
- 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版) で導入済み
- 6. SWF Text. ?2パターンのコンパイル結果 ?DefineText (+ DefineText2) タグ ???テキスト形式が静的テキスト ???フォントが埋め込みフォント ???アンチエイリアス設定が ? ?『デバイスフォントを使用』以外 ???選択可能設定がオフ ?DefineEditText タグ ???さらに3パターンに分類する ????テキスト形式 ????埋め込みフォント/デバイスフォント ????アンチエイリアス設定
- 7. パターン、いきます。
- 12. ここまでがレポートの内 容でした。 その後、 実装してみた。
- 13. Implementations in Action. ?デバイスフォントの場合は問題なし ?埋め込みフォントの場合 (Canvas) ???全Glyphのパス描画が必要 ???ColorTransform時にパスの再描画が必要 ???レイアウトがムズい
- 14. そこで、厂痴骋フォントですよ。
- 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コーディングルールって どうしてますか？