株式会社ヘキサドライブ | HEXADRIVE

みなさんこんにちは。グリフォンです。

今日は東京でも雪が舞うくらい寒くて冬眠したい気分です。

さて今回も前回の続き「フォントのDistanceFieldTexture生成ツールをつくる」のその３です。

大まかな処理の流れは以下

フォントを１文字ずつ読み出してピクセル情報を取得

ピクセル情報からDistance Field情報を生成

CharacterInfoを生成

アトラステクスチャに書き込む

アトラステクスチャとFontSettingsを出力保存

今回はを説明していきます。

var srcWidth  = _BufferTexture.width;
var srcHeight = _BufferTexture.height;
var dstWidth  = _OutputFontTexture.width;
var dstHeight = _OutputFontTexture.height;

// 文字情報を成形
{
    var charInfo = new CharacterInfo();

    // 文字のインデックスは文字コードのこと
    charInfo.index = (int)writeChar[0];

    // アトラステクスチャ内のUV座標を成形
    // _OutputOffsetXはアトラステクスチャのX座標
    // _OutputOffsetYはアトラステクスチャのY座標
    var x0 = (float)_OutputOffsetX / (float)dstWidth;
    var y0 = (float)_OutputOffsetY / (float)dstHeight;
    var x1 = (float)(_OutputOffsetX + srcWidth) / (float)dstWidth;
    var y1 = (float)(_OutputOffsetY + srcHeight) / (float)dstHeight;
    charInfo.uvBottomLeft  = new Vector2(x0, y0);
    charInfo.uvBottomRight = new Vector2(x1, y0);
    charInfo.uvTopLeft     = new Vector2(x0, y1);
    charInfo.uvTopRight    = new Vector2(x1, y1);

    // ソースの文字情報を取得
    var bearing = 0;
    CharacterInfo srcCharInfo;
    if( _TextArea.font.GetCharacterInfo((char)charInfo.index, out srcCharInfo, _TextArea.fontSize * _Param_QualityScale, _TextArea.fontStyle) ) {
        // UV座標の中で、実際の文字の領域はどこからどこまでか指定する
        // この領域が文字を描画するときに切り出される範囲となる
        charInfo.minX    = (srcCharInfo.minX / _Param_QualityScale) - _Param_PaddingLeft;   // 追加したパディング領域を補正
        charInfo.minY    = (srcCharInfo.minY / _Param_QualityScale) - _Param_PaddingTop;    // 追加したパディング領域を補正
        charInfo.maxX    = (srcCharInfo.maxX / _Param_QualityScale) + _Param_PaddingRight;  // 追加したパディング領域を補正
        charInfo.maxY    = (srcCharInfo.maxY / _Param_QualityScale) + _Param_PaddingBottom; // 追加したパディング領域を補正
        charInfo.advance = (srcCharInfo.advance / _Param_QualityScale) + (_Param_PaddingLeft + _Param_PaddingRight); // 追加したパディング領域を補正
        bearing          = (srcCharInfo.minX / _Param_QualityScale) - _Param_PaddingLeft;
    }
    else {
        charInfo.minX    = 0;
        charInfo.minY    = 0;
        charInfo.maxX    = srcWidth;
        charInfo.maxY    = srcHeight;
        charInfo.advance = srcWidth;
    }

    // ベアリング情報を成形
    var channel      = (BEARING_CHANNEL_TABLE[_OutputPageNo] << 8); // uvのチャンネル情報を間借りしている
    var xoffset      = (bearing + 128); // xoffset値を-128～127を0～255に変換
    charInfo.bearing = channel + xoffset;

    // 文字情報追加
    _OutputFontModel._chars._charInfos.Add(charInfo);
}

８行目でCharacterInfoを作成して情報を入れていきます。

28行目で _TextArea（Textコンポーネント）から情報を取得します。

31～35行目ではパディング領域（文字の周りの隙間）を計算しています。

47～49行目ではベアリング値を設定しているのですが、このベアリング値に独自の情報を持たせています。

ベアリングについてはこちら

今回は、出力するアトラステクスチャのRGBAチャンネルを別々に使用してフォント情報を格納しています。

DistanceFieldTexture は白黒情報なので４チャンネルを有効に使ってアトラステクスチャが大きくなるのを防いでいます。

第2水準までのフォントで1024×1024のRGBAテクスチャ１枚に収まりました。

そこで、必要な文字がどのチャンネルに入っているかという情報が必要になる訳です。

ベアリングの上位8ビットにチャンネルのインデックス０～３を格納し、下位8ビットに元々のベアリング情報を０～255に変換して格納しています。

本来ベアリングはマイナス値も格納できますが、下位8ビットで表現するために０～255に変換しています。

もちろん、このフォントを描画するシェーダー側にベアリングを再変換する処理を入れておかないと、うまく描画されません。

最後に52行目で、_OutputFontModel（FontModelクラス）に格納します。

今回はここまで。以降はまた次回のお楽しみに