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

梅雨の時期に入り、雨は降りませんが曇りが続く今日この頃、皆様どうお過ごしでしょうか?
チーム・タンドリーの北山です。

今日は福岡県は午前は少し薄暗い空でしたが、午後からは明るい日差しがさしました。
梅雨明けだとこれから暑くなるのが予想されます。
熱中症には気を付けて下さい。


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

前回はクラウドサーバで実装作業を行い、アバターの移動やモーションの連動を実装しました。

今日も引き続き作業を行い、3つの実装が完了しました。

1つめは、これまでローカルサーバを活用して実装した機能であるアバターの頭上のアイコンに名前を表示するという機能です。

これまでローカルサーバでの作業中は、サーバ側のsessinIDや、MySQLサーバのユーザー固有のIDを入れるなどをしてきました。

今日はそこから、情報の構造がブラックボックスであるクラウドサーバへコマンドを送り、返り値として戻ってきたユーザーの情報である名前を頭上に表示した形です。



動画では数字が表示されていると思います。

現在は、会員登録がされているユーザー情報でログインではなく、会員登録していないゲストユーザーがログインしてきた場合を想定しての実装を行っている為、その日のログインした人の連番が表記されてます。


2つめ以降は、初めて実装した機能になります。


2つめはアバターの変更機能です。

此方の機能は現在はCキーを押す事でモーダルウィンドウを表示し、そこから変更したいアバターを選ぶことができます。
以下の動画です。




また、このアバターの変更についてもマルチプレイで反映されるよう実装しました。




プレイヤーが好きなアバターを選び、WebGL上のワールドを動き回れます。


3つめは、アバターの頭上のアイコンを本番用の画像に差し替え、複数の機能を追加した事です。

これまではシンプルな作業用の画像を作成して使用してきました。





この画像ではなく、本番用の画像に切り替え、並びにその画像を設定しているWebGL上のオブジェクトに対して、テキストなどを表示する子要素を複数設定していき、プロフィール用のアイコンに切り替えました。

イメージとしては以下の動画です。




「テスト中」の箇所は将来的にはログインされている他社様などの会社名などが入る予定です。

今回、ここまでの作業を実装する事が出来ました。

そして、上記の機能群とは関係のない箇所なのですが少し苦慮した所がありました。


WebGLのGUIのモーダルウィンドウなどににbootstrapを使用しているのですが、bootstrapは専用のjs,css、また更に外部のjQueryなどを読み込む必要があるのですが、その数がだいたい3~4個のファイルである為、この中のどれかがバージョンが違えば挙動がおかしくなってしまう事があります。

今回、モーダルウィンドウのサイズがおかしい問題に直面しましたが、まさしく、そのバージョン違いが原因であった事が分かり、今後は意識してバージョン管理をしなくてはならないと痛み入りました。

皆さんもプログラムをされる際などにはバージョン違いに気を付けて下さい。

ここまでご一読いただきまして誠にありがとうございました。
是非、次回もご一読いただけますと幸いです。




現在
株式会社チョモランマ
株式会社シェルパ
3Dmodeljapan株式会社
ではスタッフを大募集しております!!
UNITY、Unreal Engine4、AI、プログラミングや建築パースに興味がある方!
ぜひご応募下さい!!
初心者の方、未経験の方やインターンを受けてみたい方々でも大歓迎です!!



〔企画運営〕株式会社シェルパ 
公式HP https://sherpa-cg.com/
〒810-0042
福岡県福岡市中央区赤坂1丁目13-10赤坂有楽ビル7F
tel 092-717-6800 / fax092-717-6801 

コメント