SWF 研究会#2＠東京

1. フォントとテキスト

2. 自己紹介
twitter: @rakusan
（株）ソニックムーブ 倉持佳和
Flash Lite 1.1相当のプレーヤを作ってます
「海の上のカメ農園 Ameba,GREE」 での iPhone 対応

3. SWFのテキスト
グリフテキスト
● フォント埋め込み
● 再生環境によらず同じ描画結果
● グリフのアウトラインデータはシェイプ
デバイステキスト
● 再生環境のテキスト描画機能を使用する
● 再生環境によって描画結果が異なる

4. フォントとテキストのタグ
DefineFont, DefineFontInfo, DefineFontInfo2,
DefineFont2, DefineFont3,
DefineFontAlignZones, DefineFontName,
DefineText, DefineText2, DefineEditText,
CSMTextSettings, DefineFont4

5. フォントとテキストのタグ
DefineFont, DefineFontInfo, DefineFontInfo2,
DefineFont2, DefineFont3,
DefineFontAlignZones, DefineFontName,
DefineText, DefineText2, DefineEditText,
CSMTextSettings, DefineFont4
DefineFont + DefineFontInfo → DefineFont2
DefineTextのTextColorをRGBAに → DefineText2

6. 各タグの関係
PlaceObject2 DefineText DefineFont
CharacterID=3 CharacterID=3 FontID=1
TEXTRECORD
FontID=1
DefineFont2
TEXTRECORD
StyleFlagsHasFont=0
FontID=2
TEXTRECORD
FontID=2
…
PlaceObject2 DefineEditText
CharacterID=4 CharacterID=4
FontID=2

7. DefineFont2
OffsetTable GlyphShapeTable
DefineFont2 UI16[NumGlyphs] or UI32[NumGlyphs] SHAPE[NumGlyphs]
FontID グリフ0のシェイプへのオフセット グリフ0のシェイプ
グリフ1のシェイプへのオフセット
FontFlagsShiftJIS
FontFlagsWideOffsets グリフ2のシェイプへのオフセット グリフ1のシェイプ
FontFlagsWideCodes
…
グリフ2のシェイプ
FontName
NumGlyphs CodeTable
UI8[NumGlyphs] or UI16[NumGlyphs]
OffsetTable
…
CodeTableOffset グリフ0の文字コード
GlyphShapeTable
グリフ1の文字コード
CodeTable
EM square
…
FontAdvanceTable
Q
FontAdvanceTable
1024
SI16[NumGlyphs]
グリフ0の字送り幅
グリフ1の字送り幅
…
1024

8. DefineText
DefineText
TextMatrix
TextRecords
TEXTRECORD
FontID
TextColor
XOffset
YOffset
TextHeight
GlyphEntries
僕と契約して
GLYPHENTRY
GlyphIndex
GlyphAdvance
GLYPHENTRY
魔法少女になってよ
…
TEXTRECORD
…

9. DefineText
DefineText
TextMatrix PlaceObjectのMatrix
TextRecords
TEXTRECORD
FontID
TextColor TextMatrix
XOffset
YOffset
TextHeight XOffset, YOffset
GlyphEntries
TEXTRECORD
僕と契約して
GLYPHENTRY
GlyphIndex TextHeight
DefineFont2
GlyphAdvance
GlyphAdvance
GLYPHENTRY
魔法少女になってよ
…
TEXTRECORD TEXTRECORD
TEXTRECORD
…

10. DefineEditText
DefineEditText
DefineTextとは異なり文字の位置取り等を自分で
UseOutlines
WordWrap 制御する必要がある
Align
LeftMargin
RightMargin
Indent グリフテキストの場合 (UseOutlines=1)
Leading ● DefineFont2のCodeTableから、文字
コード→グリフインデックス
LeftMargin RightMargin ● グリフインデックスからシャイプや字送
り幅を得る
Indent
デバイステキストの場合 (UseOutlines=0)
Leading
● 再生環境のテキスト描画機能を使用
● HTML5 Canvasでは
○ measureText()
○ fillText()
字送り幅はDefineFont2のFontAdvanceTable

11. ご清聴ありがとうございました