2020年9月10日木曜日

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

 

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

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

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


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

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

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


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

  • WebSocketベースの通信
  • サーバー側とクライアント側のシンプルなAPI。
  • サーバーとクライアント間の自動状態同期。
  • ゲームセッションへのマッチメイキングクライアント
  • 垂直または水平にスケーリング
ギルガメが実装したかったものはWebGLでのリアルタイム通信だったので、WebSocketベースの通信が望ましかったので、こちらにしました。
Colyseusでは簡単にルームの作成ができるので、マッチング機能も実装もすぐにできます。また途中で回線が切れても再開できる機能もそろっているのですごく助かります。
オートスケーリング機能もついているので、ユーザーが増えても大丈夫なところもすごくいい。この機能を使うならAWSに移行した方がいいかな・・

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

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

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

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


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

https://docs.colyseus.io/

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

2020年9月3日木曜日

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

まず最初に接続するサーバーのセレクトメニューになります。
まだサーバーは一台しかないのでYGGDRASIL SERVERのみです。

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

ちょっと長くなったので、この続きは次回にします!
次は動画も追加します!

2020年8月5日水曜日

ローグライクゲーム #5「敵AIの配置と移動 Astarロジック実装」



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

2Dゲームも進めながらこちらの3Dローグライフゲームも進めていきます。ずっとほかの開発しながらローグライフの敵のAIはどのようにしようか考えていました。エリアフィールドとアリアをつなぐものを確認しながらロジックを進めていたのですが、あまりのロジックがよくない、絶対に移動する先を最短の道を確認するロジックが必要だということでAstarのロジックを追加することにしました。

Astarとは何?と思う人にはこちらの記事がおすすめです!ものすごくわらりやすいです。

まずは敵を作成します。今回は無料でダンジョンにいても違和感のないモンスターをアセットで探してみました。なんと・・めっちゃくちゃかわいいボムちゃんを発見!すごいクオリティでアニメーション付き・・最高です。

かわいいボムちゃん(ギルガメが勝手に名前を付けています)
   トーンシェーダーを付けてアニメっぽくしたかったのですが、こちらは
ちょっと複雑でそのまま使うことにしました。


興味のある方はこちらからインポートできます。

ランダム配置で設定してみました。
これだけだとまだうごきません。Astarロジックをここから
追加してみました。

Astarのコードはこちらを参考にさせていただきました。

こちらからギルガメのゲームの仕様に変えながら実装しました。プレイヤーが敵のいるエリアに入ったときに敵はプレイヤーをロックオンします。ロックオンしたときにAstarロジックに切り替えるようにしました。それまではAstarを使わずにランダムの行動をするようにしています。Astarはかなりメモリを使うので、ロックオンのみにしています。

ギルガメの前回のロジックよりはクオリティがよくなりました。

まだまだ攻撃の判定などの実装がたりないので攻撃モーションのみですが、移動はかなりよくなりました。まだ道の移動には怪しい動くをします。改善は必要ですが、かなりダンジョンの雰囲気がでてきました。

少しずつこちらも進めていきます!

2020年8月1日土曜日

Steamに向けて「ギルガメジャンパー」リリースまでの開発 #10



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

今回は宝石「サファイア」のかけらを集める新しいステージの開発の進歩になります。また新しいアイデアが浮かんだので、ずっとバウンドしながら進んでいくステージからフィールドを回転させながらステージを進めていくギミックを思い出したので実装してみました。

スクリプトはこちらになります。


こちらを回転用のオブジェクトに追加します。このスクリプトはプレイヤーが触れたときにトリガーが発動するようにしています。スクリプトにはあらかじめ回転してほしいフィールドと角度を設定します。トリガーが発動したときにフィールドのTransition.rotationを回転してほしい角度をアニメーションでなめらかに動くようにしました。RotationのアニメーションにはQuaternion.Slerpを使います。これを覚えておくといろんなところで活用できるので役にたちます。

テスト!

こんな感じでフィールドの回転をいかしてかけらを
集めるステージになります。

修正は回転させるオブジェクトは一度きりで、触れると消えるようにします。
またフィールドの回転が終わるまではプレイヤーは動けないようにしました。またあたり判定も一時的にけします。フィールドのあたり判定を避けるためです。

このステージは回転と時空でステージを転々と移動しながら進んでいく仕様にしようと思います。またおまけステージで暗闇ステージも作ろうと思います。

これで第三ステージもこれで形になったので、進めていきます!

2020年7月31日金曜日

Steamに向けて「ギルガメジャンパー」リリースまでの開発 #9



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

リリースに向けて進めているうちにアイデアが色々変わったりして、改修をしているうちにかなり時間を使ってしまいました。まず変わった部分ですが、ステージの少なさに疑問があったので、宝石をかけらに分けて、宝石のステージ事に3つのステージを作成することにしました。この変更により各ステージのセーブデータの保存の改修、UIの改修を行いました。

UIに関してはギルガメがデザインした枠を使って作成して、実際に使ってみたところ・・しょぼかったです・・なので、アセットでフリーですごくお気に入りのUIがあったので、そちらを使わせていただきました。

ちなみにこれがギルガメがデザインした枠を使って作成したものです。
クリアしたステージは星がつくのですが・・何か使ってみて気に入らなかったです。

これでは納得しなかったため、アセットを探してみたところ、無料で前に使っていたUIがあったので、ちょっとこれを使ってみたところ、かなり満足な出来になったので、これでいこうと決めました。

ちなみに使ったアセットはこちらです!

「Simple UI & icons」

-シンプルな2D UIとアイコン。
-キュートでラウンド感のあるUI
-10個のボックス、11個のボタン、10個のアイコン、その他のpngファイルに分類されています

リソースの活用方法のスクリーンショットをご覧ください。
ゲーム、アプリ、好きなものを使用してください。
-1920 * 1080に最適化されています
-背景画像は含まれていません。

こちらから詳細が確認できます。

無料ではありますが、かなりの種類があるのでこれ一つでまとまったUIを作成可能です。
本当に助かりました。時間の短縮にもなりました。ゲームがドット絵なので、ドット絵のUIで統一しようかと思いましたが、これはこれでいいと思いました。

かなりリリースまで近づいてはきましたが、最終ステージを作成していきます!