Ready Eliminate Dominator

https://github.com/jyogi-web/ptera-game-lp

Rust

Unity

Lambda

DynamoDB

Figma

リアルタイムPvPタワーディフェンスオンラインゲーム

ニッシー☆

sirin1001

Romira

推しアイデア

オンライン対戦ゲーム! レートマッチング! ニッシー☆が描いたドット絵!

作った背景

オンラインゲームをつくるからです。(後輩論)

推し技術

Unity、Photon、Rust、Lambda(カスタムランタイム)、Yew(wasmクライアントWebアプリケーションフレームワーク)、Auth0

プロジェクト詳細

Ready Eliminate Dominator

まずは特設サイトをチェック↓↓↓

https://games.jyogi.net/

技術的な説明

ゲームクライアント

実装的な話

まず実装したのは、キャラクターのスポーンでした。ゲームの根幹となる機能のためこれを最初に実装し、この機能を中心にゲームを作成しました。 キャラのスポーンでは、セレクターをクリックすることでキャラを選択し、フィールドをクリックすることでスポーンさせています。この部分で苦戦したのは、スポーンさせたキャラの識別でした。自分と敵でリアルタイムにキャラが生成される都合上、スポーンしたキャラがどちらの陣営のキャラなのか識別するのが難しかったです。生成したオブジェクトが取得する方法があると知り解決しました。

WebGLの話

このゲームはデスクトップアプリをダウンロードして使ってもらうことを想定していますが、ブラウザー上でも遊べるようにWebGLを用いました。Unityエディターではビルド先にさまざまなプラットフォームを選択できますが、WebGLもその一つです。 WebGLは実質静的サイトと同じ仕組みなので今回はS3にホストし、CloudFrontで配信しています。 デプロイに関して、GitHub ActionsでUnityビルドができるアクション、GameCIを用いています。これによりGitHubにプッシュすると自動的にGitHub Actions上でUnityゲームをビルドできます。WebGLの場合はS3にデプロイするようにしています。(by ニッシー☆)

photon

Photonはマルチプレイを簡単に実現!できる最高にパワフルなマルチプレイヤーエンジンです[1]

Photonにはロビーとその中のルームの概念がある. プレイヤーはマスターサーバーに接続した後,ロビーに入る.その後ルーム名を指定した上でルームに入ることができる. Photonはゲームオブジェクトの位置,物理を同期してくれる.

本ゲームは,レートを参照したマッチングシステムを構築し(たかっ)た.マスターサーバーをカスタムできないことと,クライアントから可能なことが限られているため断念し,今回はランダムマッチングとした.しかしながらレートは自分の強さを示す指標であることは変わりないはずなのでぜひ本ゲームを極めてください.e-sports!

[1] Exit Games GmbH,photon,https://www.photonengine.com/

ゲーム用API

 レートを保存するためのAPIとして実装した. 言語としてRust,インフラ基盤をLambda,データベースにDynamoDBを採用した. Lambdaのカスタムランタイムを用いることでRustを動作させた.

RustのLambda開発のためのサブコマンドとしてcargo lambdaコマンドが用意されている.以下のコマンドを実行するだけで非常に簡単にデプロイできる.

cargo lambda deploy --iam-role <IAM_ROLE> --env-file <ENV_FILE> --enable-function-url

最近AWS SDK for Rustが公式に開発されているのでAWS in Rustは今後期待できますよ...!

API

  • GET /rate
    • Rateを取ってくる
  • POST /rate
    • Rate情報がなければ作る
  • POST /rate/calculation
    • ゲーム結果からRate情報を更新する
    • 対戦相手とのレート差や下剋上などを考慮してポイントが変動します

特設サイトについて

Unityで作ったゲームをいち早く体験してもらうために専用のサイトを作りました!CSS「完全に理解した」ニッシー☆が実装したのでスタイル崩れはご愛嬌ということでお願いします! ここで使われているのはRust製wasmクライアントWebアプリケーションフレームワークのYewです。Yewを用いることでReact風にフロントエンドアプリを構成できます。Rust初心者のニッシー☆でも割と普通にできたので一度やってみてください。楽しいですよ。

ただ、CSSフレームワーク周りが整っていないのでスタイルはTailwindと生CSSで賄っています。

Yewの仕組みはチームメイトの田中氏に聞いてください!

インフラ

インフラ構成図

image

ドット絵

ニッシー☆です。普段のハッカソンでは事前にインフラの用意とデプロイ基盤の構築をしています。今回は自分史上初のチームメイトにインフラの一部を用意してもらうという事案が発生したので今回は生まれて初めてドット絵を書くことにしました。(支離滅裂な発言)

ゲーム素材の紹介ページを作ったのでぜひ見てくださいね↓↓↓

https://games.jyogi.net/materials

ハッカソンへの挑戦は新しいこと尽くしなのでやめられないですね!

Figma

デザインやってみました! by ニッシー☆

GitHub Actions

無料枠の2000分を初日で使い切ってしまいました!!!GitHub ActionsのMacインスタンスとWindowsインスタンスを並列稼働させて動かしまくったせいです。。

そこで7時間掛けてセルフホストランナーに挑戦したけどコスパが悪いことを理由に結局GitHubに課金で解決することになったのはここだけの秘密です。

ホスティング失敗の敗因となったキーワードだけここに供養しておきます。(気になる方は気軽にお声かけください)

  • Fargateにデプロイしようとした
  • ECS(EC2起動)の検証が足りなかった
  • レンタルサーバーのOSが古すぎた
  • EC2のボリュームが小さすぎた
  • EC2のスペックが低すぎた(t3small)
  • 時間がかかりすぎた(深夜帯の7時間)

プロジェクト管理方法

GitHub Projectsを用いてタスク管理をしました。

https://github.com/orgs/jyogi-web/projects/1/views/3

このアプリについて

このアプリはハックツハッカソンプテラカップにて以下3名により作られました。

ニッシー☆

@yukinissie