BLOGS
2022/9/9
ユグドラシルプロジェクト日記 #3
<p></p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiXkyl8vPUvYgtqHMgIFCvsvFA2qts8EQlUXkPquMrCGE_YT891ZPBz88Tn357SEV7dY2_0LZG4YtNWOi3QfuiPCY2VT8XZsMdYQCLSfY4uK8CBuMnDN3BZn-3aPmaoMXISO58SEa5CmH3nge1gRtvKOWdQQf_MpE31IH9JI4IRMJZw6YY3KqvZJGJ/s2900/Screen%20Shot%202022-09-09%20at%2017.09.03.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1816" data-original-width="2900" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiXkyl8vPUvYgtqHMgIFCvsvFA2qts8EQlUXkPquMrCGE_YT891ZPBz88Tn357SEV7dY2_0LZG4YtNWOi3QfuiPCY2VT8XZsMdYQCLSfY4uK8CBuMnDN3BZn-3aPmaoMXISO58SEa5CmH3nge1gRtvKOWdQQf_MpE31IH9JI4IRMJZw6YY3KqvZJGJ/w640-h400/Screen%20Shot%202022-09-09%20at%2017.09.03.png" width="640" /></a></div><br /><div class="separator" style="clear: both; text-align: center;"><br /></div><p></p><p>おはこんばんにちは！ギルガメです！</p><p>久しぶりにブログを更新します。</p><p>ユグドラシルプロジェクトは「Colyseus」でリアルタイム通信のサーバーをAWSのEC2で構築してワールドマップのような世界を実現していました。</p><p>ですがいくつか問題があったのでFishnetを使ったリアルタイム通信にリニューアルしたいと思います。</p><p>「Colyseus」で問題があった例です。この時はまだバージョンも古かったので今は下記の問題はないかもしれません。</p><p></p><ul style="text-align: left;"><li>NPCの追加、実現したかったのはNPCの動きを他のプレイヤーにもシンクロさせることでした。これを実現するにはサーバー側でNPCのデータを持つ必要があるため、「Colyseus」で実現するのは難しく感じました。</li><li>モンスターのリスポーン、こちらもNPCの追加と同様にサーバー側でモンスターの数など管理してリスポーンする必要があるため、Unityでサーバーのロジックを埋め込みたいので「Colyseus」を諦めました。</li><li>ワールドマップでSceneを切り替える</li></ul><div>まだまだやりたいことはあるのですが、一番欲しい機能としては上記のものになるのですが「Colyseus」からFishnetに切り替えていきたいと思います。</div><div><br /></div><div>「Colyseus」はNodeJSでできているのでギルガメ的にはすごく好きでした。もちろんColyseusが悪いわけではなく、沢山の部屋を作成してミニゲームする的なものはColyseusでもいいかなと思います。サーバー内で処理するならUnity内で処理を書きたいのでColyseusよりFishnetの方がやりやすいのかなと思ったのでチャレンジです！！！</div><div><br /></div><div>とはいえ、Fishnetはまだまだちょっと触ったぐらいですがサーバーをAWSか自宅にするかすごく迷います。。</div><div><br /></div><div>まずはリメイクできるかですが、どうぞよろしくお願いいたします！</div><p></p>
READ➜
2021/9/11
ギルガメオフィシャルページのリニューアル！#1
おはこんばんにちは！ギルガメです！ すごくすごく久しぶりの投稿になります。 <div><br /></div><div>なかなか時間が作れずゲーム開発にも手が回りませんでした.. </div><div><br /></div><div>今回は長くページを更新していなかったので自作のオフィシャルページのバージョンが古くなったため、新しく作り直すことにしました！ </div><div><br /></div><div>古いバージョンの技術は以下になります。 </div><div><br /></div><div><b>フロントエンド </b></div><div><ul style="text-align: left;"><li>ReactJs </li></ul></div><div><br /></div><div><b>バックエンド（AWS） </b></div><div><ul style="text-align: left;"><li>NodeJs </li><li>Express </li><li>MongoDB </li></ul></div><div><br /></div><div>さすがにReactのバージョンも下がってきました。またSEO的にもよくないので今回はSEOにも強いサーバーサイドレンダリングを使ってSEOにも強いページにしたいと思います。 </div><div><br /></div><div>今回リニューアルに使う技術はこちらです！ </div><div><br /></div><div><b>フロントエンド </b></div><div><ul style="text-align: left;"><li>NextJs </li><li>TailwindCSS </li><li>Supabase </li></ul></div><div><br /></div><div><b>バックエンド - 使いません！</b></div><div><br /></div><div><div class="separator" style="clear: both;"> <a href="https://1.bp.blogspot.com/-UxgzSG696rA/YTxI58riIkI/AAAAAAAAEBE/A9UdN6pYz8gNjtNSvdG16YQ_ezAMsuvvACLcBGAsYHQ/s1540/Screenshot_17.png" style="display: block; padding: 1em 0px; text-align: center;"><img alt="" border="0" data-original-height="800" data-original-width="1540" src="https://1.bp.blogspot.com/-UxgzSG696rA/YTxI58riIkI/AAAAAAAAEBE/A9UdN6pYz8gNjtNSvdG16YQ_ezAMsuvvACLcBGAsYHQ/s400/Screenshot_17.png" width="400" /></a> </div> そう！今回はバックエンドを使いません！ </div><div>え？APIはどうするの？毎回ページを更新するの？などあると思いますが、今回はサーバーレスで行きます！ それを可能にするのがNextJSとSupabaseの組み合わせです！ しかもNextJSでVercelにページを公開することですべて無料になるという素晴らしい世界です。</div><div><br /></div><div>Supabaseを使ってみてすごく使いやすく無料でストレージも使えて・・もう最高でした。 興味のある方はこちらからどうぞ！ </div><div><br /></div><div><a href="https://supabase.io/ ">https://supabase.io/ </a></div><div><br /></div><div>まだ日本語のドキュメントはないのかな・・それでも見ただけですごくわかりやすい内容かなと思うので誰でもすぐに導入できると思います。 しかもログイン機能も簡単に導入できます・・神ですか・・ </div><div><br /></div><div>今回はギルガメオフィシャルページのリニューアルを終わらせてからまたどんどんゲームを開発していきたいと思います！ 興味のある方は気軽にコメントをください！ </div><div><br /></div><div>これからもギルガメをよろしくお願いいたします！ </div>
READ➜
2020/11/11
unity3Dでホラーゲームを作ろう！#1
<p> </p><div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-nJRWgmwwnXY/X6tyn8B-zvI/AAAAAAAADT8/qhMEXu9UAG8EfUDYQKkXl5jL8vO33hrBQCLcBGAsYHQ/s1324/Screenshot_141.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="823" data-original-width="1324" height="398" src="https://1.bp.blogspot.com/-nJRWgmwwnXY/X6tyn8B-zvI/AAAAAAAADT8/qhMEXu9UAG8EfUDYQKkXl5jL8vO33hrBQCLcBGAsYHQ/w640-h398/Screenshot_141.png" width="640" /></a></div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: left;">おはこんばんにちは！ギルガメです！</div><div class="separator" style="clear: both; text-align: left;"><br /></div><div class="separator" style="clear: both; text-align: left;">ハロウィンに向けて初めてホラーゲームを開発してみました。</div><div class="separator" style="clear: both; text-align: left;">色んな機能を追加したくてグダグダになったゲームですが、無事に完成してリリースでできてよかったです。</div><div class="separator" style="clear: both; text-align: left;"><br /></div><div class="separator" style="clear: both; text-align: left;">でもバージョンではありますが、ぜひ遊んでいってください！</div><div class="separator" style="clear: both; text-align: left;"><a href="https://yosapps.com/game/play/letsplaydemo/">https://yosapps.com/game/play/letsplaydemo/</a></div><br /><p></p><p>今回は初めてホラーゲームの開発をしてみて、ギルガメ的に役にたったものをまとめていきたいと思います。</p><p>これさえできたらホラーゲームのベースになるものになるので、スムーズに開発が進みます。まだ時間短縮にもなるので、ぜひ試してみてください！</p><p>まずホラーゲームの舞台にステージを作っていきます。こちらはデザインをお持ちの方は別で作成してもいいですが、ギルガメはUnity Packageから無料で使えるProbuilderを使って開発します。</p><p>まずはProBuilderをUnity Packageからインポートします。</p><div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-W7oBAo8bh5s/X6t0tiPBPZI/AAAAAAAADUI/PBibdK7Ld3gS-TZU-oABla3H6inb1W2EQCLcBGAsYHQ/s1429/Screenshot_142.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="982" data-original-width="1429" height="440" src="https://1.bp.blogspot.com/-W7oBAo8bh5s/X6t0tiPBPZI/AAAAAAAADUI/PBibdK7Ld3gS-TZU-oABla3H6inb1W2EQCLcBGAsYHQ/w640-h440/Screenshot_142.png" width="640" /></a></div><div class="separator" style="clear: both; text-align: center;">Window -> Package Managerを選択</div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-7bi-7L3HH3Y/X6t0vgmVjGI/AAAAAAAADUM/_Dgum83cOyIbzbXRCtlB9gzWZyEN6b5tACLcBGAsYHQ/s1768/Screenshot_143.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1201" data-original-width="1768" height="434" src="https://1.bp.blogspot.com/-7bi-7L3HH3Y/X6t0vgmVjGI/AAAAAAAADUM/_Dgum83cOyIbzbXRCtlB9gzWZyEN6b5tACLcBGAsYHQ/w640-h434/Screenshot_143.png" width="640" /></a></div><div class="separator" style="clear: both; text-align: center;">ProBuilderを検索してインストールします。</div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: left;">これでマップを作成する下準備ができたました！</div><div class="separator" style="clear: both; text-align: left;"><br /></div><div class="separator" style="clear: both; text-align: left;">このProBuilderはすごく役に立ちます。めちゃくちゃ使いやすい！</div><div class="separator" style="clear: both; text-align: left;"><br /></div><div class="separator" style="clear: both; text-align: left;">ではさっそく建物を作っていきます。</div><div class="separator" style="clear: both; text-align: left;">ProBuilderのWindowを開きます。</div><div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-zuu9oT_bamI/X6t2Ah9I4FI/AAAAAAAADUc/uhYQQd8_Ts8LZzEuxfjsBAOZMAY1VhCawCLcBGAsYHQ/s1032/Screenshot_144.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="782" data-original-width="1032" height="303" src="https://1.bp.blogspot.com/-zuu9oT_bamI/X6t2Ah9I4FI/AAAAAAAADUc/uhYQQd8_Ts8LZzEuxfjsBAOZMAY1VhCawCLcBGAsYHQ/w400-h303/Screenshot_144.png" width="400" /></a></div><div class="separator" style="clear: both; text-align: center;">Tools -> ProBuilder を選択して見やすいとこにwindowを設置してください。</div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: left;">最初は"Use Text Mode"になっていてちょっと個人的に見づらいのでアイコンの表示に変更します。</div><div class="separator" style="clear: both; text-align: left;"><br /></div><div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-Sk7VPOwtUQ0/X6t2s8sT8EI/AAAAAAAADUk/g2Tq9Dv2ES0lvSrZzS3fyh2rDgPq_F3GQCLcBGAsYHQ/s1296/Screenshot_145.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="739" data-original-width="1296" height="228" src="https://1.bp.blogspot.com/-Sk7VPOwtUQ0/X6t2s8sT8EI/AAAAAAAADUk/g2Tq9Dv2ES0lvSrZzS3fyh2rDgPq_F3GQCLcBGAsYHQ/w400-h228/Screenshot_145.png" width="400" /></a></div><div class="separator" style="clear: both; text-align: center;"><span style="text-align: left;">"Use Text Mode"から"Use Icon Mode"に変更します。</span></div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-TQ9ClUm90b0/X6t4nybpNfI/AAAAAAAADUw/WFwHuRi-G98WiYoggf-mPuYbh34KyMw5QCLcBGAsYHQ/s1488/Screenshot_146.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="617" data-original-width="1488" height="166" src="https://1.bp.blogspot.com/-TQ9ClUm90b0/X6t4nybpNfI/AAAAAAAADUw/WFwHuRi-G98WiYoggf-mPuYbh34KyMw5QCLcBGAsYHQ/w400-h166/Screenshot_146.png" width="400" /></a></div><div class="separator" style="clear: both; text-align: center;">個人的にはこっちの方が好き。</div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: center;">では床のベースになるキューブを作ります。</div><div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-1FF6WGgBNl4/X6t64NpFQNI/AAAAAAAADU8/4904I5q_qpA0vBx0XYrCN-13nv7eqsgvQCLcBGAsYHQ/s1080/Screenshot_147.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="554" data-original-width="1080" height="205" src="https://1.bp.blogspot.com/-1FF6WGgBNl4/X6t64NpFQNI/AAAAAAAADU8/4904I5q_qpA0vBx0XYrCN-13nv7eqsgvQCLcBGAsYHQ/w400-h205/Screenshot_147.png" width="400" /></a></div><div class="separator" style="clear: both; text-align: center;">一番の左の"New Shape Tool"をクリックしてシーンにキューブが生成されます。</div><div class="separator" style="clear: both; text-align: center;">次に形を変えていきます。</div><div class="separator" style="clear: both; text-align: center;"><br /></div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-wO6fv4MLkxc/X6t65YvdNLI/AAAAAAAADVA/3esEdjnBpboUfRMYmi0hbj14yJDfEf4VgCLcBGAsYHQ/s1325/Screenshot_148.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1101" data-original-width="1325" height="333" src="https://1.bp.blogspot.com/-wO6fv4MLkxc/X6t65YvdNLI/AAAAAAAADVA/3esEdjnBpboUfRMYmi0hbj14yJDfEf4VgCLcBGAsYHQ/w400-h333/Screenshot_148.png" width="400" /></a></div><div class="separator" style="clear: both; text-align: center;">シーンの真ん中の上にある"Face Selection"を選択してキューブを伸ばしたりして</div><div class="separator" style="clear: both; text-align: center;">ベースを作ってい見ます。</div><div class="separator" style="clear: both; text-align: center;">階段なども設置でるので、好みのマップを作成します。</div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-WCW_pJM2n1s/X6uCSylSIII/AAAAAAAADVQ/a5S_hT1dOP8kIWUreMT0H2fi5mo6-FLpgCLcBGAsYHQ/s2048/Screenshot_149.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1094" data-original-width="2048" height="342" src="https://1.bp.blogspot.com/-WCW_pJM2n1s/X6uCSylSIII/AAAAAAAADVQ/a5S_hT1dOP8kIWUreMT0H2fi5mo6-FLpgCLcBGAsYHQ/w640-h342/Screenshot_149.png" width="640" /></a></div><div class="separator" style="clear: both; text-align: center;">簡単な二階建てのフィールドができました。</div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: left;">マテリアルでお好みの色に変更できますが、今回はホラーゲームとして形が完成してから、少しずつホラーっぽくしていきます。</div><div class="separator" style="clear: both; text-align: left;"><br /></div><div class="separator" style="clear: both; text-align: left;">本格的にマップを作りたい方はこちらの動画がおすすめです！</div><br /><div class="separator" style="clear: both; text-align: left;"><br /><div class="separator" style="clear: both; text-align: center;"><iframe allowfullscreen="" class="BLOG_video_class" height="364" src="https://www.youtube.com/embed/EwWf8ZNh1Xg" width="542" youtube-src-id="EwWf8ZNh1Xg"></iframe></div></div><div class="separator" style="clear: both; text-align: left;"><br /></div><div class="separator" style="clear: both; text-align: left;">今回はマップが完成したので、次回はプレイヤーとライト追加して先ほど作ったマップを徘徊できるようにしたいと思います。</div><div class="separator" style="clear: both; text-align: left;"><br /></div><div class="separator" style="clear: both; text-align: left;"><br /></div><div class="separator" style="clear: both; text-align: left;"><br /></div><br /><p><br /></p>
READ➜
2020/9/10
ユグドラシルプロジェクト日記 #2
<p> <a href="https://1.bp.blogspot.com/-rbs2fYRltXg/X1mcQmmZfvI/AAAAAAAADRs/w63DwaQKHiMkE-ImEhzailQiQqddNRKQQCLcBGAsYHQ/s2048/Screenshot_121.png" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" data-original-height="1042" data-original-width="2048" height="326" src="https://1.bp.blogspot.com/-rbs2fYRltXg/X1mcQmmZfvI/AAAAAAAADRs/w63DwaQKHiMkE-ImEhzailQiQqddNRKQQCLcBGAsYHQ/w640-h326/Screenshot_121.png" width="640" /></a></p><p></p><p>おはこんばんにちは！ギルガメです！</p><p>前回はサーバーサイドについてお話しましたが、今回はギルガメが開発に使った「Colyseus」について詳しく説明したいと思います。Colyseusのオフィシャルサイトは英語なので、わからないとこもあると思いますが、頑張ります。</p><p>ギルガメのリアルタイム通信のテストの動画になります。</p><div class="separator" style="clear: both; text-align: center;"><iframe allowfullscreen="" class="BLOG_video_class" height="366" src="https://www.youtube.com/embed/t33OSzU3PeI" width="490" youtube-src-id="t33OSzU3PeI"></iframe></div><p><br /></p><p>まず簡単にColyseusとは何なのか</p><p>Colyseusは、Node.js用の信頼できるマルチプレイヤーゲームサーバーです。ネットワーキングを気にする代わりに、ゲームプレイに集中することができます。</p><p>このフレームワークの使命は、JavaScriptで独自のマルチプレイヤーゲームを作成するための最も簡単なソリューションになることです。</p><p><br /></p><p>Colyseusが提供するものについてです。</p><p></p><ul style="text-align: left;"><li>WebSocketベースの通信</li><li>サーバー側とクライアント側のシンプルなAPI。</li><li>サーバーとクライアント間の自動状態同期。</li><li>ゲームセッションへのマッチメイキングクライアント</li><li>垂直または水平にスケーリング</li></ul><div>ギルガメが実装したかったものはWebGLでのリアルタイム通信だったので、WebSocketベースの通信が望ましかったので、こちらにしました。</div><div>Colyseusでは簡単にルームの作成ができるので、マッチング機能も実装もすぐにできます。また途中で回線が切れても再開できる機能もそろっているのですごく助かります。</div><div>オートスケーリング機能もついているので、ユーザーが増えても大丈夫なところもすごくいい。この機能を使うならAWSに移行した方がいいかな・・</div><div><br /></div><div>またColyseusは信頼できるゲームサーバーの考え方は非常にシンプルです。</div><div><div><br /></div><div>サーバーは、位置、速度、衝突など、ゲームに関連するすべてのデータを処理する必要があります。</div><div><br /></div><div>マルチプレイヤーゲームの作成は、ゲームプレイが複数の遅延を考慮する必要があるため、通常はトリッキーです。他のクライアントはサーバーにデータを送信し、サーバーはすべてのクライアントにデータを送信します。</div><div><br /></div><div>Colyseusでの「マルチプレイヤーゲームループ」は次のようになります。</div><div><ul style="text-align: left;"><li>クライアントはサーバーにメッセージを送信し、その状態の変更を要求します。</li><li>入力は、ルームハンドラーによって検証される必要があります。</li><li>部屋の状態が更新されます。</li><li>すべてのクライアントは最新バージョンのゲーム状態を受け取ります。</li><li>ゲームの状態の視覚的表現が更新されます</li></ul><div><br /></div></div></div><div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-o8cgNljdK0k/X1mf3awToHI/AAAAAAAADR4/dd45TTW4hPcdtUTwPx1rXOqhC5J-zpPOwCLcBGAsYHQ/s1228/Screenshot_122.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="566" data-original-width="1228" height="294" src="https://1.bp.blogspot.com/-o8cgNljdK0k/X1mf3awToHI/AAAAAAAADR4/dd45TTW4hPcdtUTwPx1rXOqhC5J-zpPOwCLcBGAsYHQ/w640-h294/Screenshot_122.png" width="640" /></a></div><br /><div>興味のある方はオフィシャルサイトを見てみてください。</div><div><br /></div><div>https://docs.colyseus.io/</div><div><br /></div><div>実装にはNodeJSやTypeScriptの知識が必要になりますが、今世界でも人気のある言語なので覚えてみるのもいいかもしれません。ギルガメはものすごく気に入っています。</div><p></p>
READ➜
2020/9/3
ユグドラシルプロジェクト日記 #1
<div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-4eziVRKFDyU/X1BmJCslWWI/AAAAAAAADQM/UQ_dmmfuaTo0Ya_hdFz2hoiEhsW88FdqgCLcBGAsYHQ/s1264/Screenshot_111.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="611" data-original-width="1264" src="https://1.bp.blogspot.com/-4eziVRKFDyU/X1BmJCslWWI/AAAAAAAADQM/UQ_dmmfuaTo0Ya_hdFz2hoiEhsW88FdqgCLcBGAsYHQ/s640/Screenshot_111.png" width="640" /></a></div><br /><div>おはこんばんにちは！ギルガメです！</div><div><br /></div><div>ずっと前から実装してみたかったマルチプレイを本気で開発したいと思い、やく１か月間かかりました。やっと形になったよ・・コードもできるだけきれいに丁寧に気を付けて開発できたので、ここまでの進歩を日記にしていこうと思います。</div><div><br /></div><div>まず前からマルチプレイに対して試してみたものを挙げていこうと思います。</div><div><br /></div><div>バックエンドの開発を一から作るのにはかなりのリソースと時間がかかるので、もしアセットストアにすでに導入可能なものがあればと思い、個人的にできそうなものから試してみました。</div><div><br /></div><div>試したものは：</div><div><ul style="text-align: left;"><li><a href="https://assetstore.unity.com/packages/templates/systems/mmorpg-kit-2d-3d-survival-110188">MMORPG KIT (2D/3D/Survival)</a></li></ul><div>こちらのアセットはかなりの完成度でした。日本語は対応していませんが、Discordで疑問などがあれば気軽に質問できます。こちらのマルチプレイは携帯やデスクトップなどの開発には簡単に導入できます。</div></div><div><br /></div><div>問題はWebGLでのマルチプレイの実装になります。こちらの実装に手順は動画でありますが、あまりにも説明が足りなく、Discordでもみんなが聞いていますが、まだ未完成でWebGLの評判があまりよくありませんでした。</div><div><br /></div><div>こちらのアセットでかなり進めていましたが、ギルガメは最終的にWebGLで実装したかったので、とても残念でした。システム自体はとても簡単なので、WebGL以外ではおすすめのアセットです。</div><div><br /></div><div>MMORPGとしてはほぼすべての機能が備わっています。クエストも簡単に追加できます。また装備やマウント機能、モンスターのリスポーンやレベルアップとパラメータの振り分け。ここまで出来たらWebGLでもリリースできるようにしてほしかった・・泣。</div><div><br /></div><div>ダメだと思い、次のアセットを探してみたました。</div><div><ul style="text-align: left;"><li><a href="https://assetstore.unity.com/packages/tools/network/mirror-129321">Mirror</a></li></ul><div>このアセットは無料のアセットで、ほぼすべてのアセットに対応しています。無料なのでサンプルなのは簡単なものしかありません。ギルガメの実装したいものには一から開発しないとなので悩みました。またこちらのアセットは無料ですが、ちょっと気になった部分がありました。資格コードみたいなのがあったので、個人てきにそこが気になって使うのを諦めました。</div></div><div><br /></div><div>最後に色々悩んだ結果・・バックエンドも完全に理解していないと開発に問題が出ると思い、できるだけ最初から開発することに決めした。すでに完成しているものは制限、または理解に時間がかかるので、やっぱり時間かけてでも最初から開発することにしました。</div><div><br /></div><div>そこで使う言語は今人気のNodeJSにきました。こちらに関してはギルガメも経験があります。またリアルタイム通信でかなりの人気があるので、こちらで開発しました。</div><div><br /></div><div>データベースはMongoDB、リアルタイム通信はWebsocketです。</div><div><br /></div><div>結局バックエンドの開発だけで２週間ほどかかりました。マップごとのリアルタイム送信をチャットを実装しました。</div><div><br /></div><div>NodeJSに興味ある方は「Colyseus」というNodeJSベースのリアルタイム通信をおすすめします。</div><div><br /></div><div>今回のBeta版で実装した機能を紹介したいと思います。</div><div><br /></div><div>まず最初に接続するサーバーのセレクトメニューになります。</div><div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-VLTvjatA-Nk/X1BwbIZ41cI/AAAAAAAADQY/NEIDAiNFQtYddNQHbsKwiYVVmE10V6W4ACLcBGAsYHQ/s1269/Screenshot_112.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="778" data-original-width="1269" height="392" src="https://1.bp.blogspot.com/-VLTvjatA-Nk/X1BwbIZ41cI/AAAAAAAADQY/NEIDAiNFQtYddNQHbsKwiYVVmE10V6W4ACLcBGAsYHQ/w640-h392/Screenshot_112.png" width="640" /></a></div><div class="separator" style="clear: both; text-align: center;">まだサーバーは一台しかないのでYGGDRASIL SERVERのみです。</div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: left;">サーバーはテストで自宅サーバーを使っています。ＡＷＳに移行を考えていますが、サーバーが増えるとここに追加する設定を実装しています。自宅サーバーでは同時接続の制限がないとこも魅力ですね。Photonなどは実装は簡単ですが、無料での同時接続の制限が少ないので、こうして独自のサーバーがすごく気に入っています。</div><div class="separator" style="clear: both; text-align: left;"><br /></div><div class="separator" style="clear: both; text-align: left;">ちょっと長くなったので、この続きは次回にします！</div><div>次は動画も追加します！</div>
READ➜
2020/8/5
ローグライクゲーム #5「敵AIの配置と移動 Astarロジック実装」
<br /><div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-R3p8bGg1rTc/XyohjuJUcYI/AAAAAAAADOY/zZx2_CfFGiEq7F9L8OK2-OMJuu9qxGvmwCLcBGAsYHQ/s1373/Screenshot_99.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="847" data-original-width="1373" height="395" src="https://1.bp.blogspot.com/-R3p8bGg1rTc/XyohjuJUcYI/AAAAAAAADOY/zZx2_CfFGiEq7F9L8OK2-OMJuu9qxGvmwCLcBGAsYHQ/w640-h395/Screenshot_99.png" width="640" /></a></div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: left;">おはこんばんにちは！ギルガメです！</div><div class="separator" style="clear: both; text-align: left;"><br /></div><div class="separator" style="clear: both; text-align: left;">2Dゲームも進めながらこちらの3Dローグライフゲームも進めていきます。ずっとほかの開発しながらローグライフの敵のAIはどのようにしようか考えていました。エリアフィールドとアリアをつなぐものを確認しながらロジックを進めていたのですが、あまりのロジックがよくない、絶対に移動する先を最短の道を確認するロジックが必要だということでAstarのロジックを追加することにしました。</div><div class="separator" style="clear: both; text-align: left;"><br /></div><div class="separator" style="clear: both; text-align: left;">Astarとは何？と思う人にはこちらの記事がおすすめです！ものすごくわらりやすいです。</div><div class="separator" style="clear: both; text-align: left;"><a href="https://qiita.com/2dgames_jp/items/f29e915357c1decbc4b7">https://qiita.com/2dgames_jp/items/f29e915357c1decbc4b7</a></div><div class="separator" style="clear: both; text-align: left;"><br /></div><div class="separator" style="clear: both; text-align: left;">まずは敵を作成します。今回は無料でダンジョンにいても違和感のないモンスターをアセットで探してみました。なんと・・めっちゃくちゃかわいいボムちゃんを発見！すごいクオリティでアニメーション付き・・最高です。</div><div class="separator" style="clear: both; text-align: left;"><br /></div><div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-FB7eyZX0d2w/XyorEn2i5cI/AAAAAAAADOk/RsQy0O5At48ltHOQZ8GF__Vfvf03mg3kQCLcBGAsYHQ/s1119/Screenshot_100.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="585" data-original-width="1119" src="https://1.bp.blogspot.com/-FB7eyZX0d2w/XyorEn2i5cI/AAAAAAAADOk/RsQy0O5At48ltHOQZ8GF__Vfvf03mg3kQCLcBGAsYHQ/s640/Screenshot_100.png" width="640" /></a></div><div class="separator" style="clear: both; text-align: center;"><span style="text-align: left;">かわいいボムちゃん（ギルガメが勝手に名前を付けています）</span></div><div class="separator" style="clear: both; text-align: center;"><span> トーンシェーダーを付けてアニメっぽくしたかったのですが、こちらは</span><br /></div><div class="separator" style="clear: both; text-align: center;"><span>ちょっと複雑でそのまま使うことにしました。</span></div><div class="separator" style="clear: both; text-align: left;"><br /></div><div class="separator" style="clear: both; text-align: left;"><br /></div><div class="separator" style="clear: both; text-align: left;">興味のある方はこちらからインポートできます。</div><div class="separator" style="clear: both; text-align: left;"><a href="https://assetstore.unity.com/packages/3d/characters/stone-monster-101433">https://assetstore.unity.com/packages/3d/characters/stone-monster-101433</a></div><div class="separator" style="clear: both; text-align: left;"><br /></div><div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-7_GaNBPpYOU/XyotT77EPuI/AAAAAAAADO0/F4YEXwTtGD8hHxkywRraV8QVxIIt4EDJwCLcBGAsYHQ/s1453/Screenshot_101.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1069" data-original-width="1453" src="https://1.bp.blogspot.com/-7_GaNBPpYOU/XyotT77EPuI/AAAAAAAADO0/F4YEXwTtGD8hHxkywRraV8QVxIIt4EDJwCLcBGAsYHQ/s640/Screenshot_101.png" width="640" /></a></div><div class="separator" style="clear: both; text-align: center;">ランダム配置で設定してみました。</div><div class="separator" style="clear: both; text-align: center;">これだけだとまだうごきません。Astarロジックをここから</div><div class="separator" style="clear: both; text-align: center;">追加してみました。</div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: left;">Astarのコードはこちらを参考にさせていただきました。</div><div class="separator" style="clear: both; text-align: left;"><a href="https://note.com/frabbit_mbp/n/nb4f69076e4db">https://note.com/frabbit_mbp/n/nb4f69076e4db</a></div><div class="separator" style="clear: both; text-align: left;"><br /></div><div class="separator" style="clear: both; text-align: left;">こちらからギルガメのゲームの仕様に変えながら実装しました。プレイヤーが敵のいるエリアに入ったときに敵はプレイヤーをロックオンします。ロックオンしたときにAstarロジックに切り替えるようにしました。それまではAstarを使わずにランダムの行動をするようにしています。Astarはかなりメモリを使うので、ロックオンのみにしています。</div><div class="separator" style="clear: both; text-align: left;"><br /></div><div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-_BZ7aJXUSXk/XyovoCRa_mI/AAAAAAAADPA/5INYfDMt58I2Zz6W70x8Diubmn6hLznIACLcBGAsYHQ/s658/test5.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="411" data-original-width="658" src="https://1.bp.blogspot.com/-_BZ7aJXUSXk/XyovoCRa_mI/AAAAAAAADPA/5INYfDMt58I2Zz6W70x8Diubmn6hLznIACLcBGAsYHQ/s640/test5.gif" width="640" /></a></div><div class="separator" style="clear: both; text-align: center;">ギルガメの前回のロジックよりはクオリティがよくなりました。</div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: left;">まだまだ攻撃の判定などの実装がたりないので攻撃モーションのみですが、移動はかなりよくなりました。まだ道の移動には怪しい動くをします。改善は必要ですが、かなりダンジョンの雰囲気がでてきました。</div><div class="separator" style="clear: both; text-align: left;"><br /></div><div class="separator" style="clear: both; text-align: left;">少しずつこちらも進めていきます！</div>
READ➜