WebGL＋Node.js＋socket.ioで3Dマルチプレイ開発の課題に取り組みました。　その11

雨が降る日が度々来るようになり、湿度と温度も徐々に高くなってきた今日この頃、皆様どうお過ごしでしょうか？

チーム・タンドリーの北山です。

前回に引き続きクラウドサーバでマルチプレイの実装作業を行っています。

今回は以下の機能の実装・変更が完了しました。

上記の内の２と３は画面の上部にUIを配置し、そのUI内のボタンを押す事で機能します。

コメント投稿機能についてのイメージは以下の動画になります。

クラウドサーバを経由し、他のプレイヤー側の画面に反映させるという処理においてはこれまでと同じです。

コメントが消えるタイミングは JavaScript の setTimeout 関数を使用して消えるようにしています。

２と３を実装する際に配置したUIは以下のデザインになります。

此方のUIは課題元を参考にBootstrapで作成しています。

Bootstrapのみでは不可能な箇所についてはCSSをインライン表記にするなどして対応しています。

Bootstrapは既存のCSSの記入量を減らしつつ、Bootstrapの公式が定めたクラス名などを付与する事でCSSで言う所の margin （余白）などの設定ができます。

Bootstrapなら margin ではなく m-1 とclass属性に追記して書くだけでできます。

（※本来CSSはインラインで書く場合はstyle属性に追記します。この点もBootstrapの特徴です。）

ただCSSで細かく指定できるのに対してBootstrapはある程度の定まった範囲でしか設定できないという点はある為、そのような箇所にはCSSを用いたりする必要があります。

ただ、Bootstrapは仕様上、レスポンシブデザイン（パソコン・スマートフォンなどの端末に囚われないUIを構築したデザイン）の用途に適した仕組みとなっており、様々なWebページがレスポンシブデザインは当たり前の今の時代には適した強みがあると言えます。

このUIを配置し、左の、眼の様なアイコンのボタンを押すと以下の動画のように視点が3人称視点から1人称視点に変更できます。

そして、右の、人の回りに青い線が描かれたアイコンのボタンを押すとアバターの変更画面を表示する事が出来ます。

このアバターを変更する画面も、Bootstrapで作成しています。

Bootstrapで作成した為、このサムネイル付きの画面もレスポンシブに対応しており横幅も柔軟に対応してくれます。

今回はBootstrapでUIを作成する際に予想より時間がかかった事もあり今後はBootstrapに対する理解を深めつつ作業時間の短縮に繋げていきたいと考えています。

ここまでご一読いただきまして誠にありがとうございました。

是非、次回もご一読いただけますと幸いです。

現在

株式会社チョモランマ

株式会社シェルパ

3Dmodeljapan株式会社

ではスタッフを大募集しております！！

UNITY、Unreal Engine4、AI、プログラミングや建築パースに興味がある方！

ぜひご応募下さい！！

初心者の方、未経験の方やインターンを受けてみたい方々でも大歓迎です！！

〔企画運営〕株式会社シェルパ　

公式HP　https://sherpa-cg.com/

〒810-0042

福岡県福岡市中央区赤坂1丁目13-10赤坂有楽ビル7F

tel 092-717-6800 / fax092-717-6801

Tandoori