街中吹っ飛ばしオンライン「STAY AWAY」を公開しました

2020年5月5日

概要

unity1week 第15回 テーマ「密」参加作品『STAY AWAY』をunityroom にて公開しました。また、同時開催ゲームジャムroom6gamejam2020、おうちgamejamにも参加しています。
https://unityroom.com/games/u1w15_close_jaol

利用させていただいたアセット、素材

ボタン、フレーム
空想曲線様 http://kopacurve.blog33.fc2.com/
フォント
アンニャントロマン http://inatsuka.com/extra/toroman/

前々から使用しているオススメアセット ずっと使ってるからデフォルトのコンソールがどういうものだったか忘れてしまった コンパイル中かどうか分かるのが凄い便利

前々から使用しているオススメアセット デバッグ時に今どの変数がどういう状態かデバッグ出力せずに確認できるし変更できる素晴らしいアセット

前々から使用しているオススメアセット ぶつかった時のエフェクトとアイテムエフェクトに使用

前々から使用しているオススメアセット 効果音系はほとんどこれ

この前のセールで購入 いっぱい入っているけどその分インポートに時間がかかる 必要そうなものだけインポートしたほうが良さそう

こちらもこの前のセールで購入 初めてNavMesh使って困惑してた

こちらもこの前のセールで購入 セールしないでもめちゃくちゃ安い サンプルの街並みをそのまま導入

サードパーソン視点でプレイしたかったので導入

ランキング
【Unity、WebGL】なるべく簡単にオンラインランキング機能をつけるサンプル

ツイッター共有
【Unity1Week】 WebGLで画像つきツイートをしたい!

WebGLでのソケット通信について

WebGLでソケット通信するには、C# の System.Net.Sockets は使えず、WebSocket(WS)を使う必要がある。
また、httpsページにて利用するにはSSLを用いたWebSocketSecure(WSS)を使わなければならない。

私が今回使った環境はUnity2018.3, そしてUbuntuサーバ(VPS)。

クライアント(Unityu)側は以下を参照
Github
jirihybek/unity-websocket-webgl: Hybrid WebSocket implementation for Unity 3D with support of native and browser client. https://github.com/jirihybek/unity-websocket-webgl

サーバ(Ubuntu)側は以下を参照
EC2上にNode.jsでWSSサーバをたてる https://qiita.com/edapo/items/c86fd88980ec75bed1e2

サーバ側は証明書が必要なので LetsEncrypt などから証明書をサーバに導入する。
【Ubuntuサーバー】Let’s Encryptをインストール(Certbot編
https://deep-blog.jp/engineer/11632/

サーバに導入出来たら証明書を確認する。証明書の場所は以下。
Let’s EncryptのSSL証明書などの場所
/etc/letsencrypt/live/ドメイン名/fullchain.pem
/etc/letsencrypt/live/ドメイン名/privkey.pem

Ubuntu側のnode.jsに上記のファイルを読み込ませて実行する(証明書は管理者権限でないと読み込めないので管理者権限でnode.jsを実行する sudo node なんたら.js)

私が非常に詰まった個所はWSSにて接続時にエラーとなった。原因はクライアントから接続する際にIPで接続していたのだが、証明書を使った接続の場合はFQDN(ホスト名.ドメイン名 例:www.なんたら.com)で接続しなければならない。
WebSocket ws = WebSocketFactory.CreateInstance(“ws://www.なんたら.com:ポート番号”);

あと純粋な処理の部分で以下の受信時の処理に重い処理(new とか Instantiate)とかを書いてはならない。受信が来た際に最初から処理されるため、重い処理が完了する前にまた処理が再開されるために処理が終わらない。
何らかのデータクラスに必要な値だけを保持しておいて、どこか別のUpdateクラスなどで保持した値を適用するなどの対策が必要。

    ws.OnMessage += (byte[] msg) =>
    {
    // ここに受信時の処理を書く
    };

余談に近いが、WSS受信ポートに対してDDOSされたらサーバへ非常に負荷がかかるため対策が必要。
ゲームは最高で60fpsと思っているので1秒に100以上メッセージ来たらブロックとかでいいんじゃないかな。
ufwで簡単firewall(ブルートフォース対策)
https://qiita.com/forestsource/items/5f34080658251d74ab2c

エディターではできるけどWebGLでできない(ソケット接続)、WebGLではできるけどエディターではエラーになる(ソケット受信)、WebGLでビルドしてサーバに置いて実行したらエラーになる(証明書関係)など難易度は非常に高いと思う。同じくWebGLでソケット通信される方は幸運を祈ります。

開発関係ツイート(時系列)

第15回u1w開催 テーマは「密」
開発者界隈でそのまんまのが来たぞと話題に
結果追いかけっこみたいなのができたけどこの時は違うもの考えてた
3D分からん勢、初めてNavMeshに触れる
Low Poly Animated People, SimpleTown導入
ThirdPersonController導入
リアルでテンションあがる
ちなみにAllSkyは容量凄い 3, 4GBある
お、これ面白いもの作れんじゃね とこの段階では上機嫌
しかしこの後ネットワーク回りでずぶずぶに時間取られる
暗雲が立ち込め始める
udpでやろうと思ってたが駄目だった
問題が山積し始める
最初はWebsocket-Sharpをそのまま使っていたけど、
接続時にエラーになっていたのでHybridWebSocketを使うようにした
コンテンツ作成を置き、ネットワーム回りをテストするためのシーン作成
4日目にして急に簡素 3Dどこいった
エラーが殴り掛かってくる!
位置情報は同期できたけど、Rotateの設定がおかしかった
Quaternion.Euler(new Vector3(x, y, z)); のような変換が要る
InstantiateでEditor止まるは受信スレッド再開問題
この時にHTTPSとWSSについて知った
急に強気 酔ってた
このときIPではなくFQDNで接続しなければならない問題に直面していた
急に弱気 酔ってた
諸々解決 後々サッカーボールにいろいろテコ入れする
安定したため公開
絡みつく世界にはうんざりなのさ
ツイート機能追加
エモーション追加 結構ロスするからいっぱい押してね
度が過ぎるお祝い 旧正月かな