ユグドラシルプロジェクト日記 #3

おはこんばんにちは！ギルガメです！

久しぶりにブログを更新します。

ユグドラシルプロジェクトは「Colyseus」でリアルタイム通信のサーバーをAWSのEC2で構築してワールドマップのような世界を実現していました。

ですがいくつか問題があったのでFishnetを使ったリアルタイム通信にリニューアルしたいと思います。

「Colyseus」で問題があった例です。この時はまだバージョンも古かったので今は下記の問題はないかもしれません。

• NPCの追加、実現したかったのはNPCの動きを他のプレイヤーにもシンクロさせることでした。これを実現するにはサーバー側でNPCのデータを持つ必要があるため、「Colyseus」で実現するのは難しく感じました。
• モンスターのリスポーン、こちらもNPCの追加と同様にサーバー側でモンスターの数など管理してリスポーンする必要があるため、Unityでサーバーのロジックを埋め込みたいので「Colyseus」を諦めました。
• ワールドマップでSceneを切り替える

まだまだやりたいことはあるのですが、一番欲しい機能としては上記のものになるのですが「Colyseus」からFishnetに切り替えていきたいと思います。

「Colyseus」はNodeJSでできているのでギルガメ的にはすごく好きでした。もちろんColyseusが悪いわけではなく、沢山の部屋を作成してミニゲームする的なものはColyseusでもいいかなと思います。サーバー内で処理するならUnity内で処理を書きたいのでColyseusよりFishnetの方がやりやすいのかなと思ったのでチャレンジです！！！

とはいえ、Fishnetはまだまだちょっと触ったぐらいですがサーバーをAWSか自宅にするかすごく迷います。。

まずはリメイクできるかですが、どうぞよろしくお願いいたします！

ギルガメオフィシャルページのリニューアル！#1

おはこんばんにちは！ギルガメです！ すごくすごく久しぶりの投稿になります。 

なかなか時間が作れずゲーム開発にも手が回りませんでした.. 

今回は長くページを更新していなかったので自作のオフィシャルページのバージョンが古くなったため、新しく作り直すことにしました！ 

古いバージョンの技術は以下になります。 

フロントエンド 

• ReactJs 

バックエンド（AWS） 

• NodeJs 
• Express 
• MongoDB 

さすがにReactのバージョンも下がってきました。またSEO的にもよくないので今回はSEOにも強いサーバーサイドレンダリングを使ってSEOにも強いページにしたいと思います。 

今回リニューアルに使う技術はこちらです！ 

フロントエンド 

• NextJs 
• TailwindCSS 
• Supabase 

バックエンド - 使いません！

そう！今回はバックエンドを使いません！ 

え？APIはどうするの？毎回ページを更新するの？などあると思いますが、今回はサーバーレスで行きます！ それを可能にするのがNextJSとSupabaseの組み合わせです！ しかもNextJSでVercelにページを公開することですべて無料になるという素晴らしい世界です。

Supabaseを使ってみてすごく使いやすく無料でストレージも使えて・・もう最高でした。 興味のある方はこちらからどうぞ！ 

https://supabase.io/ 

まだ日本語のドキュメントはないのかな・・それでも見ただけですごくわかりやすい内容かなと思うので誰でもすぐに導入できると思います。 しかもログイン機能も簡単に導入できます・・神ですか・・ 

今回はギルガメオフィシャルページのリニューアルを終わらせてからまたどんどんゲームを開発していきたいと思います！ 興味のある方は気軽にコメントをください！ 

これからもギルガメをよろしくお願いいたします！

unity3Dでホラーゲームを作ろう！#1

 

おはこんばんにちは！ギルガメです！

ハロウィンに向けて初めてホラーゲームを開発してみました。

色んな機能を追加したくてグダグダになったゲームですが、無事に完成してリリースでできてよかったです。

でもバージョンではありますが、ぜひ遊んでいってください！

