tag:crieit.net,2005:https://crieit.net/tags/web%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88/feed Crieitでタグ「webフォント」に投稿された最近の記事 2020-04-13T09:08:52+09:00 https://crieit.net/tags/web%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88/feed tag:crieit.net,2005:PublicArticle/15823 2020-04-12T23:40:26+09:00 2020-04-13T09:08:52+09:00 https://crieit.net/posts/A-Frame-5e93285a259c3 <h1 id="はじめに"><a href="#%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB">はじめに</a></h1> <p>現在、A-Frameには標準で日本語フォントがありません。<code><a-text></code>タグのvalueに日本語を記述しても文字化けします。自前でMSDF(multi-channel signed distance fonts)形式のフォントファイルを用意して、<code><a-text></code>タグのfont属性やfont-image属性にセットする必要があります。</p> <p>MSDFは、ttf(TrueTypeFont)などから作成しますが、日本語フォントは巨大なこともあり、けっこうめんどくさいです。<br /> そこで作成済みのフォントをいくつか用意して公開しました。</p> <p><a target="_blank" rel="nofollow noopener" href="https://github.com/studioTeaTwo/aframe-japanese-font">aframe-japanese-font</a></p> <p>このnpmパッケージを解説します。</p> <h1 id="アプローチ"><a href="#%E3%82%A2%E3%83%97%E3%83%AD%E3%83%BC%E3%83%81">アプローチ</a></h1> <h2 id="MSDFの生成方法"><a href="#MSDF%E3%81%AE%E7%94%9F%E6%88%90%E6%96%B9%E6%B3%95">MSDFの生成方法</a></h2> <p>MSDFを生成する<a target="_blank" rel="nofollow noopener" href="https://msdf-bmfont.donmccurdy.com/">オンラインのジェネレーター</a>がありますが、日本語は巨大になります。漢字を一通りカバーしようとすると、エラーになります。</p> <p>そこで、コマンドラインツール版を使いローカルで実行します。</p> <p><a target="_blank" rel="nofollow noopener" href="https://github.com/soimy/msdf-bmfont-xml">msdf-bmfont-xml</a></p> <h2 id="A-Frame専用に出力するために、msdf-bmfont-xmlのラッパーを用意"><a href="#A-Frame%E5%B0%82%E7%94%A8%E3%81%AB%E5%87%BA%E5%8A%9B%E3%81%99%E3%82%8B%E3%81%9F%E3%82%81%E3%81%AB%E3%80%81msdf-bmfont-xml%E3%81%AE%E3%83%A9%E3%83%83%E3%83%91%E3%83%BC%E3%82%92%E7%94%A8%E6%84%8F">A-Frame専用に出力するために、msdf-bmfont-xmlのラッパーを用意</a></h2> <p>msdf-bmfont-xmlをカスタマイズして<a target="_blank" rel="nofollow noopener" href="https://github.com/studioTeaTwo/node-msdf-generator">node-msdf-generator</a>を作りました。<br /> 主にやってることです。</p> <ul> <li>pngファイルを1つにする（<code><a-text></code>がマルチパートをサポートしていないため）</li> <li>日本語種類を定数としてパラメータ化する（平仮名/片仮名/常用漢字/人名漢字）</li> </ul> <p>漢字は、<a target="_blank" rel="nofollow noopener" href="https://ja.wikipedia.org/wiki/常用漢字一覧">常用漢字（約2100文字）</a>と<a target="_blank" rel="nofollow noopener" href="https://ja.wikipedia.org/wiki/人名用漢字一覧">人名漢字（約860文字）</a>を用意しています。</p> <h2 id="日本語フォント種類"><a href="#%E6%97%A5%E6%9C%AC%E8%AA%9E%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88%E7%A8%AE%E9%A1%9E">日本語フォント種類</a></h2> <p>webフォント から引っ張ってきました。今は3種類です。</p> <ol> <li><a target="_blank" rel="nofollow noopener" href="https://www.google.com/get/noto/#sans-jpan">Noto Sans（ゴシック体）</a></li> <li><a target="_blank" rel="nofollow noopener" href="https://mplus-fonts.osdn.jp/about.html">M+ FONTS（ゴシック体）</a></li> <li><a target="_blank" rel="nofollow noopener" href="http://hp.vector.co.jp/authors/VA039499/#hui">ふい字（丸文字）</a></li> </ol> <ul> <li>すべてライセンスはクリアしている認識ですが、もし万が一不備などありましたらご指摘いただければ幸いです。</li> <li>NotoSansとふい字のttfで一部の文字が用意できていないっぽくて抜け落ちています。M+フォントは全て作成できています。</li> <li>抜け落ちた文字はこのログファイルで確認できるようにしています。<br /> <a target="_blank" rel="nofollow noopener" href="https://github.com/studioTeaTwo/aframe-japanese-font/blob/master/task/build.log">フォントのビルドログ</a></li> </ul> <h1 id="使い方"><a href="#%E4%BD%BF%E3%81%84%E6%96%B9">使い方</a></h1> <h2 id="実ファイルについて"><a href="#%E5%AE%9F%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6">実ファイルについて</a></h2> <p>いちおうnpmパッケージ化しているけど、msdfファイルはクソでかいです。なにせ3000文字以上のテクスチャファイルですから。</p> <p>npm publishした時のログです。</p> <pre><code>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 </code></pre> <h2 id="組み込み方法"><a href="#%E7%B5%84%E3%81%BF%E8%BE%BC%E3%81%BF%E6%96%B9%E6%B3%95">組み込み方法</a></h2> <p>そもそもnpmインストールしたところで、これらはアセットファイルです。jsファイルにrequire/importするようなものではありません。</p> <p>ですので、基本的には直接ダウンロードして公開フォルダに格納しましょう。必要なファイルは、<a target="_blank" rel="nofollow noopener" href="https://github.com/studioTeaTwo/aframe-japanese-font">aframe-japanese-font</a>の<code>fonts</code>ディレクトリ下に各フォント毎に置いている<code>[fontName]-msdf.json</code>と<code>[fontName]-msdf.png</code>の2つです。</p> <p>その2つのファイルをheadタグなどでインクルードします。A-Frameを通常のjsアプリに組み込んでいる場合は、A-Frameが必要になったところでフォントファイルもダイナミックインポートするといいでしょう。</p> <h2 id="描画"><a href="#%E6%8F%8F%E7%94%BB">描画</a></h2> <p>A-Frameの<code><a-text></code>タグのfont属性とfont-image属性に利用したいフォント種類をセットしてvalue属性にテキストを記載すれば、OKです。</p> <pre><code class="html"><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> </code></pre> studioTeaTwo