フォントの描画:Three.jsで3Dブラウザゲームを作る その2

サンプルプログラム

Nengaです。今回はThree.jsでのフォント描画をご紹介いたします。

Three.jsに限りませんが,3Dのゲームエンジンはなぜか2D描画がものすごく面倒なのです。(DirectX8.0以降も,GLESもそうでした。)

さて,2D描画の基礎となるフォント描画ですが,Three.jsでのフォント描画がようやく実現したのでサンプルを公開いたします。

 

スポンサーリンク

サンプルプログラム:Three.jsのフォント描画

サンプルプログラムを置きましたのでダウンロードお願いいたします。↓

 <サンプルプログラムをダウンロード> 

 

ダウンロードいただけたら,zip展開の上,jsの中にある「script.js」をローカルサーバーで実行方お願いいたします。ローカルサーバーでの実行方法は下記記事のとおりです。

サンプルのデモはこちらになります。


↑タップでデモ開始です。

サンプルプログラムのフォント描画について

本サンプルプログラムで行なっているフォント描画は,下記の2方式です。

(1)常時手前に表示する方式

(2)ペギちゃんの頭上に表示する方式

 

上記(1)は字幕表示のように,画面の決まった位置に表示させる(カメラが動いても移動しない)方式です。

上記(2)はソーシャルゲームみたく,キャラクターの頭上にフォントを表示させる方式。3D空間上に描画するので,キャラが遠くに行けば小さくなり,キャラが壁に隠れればフォントも隠れます。

プログラムの説明

今回,「N3Dlib-00.js」というファイルを追加しました。フォントのクラスはこのファイルの中で定義しています。

NFONTクラス

class NFONT{
    constructor(_scene,str,_size){
        this.str=str;
        this.sprite=null;
        this.x=0;
        this.y=0;
        this.size=_size;
        this.scaleMaster=_size/400;//0.125;
        this.bCenter=false;
        this.update(_scene);
    }

・・・

strが表示させる文字列データ,spriteはstrを画像化したデータ,x,yが表示位置,その他色々なパラメータを持たせています。

 

NFONTの使い方

NFONTは「script.js」で使っています。

 

22行目で変数を定義しています。

strMsg:上記(1)常時手前に表示するタイプ

strPegi:上記(2)ペギちゃんの頭上に表示するタイプ

let strMsg,strPegi;

 

42,43行目で初期化しています。

strMsg= new NFONT(scene,”ペギちゃんライブ映像”,50);
strPegi= new NFONT(scene,”ペエ~”,250);

 

205~211行目で表示位置の更新をしています。

    strMsg.x= 0.022;
    strMsg.y=-0.042;
    strMsg.updatePosition(camera);

    strPegi.sprite.position.x = pegi.position.x;
    strPegi.sprite.position.y = pegi.position.y+1;
    strPegi.sprite.position.z = pegi.position.z;

 

NFONTの仕組み

NFONTは表示をspriteで行なっています。spriteは平面の画像を3D空間上に表示させるもの(いわゆるテクスチャ)です。

NFONTではupdate()関数でspriteの画像データに対して文字列を焼き込みます。これをsceneにadd()することで,文字列表示を実現しています。

 

実は,上記(1)常時手前に表示するタイプ,(2)ペギちゃんの頭上に表示するタイプはどちらも3D空間上に置いて描画しており,違いはxyz位置のみです。

 

上記(2)はxyzをペギちゃんの真上にセットするだけなのでわかりやすいです。

上記(1)はupdatePosition()関数でカメラの手前にセットしています。strMsg.xとstrMsg.yで2Dとしての表示位置にオフセットをかけています。(それぞれの値が0の場合,画面の中央にフォントが表示されます。)

まとめ

Three.jsでフォントを表示させるサンプルと,使用方法をご紹介させていただきました。

(1)NFONTクラスで文字列の描画ができるようになりました。

(2)3D空間にフォントを描画するが,updatePosition()関数でカメラの手前にポジションをセットすることで,2D表示のように見せることができます。

(3)上記(2)の模擬2D表示は文字列が画面中央に表示されるので,x・y方向にオフセット値を与えて描画位置を変更しています。

 

上記(3)に関しては,もっと直感的にわかりやすく表示位置を指定できるよう改善できたらと思います。

 

お疲れさまでした。次回も何か機能追加して,ご紹介させていただきたく存じます。

サンプルプログラムの参考にさせていただいたサイト

・medium.com @astatsuya 様(https://medium.com/@astatsuya/three-js%E3%81%A7%E5%B8%B8%E3%81%AB%E6%AD%A3%E9%9D%A2%E3%82%92%E5%90%91%E3%81%8F%E9%95%B7%E6%96%B9%E5%BD%A2%E3%81%AE%E6%96%87%E5%AD%97%E3%83%A9%E3%83%99%E3%83%AB%E3%82%92%E6%8F%8F%E7%94%BB%E3%81%99%E3%82%8B-fa606ed6752)
・Qiita @chromia 様(https://qiita.com/chromia/items/fe4828c5a3c250f1fc3a)
 

Nenga

コメント

タイトルとURLをコピーしました