よねちゃんねる

@Ynmr_2 のゲーム制作、就活、エトセトラ

A-Frameで日本語フォントする方法

暑いですね、よねむらです。

最近、WebVRを始めました。 中でもA-Frameで色々やろうと思っているのですが、A-Frameは日本語対応してないらしくかなり悩みました。

やり方

ここのNon-ASCII Charactersが参考になります。

使いたいフォントを用意する

フリーフォントとか何とか探して、用意します。.ttfとか。

MSDFを生成する

MSDF font generatorにフォントを突っ込みます。

重要f:id:ynmr2:20180814162033j:plain

2.Select character setに、使いたい文字を全て入力する。 (入力した文字しか使えません)

そして、MSDFを生成します。

pngの名前変更

.pngを-msdf.pngに名前を変えます。

最後に

生成された.jsonと.pngを配置して使います。

(例)

<html>
  <head>
    <meta charset="UTF-8">
    <script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
      <a-sky color="lightblue"></a-sky>
      <a-text value="ABCあいうえお日本語" font="custom-msdf.json" negate="false" scale="2 2 1" position="-2 2 -4"></a-text>
    </a-scene>
  </body>
</html>

UTF-8を設定するのも忘れずに。

これが誰かの役に立てば。

参考