ゲーム開発研修（Photon編）【ミクシィ22新卒技術研修】

22新卒技術研修で実施したゲーム開発研修の講義資料（Photon編）です。
動画：https://youtu.be/7kt4mso5qUc

ハンズオン用リポジトリ
https://github.com/mixigroup/2022BeginnerTrainingUnityPublic

＜＜ ゲーム開発研修資料一覧 ＞＞
イントロダクション
https://speakerdeck.com/mixi_engineers/2022-game-development-training-number-00-introduction

Unity基礎編
https://speakerdeck.com/mixi_engineers/2022-game-development-training-number-01-quaternion

Photon編
https://speakerdeck.com/mixi_engineers/2022-game-development-training-number-02-photon

ハンズオン学習編
https://speakerdeck.com/mixi_engineers/2022-game-development-training-number-03-hands-on-study

ハンズオン実践編
https://speakerdeck.com/mixi_engineers/2022-game-development-training-number-04-hands-on-practice

プログラミング教育LT編
https://speakerdeck.com/mixi_engineers/2022-game-development-training-number-05-lt

C#ハンドブック編
https://speakerdeck.com/mixi_engineers/2022-game-development-training-number-06-handbook-c-number

VS Codeセットアップ編
https://speakerdeck.com/mixi_engineers/2022-game-development-training-number-07-vs-code-setup

Unity実装テクニック編
https://speakerdeck.com/mixi_engineers/2022-game-development-training-number-08-unity-technic

アイテム取得課題 成功例
https://speakerdeck.com/mixi_engineers/2022-game-development-training-number-09-survival-athletic-answer

Transcript

