こんにちは！
デザイナーの伊東（@ALAKIWebVRAR1）です。
※TwitterでもWebARの事を中心に情報発信中！
よかったらフォローお願いしますm(_ _)m
Follow @ALAKIWebVRAR1
前回に引き続き、WebVRの記事です。
これまで4つの記事をお送りしてきました。
前回は、WebVRのフレームワークである”A-Frame”の基本的な使い方をご紹介しました。
今回も同じくA-Frameについてですが、さらに深掘りして「テキストの扱い方」を解説していきます。
少し癖がありますが、最終的に日本語をWebVR上で表示するところまでご説明します。
この記事の目次
テキストの表示方法
一般的な表示方法
基本的なテキストの扱い方は、A-Frameの公式サイトにドキュメントとして解説されています。
https://aframe.io/docs/0.8.0/components/text.html
一番シンプルなテキストの表示方法は、以下のようになります。
|
1 |
<a-entity text="value: Hello World;"></a-entity> |
前回の記事でも度々登場した、VRコンテンツの実体を生成する”a-entity”タグを使用します。
テキストとして表示する内容は、textプロパティの値として指定可能です。
オプション
A-Frameのテキストには、数多くのオプションが用意されています。
ここでは比較的利用頻度の高いオプションをご紹介します。
● align
右揃え、左揃えなど、テキストの揃え方を指定します。
value:（left, center, right）
● baseline
テキストの縦方向の揃え方を指定します。
value:（top, center, bottom）
● align
右揃え、左揃えなど、テキストの揃え方を指定します。
value:（left, center, right）
● color
テキストの色を指定します。
● letterSpacing
テキストの字間を指定します。
● lineHeight
テキストの行間を指定します。
● opacity
テキストの透明度を指定します。
● whiteSpace
テキストが折り返しの位置まできた時に、改行するのか、改行せずにそのまま続けるのか指定します。
value:（i.e., normal, pre, nowrap）
フォントを指定する
A-Frameで表現するWebVRのテキストには、あらかじめ数種類のフォントがよういされています。
| aileronsemibold | https://cdn.aframe.io/fonts/Aileron-Semibold.fnt |
| dejavu | https://cdn.aframe.io/fonts/DejaVu-sdf.fnt |
| exo2bold | https://cdn.aframe.io/fonts/Exo2Bold.fnt |
| exo2semibold | https://cdn.aframe.io/fonts/Exo2SemiBold.fnt |
| kelsonsans | https://cdn.aframe.io/fonts/KelsonSans.fnt |
| monoid | https://cdn.aframe.io/fonts/Monoid.fnt |
| mozillavr | https://cdn.aframe.io/fonts/mozillavr.fnt |
| sourcecodepro | https://cdn.aframe.io/fonts/SourceCodePro.fnt |
使用するときは下記のような記述でフォントを指定します。
|
1 2 3 |
<a-entity text="font: mozillavr; value: Via stock font name."></a-entity> <a-entity text="font: https://cdn.aframe.io/fonts/mozillavr.fnt; value: Via URL."></a-entity> <a-entity text="font: ../fonts/DejaVu-sdf.fnt; text: Via local file."></a-entity> |
1つ目は、先ほどの表のフォント名のみを指定する方法です。
2つ目は、cdn上にアップロードされたフォントファイルのURLを指定する方法です。
3つ目は、相対パスでフォントを指定する方法です。
このように、デフォルトで数種類のフォントを扱えるA-Frameですが、大きなデメリットがあります。
どのフォントも日本語に対応していないという点です。
それでは不便すぎるので、日本語を表示させる方法を次の章でご説明します。
日本語の表示方法
テキストを画像化して表示する方法
日本語をA-Frameで表示させる方法は、大きく分けて2つあります。
1つ目は、テキストを含んだHTMLタグを画像化してしまう方法です。
HTML Shaderとhtml2canvasというものを使用します。
HTML Shaderは、通常のHTML要素などの2次元のDOM要素を、3次元のA-Frameオブジェクト上に貼り付けることができます。
html2canvasは、Webページを画像化して、Canvasエレメント上に描画してくれます。
まずは上記の2つのライブラリをダウンロードしましょう。
HTML Shader
html2canvas
ダウンロードが完了したら、A-Frameを読み込んでいる所のすぐ下にライブラリを読み込みます。
|
1 2 3 |
<script src="https://aframe.io/releases/latest/aframe.min.js"></script> <script src="js/aframe-html-shader.min.js"></script> <script src="js/html2canvas.min.js"></script> |
次に、3Dオブジェクトを定義している<a-scene>タグよりも前に、表示させたいHTMLタグを記述します。
|
1 2 3 |
<div id="target1" class="target"> <p>日本語表示テスト</p> </div> |
最後に<a-scene>内に以下のコードを追加しましょう。
|
1 |
<a-plane width="2" height="2" material="shader:html;target: #target1;"></a-plane> |
material属性の”shader”プロパティで、HTML Shaderを利用することを宣言しています。
“target”プロパティには、対象となるHTML要素のクラス名またはID名を指定します。
日本語対応フォントを読み込ませて表示する方法
日本語を画像化して表示する方法をご説明しましたが、この方法にはデメリットがいくつかあります。
一つは描画された結果が少し荒いこと。テキストであれば、少し境界がギザギザしています。
そして、一度画像化した要素は、改行位置の調整、位置の調整などがしづらいことも挙げられます。CSSである程度スタイリングしてから表示するぶんにはとくに影響がありませんが、A-Frameのプロパティでレイアウトを調整するならば、 やはり扱いにくいです。
そこで、今度は生のテキストをそのままA-Frameで扱う方法をご紹介します。
その方法とは、日本語フォントを用意して、A-Frameのオブジェクト内のテキストに反映する方法です。
まずは日本語フォントを用意します。
otf、ttfなど様々なファイル形式がありますが、そのまま読み込ませると少し重たいです。
オススメは、フォントファイルをjsonファイルに変換して使用することです。
jsonファイルへの変換は以下のサイトで可能です。
https://www.henkan-muryo.com/font-converter.php
ファイルの準備ができましたら、そのフォントファイルをアセットファイルとして準備します。
|
1 2 3 |
<a-assets> <a-asset-item id="font" src="/assets/fonts/●●●●.json"> </a-assets> |
そのアセットファイルを、今度はテキストに反映します。
|
1 2 3 4 5 |
<a-entity text-geometry="Hello world; font: #font; size: .15;" material="color: black" position="1 1 0"> </a-entity> |
これで日本語がVR空間に表示されました。
まとめ
A-Frameをはじめ、その他のWebVRフレームワークはまだまだ創世記と言えます。
今回は”日本語が表示されない”というもどかしいところに対応する方法をお伝えしましたが、その他にも通常のコーディングのように思うようにいかない部分もあるかと思います。
そんな時は、WebVR用のライブラリ以外のプラグインなどを併用して対応できることがあるかもしれません。
まだまだ情報が少ないので、英語のドキュメントを翻訳しながら手がかりをつかむのもいいでしょう。
これからもWebVRの情報は発信し続けていきますので、行き詰まった時にはチェックしてみてください！
