Game Development Tutorial 2021

We held Game Development Tutorial 2021, a training course for newly-graduated engineers in mixi, Inc., on April 22.
This slide is mainly the advanced part of the course.
In this section, the students learn how networking games work, through customizing a simple networking game by using Photon Unity Networking (PUN).
GitHub repository including the Unity projects of this course is here.

About our training courses, please visit here.

Transcript

1. ゲーム開発研修 2021/04/22 2021新卒研修
2. 本日の予定 ▪ 10:30-11:00 イントロダクション ▪ 11:00-13:00 基礎編（岡本さん） ▪ 13:00-14:00 お昼休憩 ▪ 14:00-17:30 実践編（信夫） ▪ 17:30-18:30 社員講演（井本さん、田那辺さん、本間さん）
3. 私は誰 開発本部CTO室 Yuuki Shinobu / YuukiARIA 2014年新卒入社 ▪ モンストサーバエンジニア ▪ ブラナイリードサーバエンジニア ▪ 新規ゲームクライアント・サーバエンジニア ▪ その他色々…
4. メンバー紹介 ▪ 信夫 裕貴（yuki.shinobu） – 14新卒 開発本部CTO室 ▪ 田那辺 輝（akira.tanabe） – 開発本部CTO室 ▪ 岡本 勇太（yuta.okamoto） – 18新卒 モンストクライアントG ▪ 佐々木 智崇（tomotaka.sasaki） – 20新卒 モンストクライアントG ▪ 篠崎 瑞樹（mizuki.shinozaki） – 20新卒 モンストクライアントG ▪ 井本 大登（imo） – ﾓﾝｽﾄ事業本部 MSｽﾋﾟﾝｵﾌｹﾞｰﾑ事業部 ﾄﾞﾘｱﾝG ｴﾝｼﾞﾆｱﾘﾝｸﾞT ▪ 本間 心（makoto.homma） – 20卒 開発本部CTO室
5. イントロダクション
6. Unity社内事例① TIPSTAR (2020) ▪ ネイティブアプリに Unity as a Library を導入し、ガチャ演出をリッチに ©TIPSTAR
7. Unity社内事例② Alter3 Simulator (2019) ▪ AIエンジンで動くロボットのシミュレータをUnityで制作 ▪ シミュレータ内のTCPソケットによりAIエンジンと通信連携
8. ゲームじゃなくない？ ▪ 今挙げた2つの例はゲームではありません – 実は非ゲーム領域におけるゲームエンジンの活用は増えつつあり、ミクシィでも こうした取り組みをおこなっています – いわゆる“ゲーム”クライアントエンジニアでなくともUnityを使用する機会は十分 に考えられます ▪ もちろん、ファイトリーグ、モンパニ、スタスマと、Unityによるゲームもリリース・ 開発中です – 研修の最後で実際のゲーム開発現場や教育への活用についても紹介します
9. 本日の研修を受けるにあたって ▪ 本日はUnityの基本的な使い方とゲーム開発の基礎を扱います ▪ また、Photon Engine によるネットワーク同期を使用するゲームも扱い、マルチプレ イの基本的な仕組みにも触れます ▪ ゲームクライアントエンジニアではない人も、ゲーム開発の世界観を感じ取れればと 思います ▪ 非ゲームでの応用や、ゲームのサーバエンジニアとしてクライアントエンジニアとや り取りする上で、言葉や要素が分かることは全体を見渡す助けになります ▪ ぜひ楽しんでください！
10. 環境構築 ▪ 環境構築はお済みでしょうか？ – 事前に案内した環境構築ドキュメントを参照してください ▪ Unity 2019.4.23f1
11. 基礎編
12. 岡本さんお願いします！
13. 実践編
14. 後半の内容について ▪ マルチプレイ要素のあるゲームを題材に、ゲーム開発の基礎を体験します
15. マルチプレイ実現技術 ▪ Photon Engine ▪ Monobit Engine ▪ MLAPI ▪ Unity NetCode ▪ gRPC, WebSocket, MagicOnion, ... ▪ ちなみにモンストは… – TURN (RFC5766) をリレーサーバとするHost/Guestクライアント型の構造
16. マルチプレイ実現技術 ▪ Photon Engine ▪ Monobit Engine ▪ MLAPI ▪ Unity NetCode ▪ gRPC, WebSocket, MagicOnion, ... ▪ ちなみにモンストは… – TURN (RFC5766) をリレーサーバとするHost/Guestクライアント型の構造 今回の研修ではこちらを扱います
17. 準備 ▪ RingCrisisプロジェクトを開いてください
18. [準備] Gameビューのアスペクト比設定 ▪ 1080x720 を想定して作られているので、Gameビューのアスペクト比の設定を合わせ ておくとよいです
19. [準備] 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
20. PhotonTutorial ▪ Assets/PhotonTutorial/Scenes/PhotonTutorial シーンを開いてください ▪ Photon Engine を使った通信の基礎を学びます – Photonサーバへの接続 – ルームの作成と入室 – RPC機能を使った簡単な通信
21. PhotonTutorial 接続 切断 イベントログ ルーム名入力 ニックネーム入力 ルーム作成 メッセージ入力 RPC実行 ルーム入室 ※フォントデータの都合上、ASCII文字以外は正しく表示されません
22. Photonサーバの構成 ▪ マッチメイキングを行う Master Server – ルーム一覧取得や条件マッチング、Game Server へのルーティング ▪ 実際にクライアント間でやり取りする Game Server – 情報の保持と通信の中継、カスタムゲームロジック Master Server Lobby Game Server Game Server Game Server Room Room Room
23. ビルド・実行方法 ▪ メニュー [ビルド]>[PhotonTutorialをビルドして実行] を選択 ▪ メニュー [ビルド]>[ビルドフォルダを開く] を選択するとビルド成果物のフォルダを 開きます ▪ mac でアプリケーションを複数起動したい場合、ターミナル上で以下のコマンドを実 行します – ビルドしたアプリケーションとUnityエディタ間でも通信に支障ありません open -n RingCrisis/Builds/PhotonTutorial/PhotonTutorial.app
24. 1. [Connect] ボタンをクリックします 2. ニックネームとルーム名を入力します 3. [Create Room] ボタンをクリックします 通信のテスト: ホスト側の準備 ① ② ③
25. 通信のテスト: ゲスト側の準備 1. [Connect] ボタンをクリックします 2. ニックネームとルーム名を入力します ルーム名はホスト側で入力したものと同一の文字列を入力してください 3. [Join Room] ボタンをクリックします ① ② ③
26. 1. メッセージを入力します 2. [Send RPC] ボタンをクリックします 通信のテスト: RPCの実行 ① ②
27. [PT0] クリック座標を送信するRPCの作成
28. [PT0] クリック座標を送信するRPCの作成 ▪ 左クリックの検知 – Input.GetMouseButtonDown(0) – 座標の取得は Input.mousePosition プロパティ – Update メソッドの中でチェックしよう ▪ RPCの作成 – Vector3 の引数をもつメソッドを定義 – PunRPC 属性をつける – サンプルのように送信者のニックネームなどを追加してもよい ▪ RPCの送信 – サンプルと同様に _photonView.RPC を使う ▪ 接続状態、ルーム入室状態をチェックする – PhotonNetwork.InRoom を条件に加えよう
29. [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); } }
30. [PT1] クリックした位置にマーカーを表示 ▪ PT0の内容を拡張し、受け取った座標にマーカー画像を表示してみましょう – Canvas の下にマーカー用の Image を作成 – PhotonTutorial からマーカー用オブジェクトの Transform を参照 – マーカー用オブジェクトの Transform の position を受け取った座標で更新 ▪ マーカー画像は Assets/PhotonTutorial/Sprites/cursor を使ってください
31. PhotonViewについて ▪ ネットワーク越しにオブジェクトを同期するための基本的なコンポーネント – https://doc.photonengine.com/ja-jp/pun/v1/getting-started/feature- overview#00g284n2rn1tuqq6 ▪ RPC以外にも、オブジェクトの状態を監視して自動的に同期する仕組みなど、あまり コードを書かなくても動く便利な仕組みもあります – Observed Components とある部分 – OnPhotonSerializeView といったメソッドでシリアライズだけ定義すればよい ▪ オブジェクトの状態ではなくイベント系の通知などはRPCの方が向いている – リバーシや将棋などで駒を打つときなど ▪ この研修では、通信のやり取りが見えやすいRPCのみを使って実装していきます – 興味のある方は PhotonTransformView など便利なコンポーネントについても調べ てみてください
33. 輪投げバトルゲームを作ります ▪ Assets/RingCrisis/Scenes/Game シーンを開いてください
34. 動画
35. ビルド・実行方法 ▪ メニュー [ビルド]>[RingCrisisをビルドして実行] を選択してください ▪ 複数起動等はPhotonTutorialと同様です
36. [RC0] リングの発射をRPC同期する ▪ リング発射処理はRingShooterクラスにあります – Assets/RingCrisis/Scripts/RingShooter.cs ▪ ShootRingメソッドは指定されたチームカラーと初速でリングを生成して発射します ▪ このメソッドをRPC経由で呼び出すようにしましょう
37. [RC0] リングの発射をRPC同期する ▪ RpcManagerにPunRPCをつけたメソッド実装 ▪ RpcManagerにeventを追加 ▪ RingShooterでeventにShootRingを呼ぶデリゲートを登録 ▪ リング発射タイミングでRPCを送信するように変更
38. [RC1] 軌道ガイドを正しく実装する ▪ 小さい球が連なっているのは、軌道ガイドを実装しようとしたもの ▪ RingShooter.CalculateTrajectoryPointメソッドを実装しよう
39. [RC1] 軌道ガイドを正しく実装する ▪ 上 (+Y) 方向の初速度 VelocityY – 定数として private static readonly で定義してあります ▪ 下 (-Y) 方向への重力加速度 9.8f – 即値で使っても定数定義してもよいです ▪ 水平（XZ平面）方向へは等速直線運動 – 速度ベクトルが引数 velocityXZ で渡されます ▪ 球のインデックス番号 0 ≦ i ＜ n ▪ ヒント – まず y = 0 から発射して、再び y = 0（着地）するのにかかる時間を求めよう
40. [RC1] 軌道ガイドを正しく実装する 𝑦 = 𝑣𝑦 𝑡 − 1 2 𝑔𝑡2 d = v𝑥𝑧 𝑡 𝑡𝑖 = 𝑖 𝑛 − 1 ∙ 𝑡max 時刻 t における y 座標 時刻 t における x, z 座標（ベクトル） 球 i に対応する時刻 ti
41. [RC2] ターゲットをランダム位置に生成する ▪ 最初に1つだけ原点に生成されている ▪ ランダムな位置に生成するように変更しよう ▪ でもYは0にしよう ▪ UnityEngine.Randomクラスを使おう – https://docs.unity3d.com/ja/current/ScriptReference/Random.html – Rangeメソッドには引数がint/floatのオーバーロードが存在するので注意！
42. [RC3] ターゲットを一定時間ごとに生成する ▪ ターゲットが1つだけではつまらない！ – というか5点先取なのにゲーム中で1点しか取れない ▪ 一定時間ごとにターゲットが生成されるように実装しよう ▪ Time.deltaTime を上手く使おう – Time.deltaTime: 直近のフレームの処理にかかった時間 [s] – https://docs.unity3d.com/ja/current/ScriptReference/Time-deltaTime.html
43. [RC4] ターゲットを一定時間で消滅させる ▪ ターゲットが無限に増えていく ▪ このままではまずいので、一定時間経過したらターゲットは消滅するようにしよう ▪ 実は Ring はすでに一定時間で自然消滅するようになっている ▪ 同様の実装をターゲットに対しても実装しよう ▪ オブジェクトの削除は Destroy メソッドを使います – Destroy(gameObject) ではなく Destroy(this) とするとどうなるでしょうか – 理由も考えてみてください
44. [RC5] ターゲットの生成をRPC同期する ▪ ターゲットはたくさん生成されるようになったが、対戦者間で位置がバラバラ ▪ リングの発射と同様に、ターゲットの生成もRPCにしよう ▪ 今回はマスタークライアントが生成の責任をもつことにしよう – PhotonNetwork.IsMasterClient をチェックしよう
45. [RC6] 操作状況（軌道ガイド）を同期する ▪ 操作の情報をRPCで送受信しよう ▪ 軌道ガイドの再現にはどんな情報が必要か
46. [RC7] リング発射にクールタイムを設ける ▪ ゲームにおける「クールタイム」とは、特定の行動をしたあとに再びその行動ができ るようになるまでの時間を指します ▪ 現状のRingCrisisはノータイムでリングが発射できるので、発射のリスクが少ないです ▪ リングを発射したら、一定時間経過しないと再び発射できないようにしましょう ▪ また、クールタイムの状況が分かるようなUIも追加しましょう – TMP_Text コンポーネントで状態や時間を表示するのが簡単でしょう – ちょっと凝った作りにしたい場合は、Image の Fill Amount を活用してみましょう
47. [RC7] リング発射にクールタイムを設ける ※実際にはZ座標をずらす必要はありません
48. [RC7] リング発射にクールタイムを設ける ▪ もうちょっとオシャレにしたい人は 枠の形を変えたり、ストライプにしたり スクロールアニメーションしたり…
49. [RC8] 高得点なターゲットを作る ▪ プレハブを新しく作ろう（Target.prefabのコピーでも可） ▪ マテリアルを変えていかにも高得点の見た目にしよう ▪ 特別なエフェクトを追加してもよさそう ▪ どのターゲットを生成するかの情報をRPCに含める
50. 他にも ▪ プロジェクト内にはまだ説明しきれていない要素も盛り込んであります – シェーダー – エフェクト – エディタ拡張（ビルドのメニュー） ▪ いろいろ観察したりいじったりしてみてください ▪ 今回は基礎的な内容にフォーカスしましたが、それぞれの要素ごとにもう少し発展的 な講習を実施するかも知れません ▪ Unity Engine Challenge というイベントもやっています
51. おわりに ▪ 本日の研修で扱った内容はまだまだごく一部です – サウンド、アニメーション、AssetBundle、… ▪ Unityマニュアルや書籍などを活用することで更に様々な機能を知ることができます – https://docs.unity3d.com/ja/current/Manual/UnityManual.html ▪ 社内にも多くのUnityエンジニアがおり、社内外に情報を発信しています – まずはdocbaseを眺めてみると良いでしょう ▪ ぜひゲームを作ったり、またゲーム以外でも映像やコンテンツ生成など、様々に活用 してみてください
52. 研修後の Photon AppID について ▪ 新卒の皆さんに配布した AppID は研修担当側のPhotonアカウント上で作成したものに なります ▪ 研修終了後はすみやかに削除するので、引き続きPhotonを使用したい場合はご自身で Photonアカウントを作成してください
53. Staff Credits Developer Relations Koji Kita Engineers Yuuki Shinobu Yuta Okamoto Akira Tanabe Hiroto Imoto Mizuki Shinozaki Tomotaka Sasaki Makoto Homma And you...