1. ゲーム開発研修 Photonを使った通信 2022新卒研修
2. このパートの内容 ▪ マルチプレイ要素のあるゲームを題材に、Photonを利用したマルチプレイの実装を体験します。
3. マルチプレイ実現技術 ▪ Photon Engine ▪ Monobit Engine ▪ MLAPI ▪ Unity NetCode ▪ gRPC, WebSocket, MagicOnion, ... ▪ ちなみにモンストは… – TURN (RFC5766) をリレーサーバとするHost/Guestクライアント型の構造
4. マルチプレイ実現技術 ▪ Photon Engine ▪ Monobit Engine ▪ MLAPI ▪ Unity NetCode ▪ gRPC, WebSocket, MagicOnion, ... ▪ ちなみにモンストは… – TURN (RFC5766) をリレーサーバとするHost/Guestクライアント型の構造 今回の研修ではこちらを扱います
5. 準備 ▪ PhotonTutorialのシーンを開いて下さい （2022BeginnerTrainingUnity\RingCrisis\Assets\PhotonTutorial\Scenes）
6. [準備] Gameビューのアスペクト比設定 ▪ 1080x720 を想定して作られているので、Gameビューのアスペクト比の設定を合わせておくとよい です
7. [準備] Photon AppID の設定 ▪ メニュー [Window]>[Photon Unity Networking]>[Highlight Server Settings] を選択 – または Assets/Photon/PhotonUnityNetworking/Resources/PhotonServerSettings アセットを選択 ▪ App Id PUN に配布された Photon App Id を入力 – 新卒以外の方はご自身でPhotonアカウントを作成（無料）し、AppIDを取得してください – https://doc.photonengine.com/ja-jp/realtime/current/getting-started/obtain-your-app-id
8. PhotonTutorial ▪ Photon Engine を使った通信の基礎を学びます – Photonサーバへの接続 – ルームの作成と入室 – RPC機能を使った簡単な通信
9. PhotonTutorial 接続 切断 イベントログ ルーム名入力 ニックネーム入力 ルーム作成 メッセージ入力 RPC実行 ルーム入室 ※フォントデータの都合上、ASCII文字以外は正しく表示されません
10. Photonサーバの構成 ▪ マッチメイキングを行う Master Server – ルーム一覧取得や条件マッチング、Game Server へのルーティング ▪ 実際にクライアント間でやり取りする Game Server – 情報の保持と通信の中継、カスタムゲームロジック Master Server Lobby Game Server Game Server Game Server Room Room Room
11. ビルド・実行方法 ▪ メニュー [ビルド]>[PhotonTutorialをビルドして実行] を選択 ▪ メニュー [ビルド]>[ビルドフォルダを開く] を選択するとビルド成果物のフォルダを開きます ▪ mac でアプリケーションを複数起動したい場合、ターミナル上で以下のコマンドを実行します – ビルドしたアプリケーションとUnityエディタ間でも通信に支障ありません open -n RingCrisis/Builds/PhotonTutorial/PhotonTutorial.app
12. 1. [Connect] ボタンをクリックします 2. ニックネームとルーム名を入力します 3. [Create Room] ボタンをクリックします 通信のテスト: ホスト側の準備 ① ② ③
13. 通信のテスト: ゲスト側の準備 1. [Connect] ボタンをクリックします 2. ニックネームとルーム名を入力します ルーム名はホスト側で入力したものと同一の文字列を入力してください 3. [Join Room] ボタンをクリックします ① ② ③
14. 1. メッセージを入力します 2. [Send RPC] ボタンをクリックします 通信のテスト: RPCの実行 ① ②
15. [PT0] クリック座標を送信するRPCの作成
16. [PT0] クリック座標を送信するRPCの作成 ▪ 左クリックの検知 – Input.GetMouseButtonDown(0) – 座標の取得は Input.mousePosition プロパティ – Update メソッドの中でチェックしよう ▪ RPCの作成 – Vector3 の引数をもつメソッドを定義 – PunRPC 属性をつける – サンプルのように送信者のニックネームなどを追加してもよい ▪ RPCの送信 – サンプルと同様に _photonView.RPC を使う ▪ 接続状態、ルーム入室状態をチェックする – PhotonNetwork.InRoom を条件に加えよう
17. [PT0] クリック座標を送信するRPCの作成 [PunRPC] private void NotifyClick(string sender, Vector3 position) { AppendLog($"{sender}> {position}"); } private void Update() { if (PhotonNetwork.InRoom && Input.GetMouseButtonDown(0)) { var sender = PhotonNetwork.NickName; var position = Input.mousePosition; _photonView.RPC("NotifyClick", RpcTarget.AllViaServer, sender, position); } }
18. [PT1] クリックした位置にマーカーを表示 ▪ PT0の内容を拡張し、受け取った座標にマーカー画像を表示してみましょう – Canvas の下にマーカー用の Image を作成 – PhotonTutorial からマーカー用オブジェクトの Transform を参照 – マーカー用オブジェクトの Transform の position を受け取った座標で更新 ▪ マーカー画像は Assets/PhotonTutorial/Sprites/cursor を使ってください
19. PhotonViewについて ▪ ネットワーク越しにオブジェクトを同期するための基本的なコンポーネント – https://doc.photonengine.com/ja-jp/pun/v1/getting-started/feature-overview#00g284n2rn1tuqq6 ▪ RPC以外にも、オブジェクトの状態を監視して自動的に同期する仕組みなど、あまりコードを書か なくても動く便利な仕組みもあります – Observed Components とある部分 – OnPhotonSerializeView といったメソッドでシリアライズだけ定義すればよい ▪ オブジェクトの状態ではなくイベント系の通知などはRPCの方が向いている – リバーシや将棋などで駒を打つときなど
21. 輪投げのバトルゲームをマルチプレイ対応にしてみる ▪ Assets/RingCrisis/Scenes/Game シーンを開いてください
22. ビルド・実行方法 ▪ メニュー [ビルド]>[RingCrisisをビルドして実行] を選択してください ▪ 複数起動等はPhotonTutorialと同様です
23. [RC1] リングの発射をRPC同期する ▪ リング発射処理はRingShooterクラスにあります – Assets/RingCrisis/Scripts/RingShooter.cs ▪ ShootRingメソッドは指定されたチームカラーと初速でリングを生成して発射します ▪ このメソッドをRPC経由で呼び出すようにしましょう
24. [RC1] リングの発射をRPC同期する ▪ RpcManagerにPunRPCをつけたメソッド実装 ▪ RpcManagerにeventを追加 ▪ RingShooterでeventにShootRingを呼ぶデリゲートを登録 ▪ リング発射タイミングでRPCを送信するように変更
25. [RC2] ターゲットの生成をRPC同期する ▪ ターゲットはたくさん生成されるようになったが、対戦者間で位置がバラバラ ▪ リングの発射と同様に、ターゲットの生成もRPCにしよう ▪ 今回はマスタークライアントが生成の責任をもつことにしよう – PhotonNetwork.IsMasterClient をチェックしよう