PlayCanvasでは、Text Element (テキストエレメント ) コンポーネントを利用して日本語を扱うことができます。フォントは、エディタにttfやotfファイルをアップロードしText Elementコンポーネントに配置をすることで利用できますが、日本語や一部の文字に関しては、一度、フォントアセットに必要な文字列を設定し準備をする必要があります。
フォントの設定について
フォント設定についてはこちらのようなUIとなっております。必要な文字を入力し、「Process Font」をクリックすることで利用できます。また、全ての日本語のワードについては、こちらのkgsiさんのGistより日本語の文字列をコピーします。
japanese_full.txt
日本語文字コード範囲指定（ascii・ひらがな・カタカナ・第一水準および第二水準(JIS-X0208-1997)に含まれる漢字）
また、先日「Google Fonts」にて公開されているフォントを利用して、日本語文字列を入れ込んだプロジェクトを作成致しました。プロジェクトについてはこちらとなります。こちらからコピーをして頂く事もできます。
https://playcanvas.com/editor/scene/1678016
ファイルサイズの問題について
PlayCanvasで日本語を表示する際に全ての日本語の文字を「Process Font」を実施した場合ファイルサイズが10MB ~ 20MB程度となってしまいます。ウェブで公開する際にはリソースとしてはかなりの大きさになってしまいます。
ファイルサイズの削減について
今回は、デプロイ前のファイルサイズの削減の方法として、フォントファイルに対していくつかの画像圧縮等を実施してみました。
こちらは、まだEditorの機能にあるものではないので、デプロイ前に、ファイルの「DOWNLOAD」をした後のアセットに対して実施した内容となっています。
こちらは、「index.html」や「playcanvas-stable.min.js」などが入っている「ルートディレクトリ」→
「files」→「assets」→「アセットID」→「ファイル」とにあるpng形式のフォントファイルに対して実施した内容となります。
全ての日本語ファイルを「Process Font」をした場合には、5MB ~ 10MBの4096x4096のpngファイルが2つ生成（ダウンロード）されます。このファイルをファイルに置き換えて実施をしました。
1. オリジナル
オリジナルのファイルサイズ: 6.9MB + 6.8MB = 13.7MB
2. Basis圧縮( ETC / Default ) テクスチャ（エディタ内のBasis圧縮のコンテンツをローカルでダウンロードして置換しました）
Basis圧縮利用時のファイルサイズ: 1.4MB + 1.4MB = 2.8MB
Basis拡張子を使用した場合、2つめのテクスチャファイルが使用されていない（増分されていない）ため、表示が破損しました。
以下は、このコードをローカルで書き換えて得た結果です。
PlayCanvasのBasis圧縮についてまとめた記事は以前こちらに記述させていただきました。
3. オンライン圧縮サービスを使用して、pngファイルを圧縮しました。
https://compresspng.com/ja/
png圧縮後のファイルサイズ: 3.0MB + 2.9MB = 5.9MB
4. 4096から2048にサイズを変更してから、pngを圧縮しました。
リサイズ&圧縮後のファイルサイズ: 1.3MB + 1.2MB = 2.5MB
比較表
下記の表がそれぞれをまとめたものとなります。
| 比較 | ファイルサイズ | オリジナルとの比較 |
|---|---|---|
| オリジナル | 13.7MB | 100.00% |
| Basis圧縮 | 2.8MB | 20.44% |
| png圧縮 | 5.9MB | 43.07% |
| pngリサイズ(4k → 2k) + 圧縮 | 2.5MB | 18.25% |
利用する場所などによっては解像度が必要ない場合には、2048x2048に落としてpngファイルの圧縮をすることで、オリジナルのファイルサイズ(13.7MB)から2.5MBまでファイルサイズを減らすことがきるかもしれません。