現在、A-Frameには標準で日本語フォントがありません。<a-text>
タグのvalueに日本語を記述しても文字化けします。自前でMSDF(multi-channel signed distance fonts)形式のフォントファイルを用意して、<a-text>
タグのfont属性やfont-image属性にセットする必要があります。
MSDFは、ttf(TrueTypeFont)などから作成しますが、日本語フォントは巨大なこともあり、けっこうめんどくさいです。
そこで作成済みのフォントをいくつか用意して公開しました。
このnpmパッケージを解説します。
MSDFを生成するオンラインのジェネレーターがありますが、日本語は巨大になります。漢字を一通りカバーしようとすると、エラーになります。
そこで、コマンドラインツール版を使いローカルで実行します。
msdf-bmfont-xmlをカスタマイズしてnode-msdf-generatorを作りました。
主にやってることです。
<a-text>
がマルチパートをサポートしていないため)漢字は、常用漢字(約2100文字)と人名漢字(約860文字)を用意しています。
webフォント から引っ張ってきました。今は3種類です。
いちおうnpmパッケージ化しているけど、msdfファイルはクソでかいです。なにせ3000文字以上のテクスチャファイルですから。
npm publishした時のログです。
npm notice 435.2kB fonts/hui/hui-msdf.json
npm notice 531.9kB fonts/mplus/mplus-msdf.json
npm notice 432.7kB fonts/noto-sans-cjk-jp/noto-sans-cjk-jp-msdf.json
npm notice 9.3MB fonts/hui/hui-msdf.png
npm notice 7.2MB fonts/mplus/mplus-msdf.png
npm notice 6.9MB fonts/noto-sans-cjk-jp/noto-sans-cjk-jp-msdf.png
そもそもnpmインストールしたところで、これらはアセットファイルです。jsファイルにrequire/importするようなものではありません。
ですので、基本的には直接ダウンロードして公開フォルダに格納しましょう。必要なファイルは、aframe-japanese-fontのfonts
ディレクトリ下に各フォント毎に置いている[fontName]-msdf.json
と[fontName]-msdf.png
の2つです。
その2つのファイルをheadタグなどでインクルードします。A-Frameを通常のjsアプリに組み込んでいる場合は、A-Frameが必要になったところでフォントファイルもダイナミックインポートするといいでしょう。
A-Frameの<a-text>
タグのfont属性とfont-image属性に利用したいフォント種類をセットしてvalue属性にテキストを記載すれば、OKです。
<a-scene>
<a-text
value="こんにちは世界!"
font="noto-sans-cjk-jp-msdf.json"
font-image="noto-sans-cjk-jp-msdf.png"
negate="false"
scale="2 2 1"
position="0 1 -4"
>
</a-text>
</a-scene>
Crieitは誰でも投稿できるサービスです。 是非記事の投稿をお願いします。どんな軽い内容でも投稿できます。
また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!
こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください。
ボードとは?
コメント