https://yosapps.com/game/play/letsplaydemo/

今回は初めてホラーゲームの開発をしてみて、ギルガメ的に役にたったものをまとめていきたいと思います。

これさえできたらホラーゲームのベースになるものになるので、スムーズに開発が進みます。まだ時間短縮にもなるので、ぜひ試してみてください！

まずホラーゲームの舞台にステージを作っていきます。こちらはデザインをお持ちの方は別で作成してもいいですが、ギルガメはUnity Packageから無料で使えるProbuilderを使って開発します。

まずはProBuilderをUnity Packageからインポートします。

Window -> Package Managerを選択

ProBuilderを検索してインストールします。

これでマップを作成する下準備ができたました！

このProBuilderはすごく役に立ちます。めちゃくちゃ使いやすい！

ではさっそく建物を作っていきます。

ProBuilderのWindowを開きます。

Tools -> ProBuilder を選択して見やすいとこにwindowを設置してください。

最初は"Use Text Mode"になっていてちょっと個人的に見づらいのでアイコンの表示に変更します。

"Use Text Mode"から"Use Icon Mode"に変更します。

個人的にはこっちの方が好き。

では床のベースになるキューブを作ります。

一番の左の"New Shape Tool"をクリックしてシーンにキューブが生成されます。

次に形を変えていきます。

シーンの真ん中の上にある"Face Selection"を選択してキューブを伸ばしたりして

ベースを作ってい見ます。

階段なども設置でるので、好みのマップを作成します。

簡単な二階建てのフィールドができました。

マテリアルでお好みの色に変更できますが、今回はホラーゲームとして形が完成してから、少しずつホラーっぽくしていきます。

本格的にマップを作りたい方はこちらの動画がおすすめです！

今回はマップが完成したので、次回はプレイヤーとライト追加して先ほど作ったマップを徘徊できるようにしたいと思います。

ユグドラシルプロジェクト日記 #2

 

おはこんばんにちは！ギルガメです！

前回はサーバーサイドについてお話しましたが、今回はギルガメが開発に使った「Colyseus」について詳しく説明したいと思います。Colyseusのオフィシャルサイトは英語なので、わからないとこもあると思いますが、頑張ります。

ギルガメのリアルタイム通信のテストの動画になります。

まず簡単にColyseusとは何なのか

Colyseusは、Node.js用の信頼できるマルチプレイヤーゲームサーバーです。ネットワーキングを気にする代わりに、ゲームプレイに集中することができます。

このフレームワークの使命は、JavaScriptで独自のマルチプレイヤーゲームを作成するための最も簡単なソリューションになることです。

Colyseusが提供するものについてです。

• WebSocketベースの通信
• サーバー側とクライアント側のシンプルなAPI。
• サーバーとクライアント間の自動状態同期。
• ゲームセッションへのマッチメイキングクライアント
• 垂直または水平にスケーリング

ギルガメが実装したかったものはWebGLでのリアルタイム通信だったので、WebSocketベースの通信が望ましかったので、こちらにしました。

Colyseusでは簡単にルームの作成ができるので、マッチング機能も実装もすぐにできます。また途中で回線が切れても再開できる機能もそろっているのですごく助かります。

オートスケーリング機能もついているので、ユーザーが増えても大丈夫なところもすごくいい。この機能を使うならAWSに移行した方がいいかな・・

またColyseusは信頼できるゲームサーバーの考え方は非常にシンプルです。

サーバーは、位置、速度、衝突など、ゲームに関連するすべてのデータを処理する必要があります。

マルチプレイヤーゲームの作成は、ゲームプレイが複数の遅延を考慮する必要があるため、通常はトリッキーです。他のクライアントはサーバーにデータを送信し、サーバーはすべてのクライアントにデータを送信します。

Colyseusでの「マルチプレイヤーゲームループ」は次のようになります。

