投稿者 tel | 2014年2月9日

WebブラウザからUnityのCustom Fontのファイルを作る

Unityでエディタスクリプトからフォントを設定するのを作ったが、これでもテキストファイルとかつくるのが手間だったので直接フォントのファイル(.fontsettings)を作ってみた。

HTML5ではBlobのオブジェクトを使ってファイルを作ることができる。

Blob – Web API Interfaces | MDN

window.URL.createObjectURLをBlob渡してリンクにするとダウンロードできる。またaタグにdownload属性を設定しておくと保存するときのデフォルトのファイル名がつけられる。

var text = 'hogehoge',
    blob = new Blob([text], {'type': 'text/plain'});
window.URL = window.URL || window.webkitURL;
a.href = window.URL.createObjectURL(blob);

Unityのfontsettingsファイルはテキストの場合、中身がYAML形式になっているみたい。ただYAMLそのままだとJavaScriptから出力するのが面倒なのでJSONで出力する。

function generateFontSettings(rect) {
    var font = {
        m_ObjectHideFlags: 0,
        m_PrefabParentObject: {fileID: 0},
        m_PrefabInternal: {fileID: 0},
        m_Name: 'CustomFont',
        serializedVersion: 4,
        m_AsciiStartOffset: 0,
        m_Kerning: 1,
        m_LineSpacing: .100000001,
        m_CharacterSpacing: 1,
        m_CharacterPadding: 0,
        m_ConvertCase: 0,
//      m_DefaultMaterial: {fileID: 2100000, guid: '', type: 2},
        m_CharacterRects: [],
        m_Texture: {fileID: 0},
        m_KerningValues: [],
        m_PixelScale: .100000001,
        m_FontData: '',
        m_FontSize: 0,
        m_Ascent: 0,
        m_DefaultStyle: 0,
        m_FontNames: [],
        m_FallbackFonts: [],
        m_FontRenderingMode: 0
    };

    for(var i = 0; i < rect.length; i++) {
        var r = rect[i];
        font.m_CharacterRects.push({
            serializedVersion: 2,
            index: r[0],
            uv: {
                serializedVersion: 2,
                x: r[1],
                y: r[2],
                width: r[3],
                height: r[4],
            },
            vert: {
                serializedVersion: 2,
                x: r[5],
                y: r[6],
                width: r[7],
                height: r[8],
            },
            width: r[7],
            flipped: 0
        });
    }

    var text = JSON.stringify({Font: font});
    text = '%YAML 1.1\n' +
        '%TAG !u! tag:unity3d.com,2011:\n' +
        '--- !u!128 &12800000\n' + text;
    return text;
}

m_DefaultMaterialはマテリアルが分かんないので入れておかない。

フォントのテクスチャを作るツール
http://sapphire-al2o3.github.io/font_tex/


Responses

  1. […] WebブラウザからCustom Fontも作れるようにした。 […]


コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中

カテゴリー

%d人のブロガーが「いいね」をつけました。