# 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で作ったゲームをいち早く体験してもらうために[専用のサイト](https://games.jyogi.net/)を作りました!CSS「完全に理解した」ニッシー☆が実装したのでスタイル崩れはご愛嬌ということでお願いします! ここで使われているのはRust製wasmクライアントWebアプリケーションフレームワークの[Yew](https://yew.rs/ja/)です。Yewを用いることでReact風にフロントエンドアプリを構成できます。Rust初心者のニッシー☆でも割と普通にできたので一度やってみてください。楽しいですよ。 ただ、CSSフレームワーク周りが整っていないのでスタイルはTailwindと生CSSで賄っています。 Yewの仕組みはチームメイトの田中氏に聞いてください! ### インフラ #### インフラ構成図  ### ドット絵 ニッシー☆です。普段のハッカソンでは事前にインフラの用意とデプロイ基盤の構築をしています。今回は自分史上初のチームメイトにインフラの一部を用意してもらうという事案が発生したので今回は生まれて初めてドット絵を書くことにしました。(支離滅裂な発言) ゲーム素材の紹介ページを作ったのでぜひ見てくださいね↓↓↓ https://games.jyogi.net/materials ハッカソンへの挑戦は新しいこと尽くしなのでやめられないですね! ### Figma デザインやってみました! by ニッシー☆ - [特設サイト](https://www.figma.com/file/D2yA3CIT56JaBoRW2nM7Dq/Jyogi-Games?node-id=0%3A1) - [ゲームUI](https://www.figma.com/file/ONBPitxfpUl3p3vFYsIn5Z/Jyogi-Games?node-id=0%3A1) ### GitHub Actions 無料枠の2000分を初日で使い切ってしまいました!!!GitHub ActionsのMacインスタンスとWindowsインスタンスを並列稼働させて動かしまくったせいです。。 そこで7時間掛けてセルフホストランナーに挑戦したけどコスパが悪いことを理由に結局GitHubに課金で解決することになったのはここだけの秘密です。 ホスティング失敗の敗因となったキーワードだけここに供養しておきます。(気になる方は気軽にお声かけください) - Fargateにデプロイしようとした - ECS(EC2起動)の検証が足りなかった - レンタルサーバーのOSが古すぎた - EC2のボリュームが小さすぎた - EC2のスペックが低すぎた(t3small) - 時間がかかりすぎた(深夜帯の7時間) ## このアプリについて このアプリはハックツハッカソンプテラカップにて以下3名により作られました。 - [Romira915](https://github.com/Romira915) - [sirin1001](https://github.com/sirin1001) - [yukinissie](https://github.com/yukinissie)
×
Sign in
Email
Password
Forgot password
or
By clicking below, you agree to our
terms of service
.
Sign in via Facebook
Sign in via Twitter
Sign in via GitHub
Sign in via Dropbox
Sign in with Wallet
Wallet (
)
Connect another wallet
New to HackMD?
Sign up