• クライアントはサーバーにメッセージを送信し、その状態の変更を要求します。
• 入力は、ルームハンドラーによって検証される必要があります。
• 部屋の状態が更新されます。
• すべてのクライアントは最新バージョンのゲーム状態を受け取ります。
• ゲームの状態の視覚的表現が更新されます

興味のある方はオフィシャルサイトを見てみてください。

https://docs.colyseus.io/

実装にはNodeJSやTypeScriptの知識が必要になりますが、今世界でも人気のある言語なので覚えてみるのもいいかもしれません。ギルガメはものすごく気に入っています。

ユグドラシルプロジェクト日記 #1

おはこんばんにちは！ギルガメです！

ずっと前から実装してみたかったマルチプレイを本気で開発したいと思い、やく１か月間かかりました。やっと形になったよ・・コードもできるだけきれいに丁寧に気を付けて開発できたので、ここまでの進歩を日記にしていこうと思います。

まず前からマルチプレイに対して試してみたものを挙げていこうと思います。

バックエンドの開発を一から作るのにはかなりのリソースと時間がかかるので、もしアセットストアにすでに導入可能なものがあればと思い、個人的にできそうなものから試してみました。

試したものは：

• MMORPG KIT (2D/3D/Survival)

こちらのアセットはかなりの完成度でした。日本語は対応していませんが、Discordで疑問などがあれば気軽に質問できます。こちらのマルチプレイは携帯やデスクトップなどの開発には簡単に導入できます。

問題はWebGLでのマルチプレイの実装になります。こちらの実装に手順は動画でありますが、あまりにも説明が足りなく、Discordでもみんなが聞いていますが、まだ未完成でWebGLの評判があまりよくありませんでした。

こちらのアセットでかなり進めていましたが、ギルガメは最終的にWebGLで実装したかったので、とても残念でした。システム自体はとても簡単なので、WebGL以外ではおすすめのアセットです。

MMORPGとしてはほぼすべての機能が備わっています。クエストも簡単に追加できます。また装備やマウント機能、モンスターのリスポーンやレベルアップとパラメータの振り分け。ここまで出来たらWebGLでもリリースできるようにしてほしかった・・泣。

ダメだと思い、次のアセットを探してみたました。

• Mirror

このアセットは無料のアセットで、ほぼすべてのアセットに対応しています。無料なのでサンプルなのは簡単なものしかありません。ギルガメの実装したいものには一から開発しないとなので悩みました。またこちらのアセットは無料ですが、ちょっと気になった部分がありました。資格コードみたいなのがあったので、個人てきにそこが気になって使うのを諦めました。

最後に色々悩んだ結果・・バックエンドも完全に理解していないと開発に問題が出ると思い、できるだけ最初から開発することに決めした。すでに完成しているものは制限、または理解に時間がかかるので、やっぱり時間かけてでも最初から開発することにしました。

そこで使う言語は今人気のNodeJSにきました。こちらに関してはギルガメも経験があります。またリアルタイム通信でかなりの人気があるので、こちらで開発しました。

データベースはMongoDB、リアルタイム通信はWebsocketです。

結局バックエンドの開発だけで２週間ほどかかりました。マップごとのリアルタイム送信をチャットを実装しました。

NodeJSに興味ある方は「Colyseus」というNodeJSベースのリアルタイム通信をおすすめします。

今回のBeta版で実装した機能を紹介したいと思います。

まず最初に接続するサーバーのセレクトメニューになります。

まだサーバーは一台しかないのでYGGDRASIL SERVERのみです。

サーバーはテストで自宅サーバーを使っています。ＡＷＳに移行を考えていますが、サーバーが増えるとここに追加する設定を実装しています。自宅サーバーでは同時接続の制限がないとこも魅力ですね。Photonなどは実装は簡単ですが、無料での同時接続の制限が少ないので、こうして独自のサーバーがすごく気に入っています。

ちょっと長くなったので、この続きは次回にします！

次は動画も追加します！